diff --git a/src/components/views/ExpensesView.tsx b/src/components/views/ExpensesView.tsx index 76d39f0..952b129 100644 --- a/src/components/views/ExpensesView.tsx +++ b/src/components/views/ExpensesView.tsx @@ -26,6 +26,7 @@ import { toast } from 'sonner' import { ExpenseDetailDialog } from '@/components/ExpenseDetailDialog' import { AdvancedSearch, type FilterField } from '@/components/AdvancedSearch' import { usePermissions } from '@/hooks/use-permissions' +import { useTranslation } from '@/hooks/use-translation' import type { Expense, ExpenseStatus } from '@/lib/types' interface ExpensesViewProps { @@ -53,6 +54,7 @@ export function ExpensesView({ onApprove, onReject }: ExpensesViewProps) { + const { t } = useTranslation() const { hasPermission } = usePermissions() const [statusFilter, setStatusFilter] = useState<'all' | ExpenseStatus>('all') const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false) @@ -106,33 +108,33 @@ export function ExpensesView({ }) const expenseFields: FilterField[] = [ - { name: 'workerName', label: 'Worker Name', type: 'text' }, - { name: 'clientName', label: 'Client Name', type: 'text' }, - { name: 'status', label: 'Status', type: 'select', options: [ - { value: 'pending', label: 'Pending' }, - { value: 'approved', label: 'Approved' }, - { value: 'rejected', label: 'Rejected' }, - { value: 'paid', label: 'Paid' } + { name: 'workerName', label: t('expenses.workerName'), type: 'text' }, + { name: 'clientName', label: t('expenses.clientName'), type: 'text' }, + { name: 'status', label: t('common.status'), type: 'select', options: [ + { value: 'pending', label: t('expenses.status.pending') }, + { value: 'approved', label: t('expenses.status.approved') }, + { value: 'rejected', label: t('expenses.status.rejected') }, + { value: 'paid', label: t('expenses.status.paid') } ]}, - { name: 'category', label: 'Category', type: 'select', options: [ - { value: 'Travel', label: 'Travel' }, - { value: 'Accommodation', label: 'Accommodation' }, - { value: 'Meals', label: 'Meals' }, - { value: 'Equipment', label: 'Equipment' }, - { value: 'Training', label: 'Training' }, - { value: 'Other', label: 'Other' } + { name: 'category', label: t('expenses.category'), type: 'select', options: [ + { value: 'Travel', label: t('expenses.categories.travel') }, + { value: 'Accommodation', label: t('expenses.categories.accommodation') }, + { value: 'Meals', label: t('expenses.categories.meals') }, + { value: 'Equipment', label: t('expenses.categories.equipment') }, + { value: 'Training', label: t('expenses.categories.training') }, + { value: 'Other', label: t('expenses.categories.other') } ]}, - { name: 'amount', label: 'Amount', type: 'number' }, - { name: 'date', label: 'Date', type: 'date' }, - { name: 'billable', label: 'Billable', type: 'select', options: [ - { value: 'true', label: 'Yes' }, - { value: 'false', label: 'No' } + { name: 'amount', label: t('expenses.amount'), type: 'number' }, + { name: 'date', label: t('expenses.date'), type: 'date' }, + { name: 'billable', label: t('expenses.billable'), type: 'select', options: [ + { value: 'true', label: t('common.yes') }, + { value: 'false', label: t('common.no') } ]} ] const handleSubmitCreate = () => { if (!formData.workerName || !formData.clientName || !formData.date || !formData.category || !formData.amount) { - toast.error('Please fill in all required fields') + toast.error(t('expenses.createDialog.fillAllFields')) return } @@ -161,45 +163,45 @@ export function ExpensesView({ return ( - Create New Expense + {t('expenses.createDialog.title')} - Enter expense details for worker reimbursement or client billing + {t('expenses.createDialog.description')}
- + setFormData({ ...formData, workerName: e.target.value })} />
- + setFormData({ ...formData, clientName: e.target.value })} />
- +
- +
- +