updates

apps/dashboard/app/(authenticated)/sales/customers/page.tsx

@@ -4,6 +4,9 @@ import { useRouter } from 'next/navigation'
 import { ResourcePage } from '@/shared/data-view/resource-page'
 import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
+import { ImportDataButton } from '@/shared/components/import-data-button'
+import { ExportDataButton } from '@/shared/components/export-data-button'
+import { useAuthApi } from '@/shared/useApi'
 import { CustomerForm } from '@/modules/customers/customer-form'
 import { CUSTOMER_ROUTES } from '@garage/api'
 import type { CustomersClient } from '@garage/api'
@@ -11,6 +14,7 @@ import { Building2Icon,   UserIcon } from 'lucide-react'
 
 export default function CustomersPage() {
     const router = useRouter()
+    const api = useAuthApi()
     return (
         <ResourcePage<CustomersClient>
             pageTitle='Customers'
@@ -19,15 +23,25 @@ export default function CustomersPage() {
             onRowClick={(row) => router.push(`/sales/customers/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Customer">
-                        {(resourceId) => (
-                            <CustomerForm
-                                resourceId={resourceId}
-                                initialData={selectedItem}
-                                onSuccess={invalidateQuery}
-                            />
-                        )}
-                    </FormDialog>
+                    <div className='flex items-center gap-2'>
+                        <ImportDataButton
+                            onImport={(file) => api.customers.importData(file)}
+                            onSuccess={invalidateQuery}
+                        />
+                        <ExportDataButton
+                            onExport={(filters) => api.customers.exportData(filters)}
+                            fileName='customers'
+                        />
+                        <FormDialog title="Customer">
+                            {(resourceId) => (
+                                <CustomerForm
+                                    resourceId={resourceId}
+                                    initialData={selectedItem}
+                                    onSuccess={invalidateQuery}
+                                />
+                            )}
+                        </FormDialog>
+                    </div>
                 ),
             })}
             columns={({ actionsColumn }) => [

apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx

@@ -4,6 +4,9 @@ import { useRouter } from 'next/navigation'
 import { ResourcePage } from '@/shared/data-view/resource-page'
 import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
+import { ImportDataButton } from '@/shared/components/import-data-button'
+import { ExportDataButton } from '@/shared/components/export-data-button'
+import { useAuthApi } from '@/shared/useApi'
 import { VehicleForm } from '@/modules/vehicles/vehicle-form'
 import { VEHICLE_ROUTES } from '@garage/api'
 import type { VehiclesClient } from '@garage/api'
@@ -11,6 +14,7 @@ import { CarIcon } from 'lucide-react'
 
 export default function VehiclesPage() {
     const router = useRouter()
+    const api = useAuthApi()
     return (
         <ResourcePage<VehiclesClient>
             pageTitle="Vehicles"
@@ -19,15 +23,25 @@ export default function VehiclesPage() {
             onRowClick={(row) => router.push(`/sales/vehicles/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Vehicle">
-                        {(resourceId) => (
-                            <VehicleForm
-                                resourceId={resourceId}
-                                initialData={selectedItem}
-                                onSuccess={invalidateQuery}
-                            />
-                        )}
-                    </FormDialog>
+                    <div className='flex items-center gap-2'>
+                        <ImportDataButton
+                            onImport={(file) => api.vehicles.importData(file)}
+                            onSuccess={invalidateQuery}
+                        />
+                        <ExportDataButton
+                            onExport={(filters) => api.vehicles.exportData(filters)}
+                            fileName='vehicles'
+                        />
+                        <FormDialog title="Vehicle">
+                            {(resourceId) => (
+                                <VehicleForm
+                                    resourceId={resourceId}
+                                    initialData={selectedItem}
+                                    onSuccess={invalidateQuery}
+                                />
+                            )}
+                        </FormDialog>
+                    </div>
                 ),
             })}
             columns={({ actionsColumn }) => [