mohammadkhayata/garage-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filters , order inspections , inventory items , credit notes

Browse Source
This commit is contained in:
Mohammad Khyata 2026-04-08 14:38:16 +03:00
parent 90c84a0bda
commit bb02b77be2
33 changed files with 2552 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
.github/skills/resource-filters/SKILL.md vendored Normal file
View File

@ -0,0 +1,258 @@
---
name: resource-filters
description: "Add advanced filtering to resource list pages using a drawer/sheet with RHF forms and nuqs query params. Use when: adding filters to a ResourcePage, creating a filter drawer for any list page, implementing advanced search with URL-persisted filter state, adding query-param-based filtering to a CRUD page."
---
# Resource Filters
Add URL-persisted advanced filtering to any ResourcePage or data table list. Filters live in a right-side Sheet drawer, powered by React Hook Form (RHF) and synced to URL query params via nuqs.
## When to Use
- User asks to add filters or advanced filters to a list/index page
- User wants URL-shareable filter state on a resource page
- User asks to filter by relations, dates, or boolean flags on any data table
- User wants a filter drawer/dialog for any CRUD listing
## Architecture
```
┌─────────────────────────────────┐
│ useFilterParams (generic hook) │ ← Manages RHF form + nuqs URL sync
│ • schema + defaults │
│ • paramsParsers (nuqs) │
│ • mapParamsToFormValues │
│ • mapFormValuesToParams │
│ Returns: form, appliedParams, │
│ open/close/submit/reset, │
│ activeFilterCount │
└──────────────┬──────────────────┘
│
┌──────────┴──────────┐
│ │
┌───▼───────┐ ┌────────▼──────────┐
│FilterDrawer│ │ ResourcePage │
│(Sheet UI) │ │ extraParams={ │
│ │ │ ...appliedParams│
│ <Fields /> │ │ ...quickFilters │
│ Apply/Reset│ │ } │
└────────────┘ └───────────────────┘
```
## File Locations
| File | Purpose |
|---|---|
| `shared/hooks/use-filter-params.ts` | Generic hook — form + nuqs state sync |
| `shared/components/filter-drawer.tsx` | `FilterDrawer` sheet + `FilterTrigger` button |
| `modules/<feature>/<feature>-filters.tsx` | Feature-specific schema, parsers, mappers, fields |
## Procedure
### Step 1: Create the filter config file
Create `modules/<feature>/<feature>-filters.tsx` with:
1. **Zod schema** — all filter fields. Use `relationField` for foreign-key selects, `z.string().optional()` for dates, `z.boolean().optional()` for flags.
2. **Default values** — matching the schema (null for relations, `""` for strings, `false` for booleans).
3. **nuqs parsers** — `parseAsInteger` for relation IDs, `parseAsString` for dates/text, `parseAsBoolean` for flags.
4. **`mapParamsToFormValues`** — URL params → form values. Use `toRelation(id)` for relation fields.
5. **`mapFormValuesToParams`** — form values → URL params. Use `toId(relation)` for relation fields.
6. **Config export** — `UseFilterParamsOptions<T>` object with schema, defaults, parsers, mappers.
7. **Fields component** — renders RHF fields inside the drawer.
#### Template
```tsx
"use client"
import { z } from "zod"
import { parseAsInteger, parseAsString, parseAsBoolean } from "nuqs"
import { toRelation, toId, type RelationFieldValue } from "@/shared/lib/utils"
import {
RhfAsyncSelectField,
RhfDateField,
RhfCheckboxField,
RhfSelectField,
} from "@/shared/components/form"
import { useAuthApi } from "@/shared/useApi"
import { SOME_ROUTES } from "@garage/api"
import { Separator } from "@/shared/components/ui/separator"
import type { UseFilterParamsOptions } from "@/shared/hooks/use-filter-params"
// ── Schema ──
const relationField = z.object({ value: z.string(), label: z.string() }).nullable().optional()
const filterSchema = z.object({
some_relation_id: relationField,
some_date: z.string().optional(),
some_flag: z.boolean().optional(),
})
type FilterValues = z.infer<typeof filterSchema>
// ── Defaults ──
const defaultValues: FilterValues = {
some_relation_id: null,
some_date: "",
some_flag: false,
}
// ── nuqs Parsers ──
const paramsParsers = {
some_relation_id: parseAsInteger,
some_date: parseAsString,
some_flag: parseAsBoolean,
}
// ── Mappers ──
function mapParamsToFormValues(params: Record<string, any>): Partial<FilterValues> {
return {
some_relation_id: params.some_relation_id ? toRelation(params.some_relation_id) : null,
some_date: params.some_date ?? "",
some_flag: params.some_flag ?? false,
}
}
function mapFormValuesToParams(values: FilterValues): Record<string, any> {
return {
some_relation_id: toId(values.some_relation_id as RelationFieldValue) ?? null,
some_date: values.some_date || null,
some_flag: values.some_flag || null,
}
}
// ── Filter Config ──
export const featureFilterConfig: UseFilterParamsOptions<FilterValues> = {
schema: filterSchema,
defaultValues,
paramsParsers,
mapParamsToFormValues,
mapFormValuesToParams,
}
// ── Filter Fields Component ──
export function FeatureFilterFields() {
const api = useAuthApi()
return (
<>
<RhfAsyncSelectField
name="some_relation_id"
label="Some Relation"
queryKey={[SOME_ROUTES.INDEX]}
listFn={() => api.someResource.list({ per_page: 100 })}
mapOption={(item: any) => ({ value: String(item.id), label: item.name })}
placeholder="All"
/>
<RhfDateField name="some_date" label="Some Date" />
<RhfCheckboxField name="some_flag" label="Some Flag" />
</>
)
}
```
### Step 2: Integrate into the page
In the page component:
```tsx
import { useFilterParams } from '@/shared/hooks/use-filter-params'
import { FilterDrawer, FilterTrigger } from '@/shared/components/filter-drawer'
import { featureFilterConfig, FeatureFilterFields } from '@/modules/<feature>/<feature>-filters'
export default function FeaturePage() {
const filter = useFilterParams(featureFilterConfig)
// Combine drawer filters with any quick filters (tabs, search, etc.)
const extraParams = useMemo(() => {
const params: Record<string, unknown> = { ...filter.appliedParams }
// Add quick filters if present
if (search) params.search = search
if (statusFilter !== "all") params.status = statusFilter
return params
}, [filter.appliedParams, search, statusFilter])
return (
<>
<ResourcePage
extraParams={extraParams}
headerProps={({ ... }) => ({
title: "Feature",
actions: (
<div className="flex items-center gap-2">
<FilterTrigger
onClick={filter.open}
activeFilterCount={filter.activeFilterCount}
/>
{/* other actions like FormDialog */}
</div>
),
})}
{/* columns, tableHeader, etc. */}
/>
<FilterDrawer
form={filter.form}
isOpen={filter.isOpen}
onOpenChange={(open) => { if (!open) filter.close() }}
onSubmit={filter.onSubmit}
onReset={filter.reset}
activeFilterCount={filter.activeFilterCount}
title="Filter Features"
>
<FeatureFilterFields />
</FilterDrawer>
</>
)
}
```
## Key Conventions
### Field Types
| Filter Type | Schema | nuqs Parser | Form Component | Default |
|---|---|---|---|---|
| Foreign key (select) | `relationField` (nullable object) | `parseAsInteger` | `RhfAsyncSelectField` | `null` |
| Date | `z.string().optional()` | `parseAsString` | `RhfDateField` | `""` |
| Boolean flag | `z.boolean().optional()` | `parseAsBoolean` | `RhfCheckboxField` | `false` |
| Enum select | `z.string().optional()` | `parseAsString` | `RhfSelectField` | `""` |
| Text/search | `z.string().optional()` | `parseAsString` | `RhfTextField` | `""` |
| Comma-separated IDs | `z.string().optional()` | `parseAsString` | custom / `RhfTextField` | `""` |
### Relation Field Mapping
- **URL → Form**: `toRelation(params.field_id)` produces `{ value: "5", label: "5" }`. The async select resolves the display label from loaded options.
- **Form → URL**: `toId(values.field_id)` extracts the numeric ID.
- Import `toRelation`, `toId`, and `RelationFieldValue` from `@/shared/lib/utils`.
### Section Grouping
Group related filters with `<Separator />` and section labels:
```tsx
<Separator />
<p className="text-sm font-medium text-muted-foreground pt-2">Section Name</p>
```
### Pagination Reset
The `useFilterParams` hook automatically resets the `page` query param to `1` when filters are applied or reset, preventing empty-page issues.
### Quick Filters vs Drawer Filters
- **Quick filters** (status tabs, search input) live directly in `tableHeader` and are managed via `useState` or separate nuqs params on the page.
- **Drawer filters** (advanced) are managed by `useFilterParams` and rendered inside `FilterDrawer`.
- Both are merged into `extraParams` with `useMemo`.
## Reference Implementation
See `modules/job-cards/job-card-filters.tsx` and `app/(authenticated)/sales/job-cards/page.tsx` for the complete working example.

63
apps/dashboard/app/(authenticated)/items/expense-item/page.tsx Normal file
View File

@ -0,0 +1,63 @@
"use client"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { ExpenseItemForm } from "@/modules/expense-items/expense-item-form"
import { EXPENSE_ITEM_ROUTES } from "@garage/api"
import type { ExpenseItemsClient } from "@garage/api"
export default function ExpenseItemPage() {
return (
<ResourcePage<ExpenseItemsClient>
pageTitle="Expense Items"
routeKey={EXPENSE_ITEM_ROUTES.INDEX}
getClient={(api) => api.expenseItems}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Expense Item">
{(resourceId) => (
<ExpenseItemForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "item_name",
header: ({ column }) => <ColumnHeader column={column} title="Item Name" />,
},
{
accessorKey: "purchase_price",
header: ({ column }) => <ColumnHeader column={column} title="Purchase Price" />,
cell: ({ row }) => {
const val = (row.original as any).purchase_price
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "purchase_chart_of_account",
header: ({ column }) => <ColumnHeader column={column} title="Chart of Account" />,
cell: ({ row }) => (row.original as any).purchase_chart_of_account || "—",
},
{
accessorKey: "is_active",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const active = (row.original as any).is_active
return (
<span className={active ? "text-green-600" : "text-muted-foreground"}>
{active ? "Active" : "Inactive"}
</span>
)
},
},
actionsColumn(),
]}
/>
)
}

