updates
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
||||
import { getServerApi } from '@garage/api/server'
|
||||
import { CustomerActions } from '@/modules/customers/customer-actions'
|
||||
import { CustomerProvider } from '@/modules/customers/customer-context'
|
||||
import React from 'react'
|
||||
|
||||
export default async function layout(props: {
|
||||
params: Promise<{ id: string }>
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const { id } = await props.params
|
||||
const api = await getServerApi()
|
||||
const customer = await api.customers.getById(id)
|
||||
|
||||
const firstName = customer.data?.first_name ?? ''
|
||||
const lastName = customer.data?.last_name ?? ''
|
||||
const fullName = [firstName, lastName].filter(Boolean).join(' ') || 'Customer Details'
|
||||
const customerLabel = fullName
|
||||
|
||||
return (
|
||||
<>
|
||||
<CustomerProvider customer={{ id, label: customerLabel }}>
|
||||
<DashboardDetailsPage
|
||||
className="p-0 lg:p-0"
|
||||
title={fullName}
|
||||
description={customer.data?.email ?? customer.data?.phone ?? undefined}
|
||||
backHref="/sales/customers"
|
||||
actions={<CustomerActions customerId={id} />}
|
||||
tabs={[
|
||||
{ href: `/sales/customers/${id}`, label: 'Details' },
|
||||
{ href: `/sales/customers/${id}/notes`, label: 'Notes' },
|
||||
{ href: `/sales/customers/${id}/vehicles`, label: 'Vehicles' },
|
||||
]}
|
||||
>
|
||||
{props.children}
|
||||
</DashboardDetailsPage>
|
||||
</CustomerProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
"use client"
|
||||
|
||||
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, StickyNote } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { confirm } from "@/shared/components/confirm-dialog"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
} from "@/shared/components/ui/field"
|
||||
import { Textarea } from "@/shared/components/ui/textarea"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
|
||||
type CustomerNote = {
|
||||
id: number
|
||||
note: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
const addNoteSchema = z.object({
|
||||
note: z.string().min(1, "Note content is required"),
|
||||
})
|
||||
type AddNoteValues = z.infer<typeof addNoteSchema>
|
||||
|
||||
export default function CustomerNotesPage() {
|
||||
const { id: customerId } = useParams<{ id: string }>()
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
|
||||
const queryKey = ["customer-notes", customerId]
|
||||
|
||||
const { data: customerData, isLoading } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => api.customers.getById(customerId),
|
||||
})
|
||||
|
||||
const notes: CustomerNote[] = (customerData?.data as any)?.notes ?? []
|
||||
|
||||
const meta = (customerData as any)?.meta
|
||||
const pagination = {
|
||||
page: meta?.current_page ?? 1,
|
||||
pageSize: meta?.per_page ?? 15,
|
||||
pageCount: meta?.last_page ?? 1,
|
||||
total: meta?.total ?? notes.length,
|
||||
}
|
||||
|
||||
const addNoteMutation = useMutation({
|
||||
mutationFn: (values: AddNoteValues) =>
|
||||
api.customers.addNote(customerId, { note: values.note }),
|
||||
onSuccess: () => {
|
||||
toast.success("Note added successfully.")
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
setDialogOpen(false)
|
||||
reset()
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Failed to add note.")
|
||||
},
|
||||
})
|
||||
|
||||
const deleteNoteMutation = useMutation({
|
||||
mutationFn: (noteId: number) => api.customers.deleteNote(customerId, noteId),
|
||||
onSuccess: () => {
|
||||
toast.success("Note deleted successfully.")
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Failed to delete note.")
|
||||
},
|
||||
})
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<AddNoteValues>({
|
||||
resolver: zodResolver(addNoteSchema),
|
||||
defaultValues: { note: "" },
|
||||
})
|
||||
|
||||
const handleDelete = async (note: CustomerNote) => {
|
||||
const confirmed = await confirm({
|
||||
title: "Delete Note",
|
||||
description: "Are you sure you want to delete this note?",
|
||||
confirmLabel: "Delete",
|
||||
variant: "destructive",
|
||||
})
|
||||
if (confirmed) {
|
||||
deleteNoteMutation.mutate(note.id)
|
||||
}
|
||||
}
|
||||
|
||||
const columns: ColumnDef<CustomerNote>[] = [
|
||||
{
|
||||
accessorKey: "note",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
|
||||
cell: ({ getValue }) => (
|
||||
<span className="whitespace-pre-wrap text-sm">{getValue<string>()}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "created_at",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Created At" />,
|
||||
cell: ({ getValue }) => {
|
||||
const val = getValue<string>()
|
||||
return val ? new Date(val).toLocaleDateString() : "—"
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: () => <span className="sr-only">Actions</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(row.original)}
|
||||
disabled={deleteNoteMutation.isPending}
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
header={null}
|
||||
title="Notes"
|
||||
toolbar={
|
||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Note
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={notes}
|
||||
pagination={pagination}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Note</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form
|
||||
onSubmit={handleSubmit((values) => addNoteMutation.mutate(values))}
|
||||
className="grid gap-4"
|
||||
>
|
||||
<Field>
|
||||
<FieldLabel>Note</FieldLabel>
|
||||
<Textarea
|
||||
{...register("note")}
|
||||
placeholder="Enter note..."
|
||||
rows={4}
|
||||
/>
|
||||
{errors.note && <FieldError>{errors.note.message}</FieldError>}
|
||||
</Field>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDialogOpen(false)
|
||||
reset()
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={addNoteMutation.isPending}>
|
||||
{addNoteMutation.isPending ? "Saving..." : "Save Note"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { getServerApi } from '@garage/api/server'
|
||||
import { CustomerGeneralInfo } from '@/modules/customers/customer-general-info'
|
||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
||||
|
||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await props.params
|
||||
const api = await getServerApi()
|
||||
const customer = await api.customers.getById(id)
|
||||
|
||||
if (!customer.data) {
|
||||
return <div className="text-muted-foreground p-6">Customer not found.</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardPage header={null}>
|
||||
<CustomerGeneralInfo customer={customer.data} />
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
"use client"
|
||||
|
||||
import { use } from "react"
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { VehicleForm } from "@/modules/vehicles/vehicle-form"
|
||||
import { VEHICLE_ROUTES } from "@garage/api"
|
||||
import type { VehiclesClient } from "@garage/api"
|
||||
import { CarIcon } from "lucide-react"
|
||||
import { useCustomer } from "@/modules/customers/customer-context"
|
||||
|
||||
export default function CustomerVehiclesPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id: customerId } = use(params)
|
||||
const customer = useCustomer()
|
||||
|
||||
return (
|
||||
<ResourcePage<VehiclesClient>
|
||||
toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
|
||||
<FormDialog title="Vehicle">
|
||||
{(resourceId) => (
|
||||
<VehicleForm
|
||||
resourceId={resourceId}
|
||||
initialData={selectedItem}
|
||||
onSuccess={() => {
|
||||
closeDialog()
|
||||
invalidateQuery()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
)}
|
||||
pageTitle="Customer Vehicles"
|
||||
routeKey={VEHICLE_ROUTES.INDEX}
|
||||
getClient={(api) => api.vehicles}
|
||||
extraParams={{ customer_id: customerId }}
|
||||
header={null}
|
||||
columns={({ actionsColumn }) => [
|
||||
{
|
||||
accessorKey: "make",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
|
||||
cell: ({ row }) => {
|
||||
const r = row.original as any
|
||||
const make = r.make ?? ""
|
||||
const model = r.model ?? ""
|
||||
const display = `${make} ${model}`.trim() || "—"
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<CarIcon className="size-4 text-muted-foreground" />
|
||||
<span className="font-medium">{display}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "year",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Year" />,
|
||||
cell: ({ row }) => (row.original as any).year ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "license_plate",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="License Plate" />,
|
||||
cell: ({ row }) => {
|
||||
const val = (row.original as any).license_plate
|
||||
return val ? <span className="font-mono text-xs">{val}</span> : "—"
|
||||
},
|
||||
},
|
||||
actionsColumn(),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client"
|
||||
|
||||
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'
|
||||
@@ -9,11 +10,13 @@ import type { CustomersClient } from '@garage/api'
|
||||
import { Building2Icon, UserIcon } from 'lucide-react'
|
||||
|
||||
export default function CustomersPage() {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<ResourcePage<CustomersClient>
|
||||
pageTitle='Customers'
|
||||
routeKey={CUSTOMER_ROUTES.INDEX}
|
||||
getClient={(api) => api.customers}
|
||||
onRowClick={(row) => router.push(`/sales/customers/${(row as any).id}`)}
|
||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
||||
actions: (
|
||||
<FormDialog title="Customer">
|
||||
|
||||
Reference in New Issue
Block a user