Copilot
@@ -4,7 +4,7 @@ import { useParams } from "next/navigation"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { type ColumnDef } from "@tanstack/react-table"
|
||||
import { useState } from "react"
|
||||
import { Plus, Trash2 } from "lucide-react"
|
||||
import { Download, ExternalLink, Plus, Trash2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
@@ -19,10 +19,27 @@ import {
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import { VehicleDocumentForm } from "@/modules/vehicles/vehicle-document-form"
|
||||
import { formatDate, formatDateTime } from "@/shared/utils/formatters"
|
||||
import { getFullName } from "@/shared/utils/getFullName"
|
||||
|
||||
type VehicleDocument = {
|
||||
id: number
|
||||
name: string
|
||||
document_number?: string
|
||||
document_type_id?: number
|
||||
document_type?: {
|
||||
id?: number
|
||||
name?: string
|
||||
} | null
|
||||
customer_id?: number
|
||||
customer?: {
|
||||
id?: number
|
||||
first_name?: string
|
||||
last_name?: string
|
||||
name?: string
|
||||
} | null
|
||||
document_expire?: string
|
||||
document_file?: string
|
||||
document_file_url?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
@@ -54,7 +71,7 @@ export default function VehicleDocumentsPage() {
|
||||
const handleDelete = async (doc: VehicleDocument) => {
|
||||
const confirmed = await confirm({
|
||||
title: "Delete Document",
|
||||
description: `Are you sure you want to delete "${doc.name}"?`,
|
||||
description: `Are you sure you want to delete "${doc.document_number || `Document #${doc.id}`}"?`,
|
||||
confirmLabel: "Delete",
|
||||
variant: "destructive",
|
||||
})
|
||||
@@ -65,16 +82,74 @@ export default function VehicleDocumentsPage() {
|
||||
|
||||
const columns: ColumnDef<VehicleDocument>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
||||
accessorKey: "document_number",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
|
||||
cell: ({ getValue, row }) => {
|
||||
const number = getValue<string>()
|
||||
const fallbackName = row.original.document_file?.split("/").pop()
|
||||
return number || fallbackName || `Document #${row.original.id}`
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "document_type_id",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Document Type" />,
|
||||
cell: ({ row, getValue }) => {
|
||||
const typeName = row.original.document_type?.name
|
||||
const value = getValue<number | undefined>()
|
||||
return typeName || (value ? `#${value}` : "—")
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "customer_id",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
||||
cell: ({ row, getValue }) => {
|
||||
const name = getFullName(row.original.customer as any) || row.original.customer?.name
|
||||
const value = getValue<number | undefined>()
|
||||
return name || (value ? `#${value}` : "—")
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "document_expire",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Expiry Date" />,
|
||||
cell: ({ getValue }) => formatDate(getValue<string | undefined>()),
|
||||
},
|
||||
{
|
||||
id: "file",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="File" />,
|
||||
cell: ({ row }) => {
|
||||
const url = row.original.document_file_url
|
||||
if (!url) return "No file"
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-primary underline"
|
||||
title="Open document"
|
||||
>
|
||||
<ExternalLink className="size-3.5" />
|
||||
Open
|
||||
</a>
|
||||
<a
|
||||
href={url}
|
||||
download
|
||||
className="inline-flex items-center gap-1 text-primary underline"
|
||||
title="Download document"
|
||||
>
|
||||
<Download className="size-3.5" />
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "created_at",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Uploaded At" />,
|
||||
cell: ({ getValue }) => {
|
||||
const val = getValue<string>()
|
||||
return val ? new Date(val).toLocaleDateString() : "—"
|
||||
},
|
||||
cell: ({ getValue }) => formatDateTime(getValue<string | undefined>()),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
@@ -83,7 +158,10 @@ export default function VehicleDocumentsPage() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => handleDelete(row.original)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDelete(row.original)
|
||||
}}
|
||||
title="Delete document"
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
@@ -93,6 +171,15 @@ export default function VehicleDocumentsPage() {
|
||||
},
|
||||
]
|
||||
|
||||
const handleRowClick = (doc: VehicleDocument) => {
|
||||
if (doc.document_file_url) {
|
||||
window.open(doc.document_file_url, "_blank", "noopener,noreferrer")
|
||||
return
|
||||
}
|
||||
|
||||
toast.info("This document has no file to open.")
|
||||
}
|
||||
|
||||
const documents = (data as any)?.data ?? []
|
||||
const meta = (data as any)?.meta
|
||||
|
||||
@@ -105,21 +192,25 @@ export default function VehicleDocumentsPage() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-end">
|
||||
<Button onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Upload Document
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<DataTable
|
||||
slots={{
|
||||
actions: <div className="flex items-center justify-end">
|
||||
<Button onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Upload Document
|
||||
</Button>
|
||||
</div>
|
||||
}}
|
||||
columns={columns}
|
||||
data={documents}
|
||||
pagination={pagination}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
onChange={() => { }}
|
||||
onRowClick={handleRowClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
|
||||
@@ -13,7 +13,6 @@ export default async function layout(props: { params: Promise<{ id: string }>, c
|
||||
return (
|
||||
<>
|
||||
<DashboardDetailsPage
|
||||
className='p-0 lg:p-0'
|
||||
avatarSrc={vehicle.data?.image_url || ""}
|
||||
// avatarSrc={vehicle.data?.image_url || ""}
|
||||
title={title}
|
||||
|
||||
@@ -140,33 +140,27 @@ export default function VehicleMileagePage() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: 'Mileage',
|
||||
actions: (
|
||||
<Button onClick={handleCreate}>
|
||||
<Plus className="size-4" />
|
||||
Add Mileage
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<DataTable
|
||||
slots={{
|
||||
actions: <Button onClick={handleCreate}>
|
||||
<Plus className="size-4" />
|
||||
Add Mileage
|
||||
</Button>
|
||||
}}
|
||||
columns={columns}
|
||||
data={records}
|
||||
pagination={pagination}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
onChange={() => { }}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardPage>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="min-w-md">
|
||||
|
||||
@@ -129,41 +129,48 @@ export default function VehicleOwnersPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardPage headerProps={{
|
||||
title: "Owners",
|
||||
actions: (
|
||||
<Button className="w-full" size={'lg'} onClick={() => setLinkDialogOpen(true)}>
|
||||
<Plus />
|
||||
Add Owner
|
||||
</Button>
|
||||
),
|
||||
}}>
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={owners}
|
||||
pagination={pagination}
|
||||
sorting={[]}
|
||||
<Card>
|
||||
<CardContent>
|
||||
|
||||
onChange={() => { }}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<LinkOwnerDialog
|
||||
vehicleId={vehicleId}
|
||||
open={linkDialogOpen}
|
||||
onOpenChange={setLinkDialogOpen}
|
||||
onSuccess={() => {
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
setLinkDialogOpen(false)
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardPage >
|
||||
<DataTable
|
||||
slots={{
|
||||
actions:
|
||||
<div className="flex justify-end">
|
||||
|
||||
<Button size={'lg'} onClick={() => setLinkDialogOpen(true)}>
|
||||
<Plus />
|
||||
Add Owner
|
||||
</Button>
|
||||
</div>,
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
columns={columns}
|
||||
data={owners}
|
||||
pagination={pagination}
|
||||
sorting={[]}
|
||||
|
||||
onChange={() => { }}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<LinkOwnerDialog
|
||||
vehicleId={vehicleId}
|
||||
open={linkDialogOpen}
|
||||
onOpenChange={setLinkDialogOpen}
|
||||
onSuccess={() => {
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
setLinkDialogOpen(false)
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user