import { Head, Link, router, usePage } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useCallback, useMemo, useState } from 'react'; import { create as expenseDaysCreate, index as expensesIndex } from '@/actions/App/Http/Controllers/ExpenseDayController'; import { ExpenseDaysDataTable } from '@/components/expenses/expense-day-tables'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { AppDateInput } from '@/components/ui/app-date-input'; import { useLanguage } from '@/contexts/language-context'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; const QUICK_RANGE_LABELS = { today: 'quickToday', yesterday: 'quickYesterday', this_week: 'quickThisWeek', this_month: 'quickThisMonth', this_year: 'quickThisYear', }; export default function ExpensesIndex() { const { t } = useLanguage(); const p = t.expensesPage; const page = usePage(); const auth = page.props.auth ?? {}; const canCreate = auth.canCreateExpenses === true; const { expenseDays = [], filters = {} } = page.props; const [dateFrom, setDateFrom] = useState(filters.date_from ?? ''); const [dateTo, setDateTo] = useState(filters.date_to ?? ''); const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: p.breadcrumb, href: expensesIndex() }, ], [t.dashboard.breadcrumb, p.breadcrumb], ); const applyFilters = useCallback((extra = {}) => { router.get( expensesIndex.url({ query: { date_from: dateFrom, date_to: dateTo, ...extra } }), {}, { preserveState: true, preserveScroll: true }, ); }, [dateFrom, dateTo]); return (

{p.headTitle}

{p.listSubtitle}

{canCreate ? ( ) : null}

{p.headTitle} {p.listSubtitle}

{p.dateFrom}

{p.dateTo}

{Object.entries(QUICK_RANGE_LABELS).map(([range, labelKey]) => ( ))}

); }