152
apps/dashboard/app/(authenticated)/sales/credit-notes/[id]/documents/page.tsx Normal file
View File

@ -0,0 +1,152 @@
"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 } from "lucide-react"
import { toast } from "sonner"
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 { Card, CardContent } from "@/shared/components/ui/card"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/shared/components/ui/dialog"
import { CreditNoteDocumentForm } from "@/modules/credit-notes/credit-note-document-form"
type CreditNoteAttachment = {
id: number
name?: string
url?: string
created_at: string
}
export default function CreditNoteDocumentsPage() {
const { id: creditNoteId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const queryKey = ["credit-note-attachments", creditNoteId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: async () => {
const response = await api.creditNotes.show(creditNoteId)
return (response as any)?.data ?? response
},
})
const deleteMutation = useMutation({
mutationFn: (attachmentId: number) =>
api.creditNotes.deleteAttachment(creditNoteId, { attachment_id: attachmentId }),
onSuccess: () => {
toast.success("Attachment deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete attachment.")
},
})
const handleDelete = async (attachment: CreditNoteAttachment) => {
const confirmed = await confirm({
title: "Delete Attachment",
description: `Are you sure you want to delete "${attachment.name || "this attachment"}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(attachment.id)
}
}
const columns: ColumnDef<CreditNoteAttachment>[] = [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ getValue, row }) => {
const name = getValue<string>()
const url = row.original.url
if (url) {
return (
<a href={url} target="_blank" rel="noopener noreferrer" className="text-primary underline">
{name || "Attachment"}
</a>
)
}
return name || "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Uploaded" />,
cell: ({ getValue }) => {
const val = getValue<string>()
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
id: "actions",
header: () => <span className="sr-only">Actions</span>,
cell: ({ row }) => (
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDelete(row.original)}
title="Delete attachment"
>
<Trash2 className="size-4 text-destructive" />
</Button>
),
enableSorting: false,
},
]
const attachments: CreditNoteAttachment[] = (data as any)?.attachments ?? []
return (
<div className="flex flex-col gap-4 p-4 lg:p-6">
<div className="flex items-center justify-end">
<Button onClick={() => setDialogOpen(true)}>
<Plus className="size-4" />
Add Attachment
</Button>
</div>
<Card>
<CardContent>
<DataTable
columns={columns}
data={attachments}
pagination={{ page: 1, pageSize: 15, pageCount: 1, total: attachments.length }}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Upload Attachment</DialogTitle>
</DialogHeader>
<CreditNoteDocumentForm
creditNoteId={creditNoteId}
onSuccess={() => {
setDialogOpen(false)
queryClient.invalidateQueries({ queryKey })
}}
/>
</DialogContent>
</Dialog>
</div>
)
}

43
apps/dashboard/app/(authenticated)/sales/credit-notes/[id]/layout.tsx Normal file
View File

@ -0,0 +1,43 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { CreditNoteActions } from '@/modules/credit-notes/credit-note-actions'
import { CreditNoteProvider } from '@/modules/credit-notes/credit-note-context'
import { ReceiptTextIcon } from 'lucide-react'
import React from 'react'
export default async function CreditNoteDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
const { id } = await props.params
const api = await getServerApi()
const creditNote = await api.creditNotes.show(id)
const data = (creditNote as any)?.data ?? creditNote
const title = data?.subject || data?.credit_invoice || 'Credit Note Details'
return (
<CreditNoteProvider creditNote={{ id, label: title }}>
<DashboardDetailsPage
className='p-0 lg:p-0'
title={title}
description={data?.credit_invoice ? `Credit Note #: ${data.credit_invoice}` : undefined}
icon={<ReceiptTextIcon className="size-5" />}
backHref="/sales/credit-notes"
actions={<CreditNoteActions creditNoteId={id} />}
tabs={[
{
href: `/sales/credit-notes/${id}`,
label: 'Details'
},
{
href: `/sales/credit-notes/${id}/documents`,
label: 'Documents'
},
{
href: `/sales/credit-notes/${id}/notes`,
label: 'Notes'
},
]}
>
{props.children}
</DashboardDetailsPage>
</CreditNoteProvider>
)
}

144
apps/dashboard/app/(authenticated)/sales/credit-notes/[id]/notes/page.tsx Normal file
View File

@ -0,0 +1,144 @@
"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 } from "lucide-react"
import { toast } from "sonner"
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 { Card, CardContent } from "@/shared/components/ui/card"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/shared/components/ui/dialog"
import { CreditNoteNoteForm } from "@/modules/credit-notes/credit-note-note-form"
type CreditNoteNote = {
id: number
note?: string
created_at: string
updated_at: string
}
export default function CreditNoteNotesPage() {
const { id: creditNoteId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const queryKey = ["credit-note-notes", creditNoteId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: async () => {
const response = await api.creditNotes.show(creditNoteId)
return (response as any)?.data ?? response
},
})
const deleteMutation = useMutation({
mutationFn: (noteId: number) =>
api.creditNotes.deleteInternalNote(creditNoteId, { note_id: noteId } as never),
onSuccess: () => {
toast.success("Note deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete note.")
},
})
const handleDelete = async (note: CreditNoteNote) => {
const confirmed = await confirm({
title: "Delete Note",
description: "Are you sure you want to delete this note?",
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(note.id)
}
}
const columns: ColumnDef<CreditNoteNote>[] = [
{
accessorKey: "note",
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
cell: ({ getValue }) => {
const val = getValue<string>()
return val || "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ getValue }) => {
const val = getValue<string>()
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
id: "actions",
header: () => <span className="sr-only">Actions</span>,
cell: ({ row }) => (
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDelete(row.original)}
title="Delete note"
>
<Trash2 className="size-4 text-destructive" />
</Button>
),
enableSorting: false,
},
]
const notes: CreditNoteNote[] = (data as any)?.internal_notes ?? []
return (
<div className="flex flex-col gap-4 p-4 lg:p-6">
<div className="flex items-center justify-end">
<Button onClick={() => setDialogOpen(true)}>
<Plus className="size-4" />
Add Note
</Button>
</div>
<Card>
<CardContent>
<DataTable
columns={columns}
data={notes}
pagination={{ page: 1, pageSize: 15, pageCount: 1, total: notes.length }}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Add Note</DialogTitle>
</DialogHeader>
<CreditNoteNoteForm
creditNoteId={creditNoteId}
onSuccess={() => {
setDialogOpen(false)
queryClient.invalidateQueries({ queryKey })
}}
/>
</DialogContent>
</Dialog>
</div>
)
}

15
apps/dashboard/app/(authenticated)/sales/credit-notes/[id]/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import { getServerApi } from '@garage/api/server'
import { CreditNoteGeneralInfo } from '@/modules/credit-notes/credit-note-general-info'
export default async function CreditNoteDetailPage(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params
const api = await getServerApi()
const response = await api.creditNotes.show(id)
const creditNote = (response as any)?.data ?? response
return (
<div className="p-4 lg:p-6">
<CreditNoteGeneralInfo creditNote={creditNote} />
</div>
)
}

79
apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx Normal file
View File

@ -0,0 +1,79 @@
"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"
import { CreditNoteForm } from "@/modules/credit-notes/credit-note-form"
import { CREDIT_NOTE_ROUTES } from "@garage/api"
import type { CreditNotesClient } from "@garage/api"
type CreditNoteItem = {
id: number
subject?: string
credit_invoice?: string
customer_id?: number
status?: string
date?: string
created_at?: string
}
export default function CreditNotesPage() {
const router = useRouter()
return (
<ResourcePage<CreditNotesClient>
pageTitle="Credit Notes"
routeKey={CREDIT_NOTE_ROUTES.INDEX}
getClient={(api) => api.creditNotes}
onRowClick={(row) => router.push(`/sales/credit-notes/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Credit Note">
{(resourceId) => (
<CreditNoteForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "subject",
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
},
{
accessorKey: "credit_invoice",
header: ({ column }) => <ColumnHeader column={column} title="Credit Note #" />,
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const item = row.original as unknown as CreditNoteItem
const status = item.status
const colorMap: Record<string, string> = {
draft: "text-muted-foreground",
open: "text-blue-600",
applied: "text-green-600",
void: "text-gray-400",
}
return (
<span className={colorMap[status ?? ""] ?? ""}>
{status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"}
</span>
)
},
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
},
actionsColumn(),
]}
/>
)
}

8
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx
View File

@ -1,8 +1,8 @@
"use client" "use client"
import { useParams } from "next/navigation" import { useParams, useRouter } from "next/navigation"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useState, useRef } from "react" import { useState, useRef, useTransition } from "react"
import { Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react" import { Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
@ -26,6 +26,8 @@ export default function JobCardAttachmentsPage() {
const { id: jobCardId } = useParams<{ id: string }>() const { id: jobCardId } = useParams<{ id: string }>()
const api = useAuthApi() const api = useAuthApi()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const router = useRouter()
const [isRefreshing, startRefreshTransition] = useTransition()
const fileInputRef = useRef<HTMLInputElement>(null) const fileInputRef = useRef<HTMLInputElement>(null)
const [isUploading, setIsUploading] = useState(false) const [isUploading, setIsUploading] = useState(false)
@ -41,6 +43,7 @@ export default function JobCardAttachmentsPage() {
onSuccess: () => { onSuccess: () => {
toast.success("Attachment deleted successfully.") toast.success("Attachment deleted successfully.")
queryClient.invalidateQueries({ queryKey }) queryClient.invalidateQueries({ queryKey })
startRefreshTransition(() => router.refresh())
}, },
onError: () => { onError: () => {
toast.error("Failed to delete attachment.") toast.error("Failed to delete attachment.")
@ -74,6 +77,7 @@ export default function JobCardAttachmentsPage() {
try { try {
await promise await promise
queryClient.invalidateQueries({ queryKey }) queryClient.invalidateQueries({ queryKey })
startRefreshTransition(() => router.refresh())
} finally { } finally {
setIsUploading(false) setIsUploading(false)
if (fileInputRef.current) { if (fileInputRef.current) {

77
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/inspections/page.tsx Normal file
View File

@ -0,0 +1,77 @@
"use client"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { InspectionForm } from "@/modules/inspections/inspection-form"
import { INSPECTION_ROUTES } from "@garage/api"
import type { InspectionsClient } from "@garage/api"
import { useRouter } from "next/navigation"
import { useJobCard } from "@/modules/job-cards/job-card-context"
export default function InspectionsPage() {
const router = useRouter()
const jobCard = useJobCard()
return (
<ResourcePage<InspectionsClient>
pageTitle="Inspections"
extraParams={{job_card_id: jobCard?.id}}
routeKey={INSPECTION_ROUTES.INDEX}
getClient={(api) => api.inspections}
onRowClick={(row) => router.push(`/sales/inspections/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Inspection">
{(resourceId) => (
<InspectionForm
resourceId={resourceId}
initialData={selectedItem ?? {job_card: {value: jobCard?.id, label: jobCard?.title || `Job Card #${jobCard?.id}`}}}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "customer",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
cell: ({ row }) => {
const c = (row.original as any).customer
return c ? `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() : "—"
},
},
{
accessorKey: "vehicle",
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
cell: ({ row }) => {
const v = (row.original as any).vehicle
return v ? `${v.make ?? ""} ${v.model ?? ""}`.trim() : "—"
},
},
{
accessorKey: "inspection_category",
header: ({ column }) => <ColumnHeader column={column} title="Category" />,
cell: ({ row }) => (row.original as any).inspection_category?.name ?? "—",
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return (
<span className={status === "completed" ? "text-green-600" : "text-yellow-600"}>
{status ?? "—"}
</span>
)
},
},
actionsColumn(),
]}
/>
)
}

4
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx
View File

@ -39,6 +39,10 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:
href: `/sales/job-cards/${id}/attachments`, href: `/sales/job-cards/${id}/attachments`,
label: `Attachments (${docs?.length || 0})` label: `Attachments (${docs?.length || 0})`
}, },
{
href: `/sales/job-cards/${id}/inspections`,
label: `Inspections (${(jobCard as any)?.inspections_count || 0})`
},
{ {
href: `/sales/job-cards/${id}/purchase-orders`, href: `/sales/job-cards/${id}/purchase-orders`,
label: `Purchase Orders (${jobCard?.purchase_orders_count || 0})` label: `Purchase Orders (${jobCard?.purchase_orders_count || 0})`

224
apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
View File

@ -11,8 +11,11 @@ import { ClipboardListIcon, SearchIcon } from 'lucide-react'
import { Badge } from '@/shared/components/ui/badge' import { Badge } from '@/shared/components/ui/badge'
import { Input } from '@/shared/components/ui/input' import { Input } from '@/shared/components/ui/input'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useState, useEffect } from 'react' import { useState, useEffect, useMemo } from 'react'
import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters' import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters'
import { useFilterParams } from '@/shared/hooks/use-filter-params'
import { FilterDrawer, FilterTrigger } from '@/shared/components/filter-drawer'
import { jobCardFilterConfig, JobCardFilterFields } from '@/modules/job-cards/job-card-filters'
type JobCardItem = { type JobCardItem = {
id: number id: number
@ -38,118 +41,137 @@ export default function JobCardsPage() {
const [search, setSearch] = useState("") const [search, setSearch] = useState("")
const [statusFilter, setStatusFilter] = useState<string>("check_in") const [statusFilter, setStatusFilter] = useState<string>("check_in")
const filter = useFilterParams(jobCardFilterConfig)
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => setSearch(searchInput), 400) const timer = setTimeout(() => setSearch(searchInput), 400)
return () => clearTimeout(timer) return () => clearTimeout(timer)
}, [searchInput]) }, [searchInput])
const extraParams: Record<string, unknown> = {} const extraParams = useMemo(() => {
if (search) extraParams.search = search const params: Record<string, unknown> = { ...filter.appliedParams }
if (statusFilter !== "all") extraParams.status = statusFilter if (search) params.search = search
if (statusFilter !== "all") params.status = statusFilter
return params
}, [filter.appliedParams, search, statusFilter])
return ( return (
<ResourcePage<JobCardsClient> <>
<ResourcePage<JobCardsClient>
routeKey={JOB_CARD_ROUTES.INDEX} routeKey={JOB_CARD_ROUTES.INDEX}
getClient={(api) => api.jobCards} getClient={(api) => api.jobCards}
extraParams={extraParams} extraParams={extraParams}
onRowClick={(row) => router.push(`/sales/job-cards/${row.id}`)} onRowClick={(row) => router.push(`/sales/job-cards/${row.id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({ headerProps={({ selectedItem, invalidateQuery }) => ({
title: "Job Cards", title: "Job Cards",
actions: ( actions: (
<FormDialog classNames={{ dialogContent: 'min-w-6xl' }} title="Job Card" > <div className="flex items-center gap-2">
{(resourceId, {close}) => ( <FilterTrigger onClick={filter.open} activeFilterCount={filter.activeFilterCount} />
<JobCardForm <FormDialog classNames={{ dialogContent: 'min-w-6xl' }} title="Job Card" >
resourceId={resourceId} {(resourceId, {close}) => (
initialData={selectedItem} <JobCardForm
onSuccess={()=>{ invalidateQuery(); close();}} resourceId={resourceId}
/> initialData={selectedItem}
)} onSuccess={()=>{ invalidateQuery(); close();}}
</FormDialog> />
), )}
})} </FormDialog>
columns={({ actionsColumn }) => [ </div>
{ ),
accessorKey: "title", })}
header: ({ column }) => <ColumnHeader column={column} title="Title" />, columns={({ actionsColumn }) => [
cell: ({ row }) => { {
const item = row.original as unknown as JobCardItem accessorKey: "title",
return ( header: ({ column }) => <ColumnHeader column={column} title="Title" />,
<div className="flex items-center gap-2"> cell: ({ row }) => {
<ClipboardListIcon className="text-muted-foreground h-4 w-4" /> const item = row.original as unknown as JobCardItem
<span>{item.title}</span> return (
</div> <div className="flex items-center gap-2">
) <ClipboardListIcon className="text-muted-foreground h-4 w-4" />
<span>{item.title}</span>
</div>
)
},
}, },
}, {
accessorKey: "order_number",
{ header: ({ column }) => <ColumnHeader column={column} title="Order Number" />,
accessorKey: "order_number",
header: ({ column }) => <ColumnHeader column={column} title="Order Number" />,
},
{
accessorKey: "check_in_date",
header: ({ column }) => <ColumnHeader column={column} title="Check-in Date" />,
cell: ({ getValue }) => {
const val = getValue<string>()
return formatDate(val)
}
},
{
accessorKey: "vehicle_id",
header: ({ column }) => <ColumnHeader column={column} title="KM In" />,
cell: ({ row }) => {
const item = row.original as unknown as JobCardItem
return item.km_in ? formatNumber(item.km_in) : "—"
}, },
}, {
{ accessorKey: "check_in_date",
accessorKey: "created_at", header: ({ column }) => <ColumnHeader column={column} title="Check-in Date" />,
header: ({ column }) => <ColumnHeader column={column} title="Created" />, cell: ({ getValue }) => {
cell: ({ row }) => { const val = getValue<string>()
const item = row.original as unknown as JobCardItem return formatDate(val)
return formatDate(item.created_at) }
}, },
}, {
{ accessorKey: "vehicle_id",
accessorKey: "status", header: ({ column }) => <ColumnHeader column={column} title="KM In" />,
header: ({ column }) => <ColumnHeader column={column} title="Status" />, cell: ({ row }) => {
cell: ({ row }) => { const item = row.original as unknown as JobCardItem
const item = row.original as unknown as JobCardItem return item.km_in ? formatNumber(item.km_in) : "—"
return ( },
<Badge variant={statusColorMap[item.status ?? ""] as any ?? "outline"}>
{formatEnum(item.status)}
</Badge>
)
}, },
}, {
actionsColumn(), accessorKey: "created_at",
]} header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const item = row.original as unknown as JobCardItem
return formatDate(item.created_at)
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const item = row.original as unknown as JobCardItem
return (
<Badge variant={statusColorMap[item.status ?? ""] as any ?? "outline"}>
{formatEnum(item.status)}
</Badge>
)
},
},
actionsColumn(),
]}
tableHeader={ tableHeader={
<div className="flex justify-between"> <div className="flex justify-between">
<Tabs value={statusFilter} onValueChange={setStatusFilter}> <Tabs value={statusFilter} onValueChange={setStatusFilter}>
<TabsList variant="line"> <TabsList variant="line">
<TabsTrigger value="all" >All</TabsTrigger> <TabsTrigger value="all">All</TabsTrigger>
{JobCardStatus.map((status) => ( {JobCardStatus.map((status) => (
<TabsTrigger key={status} value={status}> <TabsTrigger key={status} value={status}>
{formatEnum(status)} {formatEnum(status)}
</TabsTrigger> </TabsTrigger>
))} ))}
</TabsList> </TabsList>
</Tabs> </Tabs>
<div className="relative w-64"> <div className="relative w-64">
<SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="Search job cards..." placeholder="Search job cards..."
value={searchInput} value={searchInput}
onChange={(e) => setSearchInput(e.target.value)} onChange={(e) => setSearchInput(e.target.value)}
className="pl-8" className="pl-8"
/> />
</div>
</div> </div>
</div> }
} />
/>
<FilterDrawer
form={filter.form}
isOpen={filter.isOpen}
onOpenChange={(open) => { if (!open) filter.close() }}
onSubmit={filter.onSubmit}
onReset={filter.reset}
activeFilterCount={filter.activeFilterCount}
title="Filter Job Cards"
>
<JobCardFilterFields />
</FilterDrawer>
</>
) )
} }

70
apps/dashboard/config/navGroups.tsx
View File

@ -57,14 +57,14 @@ export const navGroups: NavGroup[] = [
}, },
{ {
title: "Customer & Vehicles", title: "Customer & Vehicles",
href: "/customer-vehicles", href: "/sales/vehicles",
icon: <UsersIcon />, icon: <UsersIcon />,
}, },
{ // {
title: "Reports", // title: "Reports",
href: "/reports", // href: "/reports",
icon: <BarChart3Icon />, // icon: <BarChart3Icon />,
}, // },
], ],
}, },
{ {
@ -107,35 +107,35 @@ export const navGroups: NavGroup[] = [
{ title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> }, { title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
], ],
}, },
{ // {
title: "CRM", // title: "CRM",
href: "/crm", // href: "/crm",
icon: <BriefcaseBusinessIcon />, // icon: <BriefcaseBusinessIcon />,
items: [ // items: [
{ title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> }, // { title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
{ title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> }, // { title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
{ title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> }, // { title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
], // ],
}, // },
{ // {
title: "Marketing", // title: "Marketing",
href: "/marketing", // href: "/marketing",
icon: <MegaphoneIcon />, // icon: <MegaphoneIcon />,
items: [ // items: [
{ title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> }, // { title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
{ title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> }, // { title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
{ title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> }, // { title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
], // ],
}, // },
{ // {
title: "Accountants", // title: "Accountants",
href: "/accountants", // href: "/accountants",
icon: <BookIcon />, // icon: <BookIcon />,
items: [ // items: [
{ title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> }, // { title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
{ title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> }, // { title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
], // ],
}, // },
{ {
title: "Employees", title: "Employees",
href: "/productivity", href: "/productivity",

50
apps/dashboard/modules/credit-notes/credit-note-actions.tsx Normal file
View File

@ -0,0 +1,50 @@
"use client"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2 } from "lucide-react"
type CreditNoteActionsProps = {
creditNoteId: string
}
export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
const api = useAuthApi()
const router = useRouter()
const handleEdit = () => {
router.push(`/sales/credit-notes/${creditNoteId}/edit`)
}
const handleDelete = async () => {
await api.creditNotes.destroy(creditNoteId)
router.push("/sales/credit-notes")
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={handleEdit}>
<Pencil className="size-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

28
apps/dashboard/modules/credit-notes/credit-note-context.tsx Normal file
View File

@ -0,0 +1,28 @@
"use client"
import { createContext, useContext } from "react"
type CreditNoteContextValue = {
id: string
label: string
}
const CreditNoteContext = createContext<CreditNoteContextValue | null>(null)
export function CreditNoteProvider({
creditNote,
children,
}: {
creditNote: CreditNoteContextValue
children: React.ReactNode
}) {
return (
<CreditNoteContext.Provider value={creditNote}>
{children}
</CreditNoteContext.Provider>
)
}
export function useCreditNote() {
return useContext(CreditNoteContext)
}

70
apps/dashboard/modules/credit-notes/credit-note-document-form.tsx Normal file
View File

@ -0,0 +1,70 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
const schema = z.object({
attachments: z.instanceof(FileList).refine((files) => files.length > 0, "At least one file is required"),
})
type FormValues = z.infer<typeof schema>
type CreditNoteDocumentFormProps = {
creditNoteId: string
onSuccess?: () => void
}
export function CreditNoteDocumentForm({ creditNoteId, onSuccess }: CreditNoteDocumentFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
})
const handleSubmit = async (values: FormValues) => {
try {
const formData = new FormData()
Array.from(values.attachments).forEach((file) => {
formData.append("attachments[]", file)
})
await api.creditNotes.addAttachment(creditNoteId, formData)
toast.success("Attachment uploaded")
form.reset()
onSuccess?.()
} catch {
toast.error("Failed to upload attachment")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<div className="flex flex-col gap-1.5">
<label className="text-sm font-medium">Attachments</label>
<input
type="file"
multiple
className="text-sm"
{...form.register("attachments")}
/>
{form.formState.errors.attachments && (
<p className="text-xs text-destructive">
{form.formState.errors.attachments.message as string}
</p>
)}
</div>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Uploading..." : "Upload Attachment"}
</Button>
</FieldGroup>
</Rhform>
)
}

182
apps/dashboard/modules/credit-notes/credit-note-form.tsx Normal file
View File

@ -0,0 +1,182 @@
"use client"
import { AlertTriangle, Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
Rhform,
RhfTextField,
RhfSelectField,
RhfTextareaField,
RhfAsyncSelectField,
} from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toRelation, toId } from "@/shared/lib/utils"
import {
creditNoteFormSchema,
type CreditNoteFormValues,
} from "./credit-note.schema"
import { CREDIT_NOTE_ROUTES, DEPARTMENT_ROUTES } from "@garage/api"
import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field"
// ── Shared mapOption for async selects ──
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.name,
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
// ── Constants ──
const STATUS_OPTIONS = [
{ value: "draft", label: "Draft" },
{ value: "open", label: "Open" },
{ value: "applied", label: "Applied" },
{ value: "void", label: "Void" },
]
// ── Props ──
export type CreditNoteFormProps = {
resourceId?: string | null
initialData?: unknown
onSuccess?: () => void
}
// ── Default values ──
const DEFAULT_VALUES: CreditNoteFormValues = {
subject: "",
customer: null,
department: null,
date: "",
status: "draft",
notes: "",
}
// ── Mapping helpers ──
function mapToFormValues(data: unknown): CreditNoteFormValues {
const d = (data as any)?.data ?? data ?? {}
return {
subject: d.subject || "",
customer: toRelation(d.customer_id, d.customer_name),
department: toRelation(d.department_id, d.department_name),
date: d.date || "",
status: d.status || "draft",
notes: d.notes || "",
}
}
function mapFormToPayload(values: CreditNoteFormValues) {
return {
subject: values.subject,
customer_id: toId(values.customer),
department_id: toId(values.department),
date: values.date || undefined,
status: values.status,
notes: values.notes || undefined,
}
}
// ── Component ──
export function CreditNoteForm({ resourceId, initialData, onSuccess }: CreditNoteFormProps) {
const api = useAuthApi()
const { form, isEditing } = useResourceForm<CreditNoteFormValues>({
schema: creditNoteFormSchema,
defaultValues: DEFAULT_VALUES,
resourceId: resourceId ?? null,
initialData,
queryKey: [CREDIT_NOTE_ROUTES.BY_ID, resourceId],
initialize: (id) => api.creditNotes.show(id),
mapToFormValues,
})
const { mutate, error, isPending } = useFormMutation(form, {
mutationFn: (values: CreditNoteFormValues) => {
const payload = mapFormToPayload(values)
const promise = (isEditing && resourceId
? api.creditNotes.update(resourceId, payload)
: api.creditNotes.create(payload)) as Promise<any>
toast.promise(promise, {
loading: isEditing ? "Updating credit note..." : "Creating credit note...",
success: isEditing ? "Credit note updated successfully" : "Credit note created successfully",
error: isEditing ? "Failed to update credit note" : "Failed to create credit note",
})
return promise
},
onSuccess: () => {
form.reset()
onSuccess?.()
},
})
return (
<Rhform form={form} onSubmit={(values) => mutate(values)}>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="me-2 h-4 w-4" />
<AlertTitle>
{isEditing ? "Failed to update credit note" : "Failed to create credit note"}
</AlertTitle>
{error.message}
</Alert>
)}
<FieldGroup>
<RhfTextField name="subject" label="Subject" placeholder="Credit note subject" required />
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfCustomerSelectField name="customer" label="Customer" />
<RhfAsyncSelectField
name="department"
label="Department"
placeholder="Select department"
queryKey={[DEPARTMENT_ROUTES.INDEX]}
listFn={() => api.departments.list()}
mapOption={mapLookupOption}
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField name="date" label="Date" type="date" />
<RhfSelectField
name="status"
label="Status"
options={STATUS_OPTIONS}
/>
</div>
<RhfTextareaField name="notes" label="Notes" placeholder="Additional notes..." rows={3} />
<Button type="submit" variant="default" disabled={isPending}>
{isEditing ? (
<>
<Save className="me-2 size-4" />
{isPending ? "Saving..." : "Save Changes"}
</>
) : (
<>
<Plus className="me-2 size-4" />
{isPending ? "Creating..." : "Create Credit Note"}
</>
)}
</Button>
</FieldGroup>
</Rhform>
)
}

