updates

apps/dashboard/app/(authenticated)/items/parts/page.tsx

@@ -3,12 +3,17 @@
 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 { PartForm } from "@/modules/parts/part-form"
 import { Badge } from "@/shared/components/ui/badge"
+import { useAuthApi } from "@/shared/useApi"
 import { PARTS_ROUTES } from "@garage/api"
 import type { PartsClient } from "@garage/api"
 
 export default function PartsPage() {
+    const api = useAuthApi()
+
     return (
         <ResourcePage<PartsClient>
             pageTitle="Parts"
@@ -16,15 +21,25 @@ export default function PartsPage() {
             getClient={(api) => api.parts}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Part">
-                        {(resourceId) => (
-                            <PartForm
-                                resourceId={resourceId}
-                                initialData={selectedItem}
-                                onSuccess={invalidateQuery}
-                            />
-                        )}
-                    </FormDialog>
+                    <div className="flex items-center gap-2">
+                        <ImportDataButton
+                            onImport={(file) => api.parts.importData(file)}
+                            onSuccess={invalidateQuery}
+                        />
+                        <ExportDataButton
+                            onExport={(filters) => api.parts.exportData(filters)}
+                            fileName="parts"
+                        />
+                        <FormDialog title="Part">
+                            {(resourceId) => (
+                                <PartForm
+                                    resourceId={resourceId}
+                                    initialData={selectedItem}
+                                    onSuccess={invalidateQuery}
+                                />
+                            )}
+                        </FormDialog>
+                    </div>
                 ),
             })}
             columns={({ actionsColumn }) => [

apps/dashboard/app/(authenticated)/items/services/page.tsx

@@ -3,11 +3,16 @@
 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 { ServiceForm } from "@/modules/services/service-form"
 import { SERVICE_ROUTES } from "@garage/api"
 import type { ServicesClient } from "@garage/api"
 
 export default function ServicesPage() {
+    const api = useAuthApi()
+
     return (
         <ResourcePage<ServicesClient>
             pageTitle="Services"
@@ -15,15 +20,25 @@ export default function ServicesPage() {
             getClient={(api) => api.services}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Service">
-                        {(resourceId) => (
-                            <ServiceForm
-                                resourceId={resourceId}
-                                initialData={selectedItem}
-                                onSuccess={invalidateQuery}
-                            />
-                        )}
-                    </FormDialog>
+                    <div className="flex items-center gap-2">
+                        <ImportDataButton
+                            onImport={(file) => api.services.importData(file)}
+                            onSuccess={invalidateQuery}
+                        />
+                        <ExportDataButton
+                            onExport={(filters) => api.services.exportData(filters)}
+                            fileName="services"
+                        />
+                        <FormDialog title="Service">
+                            {(resourceId) => (
+                                <ServiceForm
+                                    resourceId={resourceId}
+                                    initialData={selectedItem}
+                                    onSuccess={invalidateQuery}
+                                />
+                            )}
+                        </FormDialog>
+                    </div>
                 ),
             })}
             columns={({ actionsColumn }) => [
@@ -48,7 +63,7 @@ export default function ServicesPage() {
                     cell: ({ row }) => {
                         const val = (row.original as any).description
                         return val
-                            ? <span className="max-w-[200px] truncate block">{val}</span>
+                            ? <span className="max-w-50 truncate block">{val}</span>
                             : "—"
                     },
                 },

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 }) => [

apps/dashboard/app/layout.tsx

@@ -1,15 +1,21 @@
 import { Geist_Mono, Inter } from "next/font/google"
 
-import "./globals.css"
+
 import { QueryProvider } from "@/shared/components/query-provider"
 import { ThemeProvider } from "@/shared/components/theme-provider"
 import { Toaster } from "@/shared/components/ui/sonner"
 import { ConfirmDialog } from "@/shared/components/confirm-dialog"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 import { cn } from "@/shared/lib/utils"
+import './globals.css'
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
 
+export const metadata = {
+  title: "Garage ERP Dashboard",
+  description: "Manage your garage with ease using Garage ERP Dashboard.",
+}
+
 const fontMono = Geist_Mono({
   subsets: ["latin"],
   variable: "--font-mono",