146
apps/dashboard/modules/credit-notes/credit-note-general-info.tsx Normal file
View File

@ -0,0 +1,146 @@
import {
FileText,
Calendar,
Hash,
Users,
Building2,
Clock,
} from "lucide-react"
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator"
type CreditNoteData = {
id?: number
subject?: string
credit_invoice?: string
date?: string
status?: string
notes?: string
customer_id?: number
customer_name?: string
department_name?: string
department_id?: number
invoice_id?: number
created_at?: string
updated_at?: string
}
type CreditNoteGeneralInfoProps = {
creditNote: CreditNoteData
}
function InfoItem({
icon: Icon,
label,
value,
}: {
icon: React.ComponentType<{ className?: string }>
label: string
value?: string | null
}) {
return (
<div className="flex items-start gap-3">
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<Icon className="size-4" />
</div>
<div className="flex flex-col gap-0.5">
<span className="text-xs text-muted-foreground">{label}</span>
<span className="text-sm font-medium">
{value || <span className="text-muted-foreground">—</span>}
</span>
</div>
</div>
)
}
const statusColorMap: Record<string, string> = {
draft: "secondary",
open: "default",
applied: "default",
void: "outline",
}
export function CreditNoteGeneralInfo({ creditNote }: CreditNoteGeneralInfoProps) {
return (
<div className="grid gap-6 md:grid-cols-2">
{/* Credit Note Details */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<FileText className="size-4" />
Credit Note Details
</CardTitle>
</CardHeader>
<CardContent className="grid gap-4">
<div className="flex flex-wrap items-center gap-2">
{creditNote.subject && (
<Badge variant="secondary">{creditNote.subject}</Badge>
)}
{creditNote.status && (
<Badge variant={statusColorMap[creditNote.status] as any ?? "outline"}>
{creditNote.status.charAt(0).toUpperCase() + creditNote.status.slice(1)}
</Badge>
)}
</div>
<Separator />
<div className="grid gap-4 sm:grid-cols-2">
<InfoItem
icon={Hash}
label="Credit Note #"
value={creditNote.credit_invoice}
/>
<InfoItem
icon={Calendar}
label="Date"
value={creditNote.date}
/>
<InfoItem
icon={Clock}
label="Created"
value={creditNote.created_at ? new Date(creditNote.created_at).toLocaleDateString() : null}
/>
</div>
</CardContent>
</Card>
{/* Relations */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="size-4" />
Related Info
</CardTitle>
</CardHeader>
<CardContent className="grid gap-4">
<div className="grid gap-4">
<InfoItem
icon={Users}
label="Customer"
value={creditNote.customer_name}
/>
<InfoItem
icon={Building2}
label="Department"
value={creditNote.department_name}
/>
</div>
{creditNote.notes && (
<>
<Separator />
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">Notes</span>
<p className="text-sm">{creditNote.notes}</p>
</div>
</>
)}
</CardContent>
</Card>
</div>
)
}

60
apps/dashboard/modules/credit-notes/credit-note-note-form.tsx Normal file
View File

@ -0,0 +1,60 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextareaField } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
const schema = z.object({
note: z.string().min(1, "Note is required"),
})
type FormValues = z.infer<typeof schema>
type CreditNoteNoteFormProps = {
creditNoteId: string
onSuccess?: () => void
}
export function CreditNoteNoteForm({ creditNoteId, onSuccess }: CreditNoteNoteFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
defaultValues: { note: "" },
})
const handleSubmit = async (values: FormValues) => {
try {
await api.creditNotes.addInternalNote(creditNoteId, { note: values.note })
toast.success("Note added")
form.reset()
onSuccess?.()
} catch {
toast.error("Failed to add note")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<RhfTextareaField
name="note"
label="Note"
placeholder="Enter a note..."
rows={4}
required
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Adding..." : "Add Note"}
</Button>
</FieldGroup>
</Rhform>
)
}

24
apps/dashboard/modules/credit-notes/credit-note.schema.ts Normal file
View File

@ -0,0 +1,24 @@
import { z } from "zod"
const relationFieldSchema = z
.object({ value: z.string(), label: z.string() })
.nullable()
const creditNoteFormSchema = z.object({
// ── Required fields ──
subject: z.string().min(1, "Subject is required"),
// ── Relations ──
customer: relationFieldSchema,
department: relationFieldSchema,
// ── Optional fields ──
date: z.string().optional(),
status: z.string().optional(),
notes: z.string().optional(),
})
type CreditNoteFormValues = z.infer<typeof creditNoteFormSchema>
export { creditNoteFormSchema, relationFieldSchema }
export type { CreditNoteFormValues }

206
apps/dashboard/modules/expense-items/expense-item-form.tsx Normal file
View File

@ -0,0 +1,206 @@
"use client"
import { AlertTriangle, Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
Rhform,
RhfTextField,
RhfSelectField,
RhfAsyncSelectField,
RhfCheckboxField,
} from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toRelation, toId } from "@/shared/lib/utils"
import { expenseItemFormSchema, type ExpenseItemFormValues } from "./expense-item.schema"
import { EXPENSE_ITEM_ROUTES, INVENTORY_CATEGORY_ROUTES } from "@garage/api"
import { InventoryCategoryCrudDialog } from "./inventory-category-crud-dialog"
// ── Constants ──
const ITEM_TYPE_OPTIONS = [
{ value: "Expense", label: "Expense" },
]
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.title ?? item.name ?? String(item.id),
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
// ── Props ──
export type ExpenseItemFormProps = {
resourceId?: string | null
initialData?: unknown
onSuccess?: () => void
}
// ── Default values ──
const DEFAULT_VALUES: ExpenseItemFormValues = {
item_type: "Expense",
item_name: "",
category: null,
purchase_price: undefined,
purchase_chart_of_account: "",
purchase_information: true,
is_active: true,
}
// ── Mapping helpers ──
function mapToFormValues(data: unknown): ExpenseItemFormValues {
const d = (data as any)?.data ?? data ?? {}
return {
item_type: d.item_type || "Expense",
item_name: d.item_name || "",
category: toRelation(d.category_id, d.category_title ?? d.category_name),
purchase_price: d.purchase_price ?? undefined,
purchase_chart_of_account: d.purchase_chart_of_account || "",
purchase_information: d.purchase_information ?? true,
is_active: d.is_active ?? true,
}
}
function mapFormToPayload(values: ExpenseItemFormValues) {
return {
item_type: values.item_type,
item_name: values.item_name,
category_id: toId(values.category),
purchase_price: values.purchase_price,
purchase_chart_of_account: values.purchase_chart_of_account || undefined,
purchase_information: values.purchase_information,
is_active: values.is_active,
}
}
// ── Component ──
export function ExpenseItemForm({ resourceId, initialData, onSuccess }: ExpenseItemFormProps) {
const api = useAuthApi()
const { form, isEditing } = useResourceForm<ExpenseItemFormValues, any>({
schema: expenseItemFormSchema,
defaultValues: DEFAULT_VALUES,
resourceId,
initialData,
initialize: (id) => api.expenseItems.show(id),
queryKey: [EXPENSE_ITEM_ROUTES.BY_ID, resourceId],
mapToFormValues,
})
const { mutate, error, isPending } = useFormMutation(form, {
mutationFn: (values: ExpenseItemFormValues) => {
const promise = isEditing && resourceId
? api.expenseItems.update(resourceId, mapFormToPayload(values))
: api.expenseItems.create(mapFormToPayload(values))
toast.promise(promise, {
loading: isEditing ? "Updating expense item..." : "Creating expense item...",
success: isEditing ? "Expense item updated successfully" : "Expense item created successfully",
error: isEditing ? "Failed to update expense item" : "Failed to create expense item",
})
return promise
},
onSuccess: () => {
form.reset()
onSuccess?.()
},
})
return (
<Rhform form={form} onSubmit={(values) => mutate(values)}>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="me-2 h-4 w-4" />
<AlertTitle>
{isEditing ? "Failed to update expense item" : "Failed to create expense item"}
</AlertTitle>
{error.message}
</Alert>
)}
<FieldGroup>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfSelectField
name="item_type"
label="Item Type"
options={ITEM_TYPE_OPTIONS}
required
/>
<RhfTextField
name="item_name"
label="Item Name"
placeholder="e.g. Office Supplies"
required
/>
</div>
<div>
<div className="mb-1 flex items-center justify-between">
<span className="text-sm font-medium">Category</span>
<InventoryCategoryCrudDialog />
</div>
<RhfAsyncSelectField
name="category"
label=""
placeholder="Select category"
queryKey={[INVENTORY_CATEGORY_ROUTES.INDEX]}
listFn={() => api.inventoryCategories.list()}
mapOption={mapLookupOption}
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="purchase_price"
label="Purchase Price"
placeholder="0.00"
type="number"
/>
<RhfTextField
name="purchase_chart_of_account"
label="Purchase Chart of Account"
placeholder="e.g. Expenses"
/>
</div>
<div className="flex flex-col gap-3">
<RhfCheckboxField
name="purchase_information"
label="Purchase Information"
/>
<RhfCheckboxField
name="is_active"
label="Active"
/>
</div>
</FieldGroup>
<div className="mt-6 flex justify-end">
<Button type="submit" disabled={isPending}>
{isEditing ? (
<>
<Save className="me-2 h-4 w-4" />
{isPending ? "Saving..." : "Save Changes"}
</>
) : (
<>
<Plus className="me-2 h-4 w-4" />
{isPending ? "Creating..." : "Create Expense Item"}
</>
)}
</Button>
</div>
</Rhform>
)
}

17
apps/dashboard/modules/expense-items/expense-item.schema.ts Normal file
View File

@ -0,0 +1,17 @@
import { z } from "zod"
export const relationFieldSchema = z
.object({ value: z.string(), label: z.string() })
.nullable()
export const expenseItemFormSchema = z.object({
item_type: z.string().min(1, "Item type is required"),
item_name: z.string().min(1, "Item name is required"),
category: relationFieldSchema,
purchase_price: z.coerce.number().min(0).optional(),
purchase_chart_of_account: z.string().optional(),
purchase_information: z.boolean().default(true),
is_active: z.boolean().default(true),
})
export type ExpenseItemFormValues = z.infer<typeof expenseItemFormSchema>

33
apps/dashboard/modules/expense-items/inventory-category-crud-dialog.tsx Normal file
View File

@ -0,0 +1,33 @@
"use client"
import { CrudDialog } from "@/shared/components/crud-dialog"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { useAuthApi } from "@/shared/useApi"
import { INVENTORY_CATEGORY_ROUTES } from "@garage/api"
import { InventoryCategoryForm } from "./inventory-category-form"
export function InventoryCategoryCrudDialog() {
const api = useAuthApi()
return (
<CrudDialog
title="Inventory Category"
queryKey={[INVENTORY_CATEGORY_ROUTES.INDEX]}
getClient={() => api.inventoryCategories}
resourceLabel="inventory category"
columns={() => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
]}
renderForm={({ resourceId, initialData, onSuccess }) => (
<InventoryCategoryForm
resourceId={resourceId}
initialData={initialData}
onSuccess={onSuccess}
/>
)}
/>
)
}

80
apps/dashboard/modules/expense-items/inventory-category-form.tsx Normal file
View File

@ -0,0 +1,80 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextField } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useEffect } from "react"
const inventoryCategorySchema = z.object({
title: z.string().min(1, "Title is required"),
})
type InventoryCategoryFormValues = z.infer<typeof inventoryCategorySchema>
type InventoryCategoryFormProps = {
resourceId?: string | null
initialData?: any
onSuccess?: () => void
}
export function InventoryCategoryForm({ resourceId, initialData, onSuccess }: InventoryCategoryFormProps) {
const api = useAuthApi()
const isEditing = !!resourceId
const form = useForm<InventoryCategoryFormValues>({
resolver: zodResolver(inventoryCategorySchema),
defaultValues: { title: "" },
})
useEffect(() => {
if (initialData) {
const d = initialData?.data ?? initialData
form.reset({ title: d.title ?? "" })
}
}, [initialData, form])
const handleSubmit = async (values: InventoryCategoryFormValues) => {
try {
const promise = isEditing
? api.inventoryCategories.update(resourceId!, { title: values.title })
: api.inventoryCategories.create({ title: values.title })
toast.promise(promise, {
loading: isEditing ? "Updating..." : "Creating...",
success: isEditing ? "Updated successfully" : "Created successfully",
error: isEditing ? "Failed to update" : "Failed to create",
})
await promise
form.reset()
onSuccess?.()
} catch {
// toast already shown
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<RhfTextField
name="title"
label="Title"
placeholder="e.g. Engine Parts"
required
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
{isEditing ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
{form.formState.isSubmitting
? (isEditing ? "Updating..." : "Creating...")
: (isEditing ? "Update" : "Create")}
</Button>
</FieldGroup>
</Rhform>
)
}

130
apps/dashboard/modules/inspections/inspection-form.tsx
View File

@ -8,7 +8,11 @@ import { FieldGroup } from "@/shared/components/ui/field"
import { import {
Rhform, Rhform,
RhfTextField, RhfTextField,
RhfTextareaField,
RhfSelectField,
RhfAsyncSelectField, RhfAsyncSelectField,
RhfDateField,
RhfTimeField,
} from "@/shared/components/form" } from "@/shared/components/form"
import { toast } from "sonner" import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi" import { useAuthApi } from "@/shared/useApi"
@ -25,6 +29,9 @@ import {
import { import {
INSPECTION_ROUTES, INSPECTION_ROUTES,
DEPARTMENT_ROUTES, DEPARTMENT_ROUTES,
JOB_CARD_ROUTES,
InspectionStatus,
RateType,
} from "@garage/api" } from "@garage/api"
import { RhfVehicleSelectField } from "@/modules/vehicles/rhf-vehicle-select-field" import { RhfVehicleSelectField } from "@/modules/vehicles/rhf-vehicle-select-field"
import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field" import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field"
@ -46,10 +53,22 @@ const DEFAULT_VALUES: InspectionFormValues = {
department: null, department: null,
inspection_category: null, inspection_category: null,
employee: null, employee: null,
job_card: null,
labor_rate: null,
title: "", title: "",
order_number: "", order_number: "",
date: "", date: "",
time: "", time: "",
status: "in_progress",
note: "",
description: "",
rate_type: "flat_rate",
quantity: 1,
rate: 0,
working_hours: 0,
labor_hours: 0,
tax: "",
chart_of_account: "",
} }
// ── Mapping helpers ── // ── Mapping helpers ──
@ -63,10 +82,26 @@ function mapToFormValues(data: unknown): InspectionFormValues {
department: toRelation(d.department_id, d.department?.name), department: toRelation(d.department_id, d.department?.name),
inspection_category: toRelation(d.inspection_category_id, d.inspection_category?.name), inspection_category: toRelation(d.inspection_category_id, d.inspection_category?.name),
employee: toRelation(d.employee_id, d.employee?.first_name ? `${d.employee.first_name} ${d.employee.last_name ?? ""}`.trim() : undefined), employee: toRelation(d.employee_id, d.employee?.first_name ? `${d.employee.first_name} ${d.employee.last_name ?? ""}`.trim() : undefined),
job_card: d.job_card_id
? { value: String(d.job_card_id), label: d.job_card?.title ?? d.job_card?.order_number ?? String(d.job_card_id) }
: null,
labor_rate: d.labor_rate_id
? { value: String(d.labor_rate_id), label: d.labor_rate?.title ?? String(d.labor_rate_id) }
: null,
title: d.title ?? "", title: d.title ?? "",
order_number: d.order_number ?? "", order_number: d.order_number ?? "",
date: d.date ?? "", date: d.date ? d.date.split("T")[0] : "",
time: d.time ?? "", time: d.time ?? "",
status: d.status ?? "in_progress",
note: d.note ?? "",
description: d.description ?? "",
rate_type: d.rate_type ?? "flat_rate",
quantity: d.quantity != null ? Number(d.quantity) : 1,
rate: d.rate != null ? Number(d.rate) : 0,
working_hours: d.working_hours != null ? Number(d.working_hours) : 0,
labor_hours: d.labor_hours != null ? Number(d.labor_hours) : 0,
tax: d.tax ?? "",
chart_of_account: d.chart_of_account ?? "",
} }
} }
@ -77,14 +112,36 @@ function mapFormToPayload(values: InspectionFormValues) {
department_id: toId(values.department), department_id: toId(values.department),
inspection_category_id: toId(values.inspection_category), inspection_category_id: toId(values.inspection_category),
employee_id: toId(values.employee), employee_id: toId(values.employee),
job_card_id: toId(values.job_card) ?? null,
labor_rate_id: values.labor_rate ? Number(values.labor_rate.value) : undefined,
title: values.title, title: values.title,
order_number: values.order_number || undefined, order_number: values.order_number || undefined,
date: values.date || undefined, date: values.date || undefined,
time: values.time || undefined, time: values.time || undefined,
status: values.status || undefined,
note: values.note || undefined,
description: values.description || undefined,
rate_type: values.rate_type || undefined,
quantity: values.quantity ?? undefined,
rate: values.rate ?? undefined,
working_hours: values.working_hours ?? undefined,
labor_hours: values.labor_hours ?? undefined,
tax: values.tax || undefined,
chart_of_account: values.chart_of_account || undefined,
} }
} }
// ── Shared mapOption for async selects ── // ── Select options ──
const STATUS_OPTIONS = InspectionStatus.map((v) => ({
value: v,
label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
}))
const RATE_TYPE_OPTIONS = RateType.map((v) => ({
value: v,
label: v === "flat_rate" ? "Flat Rate" : "Hourly",
}))
const mapLookupOption = (item: any) => ({ const mapLookupOption = (item: any) => ({
value: String(item.id), value: String(item.id),
@ -171,15 +228,74 @@ export function InspectionForm({ resourceId, initialData, onSuccess }: Inspectio
/> />
</div> </div>
<RhfEmployeeSelectField name="employee" /> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfEmployeeSelectField name="employee" />
<RhfTextField name="order_number" label="Order Number" placeholder="e.g. ORD-001" /> <RhfAsyncSelectField
name="job_card"
label="Job Card"
placeholder="Select job card"
queryKey={[JOB_CARD_ROUTES.INDEX]}
listFn={() => api.jobCards.list()}
mapOption={(item: any) => ({
value: String(item.id),
label: item.title ?? item.order_number ?? String(item.id),
})}
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField name="date" label="Date" placeholder="YYYY-MM-DD" type="date" /> <RhfSelectField
<RhfTextField name="time" label="Time" placeholder="HH:MM:SS" type="time" step={1} /> name="status"
label="Status"
placeholder="Select status"
options={STATUS_OPTIONS}
/>
<RhfTextField name="order_number" label="Order Number" placeholder="e.g. ORD-001" />
</div> </div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfDateField name="date" label="Date" />
<RhfTimeField name="time" label="Time" withSeconds />
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfSelectField
name="rate_type"
label="Rate Type"
placeholder="Select rate type"
options={RATE_TYPE_OPTIONS}
/>
<RhfAsyncSelectField
name="labor_rate"
label="Labor Rate"
placeholder="Select labor rate"
queryKey={["labor-rates"]}
listFn={() => api.inventory.listLaborRates()}
mapOption={(item: any) => ({
value: String(item.id),
label: item.title ?? String(item.id),
})}
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<RhfTextField name="quantity" label="Quantity" type="number" placeholder="1" />
<RhfTextField name="rate" label="Rate" type="number" placeholder="0.00" />
<RhfTextField name="tax" label="Tax" placeholder="e.g. 5%" />
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField name="working_hours" label="Working Hours" type="number" placeholder="0" />
<RhfTextField name="labor_hours" label="Labor Hours" type="number" placeholder="0" />
</div>
<RhfTextField name="chart_of_account" label="Chart of Account" placeholder="e.g. COA-123" />
<RhfTextareaField name="note" label="Note" placeholder="Internal notes..." />
<RhfTextareaField name="description" label="Description" placeholder="Full description..." />
<Button type="submit" variant="default" disabled={isPending}> <Button type="submit" variant="default" disabled={isPending}>
{isEditing ? <Save /> : <Plus />} {isEditing ? <Save /> : <Plus />}
{isPending {isPending

12
apps/dashboard/modules/inspections/inspection.schema.ts
View File

@ -10,10 +10,22 @@ const inspectionFormSchema = z.object({
department: relationFieldSchema, department: relationFieldSchema,
inspection_category: relationFieldSchema, inspection_category: relationFieldSchema,
employee: relationFieldSchema, employee: relationFieldSchema,
job_card: relationFieldSchema.optional(),
labor_rate: relationFieldSchema.optional(),
title: z.string().min(1, "Title is required"), title: z.string().min(1, "Title is required"),
order_number: z.string().optional(), order_number: z.string().optional(),
date: z.string().optional(), date: z.string().optional(),
time: z.string().optional(), time: z.string().optional(),
status: z.string().optional(),
note: z.string().optional(),
description: z.string().optional(),
rate_type: z.string().optional(),
quantity: z.coerce.number().min(0).optional(),
rate: z.coerce.number().min(0).optional(),
working_hours: z.coerce.number().min(0).optional(),
labor_hours: z.coerce.number().min(0).optional(),
tax: z.string().optional(),
chart_of_account: z.string().optional(),
}) })
type InspectionFormValues = z.infer<typeof inspectionFormSchema> type InspectionFormValues = z.infer<typeof inspectionFormSchema>

282
apps/dashboard/modules/job-cards/job-card-filters.tsx Normal file
View File

@ -0,0 +1,282 @@
"use client"
import { z } from "zod"
import { parseAsInteger, parseAsString, parseAsBoolean } from "nuqs"
import { toRelation, toId, type RelationFieldValue } from "@/shared/lib/utils"
import {
RhfAsyncSelectField,
RhfDateField,
RhfCheckboxField,
RhfSelectField,
} from "@/shared/components/form"
import { useAuthApi } from "@/shared/useApi"
import {
CUSTOMER_ROUTES,
EMPLOYEE_ROUTES,
DEPARTMENT_ROUTES,
VEHICLE_ROUTES,
LABEL_ROUTES,
INSURANCE_TYPE_ROUTES,
JobCardStatus,
} from "@garage/api"
import { formatEnum } from "@/shared/utils/formatters"
import { Separator } from "@/shared/components/ui/separator"
import type { UseFilterParamsOptions } from "@/shared/hooks/use-filter-params"
// ── Schema ──
const relationField = z.object({ value: z.string(), label: z.string() }).nullable().optional()
const jobCardFilterSchema = z.object({
customer_id: relationField,
insurer_id: relationField,
vehicle_id: relationField,
department_id: relationField,
sales_person_id: relationField,
primary_technician_id: relationField,
service_writer_id: relationField,
label_ids: z.string().optional(),
check_in_date: z.string().optional(),
check_out_date: z.string().optional(),
delivery_date: z.string().optional(),
start_date: z.string().optional(),
end_date: z.string().optional(),
convert_invoice: z.boolean().optional(),
has_start_or_delivery_date: z.boolean().optional(),
has_start_date: z.boolean().optional(),
has_delivery_date: z.boolean().optional(),
has_both_dates: z.boolean().optional(),
})
type JobCardFilterValues = z.infer<typeof jobCardFilterSchema>
// ── Defaults ──
const defaultValues: JobCardFilterValues = {
customer_id: null,
insurer_id: null,
vehicle_id: null,
department_id: null,
sales_person_id: null,
primary_technician_id: null,
service_writer_id: null,
label_ids: "",
check_in_date: "",
check_out_date: "",
delivery_date: "",
start_date: "",
end_date: "",
convert_invoice: false,
has_start_or_delivery_date: false,
has_start_date: false,
has_delivery_date: false,
has_both_dates: false,
}
// ── nuqs Parsers ──
const paramsParsers = {
customer_id: parseAsInteger,
insurer_id: parseAsInteger,
vehicle_id: parseAsInteger,
department_id: parseAsInteger,
sales_person_id: parseAsInteger,
primary_technician_id: parseAsInteger,
service_writer_id: parseAsInteger,
label_ids: parseAsString,
check_in_date: parseAsString,
check_out_date: parseAsString,
delivery_date: parseAsString,
start_date: parseAsString,
end_date: parseAsString,
convert_invoice: parseAsBoolean,
has_start_or_delivery_date: parseAsBoolean,
has_start_date: parseAsBoolean,
has_delivery_date: parseAsBoolean,
has_both_dates: parseAsBoolean,
}
// ── Mappers ──
function mapParamsToFormValues(params: Record<string, any>): Partial<JobCardFilterValues> {
return {
customer_id: params.customer_id ? toRelation(params.customer_id) : null,
insurer_id: params.insurer_id ? toRelation(params.insurer_id) : null,
vehicle_id: params.vehicle_id ? toRelation(params.vehicle_id) : null,
department_id: params.department_id ? toRelation(params.department_id) : null,
sales_person_id: params.sales_person_id ? toRelation(params.sales_person_id) : null,
primary_technician_id: params.primary_technician_id ? toRelation(params.primary_technician_id) : null,
service_writer_id: params.service_writer_id ? toRelation(params.service_writer_id) : null,
label_ids: params.label_ids ?? "",
check_in_date: params.check_in_date ?? "",
check_out_date: params.check_out_date ?? "",
delivery_date: params.delivery_date ?? "",
start_date: params.start_date ?? "",
end_date: params.end_date ?? "",
convert_invoice: params.convert_invoice ?? false,
has_start_or_delivery_date: params.has_start_or_delivery_date ?? false,
has_start_date: params.has_start_date ?? false,
has_delivery_date: params.has_delivery_date ?? false,
has_both_dates: params.has_both_dates ?? false,
}
}
function mapFormValuesToParams(values: JobCardFilterValues): Record<string, any> {
return {
customer_id: toId(values.customer_id as RelationFieldValue) ?? null,
insurer_id: toId(values.insurer_id as RelationFieldValue) ?? null,
vehicle_id: toId(values.vehicle_id as RelationFieldValue) ?? null,
department_id: toId(values.department_id as RelationFieldValue) ?? null,
sales_person_id: toId(values.sales_person_id as RelationFieldValue) ?? null,
primary_technician_id: toId(values.primary_technician_id as RelationFieldValue) ?? null,
service_writer_id: toId(values.service_writer_id as RelationFieldValue) ?? null,
label_ids: values.label_ids || null,
check_in_date: values.check_in_date || null,
check_out_date: values.check_out_date || null,
delivery_date: values.delivery_date || null,
start_date: values.start_date || null,
end_date: values.end_date || null,
convert_invoice: values.convert_invoice || null,
has_start_or_delivery_date: values.has_start_or_delivery_date || null,
has_start_date: values.has_start_date || null,
has_delivery_date: values.has_delivery_date || null,
has_both_dates: values.has_both_dates || null,
}
}
// ── Filter Config (for useFilterParams) ──
export const jobCardFilterConfig: UseFilterParamsOptions<JobCardFilterValues> = {
schema: jobCardFilterSchema,
defaultValues,
paramsParsers,
mapParamsToFormValues,
mapFormValuesToParams,
}
// ── Filter Fields Component ──
function SectionLabel({ children }: { children: React.ReactNode }) {
return <p className="text-sm font-medium text-muted-foreground pt-2">{children}</p>
}
export function JobCardFilterFields() {
const api = useAuthApi()
const employeeMapOption = (item: any) => ({
value: String(item.id),
label: [item.first_name, item.last_name].filter(Boolean).join(" ") || `Employee #${item.id}`,
})
const customerMapOption = (item: any) => {
const name = [item.first_name, item.last_name].filter(Boolean).join(" ")
return {
value: String(item.id),
label: name || item.company_name || `Customer #${item.id}`,
}
}
const vehicleMapOption = (item: any) => ({
value: String(item.id),
label: [item.year, item.make, item.model].filter(Boolean).join(" ") || `Vehicle #${item.id}`,
})
return (
<>
{/* ── Relations ── */}
<SectionLabel>Relations</SectionLabel>
<RhfAsyncSelectField
name="customer_id"
label="Customer"
queryKey={[CUSTOMER_ROUTES.INDEX]}
listFn={() => api.customers.list({ per_page: 100 })}
mapOption={customerMapOption}
placeholder="All customers"
/>
<RhfAsyncSelectField
name="vehicle_id"
label="Vehicle"
queryKey={[VEHICLE_ROUTES.INDEX]}
listFn={() => api.vehicles.list({ per_page: 100 })}
mapOption={vehicleMapOption}
placeholder="All vehicles"
/>
<RhfAsyncSelectField
name="insurer_id"
label="Insurance Type"
queryKey={[INSURANCE_TYPE_ROUTES.INDEX]}
listFn={() => api.insuranceTypes.list({ per_page: 100 })}
mapOption={(item: any) => ({ value: String(item.id), label: item.title ?? item.name ?? `#${item.id}` })}
placeholder="All insurers"
/>
<RhfAsyncSelectField
name="department_id"
label="Department"
queryKey={[DEPARTMENT_ROUTES.INDEX]}
listFn={() => api.departments.list({ per_page: 100 })}
mapOption={(item: any) => ({ value: String(item.id), label: item.title ?? item.name ?? `#${item.id}` })}
placeholder="All departments"
/>
<Separator />
<SectionLabel>Assigned Staff</SectionLabel>
<RhfAsyncSelectField
name="sales_person_id"
label="Sales Person"
queryKey={[EMPLOYEE_ROUTES.INDEX, "sales_person"]}
listFn={() => api.employees.list({ per_page: 100 })}
mapOption={employeeMapOption}
placeholder="All sales persons"
/>
<RhfAsyncSelectField
name="primary_technician_id"
label="Primary Technician"
queryKey={[EMPLOYEE_ROUTES.INDEX, "technician"]}
listFn={() => api.employees.list({ per_page: 100 })}
mapOption={employeeMapOption}
placeholder="All technicians"
/>
<RhfAsyncSelectField
name="service_writer_id"
label="Service Writer"
queryKey={[EMPLOYEE_ROUTES.INDEX, "service_writer"]}
listFn={() => api.employees.list({ per_page: 100 })}
mapOption={employeeMapOption}
placeholder="All service writers"
/>
{/* ── Dates ── */}
<Separator />
<SectionLabel>Dates</SectionLabel>
<div className="grid grid-cols-2 gap-3">
<RhfDateField name="check_in_date" label="Check-in Date" />
<RhfDateField name="check_out_date" label="Check-out Date" />
</div>
<RhfDateField name="delivery_date" label="Delivery Date" />
<div className="grid grid-cols-2 gap-3">
<RhfDateField name="start_date" label="Start Date" />
<RhfDateField name="end_date" label="End Date" />
</div>
{/* ── Flags ── */}
<Separator />
<SectionLabel>Flags</SectionLabel>
<RhfCheckboxField name="convert_invoice" label="Convert to Invoice" />
<RhfCheckboxField name="has_start_or_delivery_date" label="Has Start or Delivery Date" />
<RhfCheckboxField name="has_start_date" label="Has Start Date" />
<RhfCheckboxField name="has_delivery_date" label="Has Delivery Date" />
<RhfCheckboxField name="has_both_dates" label="Has Both Dates" />
</>
)
}

93
apps/dashboard/shared/components/filter-drawer.tsx Normal file
View File

@ -0,0 +1,93 @@
"use client"
import React from "react"
import type { FieldValues, UseFormReturn } from "react-hook-form"
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetFooter,
} from "@/shared/components/ui/sheet"
import { Button } from "@/shared/components/ui/button"
import { Badge } from "@/shared/components/ui/badge"
import { Rhform } from "@/shared/components/form"
import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { Filter, FilterIcon, RotateCcwIcon } from "lucide-react"
type FilterDrawerProps<TFormValues extends FieldValues> = {
form: UseFormReturn<TFormValues>
isOpen: boolean
onOpenChange: (open: boolean) => void
onSubmit: (values: TFormValues) => void
onReset: () => void
activeFilterCount: number
title?: string
children: React.ReactNode
}
export function FilterDrawer<TFormValues extends FieldValues>({
form,
isOpen,
onOpenChange,
onSubmit,
onReset,
activeFilterCount,
title = "Filters",
children,
}: FilterDrawerProps<TFormValues>) {
return (
<Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetContent side="left" className="flex flex-col sm:max-w-md">
<SheetHeader>
<SheetTitle className="text-lg font-bold">
<FilterIcon className="mr-2 inline h-5 w-5" />
{title}</SheetTitle>
</SheetHeader>
<Rhform form={form} onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
<ScrollArea className="min-h-0 flex-1 px-4">
<div className="space-y-4 pb-4">
{children}
</div>
</ScrollArea>
<SheetFooter className="border-t">
<div className="flex w-full gap-2">
<Button type="button" variant="outline" className="flex-1" onClick={onReset}>
<RotateCcwIcon className="mr-2 h-4 w-4" />
Reset
</Button>
<Button type="submit" className="flex-1">
Apply Filters
{activeFilterCount > 0 && (
<Badge variant="secondary" className="ml-2 h-5 min-w-5 rounded-full px-1.5 text-xs">
{activeFilterCount}
</Badge>
)}
</Button>
</div>
</SheetFooter>
</Rhform>
</SheetContent>
</Sheet>
)
}
export function FilterTrigger({
onClick,
activeFilterCount,
}: {
onClick: () => void
activeFilterCount: number
}) {
return (
<Button variant="outline" size="sm" onClick={onClick} className="gap-2">
<FilterIcon className="h-4 w-4" />
Filters
{activeFilterCount > 0 && (
<Badge variant="secondary" className="h-5 min-w-5 rounded-full px-1.5 text-xs">
{activeFilterCount}
</Badge>
)}
</Button>
)
}

102
apps/dashboard/shared/hooks/use-filter-params.ts Normal file
View File

@ -0,0 +1,102 @@
"use client"
import { useState, useMemo, useCallback } from "react"
import { useForm, type DefaultValues, type FieldValues, type UseFormReturn } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { useQueryStates, useQueryState, parseAsInteger } from "nuqs"
import type { ZodType } from "zod"
export type UseFilterParamsOptions<TFormValues extends FieldValues> = {
schema: ZodType<TFormValues, any, any>
defaultValues: DefaultValues<TFormValues>
paramsParsers: Record<string, any>
mapParamsToFormValues: (params: Record<string, any>) => Partial<TFormValues>
mapFormValuesToParams: (values: TFormValues) => Record<string, any>
}
export type UseFilterParamsReturn<TFormValues extends FieldValues> = {
form: UseFormReturn<TFormValues>
isOpen: boolean
open: () => void
close: () => void
onSubmit: (values: TFormValues) => void
reset: () => void
appliedParams: Record<string, unknown>
activeFilterCount: number
}
export function useFilterParams<TFormValues extends FieldValues>({
schema,
defaultValues,
paramsParsers,
mapParamsToFormValues,
mapFormValuesToParams,
}: UseFilterParamsOptions<TFormValues>): UseFilterParamsReturn<TFormValues> {
const [params, setParams] = useQueryStates(paramsParsers)
const [, setPage] = useQueryState("page", parseAsInteger)
const [isOpen, setIsOpen] = useState(false)
const form = useForm<TFormValues>({
resolver: zodResolver(schema) as any,
defaultValues,
})
const open = useCallback(() => {
const formValues = mapParamsToFormValues(params)
form.reset({ ...defaultValues, ...formValues } as any)
setIsOpen(true)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [params])
const close = useCallback(() => {
setIsOpen(false)
}, [])
const onSubmit = useCallback((values: TFormValues) => {
const mapped = mapFormValuesToParams(values)
const fullParams: Record<string, any> = {}
for (const key of Object.keys(paramsParsers)) {
fullParams[key] = mapped[key] ?? null
}
setParams(fullParams)
setPage(1)
setIsOpen(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mapFormValuesToParams, paramsParsers, setParams, setPage])
const reset = useCallback(() => {
const nullParams: Record<string, null> = {}
for (const key of Object.keys(paramsParsers)) {
nullParams[key] = null
}
setParams(nullParams)
setPage(1)
form.reset(defaultValues)
setIsOpen(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [paramsParsers, setParams, setPage])
const appliedParams = useMemo(() => {
const result: Record<string, unknown> = {}
for (const [key, value] of Object.entries(params)) {
if (value === null || value === undefined || value === "") continue
if (Array.isArray(value) && value.length === 0) continue
if (typeof value === "boolean" && value === false) continue
result[key] = value
}
return result
}, [params])
const activeFilterCount = Object.keys(appliedParams).length
return {
form,
isOpen,
open,
close,
onSubmit,
reset,
appliedParams,
activeFilterCount,
}
}

4
packages/api/src/api.ts
View File

@ -54,6 +54,8 @@ import { ServiceGroupPartsClient } from "./clients/service-group-parts"
import { SettingsClient } from "./clients/settings" import { SettingsClient } from "./clients/settings"
import { ConfigurationsClient } from "./clients/configurations" import { ConfigurationsClient } from "./clients/configurations"
import { AutoGenerateClient } from "./clients/auto-generate" import { AutoGenerateClient } from "./clients/auto-generate"
import { ExpenseItemsClient } from "./clients/expense-items"
import { InventoryCategoriesClient } from "./clients/inventory-categories"
export function createApi(options?: ApiClientOptions) { export function createApi(options?: ApiClientOptions) {
return { return {
@ -112,6 +114,8 @@ export function createApi(options?: ApiClientOptions) {
settings: new SettingsClient(undefined, options), settings: new SettingsClient(undefined, options),
configurations: new ConfigurationsClient(undefined, options), configurations: new ConfigurationsClient(undefined, options),
autoGenerate: new AutoGenerateClient(undefined, options), autoGenerate: new AutoGenerateClient(undefined, options),
expenseItems: new ExpenseItemsClient(undefined, options),
inventoryCategories: new InventoryCategoriesClient(undefined, options),
} }
} }

17
packages/api/src/clients/expense-items.ts Normal file
View File

@ -0,0 +1,17 @@
import { CrudClient } from "../infra/crud-client"
import type { ApiClientOptions } from "../infra/client"
import type { ApiPath } from "../infra/types"
export const EXPENSE_ITEM_ROUTES = {
INDEX: "/api/expense-items",
BY_ID: "/api/expense-items/{id}",
} as const satisfies Record<string, ApiPath>
export class ExpenseItemsClient extends CrudClient<
typeof EXPENSE_ITEM_ROUTES.INDEX,
typeof EXPENSE_ITEM_ROUTES.BY_ID
> {
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
super(baseUrl, defaultOptions, EXPENSE_ITEM_ROUTES.INDEX, EXPENSE_ITEM_ROUTES.BY_ID)
}
}

2
packages/api/src/clients/index.ts
View File

@ -53,3 +53,5 @@ export { ServiceGroupPartsClient, SERVICE_GROUP_PART_ROUTES } from "./service-gr
export { SettingsClient, SETTINGS_ROUTES } from "./settings" export { SettingsClient, SETTINGS_ROUTES } from "./settings"
export { ConfigurationsClient, CONFIGURATION_ROUTES } from "./configurations" export { ConfigurationsClient, CONFIGURATION_ROUTES } from "./configurations"
export { AutoGenerateClient, AUTO_GENERATE_ROUTES } from "./auto-generate" export { AutoGenerateClient, AUTO_GENERATE_ROUTES } from "./auto-generate"
export { ExpenseItemsClient, EXPENSE_ITEM_ROUTES } from "./expense-items"
export { InventoryCategoriesClient, INVENTORY_CATEGORY_ROUTES } from "./inventory-categories"

17
packages/api/src/clients/inventory-categories.ts Normal file
View File

@ -0,0 +1,17 @@
import { CrudClient } from "../infra/crud-client"
import type { ApiClientOptions } from "../infra/client"
import type { ApiPath } from "../infra/types"
export const INVENTORY_CATEGORY_ROUTES = {
INDEX: "/api/inventory-categories",
BY_ID: "/api/inventory-categories/{id}",
} as const satisfies Record<string, ApiPath>
export class InventoryCategoriesClient extends CrudClient<
typeof INVENTORY_CATEGORY_ROUTES.INDEX,
typeof INVENTORY_CATEGORY_ROUTES.BY_ID
> {
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
super(baseUrl, defaultOptions, INVENTORY_CATEGORY_ROUTES.INDEX, INVENTORY_CATEGORY_ROUTES.BY_ID)
}
}

5
packages/api/src/contracts/enums.ts
View File

@ -107,6 +107,10 @@ export type ServiceGroupRateType = (typeof ServiceGroupRateType)[number];
// ⚙️ Configurations // ⚙️ Configurations
export const SellRatesTaxInclusive = ['Tax Inclusive', 'Tax Exclusive'] as const; export const SellRatesTaxInclusive = ['Tax Inclusive', 'Tax Exclusive'] as const;
export type SellRatesTaxInclusive = (typeof SellRatesTaxInclusive)[number]; export type SellRatesTaxInclusive = (typeof SellRatesTaxInclusive)[number];
// Tables
export const Tables= ['bills', 'expenses', 'invoices', 'job_cards', 'credit_notes', 'vendor_credits'] as const;
export type Tables = (typeof Tables)[number];
export const GiveDiscounts = ['no', 'line_item_level', 'transaction_level'] as const; export const GiveDiscounts = ['no', 'line_item_level', 'transaction_level'] as const;
export type GiveDiscounts = (typeof GiveDiscounts)[number]; export type GiveDiscounts = (typeof GiveDiscounts)[number];
@ -116,3 +120,4 @@ export type PurchaseRatesTaxInclusive = (typeof PurchaseRatesTaxInclusive)[numbe
export const ReceiveDiscounts = ['no', 'line_item_level', 'transaction_level'] as const; export const ReceiveDiscounts = ['no', 'line_item_level', 'transaction_level'] as const;
export type ReceiveDiscounts = (typeof ReceiveDiscounts)[number]; export type ReceiveDiscounts = (typeof ReceiveDiscounts)[number];