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

Compare commits

base: humam/garage-erp:11db1e6941a1287141eb16c232ebe4028fb11b7c
Branches Tags
humam/garage-erp:master humam/garage-erp:dev humam/garage-erp:employee-setup humam/garage-erp:fix/back-front-validation-alignment humam/garage-erp:main
..
compare: humam/garage-erp:main
Branches Tags
humam/garage-erp:dev humam/garage-erp:employee-setup humam/garage-erp:fix/back-front-validation-alignment humam/garage-erp:main humam/garage-erp:master
1 Commits
11db1e6941 .. main
Author SHA1 Message Date
mohammadkhayata 174cdd6323 init 2026-03-27 16:03:58 +03:00
433 changed files with 19652 additions and 106621 deletions
Expand all files Collapse all files
.github/skills/api-enums-reference/SKILL.md
-76
View File
@@ -1,76 +0,0 @@
---
name: api-enums-reference
description: "Use the central API enums file as the source of truth for enum values in this project. Use when: adding enum fields, updating enum options, creating form selects, typing status/discount/rate fields, syncing backend enum changes, or avoiding duplicated hardcoded enum literals."
---
# API Enums Reference
Use this skill whenever work touches enum-like fields in API clients, schemas, forms, table filters, or page logic.
## Source of Truth
All shared enum values and enum union types must come from:
- packages/api/src/contracts/enums.ts
Do not recreate enum arrays inline when an equivalent enum already exists in this file.
## Rules
1. Reuse before creating.
Search and import from `@garage/api` exports (or local contracts path inside packages/api) before adding new literals.
2. Keep runtime and type together.
For every enum, keep this pattern in `enums.ts`:
```ts
export const ExampleStatus = ['a', 'b'] as const;
export type ExampleStatus = (typeof ExampleStatus)[number];
```
3. Preserve backend values exactly.
Enum string values are case- and space-sensitive; keep exact spelling from backend migrations/spec.
4. Avoid duplicate synonyms.
If two domains share the same canonical values, prefer reusing an existing enum unless domain separation is intentional.
5. Update centrally first.
When backend enum options change, update `packages/api/src/contracts/enums.ts` first, then update consuming UI/API code.
6. Prefer imports in forms and schemas.
Use central enums for select options and for typed payload/status fields instead of hardcoded string unions.
## Workflow
1. Identify the enum field and backend values.
2. Check `packages/api/src/contracts/enums.ts` for an existing enum.
3. If found, import and use it.
4. If missing, add a new const+type pair in `enums.ts`.
5. Update consumers to reference the central enum.
6. Verify there are no duplicated literal arrays for the same field.
## Examples
```ts
import { InvoiceStatus, type InvoiceStatus as InvoiceStatusType } from '@garage/api'
const statusOptions = InvoiceStatus
type Payload = {
status: InvoiceStatusType
}
```
```ts
import { DiscountType } from '@garage/api'
const discountOptions = DiscountType.map((value) => ({
label: value,
value,
}))
```
## Notes
- If a module needs a presentation-specific label, map from the central enum value instead of changing raw enum literals.
- If backend adds/removes values, keep API and dashboard aligned in the same change set.
.github/skills/crud-dialog/SKILL.md
-304
View File
@@ -1,304 +0,0 @@
---
name: crud-dialog
description: "Create CRUD dialogs for managing lookup/reference resources inline (inside a dialog) rather than a full page. Use when: adding a config/manage button next to a select field, building an inline CRUD for a simple lookup entity (e.g. insurance types, payment terms, categories), embedding list+create+edit+delete inside a modal. Uses the shared CrudDialog component and useCrudDialog hook."
---
# CRUD Dialog Generator
Create fully functional CRUD dialogs that embed list + create + edit + delete inside a modal dialog. This is the in-dialog counterpart of the page-level `ResourcePage` pattern. Ideal for managing simple lookup/reference entities without navigating away from the current form.
## When to Use
- User wants a config/settings button next to a select field to manage its options
- User wants to manage a simple lookup entity (e.g. insurance types, categories, tags) inline
- The resource is simple enough that a full page is overkill
- User says "CRUD in a dialog", "manage inside a modal", "config button", "inline CRUD"
## When NOT to Use
- The resource is complex with many fields, relations, or tabs → use **crud-page** skill instead
- The resource already has a dedicated page → link to it instead
- Only creation is needed (no listing/editing) → use `RhfAsyncSelectField` with `createForm` prop instead
## Architecture
The CRUD Dialog system has two layers:
| Layer | File | Purpose |
|-------|------|---------|
| **Hook** | `shared/components/crud-dialog/use-crud-dialog.ts` | Local state for pagination, sorting, form open/close, delete confirmation. No URL pollution. |
| **Component** | `shared/components/crud-dialog/crud-dialog.tsx` | Renders trigger button → Dialog with DataTable (list view) ↔ Form (create/edit view). Uses `useCrudDialog` internally. |
### Key Differences from ResourcePage
| Aspect | ResourcePage | CrudDialog |
|--------|-------------|------------|
| Renders in | Full page | Dialog modal |
| Pagination state | URL query params (`nuqs`) | Local `useState` (no URL pollution) |
| Form rendering | `FormDialog` component | Inline view swap (list ↔ form) |
| Trigger | Page navigation | Button click (settings icon by default) |
| Use case | Primary resource management | Lookup/reference entity management |
## Procedure
### Step 1: Ensure API Client Exists
The resource needs a client with `list`, `create`, `update`, `destroy` methods. Check `packages/api/src/clients/`. If missing, create one following the **crud-page** skill's Step 2.
### Step 2: Create the Resource Form
Create a simple form component for the resource. This is a lightweight form (no `useResourceForm` needed for simple entities).
**File**: `apps/dashboard/modules/<parent-module>/<resource>-form.tsx`
**Template**:
```tsx
"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 schema = z.object({
name: z.string().min(1, "Name is required"),
// Add more fields as needed
})
type FormValues = z.infer<typeof schema>
type Props = {
resourceId?: string | null
initialData?: any
onSuccess?: () => void
}
export function <Resource>Form({ resourceId, initialData, onSuccess }: Props) {
const api = useAuthApi()
const isEditing = !!resourceId
const form = useForm<FormValues>({
resolver: zodResolver(schema),
defaultValues: { name: "" },
})
// Pre-fill when editing
useEffect(() => {
if (initialData) {
const d = initialData?.data ?? initialData
form.reset({ name: d.name ?? "" })
}
}, [initialData, form])
const handleSubmit = async (values: FormValues) => {
try {
const promise = isEditing
? api.<resource>.update(resourceId!, { title: values.name } as any)
: api.<resource>.create({ title: values.name } as any)
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="name" label="Name" placeholder="e.g. My Item" 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>
)
}
```
### Step 3: Create the CrudDialog Instance
Wire the form into a `CrudDialog` component.
**File**: `apps/dashboard/modules/<parent-module>/<resource>-crud-dialog.tsx`
**Template**:
```tsx
"use client"
import { CrudDialog } from "@/shared/components/crud-dialog"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { useAuthApi } from "@/shared/useApi"
import { <RESOURCE>_ROUTES } from "@garage/api"
import { <Resource>Form } from "./<resource>-form"
export function <Resource>CrudDialog() {
const api = useAuthApi()
return (
<CrudDialog
title="<Resource Label>"
queryKey={[<RESOURCE>_ROUTES.INDEX]}
getClient={() => api.<resource>}
resourceLabel="<resource label>"
columns={() => [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
},
// Add more columns as needed
]}
renderForm={({ resourceId, initialData, onSuccess }) => (
<<Resource>Form
resourceId={resourceId}
initialData={initialData}
onSuccess={onSuccess}
/>
)}
/>
)
}
```
### Step 4: Wire into the Parent Form
Place the CrudDialog trigger next to the corresponding select field. The pattern is to add a custom label row with the config button:
```tsx
import { <Resource>CrudDialog } from "./<resource>-crud-dialog"
// Inside the form JSX:
<div>
<div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium"><Field Label></span>
<<Resource>CrudDialog />
</div>
<RhfAsyncSelectField
name="<field_name>"
label=""
placeholder="Select..."
queryKey={[<RESOURCE>_ROUTES.INDEX]}
listFn={() => api.<resource>.list()}
mapOption={mapLookupOption}
{...STORE_OBJECT}
/>
</div>
```
**Key**: Set `label=""` on the `RhfAsyncSelectField` since the label is rendered manually above with the config button.
## CrudDialog Props Reference
```typescript
type CrudDialogProps<TClient> = {
/** Dialog title shown in the header */
title: string
/** React Query cache key */
queryKey: string[]
/** Function returning the API client instance */
getClient: () => TClient
/** Human-readable name for toast messages (e.g. "insurance type") */
resourceLabel?: string
/** Table columns definition */
columns: (helpers: {
openEdit: (row: any) => void
handleDelete: (row: any) => Promise<void>
}) => ColumnDef<any>[]
/** Render create/edit form */
renderForm: (props: {
resourceId: string | null
initialData: any
onSuccess: () => void
}) => React.ReactNode
/** Optional custom trigger element (defaults to Settings2 icon) */
trigger?: React.ReactNode
/** CSS class for the default trigger button */
triggerClassName?: string
}
```
## useCrudDialog Hook API
For advanced use cases where you need more control, use the hook directly:
```typescript
const crud = useCrudDialog({
queryKey: [ROUTES.INDEX],
getClient: () => api.resource,
resourceLabel: "item",
})
// Returns:
crud.items // Current page data
crud.isLoading // Query loading state
crud.pagination // { page, pageSize, pageCount, total }
crud.sorting // SortingState
crud.handleChange // DataViewChangeEvent handler
crud.isFormOpen // Whether form view is active
crud.editingId // ID being edited (null for create)
crud.editingItem // Full item data being edited
crud.openCreate() // Switch to create form
crud.openEdit(row) // Switch to edit form
crud.closeForm() // Back to list view
crud.handleDelete(row) // Confirm + delete
crud.handleFormSuccess() // Invalidate + close form
crud.invalidateQuery() // Refresh list data
```
## Real Example: Insurance Type
See the implementation in `apps/dashboard/modules/job-cards/`:
- [insurance-type-form.tsx](../../apps/dashboard/modules/job-cards/insurance-type-form.tsx) — Simple form with one "name" field
- [insurance-type-crud-dialog.tsx](../../apps/dashboard/modules/job-cards/insurance-type-crud-dialog.tsx) — CrudDialog wiring
- [job-card-form.tsx](../../apps/dashboard/modules/job-cards/job-card-form.tsx) — Usage next to the insurance type select field
## Naming Conventions
| Item | Pattern | Example |
|------|---------|---------|
| Form file | `modules/<parent>/<resource>-form.tsx` | `job-cards/insurance-type-form.tsx` |
| CrudDialog file | `modules/<parent>/<resource>-crud-dialog.tsx` | `job-cards/insurance-type-crud-dialog.tsx` |
| Form component | `<Resource>Form` | `InsuranceTypeForm` |
| CrudDialog component | `<Resource>CrudDialog` | `InsuranceTypeCrudDialog` |
## Imports Cheat Sheet
```tsx
// CrudDialog component
import { CrudDialog } from "@/shared/components/crud-dialog"
// Table column header
import { ColumnHeader } from "@/shared/data-view/table-view"
// API
import { useAuthApi } from "@/shared/useApi"
import { <RESOURCE>_ROUTES } from "@garage/api"
// Form components (for the resource form)
import { Rhform, RhfTextField } from "@/shared/components/form"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "sonner"
```
.github/skills/crud-page/SKILL.md
+2 -2
View File
@@ -153,8 +153,8 @@ const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) =
// Page
import { ResourcePage } from '@/shared/data-view/resource-page'
import { ColumnHeader } from '@/shared/data-view/table-view'
import type { <Resource>Client } from '@garage/api'
import { <RESOURCE>_ROUTES } from '@garage/api'
import type { <Resource>Client } from '@repo/api'
import { <RESOURCE>_ROUTES } from '@repo/api'
// Form
import { Rhform, RhfTextField, RhfSelectField, RhfAsyncSelectField } from "@/shared/components/form"
.github/skills/crud-page/references/form.md
+1 -1
View File
@@ -33,7 +33,7 @@ import {
<feature>FormSchema,
type <Feature>FormValues,
} from "./<feature>.schema"
import { <RESOURCE>_ROUTES } from "@garage/api"
import { <RESOURCE>_ROUTES } from "@repo/api"
// ── Constants ──
.github/skills/crud-page/references/page.md
+5 -5
View File
@@ -14,8 +14,8 @@ Where `<section>` is the navigation section (e.g. `sales`, `inventory`, `hr`) an
import { ResourcePage } from '@/shared/data-view/resource-page'
import { ColumnHeader } from '@/shared/data-view/table-view'
import { <Feature>Form } from '@/modules/<feature>/<feature>-form'
import { <RESOURCE>_ROUTES } from '@garage/api'
import type { <Resource>Client } from '@garage/api'
import { <RESOURCE>_ROUTES } from '@repo/api'
import type { <Resource>Client } from '@repo/api'
export default function <Features>Page() {
return (
@@ -119,8 +119,8 @@ actionsColumn(),
import { ResourcePage } from '@/shared/data-view/resource-page'
import { ColumnHeader } from '@/shared/data-view/table-view'
import { CustomerForm } from '@/modules/customers/customer-form'
import { CUSTOMER_ROUTES } from '@garage/api'
import type { CustomersClient } from '@garage/api'
import { CUSTOMER_ROUTES } from '@repo/api'
import type { CustomersClient } from '@repo/api'
import { Building2Icon, UserIcon } from 'lucide-react'
export default function CustomersPage() {
@@ -184,7 +184,7 @@ import { DashboardHeader } from '@/base/components/layout/dashboard'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
import { ColumnHeader, DataTable, useDataTableQuery } from '@/shared/data-view/table-view'
import { useAuthApi } from '@/shared/useApi'
import { <RESOURCE>_ROUTES } from '@garage/api'
import { <RESOURCE>_ROUTES } from '@repo/api'
import type { ColumnDef } from '@tanstack/react-table'
const columns: ColumnDef<any>[] = [
.github/skills/date-time-pickers/SKILL.md
-86
View File
@@ -1,86 +0,0 @@
---
name: date-time-pickers
description: "Use RhfDateField and RhfTimeField (shadcn Calendar/Popover-based) for all date and time inputs in forms. Use when: adding date fields, adding time fields, replacing `type=\"date\"` or `type=\"time\"` RhfTextField inputs, building any form that captures a date or time value."
---
# Date & Time Pickers
Always use the shadcn-based picker components for date and time fields. Never use `<RhfTextField type="date">` or `<RhfTextField type="time">`.
## Components
| Use For | Component | Import |
|---|---|---|
| Date fields (YYYY-MM-DD) | `RhfDateField` | `@/shared/components/form` |
| Time fields (HH:MM:SS) | `RhfTimeField` | `@/shared/components/form` |
## RhfDateField
Renders a shadcn Calendar inside a Popover. Value is a `string` in `"YYYY-MM-DD"` format.
```tsx
import { RhfDateField } from "@/shared/components/form"
<RhfDateField name="check_in_date" label="Check-in Date" />
```
**Schema type**: `z.string().optional()` (stores `"YYYY-MM-DD"`)
**Default value**: `""` for empty, or `new Date().toISOString().split("T")[0]` for today.
**`mapToFormValues`**: `d.check_in_date ? d.check_in_date.split("T")[0] : ""`
**`mapFormToPayload`**: `values.check_in_date || undefined`
## RhfTimeField
Renders an HH / MM / SS spinner inside a Popover. Value is a `string` in `"HH:MM:SS"` format.
```tsx
import { RhfTimeField } from "@/shared/components/form"
// With seconds (default)
<RhfTimeField name="check_in_time" label="Check-in Time" withSeconds />
// Without seconds
<RhfTimeField name="check_in_time" label="Check-in Time" />
```
**Props**:
- `withSeconds?: boolean` — show the SS spinner (default `true`)
- `placeholder?: string` — trigger button placeholder text
**Schema type**: `z.string().optional()` (stores `"HH:MM:SS"` or `"HH:MM"`)
**Default value for current time**:
```ts
(() => {
const n = new Date()
return `${String(n.getHours()).padStart(2,"0")}:${String(n.getMinutes()).padStart(2,"0")}:${String(n.getSeconds()).padStart(2,"0")}`
})()
```
**`mapToFormValues`** (API returns `"HH:MM"` or ISO datetime):
- If ISO: `d.check_in_time ? d.check_in_time.split("T")[1]?.slice(0, 8) ?? "" : ""`
- If plain time string: `d.check_in_time ?? ""`
**`mapFormToPayload`**: `values.check_in_time || undefined`
## Underlying Controls (non-RHF use)
If you need to use the pickers outside of RHF:
```tsx
import { DatePickerField, TimePickerField } from "@/shared/components/form"
<DatePickerField value={date} onChange={setDate} placeholder="Select date" />
<TimePickerField value={time} onChange={setTime} withSeconds />
```
## File Locations
- Control: `apps/dashboard/shared/components/form/controls/date-picker-field.tsx`
- Control: `apps/dashboard/shared/components/form/controls/time-picker-field.tsx`
- RHF wrapper: `apps/dashboard/shared/components/form/fields/rhf-date-field.tsx`
- RHF wrapper: `apps/dashboard/shared/components/form/fields/rhf-time-field.tsx`
- Exports: `apps/dashboard/shared/components/form/index.ts`
.github/skills/resource-details-page/SKILL.md
-583
View File
@@ -1,583 +0,0 @@
---
name: resource-details-page
description: "Create resource details pages with tabbed layouts, context providers, and sub-pages for the carage-erp dashboard. Use when: building a details/show page for a resource, adding tabs to a resource detail view, creating a nested [id] layout, scaffolding sub-pages (owners, documents, estimates), implementing resource context providers, or adding actions menus to detail headers."
---
# Resource Details Page
Create fully structured resource details pages with tabbed navigation, shared context, and reusable sub-page patterns. This skill covers: layout → context provider → general-info component → actions component → tab sub-pages.
## When to Use
- User asks to create a details/show page for a resource (e.g. "create a customer details page")
- User asks to add tabs to a resource (e.g. "add an invoices tab to the vehicle page")
- User asks to scaffold a `[id]` layout with nested pages
- User wants sub-pages that share parent resource data (e.g. vehicle → estimates)
- User wants an actions dropdown (edit/delete) on a resource header
## Reference Implementation
The canonical implementation is the **vehicle details page** at:
```
app/(authenticated)/sales/vehicles/[id]/
├── layout.tsx ← Server component: fetches resource, renders DashboardDetailsPage
├── page.tsx ← Details tab: server component, read-only info display
├── owners/page.tsx ← Sub-tab: client component, manual DataTable
├── documents/page.tsx ← Sub-tab: client component, manual DataTable + upload
├── estimates/page.tsx ← Sub-tab: client component, ResourcePage with extraParams
```
Module files at:
```
modules/vehicles/
├── vehicle.schema.ts
├── vehicle-form.tsx
├── vehicle-general-info.tsx ← Read-only info cards for Details tab
├── vehicle-actions.tsx ← Dropdown menu (Edit/Delete)
├── vehicle-context.tsx ← React context for sharing resource data to sub-pages
└── vehicle-document-form.tsx ← Document-specific form (optional)
```
## Procedure
### Step 1: Create the Resource Context
Create `modules/<resource>/<resource>-context.tsx`:
This context allows child tab pages to access the parent resource's identity (id + display label) without re-fetching. This is essential for sub-pages that create related records (e.g. creating an estimate pre-populated with the parent vehicle).
```tsx
"use client"
import { createContext, useContext } from "react"
type <Resource>ContextValue = {
id: string
label: string
}
const <Resource>Context = createContext<<Resource>ContextValue | null>(null)
export function <Resource>Provider({
<resource>,
children,
}: {
<resource>: <Resource>ContextValue
children: React.ReactNode
}) {
return (
<<Resource>Context.Provider value={<resource>}>
{children}
</<Resource>Context.Provider>
)
}
export function use<Resource>() {
return useContext(<Resource>Context)
}
```
**Key rules:**
- Always a `"use client"` component (context requires client React)
- Keep the context value minimal — only `id` and `label`
- `label` is a human-readable display string built from the resource's key fields
- The hook returns `null` when used outside the provider (no throw — graceful fallback)
- Do NOT store the full resource object — only identity data needed by sub-pages
### Step 2: Create the Actions Component
Create `modules/<resource>/<resource>-actions.tsx`:
This is a dropdown menu rendered in the `DashboardDetailsPage` header for resource-level actions.
```tsx
"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 <Resource>ActionsProps = {
<resource>Id: string
}
export function <Resource>Actions({ <resource>Id }: <Resource>ActionsProps) {
const api = useAuthApi()
const router = useRouter()
const handleEdit = () => {
router.push(`/<section>/<resources>/${<resource>Id}/edit`)
}
const handleDelete = async () => {
await api.<resources>.destroy(<resource>Id)
router.push("/<section>/<resources>")
}
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>
)
}
```
**Key rules:**
- Always a `"use client"` component
- Accepts `<resource>Id: string` as the only required prop
- Uses `useAuthApi()` for API calls, `useRouter()` for navigation
- `handleDelete` navigates back to the list page after deletion
- Add confirmation dialog for destructive actions when appropriate
### Step 3: Create the General Info Component
Create `modules/<resource>/<resource>-general-info.tsx`:
A read-only display component for the **Details tab** (the default `page.tsx`). Uses Card-based layout with icon-labeled fields.
```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator"
// Import relevant icons from lucide-react
type <Resource>Data = {
// Type all fields from the API response
id?: number
name?: string
// ...
}
type <Resource>GeneralInfoProps = {
<resource>: <Resource>Data
}
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>
)
}
export function <Resource>GeneralInfo({ <resource> }: <Resource>GeneralInfoProps) {
return (
<div className="grid gap-6 md:grid-cols-2">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{/* Icon */} Section Title
</CardTitle>
</CardHeader>
<CardContent className="grid gap-4">
<div className="grid gap-4 sm:grid-cols-2">
<InfoItem icon={...} label="Field Name" value={<resource>.field} />
{/* More InfoItems */}
</div>
</CardContent>
</Card>
{/* More Cards for other field groups */}
</div>
)
}
```
**Key rules:**
- This is a **server component** (no `"use client"`) — it receives data as props
- Group related fields into separate `Card` sections
- Use the `InfoItem` helper for consistent icon+label+value layout
- Show `"—"` dash for missing/null values
- Use `Badge` for status-like fields, `Separator` between groups
### Step 4: Create the Layout (Server Component)
Create `app/(authenticated)/<section>/<resources>/[id]/layout.tsx`:
This is the **central orchestrator** — it fetches the resource, renders the tabbed shell, and wraps children with the context provider.
```tsx
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
import { <Resource>Provider } from '@/modules/<resources>/<resource>-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 <resource> = await api.<resources>.getById(id)
const title = /* Build display title from resource fields */ ''
const <resource>Label = /* Build label for context, e.g. combining key fields */ ''
return (
<>
<<Resource>Provider <resource>={{ id, label: <resource>Label || title }}>
<DashboardDetailsPage
className="p-0 lg:p-0"
avatarSrc={<resource>.data?.image_url || ""}
title={title}
description={/* subtitle text */}
backHref="/<section>/<resources>"
actions={<<Resource>Actions <resource>Id={id} />}
tabs={[
{ href: `/<section>/<resources>/${id}`, label: 'Details' },
{ href: `/<section>/<resources>/${id}/<sub-tab>`, label: '<Sub Tab>' },
// More tabs...
]}
>
{props.children}
</DashboardDetailsPage>
</<Resource>Provider>
</>
)
}
```
**Key rules:**
- **Server component** (no `"use client"`) — uses `await` for data fetching
- Params are `Promise<{ id: string }>` in Next.js 15+ (use `await props.params`)
- Uses `getServerApi()` from `@garage/api/server` for server-side API calls
- `<Resource>Provider` wraps the entire `DashboardDetailsPage` so all tab children can access context
- `backHref` points to the resource list page
- `tabs[0].href` is always the base `/<section>/<resources>/${id}` (Details tab)
- `className="p-0 lg:p-0"` removes default padding — sub-pages handle their own spacing
**`DashboardDetailsPage` props:**
| Prop | Type | Purpose |
|---|---|---|
| `title` | `string` | Primary heading in the header |
| `description` | `string?` | Subtitle text below the title |
| `avatarSrc` | `string?` | Avatar image URL |
| `avatarFallback` | `string?` | Fallback text for avatar (e.g. initials) |
| `icon` | `ReactNode?` | Icon instead of avatar |
| `actions` | `ReactNode?` | Action buttons in header (right side) |
| `backHref` | `string?` | Back navigation URL |
| `tabs` | `{ href, label }[]?` | Route-based tab navigation |
| `className` | `string?` | Additional classes for content area |
| `children` | `ReactNode` | Active tab content (Next.js route children) |
### Step 5: Create the Details Tab (Default Page)
Create `app/(authenticated)/<section>/<resources>/[id]/page.tsx`:
```tsx
import { getServerApi } from '@garage/api/server'
import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-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 <resource> = await api.<resources>.getById(id)
if (!<resource>.data) {
return <div className="text-muted-foreground"><Resource> not found.</div>
}
return (
<DashboardPage header={null}>
<<Resource>GeneralInfo <resource>={<resource>.data} />
</DashboardPage>
)
}
```
**Key rules:**
- **Server component** — fetches resource data on the server
- Uses `DashboardPage` wrapper with `header={null}` (the layout already has the header)
- Renders the general-info component with the full resource data
- Shows a fallback message if the resource is not found
### Step 6: Create Sub-Tab Pages
Choose the appropriate pattern based on the sub-tab's requirements:
#### Pattern A: ResourcePage with `extraParams` (Preferred for CRUD sub-tabs)
Use when the sub-tab needs full CRUD for a **related** resource filtered by the parent ID.
```tsx
"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 { <Related>Form } from '@/modules/<related>/<related>-form'
import { <RELATED>_ROUTES } from '@garage/api'
import type { <Related>Client } from '@garage/api'
import { use<Resource> } from '@/modules/<resource>/<resource>-context'
export default function <Resource><Related>Page({ params }: { params: Promise<{ id: string }> }) {
const { id: <resource>Id } = use(params)
const <resource> = use<Resource>()
return (
<ResourcePage<<Related>Client>
toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
<FormDialog title="<Related>">
{(resourceId) => (
<<Related>Form
resourceId={resourceId}
initialData={{
<resource>: <resource>
? { value: <resource>.id, label: <resource>.label }
: null,
}}
onSuccess={() => {
closeDialog();
invalidateQuery();
}}
/>
)}
</FormDialog>
)}
pageTitle="<Resource> <Related>s"
routeKey={<RELATED>_ROUTES.INDEX}
getClient={(api) => api.<related>s}
extraParams={{ <resource>_id: <resource>Id }}
header={null}
columns={({ actionsColumn }) => [
// Column definitions...
actionsColumn(),
]}
/>
)
}
```
**Key rules:**
- `"use client"` — uses hooks (`use()`, `use<Resource>()`)
- Uses `use(params)` (React 19) to unwrap the params Promise
- Consumes the parent context via `use<Resource>()` to pre-populate the form's relation field
- `extraParams={{ <resource>_id: <resource>Id }}` filters the list to only show related records
- `header={null}` — the layout already provides the header
- Pass `initialData` with the parent resource as a relation field `{ value, label }`
#### Pattern B: Manual DataTable (For custom interactions)
Use when the sub-tab needs non-standard behavior (link/unlink, file uploads, custom mutations).
```tsx
"use client"
import { useParams } from "next/navigation"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
export default function <Resource><Tab>Page() {
const { id: <resource>Id } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const queryKey = ["<resource>-<tab>", <resource>Id]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.<resources>.get<Tab>(<resource>Id),
})
// Custom mutations (link, unlink, upload, etc.)
return (
<DashboardPage header={null}>
<DataTable
columns={columns}
data={data?.data ?? []}
isLoading={isLoading}
/>
</DashboardPage>
)
}
```
**Key rules:**
- Use `useParams()` or `use(params)` to get the parent resource ID
- Custom query key includes the parent resource ID
- Use `DashboardPage header={null}` as wrapper
- Implement custom mutations with `useMutation` + `useQueryClient` for cache invalidation
## API Integration
### Server-Side (Layout + Details Tab)
```tsx
import { getServerApi } from '@garage/api/server'
// In an async server component:
const api = await getServerApi()
const resource = await api.<resources>.getById(id)
```
- `getServerApi()` reads auth cookies server-side — no token passing needed
- Returns typed responses based on OpenAPI schema
- Used in `layout.tsx` and the default `page.tsx` (Details tab)
### Client-Side (Sub-Tab Pages)
```tsx
import { useAuthApi } from "@/shared/useApi"
// In a client component:
const api = useAuthApi()
// Then use with React Query:
useQuery({ queryFn: () => api.<resources>.list() })
```
- `useAuthApi()` returns the API client with the auth token from the store
- Always use with React Query (`useQuery`, `useMutation`) for caching and state management
- `ResourcePage` handles this internally — only needed for manual DataTable pages
### Client Types
API clients live in `packages/api/src/clients/<resource>.ts`. Each exports:
- `<RESOURCE>_ROUTES` — route constants (`INDEX`, `BY_ID`, etc.)
- `<Resource>Client` — class with typed methods
These are re-exported from `@garage/api` for use in the dashboard.
## Component Reusability
### Reusable Across Resources
| Component | Location | Reuse Pattern |
|---|---|---|
| `DashboardDetailsPage` | `@/base/components/layout/dashboard` | Used by every `[id]/layout.tsx` |
| `DashboardPage` | `@/base/components/layout/dashboard` | Used by every tab `page.tsx` with `header={null}` |
| `ResourcePage` | `@/shared/data-view/resource-page` | Used by CRUD sub-tabs with `extraParams` |
| `FormDialog` | `@/shared/components/form-dialog` | Used for create/edit dialogs in sub-tabs |
| `DataTable` | `@/shared/data-view/table-view` | Used for custom sub-tabs (non-CRUD) |
| `ColumnHeader` | `@/shared/data-view/table-view` | Used in all column definitions |
| `InfoItem` pattern | Copy per resource | Icon+label+value display for general-info |
### Resource-Specific (Create Per Resource)
| Component | Location | Purpose |
|---|---|---|
| `<resource>-context.tsx` | `modules/<resource>/` | Context provider for parent resource identity |
| `<resource>-actions.tsx` | `modules/<resource>/` | Header dropdown menu (edit/delete) |
| `<resource>-general-info.tsx` | `modules/<resource>/` | Read-only details display for Details tab |
| `<resource>-form.tsx` | `modules/<resource>/` | CRUD form (shared with list page creation) |
| `<resource>.schema.ts` | `modules/<resource>/` | Zod schema (shared with form) |
## File Structure Convention
```
app/(authenticated)/<section>/<resources>/[id]/
├── layout.tsx ← Server: fetch + DashboardDetailsPage + Provider
├── page.tsx ← Server: Details tab (GeneralInfo)
├── <sub-tab-1>/page.tsx ← Client: ResourcePage or manual DataTable
├── <sub-tab-2>/page.tsx ← Client: ResourcePage or manual DataTable
└── ...
modules/<resources>/
├── <resource>.schema.ts ← Zod form schema
├── <resource>-form.tsx ← CRUD form component
├── <resource>-context.tsx ← Context provider (id + label)
├── <resource>-actions.tsx ← Actions dropdown
├── <resource>-general-info.tsx ← Read-only info cards
└── <optional-sub-forms>/ ← e.g. document upload forms
```
## Naming Conventions
| Item | Pattern | Example |
|---|---|---|
| Layout file | `app/.../<resources>/[id]/layout.tsx` | `vehicles/[id]/layout.tsx` |
| Details page | `app/.../<resources>/[id]/page.tsx` | `vehicles/[id]/page.tsx` |
| Sub-tab page | `app/.../<resources>/[id]/<tab>/page.tsx` | `vehicles/[id]/estimates/page.tsx` |
| Context file | `modules/<resources>/<resource>-context.tsx` | `vehicles/vehicle-context.tsx` |
| Context type | `<Resource>ContextValue` | `VehicleContextValue` |
| Provider | `<Resource>Provider` | `VehicleProvider` |
| Hook | `use<Resource>()` | `useVehicle()` |
| Actions file | `modules/<resources>/<resource>-actions.tsx` | `vehicles/vehicle-actions.tsx` |
| Actions component | `<Resource>Actions` | `VehicleActions` |
| General info file | `modules/<resources>/<resource>-general-info.tsx` | `vehicles/vehicle-general-info.tsx` |
| General info component | `<Resource>GeneralInfo` | `VehicleGeneralInfo` |
## Imports Cheat Sheet
```tsx
// Layout
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
import { <Resource>Provider } from '@/modules/<resources>/<resource>-context'
// Details tab
import { getServerApi } from '@garage/api/server'
import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-general-info'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
// Sub-tab (ResourcePage pattern)
import { ResourcePage } from '@/shared/data-view/resource-page'
import { ColumnHeader } from '@/shared/data-view/table-view'
import FormDialog from '@/shared/components/form-dialog'
import { use<Resource> } from '@/modules/<resources>/<resource>-context'
import type { <Related>Client } from '@garage/api'
import { <RELATED>_ROUTES } from '@garage/api'
// Sub-tab (Manual DataTable pattern)
import { useAuthApi } from "@/shared/useApi"
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
// Context provider
import { createContext, useContext } from "react"
// Actions
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"
// General Info
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator"
```
.github/skills/shared-formatters/SKILL.md
-73
View File
@@ -1,73 +0,0 @@
---
name: shared-formatters
description: "Use the central shared/utils/formatters.ts file for all display formatting in the dashboard. Use when: formatting dates, times, numbers, currencies, or enum strings in table cells, detail pages, or any UI display. Avoid inline formatting logic like `toLocaleDateString()`, `.toLocaleString()`, or manual string splits. Import from @/shared/utils/formatters."
---
# Shared Formatters
Use this skill whenever work involves displaying dates, times, numbers, currencies, or enum strings in any UI component.
## Source of Truth
All shared display formatters live in:
```
apps/dashboard/shared/utils/formatters.ts
```
Import path: `@/shared/utils/formatters`
## Available Formatters
| Function | Input | Output example |
|---|---|---|
| `formatDate(value)` | string \| Date \| null | `"Jan 6, 2026"` |
| `formatDateTime(value)` | string \| Date \| null | `"Jan 6, 2026, 2:30 PM"` |
| `formatDateShort(value)` | string \| Date \| null | `"04/06/2026"` |
| `formatTime(value)` | string \| Date \| null | `"2:30 PM"` |
| `formatEnum(value)` | string \| null | `"In Progress"` |
| `formatNumber(value)` | number \| string \| null | `"150,000"` |
| `formatCurrency(value, currency?, locale?)` | number \| string \| null | `"$1,500.00"` |
All functions return `"—"` for null/undefined/invalid input — never return an empty string or throw.
## Rules
1. **Never inline formatting.** Do not use `new Date(x).toLocaleDateString()`, `Number(x).toLocaleString()`, or manual `split("_")` chains in components or pages. Use the shared formatters instead.
2. **Add before duplicating.** Check `formatters.ts` for an existing formatter before writing a new one. If a new formatter is needed, add it to `formatters.ts` — not inline.
3. **Keep all formatters in one file.** Do not create separate formatter files per module. All display formatting stays in `shared/utils/formatters.ts`.
4. **Consistent null handling.** Every formatter accepts `null | undefined` and returns `"—"`. Never require callers to guard against null before calling.
5. **Use `formatEnum` for status/type fields.** Any snake_case or underscore-separated enum value displayed as text must go through `formatEnum`.
## Workflow
1. Identify a display value needing formatting in a component.
2. Check `formatters.ts` for an existing matching formatter.
3. If found, import and use it.
4. If missing, add to `formatters.ts` following the null-safety pattern, then import.
5. Remove any inline formatting that the shared formatter now replaces.
## Examples
```tsx
import { formatDate, formatEnum, formatNumber, formatCurrency } from "@/shared/utils/formatters"
// Table cell — date
cell: ({ row }) => formatDate(row.original.created_at)
// Table cell — enum status
cell: ({ row }) => <Badge>{formatEnum(row.original.status)}</Badge>
// Table cell — number
cell: ({ row }) => formatNumber(row.original.km_in)
// Table cell — currency
cell: ({ row }) => formatCurrency(row.original.total_amount)
// Detail page field
<p>{formatDateTime(jobCard.updated_at)}</p>
```
README.md
+1 -1
View File
@@ -12,7 +12,7 @@ npx create-turbo@latest
## What's inside?
This Turborepo includes the following packages/apps:
This Turborepo includes the following packages/apps: et
### Apps and Packages
apps/dashboard
Submodule
+1
Submodule apps/dashboard added at 078e5383ba
apps/dashboard/.gitignore
-39
View File
@@ -1,39 +0,0 @@
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
/cypress/videos
/cypress/screenshots
/cypress/downloads
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# env files
.env*.local
# typescript
*.tsbuildinfo
next-env.d.ts
apps/dashboard/.prettierignore
-7
View File
@@ -1,7 +0,0 @@
dist/
node_modules/
.next/
.turbo/
coverage/
pnpm-lock.yaml
.pnpm-store/
apps/dashboard/.prettierrc
-11
View File
@@ -1,11 +0,0 @@
{
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "app/globals.css",
"tailwindFunctions": ["cn", "cva"]
}
apps/dashboard/.vscode/mcp.json
Vendored
-11
View File
@@ -1,11 +0,0 @@
{
"servers": {
"shadcn": {
"command": "npx",
"args": [
"shadcn@latest",
"mcp"
]
}
}
}
apps/dashboard/README.md
-21
View File
@@ -1,21 +0,0 @@
# Next.js template
This is a Next.js template with shadcn/ui.
## Adding components
To add components to your app, run the following command:
```bash
npx shadcn@latest add button
```
This will place the ui components in the `components` directory.
## Using components
To use the components in your app, import them as follows:
```tsx
import { Button } from "@/components/ui/button";
```
apps/dashboard/app/(auth)/login/page.tsx
-12
View File
@@ -1,12 +0,0 @@
import { LoginForm } from "@/modules/auth/login-form";
export default function Page() {
return (
<div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-sm">
<LoginForm />
</div>
</div>
)
}
apps/dashboard/app/(authenticated)/calendar/appointment/[id]/layout.tsx
-29
View File
@@ -1,29 +0,0 @@
import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
import { AppointmentActions } from "@/modules/appointments/appointment-actions"
import { AppointmentProvider } from "@/modules/appointments/appointment-context"
import { CalendarCheck2 } from "lucide-react"
import React from "react"
export default async function layout(props: {
params: Promise<{ id: string }>
children: React.ReactNode
}) {
const { id } = await props.params
return (
<AppointmentProvider appointment={{ id, label: `Appointment #${id}` }}>
<DashboardDetailsPage
className="p-0 lg:p-0"
icon={<CalendarCheck2 className="size-5" />}
title={`Appointment #${id}`}
backHref="/calendar/appointment/list"
actions={<AppointmentActions appointmentId={id} />}
tabs={[
{ href: `/calendar/appointment/${id}`, label: "Details" },
]}
>
{props.children}
</DashboardDetailsPage>
</AppointmentProvider>
)
}
apps/dashboard/app/(authenticated)/calendar/appointment/[id]/page.tsx
-49
View File
@@ -1,49 +0,0 @@
"use client"
import { use } from "react"
import { useQuery } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { APPOINTMENT_ROUTES } from "@garage/api"
import { AppointmentGeneralInfo } from "@/modules/appointments/appointment-general-info"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import { Skeleton } from "@/shared/components/ui/skeleton"
export default function AppointmentDetailsPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
const api = useAuthApi()
const { data, isLoading } = useQuery({
queryKey: [APPOINTMENT_ROUTES.INDEX, "detail", id],
queryFn: async () => {
const response = await api.appointments.list()
const items = (response as any)?.data ?? []
return items.find((item: any) => String(item.id) === id) ?? null
},
})
if (isLoading) {
return (
<DashboardPage header={null}>
<div className="grid gap-6 md:grid-cols-2 p-6">
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className="h-48 rounded-xl" />
))}
</div>
</DashboardPage>
)
}
if (!data) {
return (
<DashboardPage header={null}>
<p className="text-muted-foreground p-6">Appointment not found.</p>
</DashboardPage>
)
}
return (
<DashboardPage header={null}>
<AppointmentGeneralInfo appointment={data} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx
-112
View File
@@ -1,112 +0,0 @@
"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 { AppointmentForm } from "@/modules/appointments/appointment-form"
import { APPOINTMENT_ROUTES } from "@garage/api"
import type { AppointmentsClient } from "@garage/api"
import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon, ExternalLinkIcon } from "lucide-react"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
const STATUS_COLORS: Record<string, string> = {
requested: "bg-yellow-100 text-yellow-800",
confirmed: "bg-blue-100 text-blue-800",
in_progress: "bg-purple-100 text-purple-800",
completed: "bg-green-100 text-green-800",
cancelled: "bg-red-100 text-red-800",
}
export default function AppointmentsPage() {
const router = useRouter()
return (
<ResourcePage<AppointmentsClient>
pageTitle="Appointments"
routeKey={APPOINTMENT_ROUTES.INDEX}
getClient={(api) => api.appointments}
onRowClick={(row) => router.push(`/calendar/appointment/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Appointment">
{(resourceId) => (
<AppointmentForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => (
<div className="flex items-center gap-2">
<CalendarCheck2Icon className="size-4 text-muted-foreground" />
<span>{(row.original as any).title}</span>
</div>
),
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
},
{
accessorKey: "from_time",
header: ({ column }) => <ColumnHeader column={column} title="Time" />,
cell: ({ row }) => {
const r = row.original as any
return (
<div className="flex items-center gap-1">
<ClockIcon className="size-3 text-muted-foreground" />
<span>{r.from_time} – {r.to_time}</span>
</div>
)
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
return (
<Badge className={colorClass}>
{status?.replace("_", " ") ?? "—"}
</Badge>
)
},
},
{
id: "job_card",
header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
cell: ({ row }) => {
const jobCardId = (row.original as any).job_card_id
if (!jobCardId) return <span className="text-muted-foreground">—</span>
return (
<Button
variant="outline"
size="sm"
className="h-7 gap-1.5"
onClick={(e) => {
e.stopPropagation()
router.push(`/sales/job-cards/${jobCardId}`)
}}
>
<ClipboardListIcon className="size-3" />
#{jobCardId}
<ExternalLinkIcon className="size-3" />
</Button>
)
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/calendars/page.tsx
View File
apps/dashboard/app/(authenticated)/items/adjustment/page.tsx
-292
View File
@@ -1,292 +0,0 @@
"use client"
import { useState, useRef } from "react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { Paperclip, Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
import { toast } from "sonner"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { InventoryAdjustmentForm } from "@/modules/inventory-adjustments/inventory-adjustment-form"
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 { confirm } from "@/shared/components/confirm-dialog"
import { useAuthApi } from "@/shared/useApi"
import { INVENTORY_ADJUSTMENT_ROUTES } from "@garage/api"
import type { InventoryAdjustmentsClient } from "@garage/api"
// ── Attachment helpers ──
type AttachmentFile = {
id: number
original_name?: string
attachment_path?: string
created_at?: string
}
function getFileIcon(path?: string) {
if (!path) return FileIcon
const lower = path.toLowerCase()
if (/\.(jpg|jpeg|png|gif|webp|svg)$/.test(lower)) return ImageIcon
if (/\.pdf$/.test(lower)) return FileTextIcon
return FileIcon
}
// ── Attachments Dialog ──
function AttachmentsDialog({
open,
adjustmentId,
adjustmentRef,
onClose,
}: {
open: boolean
adjustmentId: string
adjustmentRef: string
onClose: () => void
}) {
const api = useAuthApi()
const queryClient = useQueryClient()
const fileInputRef = useRef<HTMLInputElement>(null)
const [isUploading, setIsUploading] = useState(false)
const [sessionFiles, setSessionFiles] = useState<AttachmentFile[]>([])
const queryKey = [INVENTORY_ADJUSTMENT_ROUTES.INDEX, adjustmentId, "attachments"]
const deleteMutation = useMutation({
mutationFn: (attachmentId: number) =>
api.inventoryAdjustments.deleteAttachment(adjustmentId, attachmentId),
onSuccess: (_, attachmentId) => {
toast.success("Attachment deleted.")
setSessionFiles((prev) => prev.filter((f) => f.id !== attachmentId))
queryClient.invalidateQueries({ queryKey })
},
onError: () => toast.error("Failed to delete attachment."),
})
const handleDelete = async (attachment: AttachmentFile) => {
const confirmed = await confirm({
title: "Delete Attachment",
description: `Are you sure you want to delete "${attachment.original_name ?? "this file"}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) deleteMutation.mutate(attachment.id)
}
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files
if (!files || files.length === 0) return
setIsUploading(true)
const fileArray = Array.from(files)
try {
const result = await toast.promise(
api.inventoryAdjustments.addAttachment(adjustmentId, fileArray),
{
loading: "Uploading attachment(s)...",
success: "Attachment(s) uploaded successfully",
error: "Failed to upload attachment(s)",
},
)
// Track uploaded files locally for display within this session
const now = new Date().toISOString()
const uploaded: AttachmentFile[] = fileArray.map((file, i) => ({
id: Date.now() + i,
original_name: file.name,
attachment_path: file.name,
created_at: now,
}))
setSessionFiles((prev) => [...prev, ...uploaded])
queryClient.invalidateQueries({ queryKey })
} finally {
setIsUploading(false)
if (fileInputRef.current) fileInputRef.current.value = ""
}
}
const handleClose = () => {
setSessionFiles([])
onClose()
}
return (
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Attachments — {adjustmentRef}</DialogTitle>
</DialogHeader>
<div className="flex justify-end">
<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={handleUpload}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
size="sm"
>
<Plus className="size-4" />
{isUploading ? "Uploading..." : "Upload Attachment"}
</Button>
</div>
{sessionFiles.length === 0 ? (
<Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground">
No attachments uploaded in this session. Click "Upload Attachment" to add files.
</CardContent>
</Card>
) : (
<div className="grid gap-3 sm:grid-cols-2">
{sessionFiles.map((attachment) => {
const Icon = getFileIcon(attachment.attachment_path)
return (
<Card key={attachment.id}>
<CardContent className="flex items-center gap-3 p-4">
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<Icon className="size-5" />
</div>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<span className="truncate text-sm font-medium" title={attachment.original_name}>
{attachment.original_name}
</span>
{attachment.created_at && (
<span className="text-xs text-muted-foreground">
{new Date(attachment.created_at).toLocaleDateString()}
</span>
)}
</div>
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDelete(attachment)}
title="Delete attachment"
>
<Trash2 className="size-4 text-destructive" />
</Button>
</CardContent>
</Card>
)
})}
</div>
)}
</DialogContent>
</Dialog>
)
}
// ── Page ──
export default function InventoryAdjustmentsPage() {
const [attachmentTarget, setAttachmentTarget] = useState<{
id: string
ref: string
} | null>(null)
return (
<>
<ResourcePage<InventoryAdjustmentsClient>
pageTitle="Inventory Adjustments"
routeKey={INVENTORY_ADJUSTMENT_ROUTES.INDEX}
getClient={(api) => api.inventoryAdjustments}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Inventory Adjustment">
{(resourceId) => (
<InventoryAdjustmentForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "reference_number",
header: ({ column }) => <ColumnHeader column={column} title="Reference #" />,
cell: ({ row }) => (row.original as any).reference_number || "—",
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const val = (row.original as any).date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "chart_of_account",
header: ({ column }) => <ColumnHeader column={column} title="Chart of Account" />,
cell: ({ row }) => (row.original as any).chart_of_account || "—",
},
{
accessorKey: "notes",
header: ({ column }) => <ColumnHeader column={column} title="Notes" />,
cell: ({ row }) => {
const notes = (row.original as any).notes
return notes ? (
<span className="max-w-50 truncate block" title={notes}>{notes}</span>
) : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
id: "attachments",
header: () => null,
cell: ({ row }) => {
const item = row.original as any
return (
<Button
variant="ghost"
size="icon-sm"
title="Manage Attachments"
onClick={(e) => {
e.stopPropagation()
setAttachmentTarget({
id: String(item.id),
ref: item.reference_number || `ADJ-${item.id}`,
})
}}
>
<Paperclip className="size-4" />
</Button>
)
},
},
actionsColumn(),
]}
/>
{attachmentTarget && (
<AttachmentsDialog
open={!!attachmentTarget}
adjustmentId={attachmentTarget.id}
adjustmentRef={attachmentTarget.ref}
onClose={() => setAttachmentTarget(null)}
/>
)}
</>
)
}
apps/dashboard/app/(authenticated)/items/parts/page.tsx
-96
View File
@@ -1,96 +0,0 @@
"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 { PartForm } from "@/modules/parts/part-form"
import { Badge } from "@/shared/components/ui/badge"
import { PARTS_ROUTES } from "@garage/api"
import type { PartsClient } from "@garage/api"
export default function PartsPage() {
return (
<ResourcePage<PartsClient>
pageTitle="Parts"
routeKey={PARTS_ROUTES.INDEX}
getClient={(api) => api.parts}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Part">
{(resourceId) => (
<PartForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => {
const r = row.original as any
return (
<div>
<span className="font-medium">{r.title || "—"}</span>
{r.sku && (
<span className="ml-2 text-xs text-muted-foreground">{r.sku}</span>
)}
</div>
)
},
},
{
accessorKey: "part_number",
header: ({ column }) => <ColumnHeader column={column} title="Part #" />,
cell: ({ row }) => (row.original as any).part_number || "—",
},
{
accessorKey: "manufactured_by",
header: ({ column }) => <ColumnHeader column={column} title="Manufacturer" />,
cell: ({ row }) => (row.original as any).manufactured_by || "—",
},
{
accessorKey: "selling_price",
header: ({ column }) => <ColumnHeader column={column} title="Sell Price" />,
cell: ({ row }) => {
const val = (row.original as any).selling_price
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "purchase_price",
header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
cell: ({ row }) => {
const val = (row.original as any).purchase_price
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "is_active",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const active = (row.original as any).is_active
return (
<Badge variant={active ? "default" : "secondary"}>
{active ? "Active" : "Inactive"}
</Badge>
)
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/items/service-group/page.tsx
-78
View File
@@ -1,78 +0,0 @@
"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 { ServiceGroupForm } from "@/modules/service-groups/service-group-form"
import { Badge } from "@/shared/components/ui/badge"
import { SERVICE_GROUP_ROUTES } from "@garage/api"
import type { ServiceGroupsClient } from "@garage/api"
export default function ServiceGroupPage() {
return (
<ResourcePage<ServiceGroupsClient>
pageTitle="Service Groups"
routeKey={SERVICE_GROUP_ROUTES.INDEX}
getClient={(api) => api.serviceGroups}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Service Group">
{(resourceId) => (
<ServiceGroupForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
const r = row.original as any
return (
<div>
<span className="font-medium">{r.service_name || r.name || "—"}</span>
{r.code && (
<span className="ml-2 text-xs text-muted-foreground">{r.code}</span>
)}
</div>
)
},
},
{
accessorKey: "selling_price",
header: ({ column }) => <ColumnHeader column={column} title="Price" />,
cell: ({ row }) => {
const val = (row.original as any).selling_price
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "is_active",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const active = (row.original as any).is_active
return (
<Badge variant={active ? "default" : "secondary"}>
{active ? "Active" : "Inactive"}
</Badge>
)
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/items/services/page.tsx
-75
View File
@@ -1,75 +0,0 @@
"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 { ServiceForm } from "@/modules/services/service-form"
import { SERVICE_ROUTES } from "@garage/api"
import type { ServicesClient } from "@garage/api"
export default function ServicesPage() {
return (
<ResourcePage<ServicesClient>
pageTitle="Services"
routeKey={SERVICE_ROUTES.INDEX}
getClient={(api) => api.services}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Service">
{(resourceId) => (
<ServiceForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "labor_name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
const r = row.original as any
return (
<div>
<span className="font-medium">{r.labor_name || r.name || "—"}</span>
{r.service_code && (
<span className="ml-2 text-xs text-muted-foreground">{r.service_code}</span>
)}
</div>
)
},
},
{
accessorKey: "description",
header: ({ column }) => <ColumnHeader column={column} title="Description" />,
cell: ({ row }) => {
const val = (row.original as any).description
return val
? <span className="max-w-[200px] truncate block">{val}</span>
: "—"
},
},
{
accessorKey: "selling_price",
header: ({ column }) => <ColumnHeader column={column} title="Price" />,
cell: ({ row }) => {
const val = (row.original as any).selling_price
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/layout.tsx
-45
View File
@@ -1,45 +0,0 @@
import { Suspense } from "react"
import Image from "next/image"
import { DashboardLayout } from "@/base/components/layout/dashboard"
import { useAuth } from "@/shared/hooks/use-auth"
import { navGroups } from "@/config/navGroups"
import { getAuthCookies } from "@/modules/auth/auth.actions"
import { redirect } from "next/navigation"
function Logo() {
return (
<div className="flex items-center gap-2">
<Image alt="Logo" src={'/assets/logo.png'} height={100} width={100} />
</div>
)
}
export default async function AuthenticatedLayout({
children,
}: {
children: React.ReactNode
}) {
const { token, user } = await getAuthCookies()
if(!token || !user ) {
redirect('/login');
}
const userInfo = user
? {
name: user.name,
email: user.email,
initials: user.name.charAt(0).toUpperCase(),
}
: undefined
return (
<DashboardLayout navGroups={navGroups} logo={<Logo />} user={userInfo}>
{children}
</DashboardLayout>
)
}
apps/dashboard/app/(authenticated)/page.tsx
-11
View File
@@ -1,11 +0,0 @@
import { DashboardHeader } from "@/base/components/layout/dashboard";
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
import { DashboardContent } from "@/modules/home/dashboard-content";
export default function page() {
return (
<DashboardPage headerProps={{title: "Dashboard"}} >
<DashboardContent />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/productivity/employees/[id]/layout.tsx
-39
View File
@@ -1,39 +0,0 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { EmployeeActions } from '@/modules/employees/employee-actions'
import { EmployeeProvider } from '@/modules/employees/employee-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 employee = await api.employees.getById(id)
const firstName = employee.data?.first_name || ''
const lastName = employee.data?.last_name || ''
const title = [firstName, lastName].filter(Boolean).join(' ') || 'Employee Details'
const employeeLabel = title
return (
<>
<EmployeeProvider employee={{ id, label: employeeLabel }}>
<DashboardDetailsPage
className="p-0 lg:p-0"
title={title}
description={employee.data?.position || employee.data?.designation || undefined}
backHref="/productivity/employees"
actions={<EmployeeActions employeeId={id} />}
tabs={[
{ href: `/productivity/employees/${id}`, label: 'Details' },
{ href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
]}
>
{props.children}
</DashboardDetailsPage>
</EmployeeProvider>
</>
)
}
apps/dashboard/app/(authenticated)/productivity/employees/[id]/page.tsx
-19
View File
@@ -1,19 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { EmployeeGeneralInfo } from '@/modules/employees/employee-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 employee = await api.employees.getById(id)
if (!employee.data) {
return <div className="text-muted-foreground">Employee not found.</div>
}
return (
<DashboardPage header={null}>
<EmployeeGeneralInfo employee={employee.data as any} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/productivity/employees/[id]/permissions/page.tsx
-10
View File
@@ -1,10 +0,0 @@
"use client"
import { use } from "react"
import { EmployeePermissionsForm } from "@/modules/employees/employee-permissions-form"
export default function EmployeePermissionsPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
return <EmployeePermissionsForm employeeId={id} />
}
apps/dashboard/app/(authenticated)/productivity/employees/page.tsx
-74
View File
@@ -1,74 +0,0 @@
"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 { EmployeeForm } from "@/modules/employees/employee-form"
import { EMPLOYEE_ROUTES } from "@garage/api"
import type { EmployeesClient } from "@garage/api"
import { useRouter } from "next/navigation"
export default function EmployeesPage() {
const router = useRouter()
return (
<ResourcePage<EmployeesClient>
pageTitle="Employees"
routeKey={EMPLOYEE_ROUTES.INDEX}
getClient={(api) => api.employees}
onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Employee">
{(resourceId) => (
<EmployeeForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "first_name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
const { first_name, last_name } = row.original
return `${first_name ?? ""} ${last_name ?? ""}`.trim()
},
},
{
accessorKey: "email",
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
},
{
accessorKey: "phone",
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
},
{
accessorKey: "position",
header: ({ column }) => <ColumnHeader column={column} title="Position" />,
},
{
accessorKey: "department",
header: ({ column }) => <ColumnHeader column={column} title="Department" />,
cell: ({ row }) => (row.original as any).department?.name ?? "—",
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = row.original.status
return (
<span className={status === "active" ? "text-green-600" : "text-red-600"}>
{status}
</span>
)
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/productivity/holidays/page.tsx
-46
View File
@@ -1,46 +0,0 @@
"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 { HolidayYearForm } from "@/modules/settings/holiday-year/holiday-year-form"
import { HOLIDAY_YEAR_ROUTES } from "@garage/api"
import type { HolidayYearsClient } from "@garage/api"
export default function HolidayYearsPage() {
return (
<ResourcePage<HolidayYearsClient>
pageTitle="Holiday Years"
routeKey={HOLIDAY_YEAR_ROUTES.INDEX}
getClient={(api) => api.holidayYears}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Holiday Year">
{(resourceId) => (
<HolidayYearForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "year",
header: ({ column }) => <ColumnHeader column={column} title="Year" />,
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created At" />,
cell: ({ row }) => {
const date = (row.original as any).created_at
return date ? new Date(date).toLocaleDateString() : "—"
},
},
actionsColumn({ onEdit: undefined }),
]}
/>
)
}
apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx
-56
View File
@@ -1,56 +0,0 @@
"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 { ShopCalendarForm } from "@/modules/shop-calendars/shop-calendar-form"
import { SHOP_CALENDAR_ROUTES } from "@garage/api"
import type { ShopCalendarsClient } from "@garage/api"
import { CheckCircle2Icon } from "lucide-react"
export default function ShopCalendarsPage() {
return (
<ResourcePage<ShopCalendarsClient>
pageTitle="Shop Calendars"
routeKey={SHOP_CALENDAR_ROUTES.INDEX}
getClient={(api) => api.shopCalendars}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Shop Calendar">
{(resourceId) => (
<ShopCalendarForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "is_default",
header: ({ column }) => <ColumnHeader column={column} title="Default" />,
cell: ({ row }) =>
(row.original as any).is_default ? (
<CheckCircle2Icon className="text-green-600 h-5 w-5" />
) : null,
},
{
accessorKey: "shop_calender_days",
header: () => <span>Days</span>,
enableSorting: false,
cell: ({ row }) => {
const days = (row.original as any).shop_calender_days
return days?.length ?? 0
},
},
actionsColumn({ onEdit: undefined }),
]}
/>
)
}
apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx
-63
View File
@@ -1,63 +0,0 @@
"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 { ShopTimingForm } from "@/modules/shop-timings/shop-timing-form"
import { SHOP_TIMING_ROUTES } from "@garage/api"
import type { ShopTimingsClient } from "@garage/api"
import { CheckCircle2Icon } from "lucide-react"
export default function ShopTimingsPage() {
return (
<ResourcePage<ShopTimingsClient>
pageTitle="Shop Timings"
routeKey={SHOP_TIMING_ROUTES.INDEX}
getClient={(api) => api.shopTimings}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Shop Timing">
{(resourceId) => (
<ShopTimingForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "in_time",
header: ({ column }) => <ColumnHeader column={column} title="In Time" />,
},
{
accessorKey: "out_time",
header: ({ column }) => <ColumnHeader column={column} title="Out Time" />,
},
{
accessorKey: "full_day_hours",
header: ({ column }) => <ColumnHeader column={column} title="Full Day Hours" />,
},
{
accessorKey: "half_day_hours",
header: ({ column }) => <ColumnHeader column={column} title="Half Day Hours" />,
},
{
accessorKey: "is_default",
header: ({ column }) => <ColumnHeader column={column} title="Default" />,
cell: ({ row }) =>
row.original.is_default ? (
<CheckCircle2Icon className="text-green-600 h-5 w-5" />
) : null,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/productivity/tasks/page.tsx
-57
View File
@@ -1,57 +0,0 @@
"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 { TaskForm } from "@/modules/tasks/task-form"
import { TASK_ROUTES } from "@garage/api"
import type { TasksClient } from "@garage/api"
export default function TasksPage() {
return (
<ResourcePage<TasksClient>
routeKey={TASK_ROUTES.INDEX}
getClient={(api) => api.tasks}
headerProps={({ selectedItem, invalidateQuery }) => ({
title: "Tasks",
actions: (
<FormDialog title="Task">
{(resourceId) => (
<TaskForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "task_number",
header: ({ column }) => <ColumnHeader column={column} title="Task #" />,
},
{
accessorKey: "subject",
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
},
{
accessorKey: "priority",
header: ({ column }) => <ColumnHeader column={column} title="Priority" />,
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
},
{
accessorKey: "due_date",
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/purchase/bill/page.tsx
-73
View File
@@ -1,73 +0,0 @@
"use client"
import FormDialog from "@/shared/components/form-dialog"
import { Badge } from "@/shared/components/ui/badge"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { BillForm } from "@/modules/bills/bill-form"
import { BILL_ROUTES } from "@garage/api"
import type { BillsClient } from "@garage/api"
export default function BillsPage() {
return (
<ResourcePage<BillsClient>
pageTitle="Bills"
routeKey={BILL_ROUTES.INDEX}
getClient={(api) => api.bills}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Bill">
{(resourceId) => (
<BillForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "bill_number",
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
cell: ({ row }) => (row.original as any).bill_number || "—",
},
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "bill_date",
header: ({ column }) => <ColumnHeader column={column} title="Bill Date" />,
cell: ({ row }) => {
const value = (row.original as any).bill_date
return value ? new Date(value).toLocaleDateString() : "—"
},
},
{
accessorKey: "bill_due_date",
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
cell: ({ row }) => {
const value = (row.original as any).bill_due_date
return value ? new Date(value).toLocaleDateString() : "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return <Badge variant={status === "paid" ? "default" : "secondary"}>{status || "—"}</Badge>
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/purchase/expense/page.tsx
-77
View File
@@ -1,77 +0,0 @@
"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 { ExpenseForm } from "@/modules/expenses/expense-form"
import { Badge } from "@/shared/components/ui/badge"
import { EXPENSE_ROUTES } from "@garage/api"
import type { ExpensesClient } from "@garage/api"
export default function ExpensesPage() {
return (
<ResourcePage<ExpensesClient>
pageTitle="Expenses"
routeKey={EXPENSE_ROUTES.INDEX}
getClient={(api) => api.expenses}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Expense">
{(resourceId) => (
<ExpenseForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "invoice_number",
header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
cell: ({ row }) => (row.original as any).invoice_number || "—",
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "expense_date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const val = (row.original as any).expense_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return (
<Badge variant={status === "paid" ? "default" : "secondary"}>
{status || "—"}
</Badge>
)
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx
-377
View File
@@ -1,377 +0,0 @@
"use client"
import { useState, useRef } from "react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import {
Paperclip,
Plus,
Trash2,
FileIcon,
ImageIcon,
FileTextIcon,
BadgeDollarSignIcon,
CalendarIcon,
CreditCardIcon,
HashIcon,
UserIcon,
BriefcaseIcon,
} from "lucide-react"
import { toast } from "sonner"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { PaymentMadeForm } from "@/modules/payment-mades/payment-made-form"
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 { confirm } from "@/shared/components/confirm-dialog"
import { useAuthApi } from "@/shared/useApi"
import { PAYMENT_MADE_ROUTES } from "@garage/api"
import type { PaymentMadesClient } from "@garage/api"
// ── Attachment helpers ──
type AttachmentFile = {
id: number
original_name?: string
attachment_path?: string
created_at?: string
}
function getFileIcon(path?: string) {
if (!path) return FileIcon
const lower = path.toLowerCase()
if (/\.(jpg|jpeg|png|gif|webp|svg)$/.test(lower)) return ImageIcon
if (/\.pdf$/.test(lower)) return FileTextIcon
return FileIcon
}
// ── Attachments Dialog ──
function AttachmentsDialog({
open,
paymentId,
paymentRef,
onClose,
}: {
open: boolean
paymentId: string
paymentRef: string
onClose: () => void
}) {
const api = useAuthApi()
const queryClient = useQueryClient()
const fileInputRef = useRef<HTMLInputElement>(null)
const [isUploading, setIsUploading] = useState(false)
const [sessionFiles, setSessionFiles] = useState<AttachmentFile[]>([])
const queryKey = [PAYMENT_MADE_ROUTES.INDEX, paymentId, "attachments"]
const deleteMutation = useMutation({
mutationFn: (attachmentId: number) =>
api.paymentMades.deleteAttachment(paymentId, { attachment_id: attachmentId } as any),
onSuccess: (_, attachmentId) => {
toast.success("Attachment deleted.")
setSessionFiles((prev) => prev.filter((f) => f.id !== attachmentId))
queryClient.invalidateQueries({ queryKey })
},
onError: () => toast.error("Failed to delete attachment."),
})
const handleDelete = async (attachment: AttachmentFile) => {
const confirmed = await confirm({
title: "Delete Attachment",
description: `Are you sure you want to delete "${attachment.original_name ?? "this file"}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) deleteMutation.mutate(attachment.id)
}
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files
if (!files || files.length === 0) return
setIsUploading(true)
const fileArray = Array.from(files)
try {
const formData = new FormData()
fileArray.forEach((file) => formData.append("attachments[]", file))
await toast.promise(
api.paymentMades.addAttachment(paymentId, formData),
{
loading: "Uploading attachment(s)...",
success: "Attachment(s) uploaded successfully",
error: "Failed to upload attachment(s)",
},
)
const now = new Date().toISOString()
const uploaded: AttachmentFile[] = fileArray.map((file, i) => ({
id: Date.now() + i,
original_name: file.name,
attachment_path: file.name,
created_at: now,
}))
setSessionFiles((prev) => [...prev, ...uploaded])
queryClient.invalidateQueries({ queryKey })
} finally {
setIsUploading(false)
if (fileInputRef.current) fileInputRef.current.value = ""
}
}
const handleClose = () => {
setSessionFiles([])
onClose()
}
return (
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>Attachments — {paymentRef}</DialogTitle>
</DialogHeader>
<div className="flex justify-end">
<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={handleUpload}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
size="sm"
>
<Plus className="size-4" />
{isUploading ? "Uploading..." : "Upload Attachment"}
</Button>
</div>
{sessionFiles.length === 0 ? (
<Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground">
No attachments uploaded in this session. Click &quot;Upload Attachment&quot; to add files.
</CardContent>
</Card>
) : (
<div className="grid gap-3 sm:grid-cols-2">
{sessionFiles.map((attachment) => {
const Icon = getFileIcon(attachment.attachment_path)
return (
<Card key={attachment.id}>
<CardContent className="flex items-center gap-3 p-4">
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<Icon className="size-5" />
</div>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<span className="truncate text-sm font-medium" title={attachment.original_name}>
{attachment.original_name}
</span>
{attachment.created_at && (
<span className="text-xs text-muted-foreground">
{new Date(attachment.created_at).toLocaleDateString()}
</span>
)}
</div>
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDelete(attachment)}
title="Delete attachment"
>
<Trash2 className="size-4 text-destructive" />
</Button>
</CardContent>
</Card>
)
})}
</div>
)}
</DialogContent>
</Dialog>
)
}
// ── Page ──
type PaymentMadeItem = {
id: number
payment_number?: string
vendor_name?: string
employee_name?: string
payment_for?: string
payment_made?: string | number
payment_mode_name?: string
payment_date?: string
paid_through?: string
notes?: string
created_at?: string
}
export default function PaymentsMadePage() {
const [attachmentTarget, setAttachmentTarget] = useState<{
id: string
ref: string
} | null>(null)
return (
<>
<ResourcePage<PaymentMadesClient>
pageTitle="Payments Made"
routeKey={PAYMENT_MADE_ROUTES.INDEX}
getClient={(api) => api.paymentMades}
headerProps={({ invalidateQuery }) => ({
actions: (
<FormDialog title="Record Payment">
{(resourceId) => (
<PaymentMadeForm
resourceId={resourceId}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "payment_number",
header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
return (
<div className="flex items-center gap-2">
<HashIcon className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{item.payment_number || "—"}</span>
</div>
)
},
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
return (
<div className="flex items-center gap-2">
<UserIcon className="h-4 w-4 text-muted-foreground" />
<span>{item.vendor_name || "—"}</span>
</div>
)
},
},
{
accessorKey: "payment_for",
header: ({ column }) => <ColumnHeader column={column} title="Payment For" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
return (
<div className="flex items-center gap-2">
<BriefcaseIcon className="h-4 w-4 text-muted-foreground" />
<span className="capitalize">{item.payment_for || "—"}</span>
</div>
)
},
},
{
accessorKey: "payment_made",
header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
const amount = item.payment_made
? Number(item.payment_made).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
: "—"
return (
<div className="flex items-center gap-2">
<BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
<span className="font-semibold text-emerald-700 dark:text-emerald-400">
{amount}
</span>
</div>
)
},
},
{
accessorKey: "payment_mode_name",
header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
return (
<div className="flex items-center gap-2">
<CreditCardIcon className="h-4 w-4 text-muted-foreground" />
<span className="capitalize">{item.payment_mode_name || "—"}</span>
</div>
)
},
},
{
accessorKey: "payment_date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentMadeItem
const formatted = item.payment_date
? new Date(item.payment_date).toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
})
: "—"
return (
<div className="flex items-center gap-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
<span>{formatted}</span>
</div>
)
},
},
{
id: "attachments",
header: () => null,
cell: ({ row }) => {
const item = row.original as any
return (
<Button
variant="ghost"
size="icon-sm"
title="Manage Attachments"
onClick={(e) => {
e.stopPropagation()
setAttachmentTarget({
id: String(item.id),
ref: item.payment_number || `PAY-${item.id}`,
})
}}
>
<Paperclip className="size-4" />
</Button>
)
},
},
actionsColumn(),
]}
/>
{attachmentTarget && (
<AttachmentsDialog
open={!!attachmentTarget}
paymentId={attachmentTarget.id}
paymentRef={attachmentTarget.ref}
onClose={() => setAttachmentTarget(null)}
/>
)}
</>
)
}
apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx
-72
View File
@@ -1,72 +0,0 @@
"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 { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form"
import { PURCHASE_ORDER_ROUTES } from "@garage/api"
import type { PurchaseOrdersClient } from "@garage/api"
export default function PurchaseOrdersPage() {
return (
<ResourcePage<PurchaseOrdersClient>
pageTitle="Purchase Orders"
routeKey={PURCHASE_ORDER_ROUTES.INDEX}
getClient={(api) => api.purchaseOrders}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Purchase Order">
{(resourceId) => (
<PurchaseOrderForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "order_number",
header: ({ column }) => <ColumnHeader column={column} title="Order #" />,
cell: ({ row }) => (row.original as any).order_number || "—",
},
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "order_date",
header: ({ column }) => <ColumnHeader column={column} title="Order Date" />,
cell: ({ row }) => {
const val = (row.original as any).order_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "delivery_date",
header: ({ column }) => <ColumnHeader column={column} title="Delivery Date" />,
cell: ({ row }) => {
const val = (row.original as any).delivery_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx
-65
View File
@@ -1,65 +0,0 @@
"use client"
import FormDialog from "@/shared/components/form-dialog"
import { Badge } from "@/shared/components/ui/badge"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { VendorCreditForm } from "@/modules/vendor-credits/vendor-credit-form"
import { VENDOR_CREDIT_ROUTES } from "@garage/api"
import type { VendorCreditsClient } from "@garage/api"
export default function VendorCreditsPage() {
return (
<ResourcePage<VendorCreditsClient>
pageTitle="Vendor Credits"
routeKey={VENDOR_CREDIT_ROUTES.INDEX}
getClient={(api) => api.vendorCredits}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Vendor Credit">
{(resourceId) => (
<VendorCreditForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "subject",
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "bill_number",
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
cell: ({ row }) => (row.original as any).bill_number || "—",
},
{
accessorKey: "vendor_credit_date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const value = (row.original as any).vendor_credit_date
return value ? new Date(value).toLocaleDateString() : "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return <Badge variant={status === "closed" ? "secondary" : "default"}>{status || "—"}</Badge>
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx
Vendored
-61
View File
@@ -1,61 +0,0 @@
"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 { VendorForm } from "@/modules/vendors/vendor-form"
import { VENDOR_ROUTES } from "@garage/api"
import type { VendorsClient } from "@garage/api"
export default function VendorsPage() {
return (
<ResourcePage<VendorsClient>
pageTitle="Vendors"
routeKey={VENDOR_ROUTES.INDEX}
getClient={(api) => api.vendors}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Vendor">
{(resourceId) => (
<VendorForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "first_name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }) => {
const r = row.original as any
const name = [r.first_name, r.last_name].filter(Boolean).join(" ")
return name || "—"
},
},
{
accessorKey: "company_name",
header: ({ column }) => <ColumnHeader column={column} title="Company" />,
cell: ({ row }) => (row.original as any).company_name || "—",
},
{
accessorKey: "email",
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
cell: ({ row }) => (row.original as any).email || "—",
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/customers/[id]/layout.tsx
-40
View File
@@ -1,40 +0,0 @@
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>
</>
)
}
apps/dashboard/app/(authenticated)/sales/customers/[id]/notes/page.tsx
-206
View File
@@ -1,206 +0,0 @@
"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>
)
}
apps/dashboard/app/(authenticated)/sales/customers/[id]/page.tsx
-19
View File
@@ -1,19 +0,0 @@
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>
)
}
apps/dashboard/app/(authenticated)/sales/customers/[id]/vehicles/page.tsx
-72
View File
@@ -1,72 +0,0 @@
"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(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/customers/page.tsx
-63
View File
@@ -1,63 +0,0 @@
"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 { CustomerForm } from '@/modules/customers/customer-form'
import { CUSTOMER_ROUTES } from '@garage/api'
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">
{(resourceId) => (
<CustomerForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "first_name",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
cell: ({ row }) => {
const customerName = row.original.first_name
const isCompany = row.original.customer_type?.name?.toLocaleLowerCase() === "company";
const companyName = row.original.company_name
const name = isCompany && companyName ? `${customerName} (${row.original.last_name})` : customerName
return (<div className="flex items-center gap-2">
{isCompany ? <Building2Icon className="text-muted-foreground" /> : <UserIcon className="text-muted-foreground" />}
<span>{name}</span>
</div>
)
},
},
{
accessorKey: "email",
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
},
{
accessorKey: "phone",
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/estimates/[id]/layout.tsx
-41
View File
@@ -1,41 +0,0 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { EstimateActions } from '@/modules/estimates/estimate-actions'
import { EstimateProvider } from '@/modules/estimates/estimate-context'
import { FileTextIcon } from 'lucide-react'
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 estimate = await api.estimates.getById(id)
const estimateData = (estimate as any)?.data
const title = estimateData?.title || estimateData?.estimate_number || `Estimate #${id}`
const estimateLabel = estimateData?.estimate_number
? `${estimateData.estimate_number}${estimateData.title ? ` — ${estimateData.title}` : ''}`
: title
return (
<EstimateProvider estimate={{ id, label: estimateLabel }}>
<DashboardDetailsPage
className="p-0 lg:p-0"
icon={<FileTextIcon className="size-5" />}
title={title}
description={
estimateData?.date ? `Date: ${estimateData.date}` : undefined
}
backHref="/sales/estimates"
actions={<EstimateActions estimateId={id} />}
tabs={[
{ href: `/sales/estimates/${id}`, label: 'Details' },
]}
>
{props.children}
</DashboardDetailsPage>
</EstimateProvider>
)
}
apps/dashboard/app/(authenticated)/sales/estimates/[id]/page.tsx
-21
View File
@@ -1,21 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { EstimateGeneralInfo } from '@/modules/estimates/estimate-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 estimate = await api.estimates.getById(id)
const estimateData = (estimate as any)?.data
if (!estimateData) {
return <div className="text-muted-foreground p-4">Estimate not found.</div>
}
return (
<DashboardPage header={null}>
<EstimateGeneralInfo estimate={estimateData} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/estimates/page.tsx
-91
View File
@@ -1,91 +0,0 @@
"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 { EstimateForm } from '@/modules/estimates/estimate-form'
import { ESTIMATE_ROUTES } from '@garage/api'
import type { EstimatesClient } from '@garage/api'
import { Car, FileTextIcon } from 'lucide-react'
import { Button } from '@/shared/components/ui/button'
import Link from 'next/link'
export default function EstimatesPage() {
return (
<ResourcePage<EstimatesClient>
pageTitle="Estimates"
routeKey={ESTIMATE_ROUTES.INDEX}
getClient={(api) => api.estimates}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Estimate">
{(resourceId) => (
<EstimateForm
resourceId={resourceId}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => {
const item = row.original
return (
<div className="flex items-center gap-2">
<Link href={`/sales/estimates/${item.id}`} className="flex items-center gap-2 hover:underline">
<FileTextIcon className="text-muted-foreground h-4 w-4" />
<span>{item.title}</span>
</Link>
</div>
)
},
},
{
accessorKey: "estimate_number",
header: ({ column }) => <ColumnHeader column={column} title="Estimate #" />,
},
{
accessorKey: "customer_name",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
},
{
accessorKey: "vehicle_id",
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
cell: ({ row }) => {
const item = row.original
return <Button variant="outline" asChild size="sm">
<Link href={`/sales/vehicles/${item.vehicle_id}`}>
<Car/> Go to vehicle
</Link>
</Button>
}
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
},
{
accessorKey: "has_insurance",
header: ({ column }) => <ColumnHeader column={column} title="Insurance" />,
cell: ({ row }) => {
const item = row.original
return item.has_insurance ? "Yes" : "No"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const item = row.original
return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/inspections/[id]/checkpoints/page.tsx
-589
View File
@@ -1,589 +0,0 @@
"use client"
import { use, useState, useRef, useCallback } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/shared/components/ui/dialog"
import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Textarea } from "@/shared/components/ui/textarea"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/shared/components/ui/select"
import { toast } from "sonner"
import {
Plus,
Ellipsis,
Pencil,
Trash2,
CheckCircle2,
AlertTriangle,
XCircle,
MinusCircle,
CircleDot,
Paperclip,
FileUp,
FileText,
FileImage,
File,
X,
} from "lucide-react"
import { INSPECTION_ROUTES } from "@garage/api"
// ── Types ──
type CheckpointItem = {
id: number
inspection_id?: number
name?: string
description?: string
record_type?: string
condition_rate?: number
file?: string
status?: string
created_at?: string
updated_at?: string
}
// ── Constants ──
const CHECKPOINT_STATUSES = [
{ value: "passed", label: "Passed", icon: CheckCircle2, color: "bg-green-100 text-green-800" },
{ value: "need_attention", label: "Need Attention", icon: AlertTriangle, color: "bg-yellow-100 text-yellow-800" },
{ value: "failed", label: "Failed", icon: XCircle, color: "bg-red-100 text-red-800" },
{ value: "not_applicable", label: "Not Applicable", icon: MinusCircle, color: "bg-gray-100 text-gray-800" },
{ value: "not_inspected", label: "Not Inspected", icon: CircleDot, color: "bg-blue-100 text-blue-800" },
] as const
const RECORD_TYPES = [
{ value: "record_conditions", label: "Record Conditions" },
{ value: "record_audio", label: "Record Audio" },
{ value: "record_video", label: "Record Video" },
{ value: "capture_photo", label: "Capture Photo" },
] as const
function formatStatus(status?: string) {
if (!status) return "Not Inspected"
return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
}
function getStatusConfig(status?: string) {
return CHECKPOINT_STATUSES.find((s) => s.value === status) || CHECKPOINT_STATUSES[4]
}
// ── Checkpoint Form Dialog ──
function CheckpointFormDialog({
open,
onOpenChange,
inspectionId,
checkpoint,
onSuccess,
}: {
open: boolean
onOpenChange: (open: boolean) => void
inspectionId: string
checkpoint?: CheckpointItem | null
onSuccess: () => void
}) {
const api = useAuthApi()
const [name, setName] = useState(checkpoint?.name ?? "")
const [description, setDescription] = useState(checkpoint?.description ?? "")
const [recordType, setRecordType] = useState(checkpoint?.record_type ?? "record_conditions")
const [isPending, setIsPending] = useState(false)
const isEditing = !!checkpoint
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!name.trim()) {
toast.error("Name is required")
return
}
setIsPending(true)
try {
const payload = {
inspection_id: Number(inspectionId),
name: name.trim(),
description: description.trim() || undefined,
record_type: recordType,
}
if (isEditing) {
const promise = api.inspections.updateCheckpoint(String(checkpoint.id), payload)
toast.promise(promise, {
loading: "Updating checkpoint...",
success: "Checkpoint updated",
error: "Failed to update checkpoint",
})
await promise
} else {
const promise = api.inspections.createCheckpoint(payload)
toast.promise(promise, {
loading: "Creating checkpoint...",
success: "Checkpoint created",
error: "Failed to create checkpoint",
})
await promise
}
onSuccess()
onOpenChange(false)
} finally {
setIsPending(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>{isEditing ? "Edit Checkpoint" : "Add Checkpoint"}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="cp-name">Name *</Label>
<Input
id="cp-name"
placeholder="e.g. Engine Oil Level"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="cp-description">Description</Label>
<Textarea
id="cp-description"
placeholder="Check oil level and condition"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
<div className="grid gap-2">
<Label htmlFor="cp-record-type">Record Type</Label>
<Select value={recordType} onValueChange={setRecordType}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{RECORD_TYPES.map((rt) => (
<SelectItem key={rt.value} value={rt.value}>
{rt.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button type="submit" disabled={isPending}>
{isEditing ? <Pencil className="size-4" /> : <Plus className="size-4" />}
{isPending
? (isEditing ? "Updating..." : "Creating...")
: (isEditing ? "Update Checkpoint" : "Create Checkpoint")}
</Button>
</form>
</DialogContent>
</Dialog>
)
}
// ── Attachments Dialog ──
function getFileIcon(url: string) {
const ext = url.split(".").pop()?.toLowerCase()
if (["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")) return FileImage
if (ext === "pdf") return FileText
return File
}
function getFileName(url: string) {
try {
return decodeURIComponent(url.split("/").pop() ?? "Attachment")
} catch {
return url.split("/").pop() ?? "Attachment"
}
}
function isImageUrl(url: string) {
const ext = url.split(".").pop()?.toLowerCase()
return ["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")
}
function CheckpointAttachmentsDialog({
open,
onOpenChange,
checkpoint,
onSuccess,
}: {
open: boolean
onOpenChange: (open: boolean) => void
checkpoint: CheckpointItem | null
onSuccess: () => void
}) {
const api = useAuthApi()
const fileInputRef = useRef<HTMLInputElement>(null)
const [isUploading, setIsUploading] = useState(false)
const handleUpload = useCallback(async (file: globalThis.File) => {
if (!checkpoint) return
setIsUploading(true)
try {
const promise = api.inspections.uploadCheckpointMedia(
String(checkpoint.id),
{ file },
)
toast.promise(promise, {
loading: "Uploading attachment...",
success: "Attachment uploaded",
error: "Failed to upload attachment",
})
await promise
onSuccess()
} finally {
setIsUploading(false)
if (fileInputRef.current) fileInputRef.current.value = ""
}
}, [api, checkpoint, onSuccess])
const handleDelete = useCallback(async () => {
if (!checkpoint) return
const promise = api.inspections.deleteCheckpointMedia(String(checkpoint.id))
toast.promise(promise, {
loading: "Removing attachment...",
success: "Attachment removed",
error: "Failed to remove attachment",
})
await promise
onSuccess()
}, [api, checkpoint, onSuccess])
const hasFile = !!checkpoint?.file
const FileIcon = checkpoint?.file ? getFileIcon(checkpoint.file) : File
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Attachments — {checkpoint?.name}</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-4">
{/* Current attachment */}
{hasFile ? (
<div className="rounded-lg border p-3">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3 min-w-0 ">
{isImageUrl(checkpoint.file!) ? (
<img
src={checkpoint.file!}
alt="Checkpoint attachment"
className="size-12 rounded-md object-cover"
/>
) : (
<div className="flex size-12 shrink-0 items-center justify-center rounded-md bg-muted">
<FileIcon className="size-5 text-muted-foreground" />
</div>
)}
<div className="min-w-0 flex flex-col gap-0.5 max-w-48">
<a
href={checkpoint.file!}
target="_blank"
rel="noopener noreferrer"
className="truncate text-sm font-medium text-primary hover:underline"
>
{getFileName(checkpoint.file!)}
</a>
<span className="text-xs text-muted-foreground">
Current attachment
</span>
</div>
</div>
<Button
variant="ghost"
size="icon"
className="shrink-0 text-destructive hover:text-destructive"
onClick={handleDelete}
title="Remove attachment"
>
<Trash2 className="size-4" />
</Button>
</div>
</div>
) : (
<div className="flex flex-col items-center gap-2 rounded-lg border border-dashed p-6 text-muted-foreground">
<Paperclip className="size-8" />
<span className="text-sm">No attachments yet</span>
</div>
)}
{/* Upload area */}
<input
ref={fileInputRef}
type="file"
className="hidden"
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,audio/*,video/*"
onChange={(e) => {
const file = e.target.files?.[0]
if (file) handleUpload(file)
}}
/>
<Button
variant="outline"
className="w-full"
disabled={isUploading}
onClick={() => fileInputRef.current?.click()}
>
<FileUp className="size-4" />
{isUploading
? "Uploading..."
: hasFile
? "Replace Attachment"
: "Add Attachment"}
</Button>
</div>
</DialogContent>
</Dialog>
)
}
// ── Main Page ──
export default function InspectionCheckpointsPage({ params }: { params: Promise<{ id: string }> }) {
const { id: inspectionId } = use(params)
const api = useAuthApi()
const queryClient = useQueryClient()
const [formOpen, setFormOpen] = useState(false)
const [editingCheckpoint, setEditingCheckpoint] = useState<CheckpointItem | null>(null)
const [attachmentsCheckpoint, setAttachmentsCheckpoint] = useState<CheckpointItem | null>(null)
const queryKey = [INSPECTION_ROUTES.CHECKPOINTS, inspectionId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.inspections.listCheckpoints({ inspection_id: inspectionId } as never),
})
const invalidate = () => {
queryClient.invalidateQueries({ queryKey })
}
// ── Status change mutation ──
const changeStatusMutation = useMutation({
mutationFn: ({ checkpointId, status }: { checkpointId: number; status: string }) =>
api.inspections.changeCheckpointStatus({
inspection_id: Number(inspectionId),
inspection_check_point_id: String(checkpointId),
name: "", // required by API type but server uses checkpoint id from context
record_type: "record_conditions",
status,
} as never),
onSuccess: () => invalidate(),
})
// ── Delete checkpoint mutation ──
const deleteMutation = useMutation({
mutationFn: (checkpointId: string) => api.inspections.destroyCheckpoint(checkpointId),
onSuccess: () => {
toast.success("Checkpoint deleted")
invalidate()
},
onError: () => toast.error("Failed to delete checkpoint"),
})
const handleEdit = (checkpoint: CheckpointItem) => {
setEditingCheckpoint(checkpoint)
setFormOpen(true)
}
const handleAdd = () => {
setEditingCheckpoint(null)
setFormOpen(true)
}
const handleStatusChange = (checkpointId: number, status: string) => {
const promise = changeStatusMutation.mutateAsync({ checkpointId, status, })
toast.promise(promise, {
loading: "Updating status...",
success: `Status changed to ${formatStatus(status)}`,
error: "Failed to update status",
})
}
const checkpoints = (data as any)?.data ?? []
const meta = (data as any)?.meta
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
const columns = [
{
accessorKey: "name",
header: ({ column }: any) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
return (
<div className="flex flex-col gap-0.5">
<span className="font-medium">{item.name}</span>
{item.description && (
<span className="text-xs text-muted-foreground">{item.description}</span>
)}
</div>
)
},
},
{
accessorKey: "record_type",
header: ({ column }: any) => <ColumnHeader column={column} title="Record Type" />,
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
const rt = RECORD_TYPES.find((r) => r.value === item.record_type)
return rt?.label ?? item.record_type ?? "—"
},
},
{
accessorKey: "status",
header: ({ column }: any) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
const config = getStatusConfig(item.status)
return (
<Badge className={config.color}>
<config.icon className="mr-1 size-3" />
{formatStatus(item.status)}
</Badge>
)
},
},
{
accessorKey: "condition_rate",
header: ({ column }: any) => <ColumnHeader column={column} title="Condition" />,
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
return item.condition_rate != null ? `${item.condition_rate}/10` : "—"
},
},
{
id: "attachments",
header: () => <span className="text-xs">Attachments</span>,
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
return (
<Button
variant="ghost"
size="sm"
className="gap-1.5"
onClick={() => setAttachmentsCheckpoint(item)}
>
<Paperclip className="size-3.5" />
{item.file ? (
<Badge variant="secondary" className="px-1.5 py-0 text-xs">1</Badge>
) : (
<span className="text-xs text-muted-foreground">0</span>
)}
</Button>
)
},
enableSorting: false,
},
{
id: "actions",
cell: ({ row }: any) => {
const item = row.original as CheckpointItem
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-8">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{CHECKPOINT_STATUSES.map((s) => (
<DropdownMenuItem
key={s.value}
onClick={() => handleStatusChange(item.id, s.value)}
disabled={item.status === s.value}
>
<s.icon className="size-4" />
{s.label}
</DropdownMenuItem>
))}
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => handleEdit(item)}>
<Pencil className="size-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem
variant="destructive"
onClick={() => deleteMutation.mutate(String(item.id))}
>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
},
},
]
return (
<DashboardPage header={null}>
<div className="flex items-center justify-between p-4">
<h3 className="text-lg font-semibold">Checkpoints</h3>
<Button onClick={handleAdd} size="sm">
<Plus className="size-4" />
Add Checkpoint
</Button>
</div>
<DataTable
columns={columns}
data={checkpoints}
pagination={pagination}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
<CheckpointFormDialog
open={formOpen}
onOpenChange={(open) => {
setFormOpen(open)
if (!open) setEditingCheckpoint(null)
}}
inspectionId={inspectionId}
checkpoint={editingCheckpoint}
onSuccess={invalidate}
/>
<CheckpointAttachmentsDialog
open={!!attachmentsCheckpoint}
onOpenChange={(open) => {
if (!open) setAttachmentsCheckpoint(null)
}}
checkpoint={attachmentsCheckpoint}
onSuccess={invalidate}
/>
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/inspections/[id]/edit/page.tsx
-42
View File
@@ -1,42 +0,0 @@
"use client"
import { use } from "react"
import { useQuery } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { InspectionForm } from "@/modules/inspections/inspection-form"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import { INSPECTION_ROUTES } from "@garage/api"
export default function InspectionEditPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
const api = useAuthApi()
const router = useRouter()
const { data, isLoading } = useQuery({
queryKey: [INSPECTION_ROUTES.BY_ID, id],
queryFn: () => api.inspections.getById(id),
})
if (isLoading) {
return (
<DashboardPage header={null}>
<div className="flex items-center justify-center p-8 text-muted-foreground">
Loading...
</div>
</DashboardPage>
)
}
return (
<DashboardPage header={null}>
<div className="mx-auto max-w-2xl p-6">
<InspectionForm
resourceId={id}
initialData={data}
onSuccess={() => router.push(`/sales/inspections/${id}`)}
/>
</div>
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/inspections/[id]/layout.tsx
-42
View File
@@ -1,42 +0,0 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { InspectionActions } from '@/modules/inspections/inspection-actions'
import { InspectionProvider } from '@/modules/inspections/inspection-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 inspection = await api.inspections.getById(id)
const title = inspection.data?.title || 'Inspection Details'
const orderNumber = inspection.data?.order_number
const status = inspection.data?.status
return (
<InspectionProvider inspection={{ id, label: title }}>
<DashboardDetailsPage
className="p-0 lg:p-0"
title={title}
description={orderNumber ? `Order: ${orderNumber}` : undefined}
backHref="/sales/inspections"
actions={<InspectionActions inspectionId={id} status={status} />}
tabs={[
{
href: `/sales/inspections/${id}`,
label: 'Details',
},
{
href: `/sales/inspections/${id}/checkpoints`,
label: 'Checkpoints',
},
]}
>
{props.children}
</DashboardDetailsPage>
</InspectionProvider>
)
}
apps/dashboard/app/(authenticated)/sales/inspections/[id]/page.tsx
-19
View File
@@ -1,19 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { InspectionGeneralInfo } from '@/modules/inspections/inspection-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 inspection = await api.inspections.getById(id)
if (!inspection.data) {
return <div className="text-muted-foreground">Inspection not found.</div>
}
return (
<DashboardPage header={null}>
<InspectionGeneralInfo inspection={inspection.data} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/inspections/page.tsx
-75
View File
@@ -1,75 +0,0 @@
"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"
export default function InspectionsPage() {
const router = useRouter()
return (
<ResourcePage<InspectionsClient>
pageTitle="Inspections"
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}
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(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/invoice/[id]/documents/page.tsx
-162
View File
@@ -1,162 +0,0 @@
"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 { InvoiceDocumentForm } from "@/modules/invoices/invoice-document-form"
type InvoiceDocument = {
id: number
document_number?: string
show_in_invoice?: boolean
show_in_estimate?: boolean
show_in_statement?: boolean
created_at: string
updated_at: string
}
export default function InvoiceDocumentsPage() {
const { id: invoiceId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const queryKey = ["invoice-documents", invoiceId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.invoices.listDocuments({ invoice_id: invoiceId }),
})
const deleteMutation = useMutation({
mutationFn: (id: number) => api.invoices.destroyDocument(String(id)),
onSuccess: () => {
toast.success("Document deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete document.")
},
})
const handleDelete = async (doc: InvoiceDocument) => {
const confirmed = await confirm({
title: "Delete Document",
description: `Are you sure you want to delete "${doc.document_number || "this document"}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(doc.id)
}
}
const columns: ColumnDef<InvoiceDocument>[] = [
{
accessorKey: "document_number",
header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
},
{
accessorKey: "show_in_invoice",
header: ({ column }) => <ColumnHeader column={column} title="Show in Invoice" />,
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
},
{
accessorKey: "show_in_estimate",
header: ({ column }) => <ColumnHeader column={column} title="Show in Estimate" />,
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
},
{
accessorKey: "show_in_statement",
header: ({ column }) => <ColumnHeader column={column} title="Show in Statement" />,
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
},
{
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 document"
>
<Trash2 className="size-4 text-destructive" />
</Button>
),
enableSorting: false,
},
]
const documents = (data as any)?.data ?? []
const meta = (data as any)?.meta
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-end">
<Button onClick={() => setDialogOpen(true)}>
<Plus className="size-4" />
Add Document
</Button>
</div>
<Card>
<CardContent>
<DataTable
columns={columns}
data={documents}
pagination={pagination}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Add Document</DialogTitle>
</DialogHeader>
<InvoiceDocumentForm
invoiceId={invoiceId}
onSuccess={() => {
setDialogOpen(false)
queryClient.invalidateQueries({ queryKey })
}}
/>
</DialogContent>
</Dialog>
</div>
)
}
apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx
-43
View File
@@ -1,43 +0,0 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { InvoiceActions } from '@/modules/invoices/invoice-actions'
import { InvoiceProvider } from '@/modules/invoices/invoice-context'
import { ReceiptIcon } from 'lucide-react'
import React from 'react'
export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
const { id } = await props.params
const api = await getServerApi()
const invoice = await api.invoices.show(id)
const data = (invoice as any)?.data ?? invoice
const title = data?.subject || data?.invoice_number || 'Invoice Details'
return (
<InvoiceProvider invoice={{ id, label: title }}>
<DashboardDetailsPage
className='p-0 lg:p-0'
title={title}
description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
icon={<ReceiptIcon className="size-5" />}
backHref="/sales/invoice"
actions={<InvoiceActions invoiceId={id} />}
tabs={[
{
href: `/sales/invoice/${id}`,
label: 'Details'
},
{
href: `/sales/invoice/${id}/documents`,
label: 'Documents'
},
{
href: `/sales/invoice/${id}/notes`,
label: 'Notes'
},
]}
>
{props.children}
</DashboardDetailsPage>
</InvoiceProvider>
)
}
apps/dashboard/app/(authenticated)/sales/invoice/[id]/notes/page.tsx
-148
View File
@@ -1,148 +0,0 @@
"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 { InvoiceNoteForm } from "@/modules/invoices/invoice-note-form"
type InvoiceNote = {
id: number
note?: string
created_at: string
updated_at: string
}
export default function InvoiceNotesPage() {
const { id: invoiceId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const queryKey = ["invoice-notes", invoiceId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.invoices.listNotes({ invoice_id: invoiceId }),
})
const deleteMutation = useMutation({
mutationFn: (id: number) => api.invoices.destroyNote(String(id)),
onSuccess: () => {
toast.success("Note deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete note.")
},
})
const handleDelete = async (note: InvoiceNote) => {
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<InvoiceNote>[] = [
{
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 = (data as any)?.data ?? []
const meta = (data as any)?.meta
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
return (
<div className="flex flex-col gap-4">
<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={pagination}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Add Note</DialogTitle>
</DialogHeader>
<InvoiceNoteForm
invoiceId={invoiceId}
onSuccess={() => {
setDialogOpen(false)
queryClient.invalidateQueries({ queryKey })
}}
/>
</DialogContent>
</Dialog>
</div>
)
}
apps/dashboard/app/(authenticated)/sales/invoice/[id]/page.tsx
-20
View File
@@ -1,20 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { InvoiceGeneralInfo } from '@/modules/invoices/invoice-general-info'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
export default async function InvoiceDetailPage(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params
const api = await getServerApi()
const invoice = await api.invoices.show(id)
const data = (invoice as any)?.data ?? invoice
if (!data) {
return <div className="text-muted-foreground">Invoice not found.</div>
}
return (
<DashboardPage header={null}>
<InvoiceGeneralInfo invoice={data} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/invoice/page.tsx
-89
View File
@@ -1,89 +0,0 @@
"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 { InvoiceForm } from "@/modules/invoices/invoice-form"
import { INVOICE_ROUTES } from "@garage/api"
import type { InvoicesClient } from "@garage/api"
type InvoiceItem = {
id: number
subject?: string
invoice_number?: string
customer_name?: string
status?: string
invoice_date?: string
due_date?: string
created_at?: string
}
export default function InvoicesPage() {
const router = useRouter()
return (
<ResourcePage<InvoicesClient>
pageTitle="Invoices"
routeKey={INVOICE_ROUTES.INDEX}
getClient={(api) => api.invoices}
onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Invoice">
{(resourceId) => (
<InvoiceForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "subject",
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
},
{
accessorKey: "invoice_number",
header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
},
{
accessorKey: "customer_name",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const item = row.original as unknown as InvoiceItem
const status = item.status
const colorMap: Record<string, string> = {
draft: "text-muted-foreground",
open: "text-blue-600",
paid: "text-green-600",
overdue: "text-red-600",
void: "text-gray-400",
}
return (
<span className={colorMap[status ?? ""] ?? ""}>
{status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"}
</span>
)
},
},
{
accessorKey: "invoice_date",
header: ({ column }) => <ColumnHeader column={column} title="Invoice Date" />,
},
{
accessorKey: "due_date",
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx
-101
View File
@@ -1,101 +0,0 @@
"use client"
import { use } from "react"
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 { AppointmentForm } from "@/modules/appointments/appointment-form"
import { APPOINTMENT_ROUTES } from "@garage/api"
import type { AppointmentsClient } from "@garage/api"
import { CalendarCheck2Icon, ClockIcon } from "lucide-react"
import { Badge } from "@/shared/components/ui/badge"
import { useJobCard } from "@/modules/job-cards/job-card-context"
const STATUS_COLORS: Record<string, string> = {
requested: "bg-yellow-100 text-yellow-800",
confirmed: "bg-blue-100 text-blue-800",
in_progress: "bg-purple-100 text-purple-800",
completed: "bg-green-100 text-green-800",
cancelled: "bg-red-100 text-red-800",
}
export default function JobCardAppointmentsPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const router = useRouter()
const jobCard = useJobCard()
const defaultJobCard = jobCard
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
: null
return (
<ResourcePage<AppointmentsClient>
routeKey={APPOINTMENT_ROUTES.INDEX}
getClient={(api) => api.appointments}
extraParams={{ job_card_id: jobCardId }}
header={null}
onRowClick={(row) => router.push(`/calendar/appointment/${(row as any).id}`)}
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
<div className="flex justify-end">
<FormDialog title="Appointment">
{(resourceId) => (
<AppointmentForm
resourceId={resourceId}
initialData={selectedItem ?? { job_card: defaultJobCard }}
onSuccess={() => { closeDialog(); invalidateQuery() }}
/>
)}
</FormDialog>
</div>
)}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => (
<div className="flex items-center gap-2">
<CalendarCheck2Icon className="size-4 text-muted-foreground" />
<span>{(row.original as any).title}</span>
</div>
),
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
},
{
accessorKey: "from_time",
header: ({ column }) => <ColumnHeader column={column} title="Time" />,
cell: ({ row }) => {
const r = row.original as any
return (
<div className="flex items-center gap-1">
<ClockIcon className="size-3 text-muted-foreground" />
<span>{r.from_time} - {r.to_time}</span>
</div>
)
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
return (
<Badge className={colorClass}>
{status?.replace("_", " ") ?? "—"}
</Badge>
)
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx
-155
View File
@@ -1,155 +0,0 @@
"use client"
import { useParams } from "next/navigation"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useState, useRef } from "react"
import { Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { confirm } from "@/shared/components/confirm-dialog"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent } from "@/shared/components/ui/card"
import { JOB_CARD_ROUTES, JobCardResponseData } from "@garage/api"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
import { useJobCard } from "@/modules/job-cards/job-card-context"
import { CONSTANTS } from "@/config/constants"
function getFileIcon(mimeType?: string) {
if (mimeType?.startsWith("image/")) return ImageIcon
if (mimeType?.includes("pdf")) return FileTextIcon
return FileIcon
}
export default function JobCardAttachmentsPage() {
const { id: jobCardId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const fileInputRef = useRef<HTMLInputElement>(null)
const [isUploading, setIsUploading] = useState(false)
const queryKey = [JOB_CARD_ROUTES.INDEX, jobCardId, "attachments"]
const jobcard = useJobCard()
const attachments = jobcard?.attachment_files
const deleteMutation = useMutation({
mutationFn: (attachmentId: number) =>
api.jobCards.deleteAttachment(jobCardId, attachmentId),
onSuccess: () => {
toast.success("Attachment deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete attachment.")
},
})
const handleDelete = async (attachment: JobCardResponseData['attachment_files'][number]) => {
const confirmed = await confirm({
title: "Delete Attachment",
description: `Are you sure you want to delete "${attachment.original_name}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(attachment.id)
}
}
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files
if (!files || files.length === 0) return
setIsUploading(true)
const promise = api.jobCards.addAttachment(jobCardId, Array.from(files))
toast.promise(promise, {
loading: "Uploading attachment(s)...",
success: "Attachment(s) uploaded successfully",
error: "Failed to upload attachment(s)",
})
try {
await promise
queryClient.invalidateQueries({ queryKey })
} finally {
setIsUploading(false)
if (fileInputRef.current) {
fileInputRef.current.value = ""
}
}
}
return (
<DashboardPage
header={null}
>
<div className="flex items-center justify-end mb-4">
<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={handleUpload}
/>
<Button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
>
<Plus className="size-4" />
{isUploading ? "Uploading..." : "Upload Attachment"}
</Button>
</div>
{attachments?.length === 0 ? (
<Card>
<CardContent className="py-8 text-center text-muted-foreground">
No attachments yet. Click "Upload Attachment" to add files.
</CardContent>
</Card>
) : (
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{attachments?.map((attachment) => {
const Icon = getFileIcon(attachment.attachment_path)
return (
<Card key={attachment.id}>
<CardContent className="flex items-center gap-3 p-4">
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
<Icon className="size-5" />
</div>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<a
href={CONSTANTS.getAssetUrl(attachment.attachment_path)}
target="_blank"
rel="noopener noreferrer"
className="truncate text-sm font-medium hover:underline"
title={attachment.original_name}
>
{attachment.original_name}
</a>
{attachment.created_at && (
<span className="text-xs text-muted-foreground">
{new Date(attachment.created_at).toLocaleDateString()}
</span>
)}
</div>
<Button
variant="ghost"
size="icon-sm"
onClick={() => handleDelete(attachment)}
title="Delete attachment"
>
<Trash2 className="size-4 text-destructive" />
</Button>
</CardContent>
</Card>
)
})}
</div>
)}
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx
-88
View File
@@ -1,88 +0,0 @@
"use client"
import { use } from "react"
import FormDialog from "@/shared/components/form-dialog"
import { Badge } from "@/shared/components/ui/badge"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { BillForm } from "@/modules/bills/bill-form"
import { BILL_ROUTES } from "@garage/api"
import type { BillsClient } from "@garage/api"
import { useJobCard } from "@/modules/job-cards/job-card-context"
export default function JobCardBillsPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const jobCard = useJobCard()
const defaultJobCard = jobCard
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
: null
return (
<ResourcePage<BillsClient>
routeKey={BILL_ROUTES.INDEX}
getClient={(api) => api.bills}
extraParams={{ job_card_id: jobCardId }}
header={null}
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
<div className="flex justify-end">
<FormDialog title="Bill">
{(resourceId) => (
<BillForm
resourceId={resourceId}
initialData={selectedItem ?? { job_card: defaultJobCard }}
onSuccess={() => { closeDialog(); invalidateQuery() }}
/>
)}
</FormDialog>
</div>
)}
columns={({ actionsColumn }) => [
{
accessorKey: "bill_number",
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
cell: ({ row }) => (row.original as any).bill_number || "—",
},
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "bill_date",
header: ({ column }) => <ColumnHeader column={column} title="Bill Date" />,
cell: ({ row }) => {
const value = (row.original as any).bill_date
return value ? new Date(value).toLocaleDateString() : "—"
},
},
{
accessorKey: "bill_due_date",
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
cell: ({ row }) => {
const value = (row.original as any).bill_due_date
return value ? new Date(value).toLocaleDateString() : "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return <Badge variant={status === "paid" ? "default" : "secondary"}>{status || "—"}</Badge>
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expenses/page.tsx
-92
View File
@@ -1,92 +0,0 @@
"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 { ExpenseForm } from "@/modules/expenses/expense-form"
import { Badge } from "@/shared/components/ui/badge"
import { EXPENSE_ROUTES } from "@garage/api"
import type { ExpensesClient } from "@garage/api"
import { useJobCard } from "@/modules/job-cards/job-card-context"
export default function JobCardExpensesPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const jobCard = useJobCard()
const defaultJobCard = jobCard
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
: null
return (
<ResourcePage<ExpensesClient>
routeKey={EXPENSE_ROUTES.INDEX}
getClient={(api) => api.expenses}
extraParams={{ job_card_id: jobCardId }}
header={null}
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
<div className="flex justify-end">
<FormDialog title="Expense">
{(resourceId) => (
<ExpenseForm
resourceId={resourceId}
initialData={selectedItem ?? { job_card: defaultJobCard }}
onSuccess={() => { closeDialog(); invalidateQuery() }}
/>
)}
</FormDialog>
</div>
)}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "invoice_number",
header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
cell: ({ row }) => (row.original as any).invoice_number || "—",
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "expense_date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const val = (row.original as any).expense_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const status = (row.original as any).status
return (
<Badge variant={status === "paid" ? "default" : "secondary"}>
{status || "—"}
</Badge>
)
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx
-72
View File
@@ -1,72 +0,0 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { JobCardActions } from '@/modules/job-cards/job-card-actions'
import { JobCardProvider } from '@/modules/job-cards/job-card-context'
import { JobCardStatusStepper } from '@/modules/job-cards/job-card-status-stepper'
import { ClipboardListIcon, Ellipsis, Pencil, Trash2 } from 'lucide-react'
import React from 'react'
import JobCardDropdown from '@/modules/job-cards/job-card-dropdown'
export default async function JobCardDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
const { id } = await props.params
const api = await getServerApi()
const jobCard = await api.jobCards.show(id).then(res => res.data)
const title = jobCard?.title || 'Job Card Details'
const status = jobCard?.status || 'draft'
const docs = jobCard?.documents
return (
<JobCardProvider jobCard={{ ...jobCard }}>
<DashboardDetailsPage
className='p-0 lg:p-0'
title={title}
description={status ? `Status: ${status.split("_").map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}` : undefined}
icon={<ClipboardListIcon className="size-5" />}
backHref="/sales/job-cards"
actions={
<JobCardDropdown id={id} />
}
subHeader={<JobCardStatusStepper jobCardId={id} />}
tabs={[
{
href: `/sales/job-cards/${id}`,
label: 'Details'
},
{
href: `/sales/job-cards/${id}/attachments`,
label: `Attachments (${docs?.length || 0})`
},
{
href: `/sales/job-cards/${id}/purchase-orders`,
label: `Purchase Orders (${jobCard?.purchase_orders_count || 0})`
},
{
href: `/sales/job-cards/${id}/bills`,
label: `Bills (${jobCard?.bills_count || 0})`
},
{
href: `/sales/job-cards/${id}/appointments`,
label: `Appointments (${jobCard?.appointments_count || 0})`
},
{
href: `/sales/job-cards/${id}/expenses`,
label: `Expenses (${jobCard?.expenses_count || 0})`
},
{
href: `/sales/job-cards/${id}/tasks`,
label: `Tasks (${jobCard?.tasks_count || 0})`
},
{
href: `/sales/job-cards/${id}/parts`,
label: `Parts (${jobCard?.parts_count || 0})`
},
]}
>
{props.children}
</DashboardDetailsPage>
</JobCardProvider>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx
-20
View File
@@ -1,20 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { JobCardGeneralInfo } from '@/modules/job-cards/job-card-general-info'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
export default async function JobCardDetailPage(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params
const api = await getServerApi()
const jobCard = await api.jobCards.show(id)
const data = (jobCard as any)?.data ?? jobCard
if (!data) {
return <div className="text-muted-foreground">Job card not found.</div>
}
return (
<DashboardPage header={null}>
<JobCardGeneralInfo jobCard={data} />
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx
-196
View File
@@ -1,196 +0,0 @@
"use client"
import { use, useState } from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { useAuthApi } from "@/shared/useApi"
import { ColumnHeader, DataTable } from "@/shared/data-view/table-view"
import { Button } from "@/shared/components/ui/button"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/shared/components/ui/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { confirm } from "@/shared/components/confirm-dialog"
import { toast } from "sonner"
import { Ellipsis, Plus } from "lucide-react"
import type { ColumnDef } from "@tanstack/react-table"
import { JobCardPartForm } from "@/modules/job-cards/job-card-part-form"
import { formatDate } from "@/shared/utils/formatters"
export default function JobCardPartsPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const api = useAuthApi()
const queryClient = useQueryClient()
const queryKey = ["job-card-parts", jobCardId]
const [dialogOpen, setDialogOpen] = useState(false)
const [editItem, setEditItem] = useState<any | null>(null)
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.jobCards.getParts(jobCardId),
})
const rows = (data as any)?.data ?? []
const invalidate = () => queryClient.invalidateQueries({ queryKey })
async function handleDelete(row: any) {
const confirmed = await confirm({
title: "Delete this part?",
description: `Remove part "${row.part?.title ?? "this part"}" from the job card?`,
})
if (!confirmed) return
const promise = api.jobCards.deletePart(jobCardId, row.id)
toast.promise(promise, {
loading: "Deleting...",
success: "Part deleted",
error: "Failed to delete part",
})
await promise
invalidate()
}
const columns: ColumnDef<any>[] = [
{
accessorKey: "part.title",
header: ({ column }) => <ColumnHeader column={column} title="Part" />,
cell: ({ row }) => {
const part = row.original.part
return part ? (
<div>
<span className="font-medium">{part.title}</span>
{part.sku && (
<span className="ml-2 text-xs text-muted-foreground">{part.sku}</span>
)}
</div>
) : "—"
},
},
{
accessorKey: "quantity",
header: ({ column }) => <ColumnHeader column={column} title="Qty" />,
cell: ({ row }) => row.original.quantity ?? "—",
},
{
accessorKey: "rate",
header: ({ column }) => <ColumnHeader column={column} title="Rate" />,
cell: ({ row }) => {
const val = row.original.rate
return val != null ? `$${Number(val).toFixed(2)}` : "—"
},
},
{
accessorKey: "tax",
header: ({ column }) => <ColumnHeader column={column} title="Tax" />,
cell: ({ row }) => row.original.tax || "—",
},
{
accessorKey: "department.name",
header: ({ column }) => <ColumnHeader column={column} title="Department" />,
cell: ({ row }) => row.original.department?.name || "—",
},
{
accessorKey: "description",
header: ({ column }) => <ColumnHeader column={column} title="Description" />,
cell: ({ row }) => row.original.description || "—",
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Added" />,
cell: ({ row }) => formatDate(row.original.created_at),
},
{
id: "actions",
cell: ({ row }) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => {
setEditItem(row.original)
setDialogOpen(true)
}}
>
Edit
</DropdownMenuItem>
<DropdownMenuItem
className="text-destructive"
onClick={() => handleDelete(row.original)}
>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
),
},
]
return (
<div className="flex flex-col gap-4 p-4">
<div className="flex justify-end">
<Dialog
open={dialogOpen}
onOpenChange={(open) => {
setDialogOpen(open)
if (!open) setEditItem(null)
}}
>
<DialogTrigger asChild>
<Button onClick={() => setEditItem(null)}>
<Plus className="me-2 h-4 w-4" />
Add Part
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{editItem ? "Edit Part" : "Add Part"}</DialogTitle>
</DialogHeader>
<JobCardPartForm
jobCardId={jobCardId}
jobCardPartId={editItem?.id ?? null}
initialData={editItem}
onSuccess={() => {
setDialogOpen(false)
setEditItem(null)
invalidate()
}}
onCancel={() => {
setDialogOpen(false)
setEditItem(null)
}}
/>
</DialogContent>
</Dialog>
</div>
<DataTable
columns={columns}
data={rows}
pagination={{
page: 1,
pageSize: rows.length || 15,
pageCount: 1,
total: rows.length,
}}
isLoading={isLoading}
/>
</div>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/purchase-orders/page.tsx
-88
View File
@@ -1,88 +0,0 @@
"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 { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form"
import { PURCHASE_ORDER_ROUTES } from "@garage/api"
import type { PurchaseOrdersClient } from "@garage/api"
import { useJobCard } from "@/modules/job-cards/job-card-context"
export default function JobCardPurchaseOrdersPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const jobCard = useJobCard()
const defaultJobCard = jobCard
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
: null
return (
<ResourcePage<PurchaseOrdersClient>
routeKey={PURCHASE_ORDER_ROUTES.INDEX}
getClient={(api) => api.purchaseOrders}
extraParams={{ job_card_id: jobCardId }}
header={null}
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
<div className="flex justify-end">
<FormDialog title="Purchase Order">
{(resourceId) => (
<PurchaseOrderForm
resourceId={resourceId}
initialData={selectedItem ?? { job_card: defaultJobCard }}
onSuccess={() => { closeDialog(); invalidateQuery() }}
/>
)}
</FormDialog>
</div>
)}
columns={({ actionsColumn }) => [
{
accessorKey: "order_number",
header: ({ column }) => <ColumnHeader column={column} title="Order #" />,
cell: ({ row }) => (row.original as any).order_number || "—",
},
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "vendor_name",
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
cell: ({ row }) => (row.original as any).vendor_name || "—",
},
{
accessorKey: "order_date",
header: ({ column }) => <ColumnHeader column={column} title="Order Date" />,
cell: ({ row }) => {
const val = (row.original as any).order_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "delivery_date",
header: ({ column }) => <ColumnHeader column={column} title="Delivery Date" />,
cell: ({ row }) => {
const val = (row.original as any).delivery_date
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/tasks/page.tsx
-75
View File
@@ -1,75 +0,0 @@
"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 { TaskForm } from "@/modules/tasks/task-form"
import { TASK_ROUTES } from "@garage/api"
import type { TasksClient } from "@garage/api"
import { Badge } from "@/shared/components/ui/badge"
import { useJobCard } from "@/modules/job-cards/job-card-context"
import { formatDate, formatEnum } from "@/shared/utils/formatters"
export default function JobCardTasksPage({
params,
}: {
params: Promise<{ id: string }>
}) {
const { id: jobCardId } = use(params)
const jobCard = useJobCard()
const defaultJobCard = jobCard
? { value: String((jobCard as any).id), label: (jobCard as any).title || `Job Card` }
: null
return (
<ResourcePage<TasksClient>
routeKey={TASK_ROUTES.INDEX}
getClient={(api) => api.tasks}
extraParams={{ job_card_id: jobCardId }}
header={null}
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
<div className="flex justify-end">
<FormDialog title="Task">
{(resourceId) => (
<TaskForm
resourceId={resourceId}
initialData={selectedItem ?? { job_card: defaultJobCard }}
onSuccess={() => { closeDialog(); invalidateQuery() }}
/>
)}
</FormDialog>
</div>
)}
columns={({ actionsColumn }) => [
{
accessorKey: "task_number",
header: ({ column }) => <ColumnHeader column={column} title="Task #" />,
cell: ({ row }) => (row.original as any).task_number || "—",
},
{
accessorKey: "subject",
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
cell: ({ row }) => (row.original as any).subject || "—",
},
{
accessorKey: "due_date",
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
cell: ({ row }) => formatDate((row.original as any).due_date),
},
{
accessorKey: "priority",
header: ({ column }) => <ColumnHeader column={column} title="Priority" />,
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
-155
View File
@@ -1,155 +0,0 @@
"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 { JobCardForm } from '@/modules/job-cards/job-card-form'
import { JOB_CARD_ROUTES, JobCardStatus } from '@garage/api'
import type { JobCardsClient } from '@garage/api'
import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs'
import { ClipboardListIcon, SearchIcon } from 'lucide-react'
import { Badge } from '@/shared/components/ui/badge'
import { Input } from '@/shared/components/ui/input'
import { useRouter } from 'next/navigation'
import { useState, useEffect } from 'react'
import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters'
type JobCardItem = {
id: number
title?: string
status?: string
check_in_date?: string
km_in?: number
created_at?: string
}
const statusColorMap: Record<string, string> = {
draft: "secondary",
check_in: "default",
in_progress: "default",
completed: "default",
invoiced: "outline",
cancelled: "destructive",
}
export default function JobCardsPage() {
const router = useRouter()
const [searchInput, setSearchInput] = useState("")
const [search, setSearch] = useState("")
const [statusFilter, setStatusFilter] = useState<string>("check_in")
useEffect(() => {
const timer = setTimeout(() => setSearch(searchInput), 400)
return () => clearTimeout(timer)
}, [searchInput])
const extraParams: Record<string, unknown> = {}
if (search) extraParams.search = search
if (statusFilter !== "all") extraParams.status = statusFilter
return (
<ResourcePage<JobCardsClient>
routeKey={JOB_CARD_ROUTES.INDEX}
getClient={(api) => api.jobCards}
extraParams={extraParams}
onRowClick={(row) => router.push(`/sales/job-cards/${row.id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
title: "Job Cards",
actions: (
<FormDialog classNames={{ dialogContent: 'min-w-6xl' }} title="Job Card" >
{(resourceId) => (
<JobCardForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => {
const item = row.original as unknown as JobCardItem
return (
<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: "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: "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={
<div className="flex justify-between">
<Tabs value={statusFilter} onValueChange={setStatusFilter}>
<TabsList variant="line">
<TabsTrigger value="all" >All</TabsTrigger>
{JobCardStatus.map((status) => (
<TabsTrigger key={status} value={status}>
{formatEnum(status)}
</TabsTrigger>
))}
</TabsList>
</Tabs>
<div className="relative w-64">
<SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search job cards..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
className="pl-8"
/>
</div>
</div>
}
/>
)
}
apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx
-165
View File
@@ -1,165 +0,0 @@
"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 { PaymentReceivedForm } from "@/modules/payment-received/payment-received-form"
import { PAYMENT_RECEIVED_ROUTES } from "@garage/api"
import {
BadgeDollarSignIcon,
CalendarIcon,
CreditCardIcon,
HashIcon,
UserIcon,
ClipboardListIcon,
} from "lucide-react"
type PaymentReceivedItem = {
id: number
payment_number?: string
customer_name?: string
job_card_name?: string
job_card_number?: string
payment_mode_name?: string
amount_received?: string | number
payment_date?: string
note?: string
status?: string
created_at?: string
}
export default function PaymentReceivedPage() {
return (
<ResourcePage<{ list(query?: any): Promise<any>; destroy(id: string): Promise<any> }>
routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
getClient={(api) => ({
list: (query?: any) => api.paymentReceived.list(query),
destroy: (id: string) => api.paymentReceived.destroy(id),
})}
headerProps={({ invalidateQuery }) => ({
actions: (
<FormDialog title="Record Payment">
{(resourceId) => (
<PaymentReceivedForm
resourceId={resourceId}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "payment_number",
header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
return (
<div className="flex items-center gap-2">
<HashIcon className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">{item.payment_number || "—"}</span>
</div>
)
},
},
{
accessorKey: "customer_name",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
return (
<div className="flex items-center gap-2">
<UserIcon className="h-4 w-4 text-muted-foreground" />
<span>{item.customer_name || "—"}</span>
</div>
)
},
},
{
accessorKey: "job_card_name",
header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
const label = item.job_card_number || item.job_card_name
return (
<div className="flex items-center gap-2">
<ClipboardListIcon className="h-4 w-4 text-muted-foreground" />
<span>{label || "—"}</span>
</div>
)
},
},
{
accessorKey: "amount_received",
header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
const amount = item.amount_received
? Number(item.amount_received).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
: "—"
return (
<div className="flex items-center gap-2">
<BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
<span className="font-semibold text-emerald-700 dark:text-emerald-400">
{amount}
</span>
</div>
)
},
},
{
accessorKey: "payment_mode_name",
header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
return (
<div className="flex items-center gap-2">
<CreditCardIcon className="h-4 w-4 text-muted-foreground" />
<span className="capitalize">{item.payment_mode_name || "—"}</span>
</div>
)
},
},
{
accessorKey: "payment_date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
const formatted = item.payment_date
? new Date(item.payment_date).toLocaleDateString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
})
: "—"
return (
<div className="flex items-center gap-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
<span>{formatted}</span>
</div>
)
},
},
{
accessorKey: "note",
header: () => <span>Note</span>,
enableSorting: false,
cell: ({ row }) => {
const item = row.original as unknown as PaymentReceivedItem
const note = item.note
if (!note) return <span className="text-muted-foreground">—</span>
return (
<span className="max-w-50 truncate block" title={note}>
{note}
</span>
)
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/documents/page.tsx
-144
View File
@@ -1,144 +0,0 @@
"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 { VehicleDocumentForm } from "@/modules/vehicles/vehicle-document-form"
type VehicleDocument = {
id: number
name: string
created_at: string
updated_at: string
}
export default function VehicleDocumentsPage() {
const { id: vehicleId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const queryKey = ["vehicle-documents", vehicleId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.vehicleDocuments.listDocuments({ vehicle_id: vehicleId }),
})
const deleteMutation = useMutation({
mutationFn: (id: number) => api.vehicleDocuments.destroyDocument(String(id)),
onSuccess: () => {
toast.success("Document deleted successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to delete document.")
},
})
const handleDelete = async (doc: VehicleDocument) => {
const confirmed = await confirm({
title: "Delete Document",
description: `Are you sure you want to delete "${doc.name}"?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(doc.id)
}
}
const columns: ColumnDef<VehicleDocument>[] = [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Uploaded At" />,
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 document"
>
<Trash2 className="size-4 text-destructive" />
</Button>
),
enableSorting: false,
},
]
const documents = (data as any)?.data ?? []
const meta = (data as any)?.meta
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-end">
<Button onClick={() => setDialogOpen(true)}>
<Plus className="size-4" />
Upload Document
</Button>
</div>
<Card>
<CardContent>
<DataTable
columns={columns}
data={documents}
pagination={pagination}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="min-w-xl">
<DialogHeader>
<DialogTitle>Upload Document</DialogTitle>
</DialogHeader>
<VehicleDocumentForm
vehicleId={vehicleId}
onSuccess={() => {
queryClient.invalidateQueries({ queryKey })
setDialogOpen(false)
}}
/>
</DialogContent>
</Dialog>
</div>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx
-92
View File
@@ -1,92 +0,0 @@
"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 { EstimateForm } from '@/modules/estimates/estimate-form'
import { ESTIMATE_ROUTES } from '@garage/api'
import type { EstimatesClient } from '@garage/api'
import { FileTextIcon } from 'lucide-react'
import { useVehicle } from '@/modules/vehicles/vehicle-context'
export default function VehicleEstimatesPage({ params }: { params: Promise<{ id: string }> }) {
const { id: vehicleId } = use(params)
const vehicle = useVehicle()
return (
<>
<ResourcePage<EstimatesClient>
toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
<FormDialog title="Estimate">
{(resourceId) => (
<EstimateForm
resourceId={resourceId}
initialData={{
vehicle: vehicle ? { value: vehicle.id, label: vehicle.label } : null,
}}
onSuccess={() => {
closeDialog();
invalidateQuery();
}}
/>
)}
</FormDialog>
)
}
pageTitle="Vehicle Estimates"
routeKey={ESTIMATE_ROUTES.INDEX}
getClient={(api) => api.estimates}
extraParams={{ vehicle_id: vehicleId }}
header={
null
}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => {
const item = row.original
return (
<div className="flex items-center gap-2">
<FileTextIcon className="text-muted-foreground h-4 w-4" />
<span>{item.title}</span>
</div>
)
},
},
{
accessorKey: "estimate_number",
header: ({ column }) => <ColumnHeader column={column} title="Estimate #" />,
},
{
accessorKey: "customer_name",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
},
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
},
{
accessorKey: "has_insurance",
header: ({ column }) => <ColumnHeader column={column} title="Insurance" />,
cell: ({ row }) => {
const item = row.original
return item.has_insurance ? "Yes" : "No"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const item = row.original
return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
</>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/layout.tsx
-50
View File
@@ -1,50 +0,0 @@
import { DashboardDetailsPageLayoutProps, DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { VehicleActions } from '@/modules/vehicles/vehicle-actions'
import { Car } from 'lucide-react'
import React from 'react'
import { CONSTANTS } from '@/config/constants'
export default async function layout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
const { id } = await props.params
const api = await getServerApi()
const vehicle = await api.vehicles.getById(id)
const title = `${vehicle.data?.make || ''} ${vehicle.data?.model || ''}`.trim() || 'Vehicle Details'
return (
<>
<DashboardDetailsPage
className='p-0 lg:p-0'
avatarSrc={vehicle.data?.image_url || ""}
// avatarSrc={vehicle.data?.image_url || ""}
title={title}
description={vehicle.data?.license_plate ? `License Plate: ${vehicle.data.license_plate}` : undefined}
backHref="/sales/vehicles"
actions={<VehicleActions vehicleId={id} />}
tabs={[
{
href: `/sales/vehicles/${id}`,
label: 'Details'
},
{
href: `/sales/vehicles/${id}/owners`,
label: 'Owners'
},
{
href: `/sales/vehicles/${id}/documents`,
label: "Documents"
},
{
href: `/sales/vehicles/${id}/mileage`,
label: "Mileage"
},
{
href: `/sales/vehicles/${id}/estimates`,
label: "Estimates"
}
]}
>
{props.children}
</DashboardDetailsPage>
</>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/mileage/page.tsx
-191
View File
@@ -1,191 +0,0 @@
"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, Pencil, Trash2, MoreHorizontal } 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 {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { MileageForm } from "@/modules/vehicles/mileage-form"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
type MileageRecord = {
id: number
name: string
created_at: string
updated_at: string
}
export default function VehicleMileagePage() {
const { id: vehicleId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [dialogOpen, setDialogOpen] = useState(false)
const [editItem, setEditItem] = useState<MileageRecord | null>(null)
const queryKey = ["vehicle-mileage", vehicleId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.vehicleDocuments.listMileage({ vehicle_id: vehicleId }),
})
const deleteMutation = useMutation({
mutationFn: (id: number) => {
const promise = api.vehicleDocuments.destroyMileage(String(id))
toast.promise(promise, {
loading: "Deleting...",
success: "Mileage record deleted successfully.",
error: "Failed to delete mileage record.",
})
return promise
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey })
},
})
const handleDelete = async (record: MileageRecord) => {
const confirmed = await confirm({
title: "Delete Mileage Record",
description: `Are you sure you want to delete this mileage record?`,
confirmLabel: "Delete",
variant: "destructive",
})
if (confirmed) {
deleteMutation.mutate(record.id)
}
}
const handleEdit = (record: MileageRecord) => {
setEditItem(record)
setDialogOpen(true)
}
const handleCreate = () => {
setEditItem(null)
setDialogOpen(true)
}
const columns: ColumnDef<MileageRecord>[] = [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Recorded At" />,
cell: ({ getValue }) => {
const val = getValue<string>()
return val ? new Date(val).toLocaleDateString() : "—"
},
},
{
id: "actions",
header: () => <span className="sr-only">Actions</span>,
cell: ({ row }) => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon-sm">
<MoreHorizontal className="size-4" />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEdit(row.original)}>
<Pencil className="size-3.5 text-muted-foreground" />
Edit
</DropdownMenuItem>
<DropdownMenuItem
variant="destructive"
onClick={() => handleDelete(row.original)}
>
<Trash2 className="size-3.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
),
enableSorting: false,
},
]
const records = (data as any)?.data ?? []
const meta = (data as any)?.meta
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
return (
<div className="flex flex-col gap-4">
<DashboardPage
header={null}
toolbar={
<Button onClick={handleCreate}>
<Plus className="size-4" />
Add Mileage
</Button>
}
title='Milage'
>
<Card>
<CardContent>
<DataTable
columns={columns}
data={records}
pagination={pagination}
sorting={[]}
onChange={() => {}}
isLoading={isLoading}
/>
</CardContent>
</Card>
</DashboardPage>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="min-w-md">
<DialogHeader>
<DialogTitle>
{editItem ? "Edit Mileage" : "Add Mileage"}
</DialogTitle>
</DialogHeader>
<MileageForm
vehicleId={vehicleId}
resourceId={editItem ? String(editItem.id) : null}
initialData={editItem}
onSuccess={() => {
queryClient.invalidateQueries({ queryKey })
setDialogOpen(false)
setEditItem(null)
}}
/>
</DialogContent>
</Dialog>
</div>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/owners/page.tsx
-240
View File
@@ -1,240 +0,0 @@
"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 { Unlink, Plus, Loader2 } from "lucide-react"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { DataTable } from "@/shared/data-view/table-view"
import { 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 { RhfAsyncSelectField } from "@/shared/components/form"
import { Rhform } from "@/shared/components/form"
import { useForm } from "react-hook-form"
import { TableCell, TableRow } from "@/shared/components/ui/table"
import { ApiResponse, CustomersClient } from "@garage/api"
import { paths } from "@garage/api/types"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
type Owner = {
id: number
name: string
created_at: string
updated_at: string
}
const mapCustomerOption = (item: any) => ({
value: String(item.id),
label: `${item.first_name ?? ""} ${item.last_name ?? ""}`.trim() || item.name || `Customer #${item.id}`,
})
const STORE_OBJECT = {
getOptionValue: (o: any) => o,
getOptionLabel: (o: any) => o.label,
}
export default function VehicleOwnersPage() {
const { id: vehicleId } = useParams<{ id: string }>()
const api = useAuthApi()
const queryClient = useQueryClient()
const [linkDialogOpen, setLinkDialogOpen] = useState(false)
const queryKey = ["vehicle-owners", vehicleId]
const { data, isLoading } = useQuery({
queryKey,
queryFn: () => api.vehicles.getOwners(vehicleId),
})
const unlinkMutation = useMutation({
mutationFn: (customerId: number) =>
api.vehicles.unlinkCustomer({ customer_id: customerId, vehicle_id: Number(vehicleId) }),
onSuccess: () => {
toast.success("Owner unlinked successfully.")
queryClient.invalidateQueries({ queryKey })
},
onError: () => {
toast.error("Failed to unlink owner.")
},
})
const handleUnlink = async (owner: Owner) => {
const confirmed = await confirm({
title: "Unlink Owner",
description: `Are you sure you want to unlink "${owner.name}" from this vehicle?`,
confirmLabel: "Unlink",
variant: "destructive",
})
if (confirmed) {
unlinkMutation.mutate(owner.id)
}
}
const columns: ColumnDef<any>[] = [
{
accessorKey: "first_name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
},
{
accessorKey: "phone",
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Linked At" />,
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={() => handleUnlink(row.original)}
title="Unlink owner"
>
<Unlink className="size-4 text-destructive" />
</Button>
),
enableSorting: false,
},
]
const owners = (data as any)?.data ?? []
// [BackendIssue] [FrontendWorkaround] : pagination should be replaced with "meta" property
const meta = (data as any)?.pagination
const pagination = {
page: meta?.current_page ?? 1,
pageSize: meta?.per_page ?? 15,
pageCount: meta?.last_page ?? 1,
total: meta?.total ?? 0,
}
return (
<DashboardPage title="Owners" header={null} toolbar={
<Button className="w-full" size={'lg'} onClick={() => setLinkDialogOpen(true)}>
<Plus />
Add Owner
</Button>
}>
<Card>
<CardContent>
<DataTable
columns={columns}
data={owners}
pagination={pagination}
sorting={[]}
onChange={() => { }}
isLoading={isLoading}
/>
<LinkOwnerDialog
vehicleId={vehicleId}
open={linkDialogOpen}
onOpenChange={setLinkDialogOpen}
onSuccess={() => {
queryClient.invalidateQueries({ queryKey })
setLinkDialogOpen(false)
}}
/>
</CardContent>
</Card>
</DashboardPage >
)
}
function LinkOwnerDialog({
vehicleId,
open,
onOpenChange,
onSuccess,
}: {
vehicleId: string
open: boolean
onOpenChange: (open: boolean) => void
onSuccess: () => void
}) {
const api = useAuthApi()
const form = useForm<{ customer: { value: string; label: string } | null }>({
defaultValues: { customer: null },
})
const linkMutation = useMutation({
mutationFn: (customerId: number) =>
api.vehicles.linkCustomer({ customer_id: customerId, vehicle_id: Number(vehicleId) }),
onSuccess: () => {
toast.success("Owner linked successfully.")
form.reset()
onSuccess()
},
onError: () => {
toast.error("Failed to link owner.")
},
})
const handleSubmit = (values: { customer: { value: string; label: string } | null }) => {
if (!values.customer) return
linkMutation.mutate(Number(values.customer.value))
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="min-w-md">
<DialogHeader>
<DialogTitle>Add Owner</DialogTitle>
</DialogHeader>
<Rhform form={form} onSubmit={handleSubmit}>
<div className="flex flex-col gap-4">
<RhfAsyncSelectField
name="customer"
label="Customer"
placeholder="Search customers..."
queryKey={["customers-lookup"]}
listFn={() => api.customers.list()}
mapOption={mapCustomerOption}
{...STORE_OBJECT}
/>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
>
Cancel
</Button>
<Button
type="submit"
disabled={linkMutation.isPending || !form.watch("customer")}
>
{linkMutation.isPending && <Loader2 className="size-4 animate-spin" />}
Link Owner
</Button>
</div>
</div>
</Rhform>
</DialogContent>
</Dialog>
)
}
apps/dashboard/app/(authenticated)/sales/vehicles/[id]/page.tsx
-18
View File
@@ -1,18 +0,0 @@
import { getServerApi } from '@garage/api/server'
import { VehicleGeneralInfo } from '@/modules/vehicles/vehicle-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 vehicle = await api.vehicles.getById(id)
if (!vehicle.data) {
return <div className="text-muted-foreground">Vehicle not found.</div>
}
return <DashboardPage header={null}>
<VehicleGeneralInfo vehicle={vehicle.data} />
</DashboardPage>
}
apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx
-105
View File
@@ -1,105 +0,0 @@
"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 { VehicleForm } from '@/modules/vehicles/vehicle-form'
import { VEHICLE_ROUTES } from '@garage/api'
import type { VehiclesClient } from '@garage/api'
import { CarIcon } from 'lucide-react'
export default function VehiclesPage() {
const router = useRouter()
return (
<ResourcePage<VehiclesClient>
pageTitle="Vehicles"
routeKey={VEHICLE_ROUTES.INDEX}
getClient={(api) => api.vehicles}
onRowClick={(row) => router.push(`/sales/vehicles/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Vehicle">
{(resourceId) => (
<VehicleForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "name",
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 = r.name || `${make} ${model}`.trim() || "—"
return (
<div className="flex items-center gap-2">
<CarIcon className="h-4 w-4 text-muted-foreground" />
<div>
<span className="font-medium">{display}</span>
{r.sub_model && (
<span className="ml-1 text-xs text-muted-foreground">{r.sub_model}</span>
)}
</div>
</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>
: "—"
},
},
{
accessorKey: "vin_number",
header: ({ column }) => <ColumnHeader column={column} title="VIN" />,
cell: ({ row }) => {
const val = (row.original as any).vin_number
return val
? <span className="max-w-30 truncate block font-mono text-xs">{val}</span>
: "—"
},
},
{
accessorKey: "engine_size",
header: ({ column }) => <ColumnHeader column={column} title="Engine" />,
cell: ({ row }) => (row.original as any).engine_size ?? "—",
},
{
accessorKey: "mileage",
header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
cell: ({ row }) => {
const val = (row.original as any).mileage
return val != null ? `${Number(val).toLocaleString()} mi` : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
cell: ({ row }) => {
const val = (row.original as any).created_at
return val ? new Date(val).toLocaleDateString() : "—"
},
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/settings/company/page.tsx
-17
View File
@@ -1,17 +0,0 @@
"use client"
import { SettingsForm } from "@/modules/settings/company/settings-form"
export default function CompanySettingsPage() {
return (
<div className="mx-auto max-w-3xl space-y-6 p-6">
<div>
<h1 className="text-2xl font-semibold">Company Settings</h1>
<p className="text-muted-foreground text-sm">
Manage your workshop profile, contact details, and preferences.
</p>
</div>
<SettingsForm />
</div>
)
}
apps/dashboard/app/(authenticated)/settings/configurations/preferences/general/page.tsx
-7
View File
@@ -1,7 +0,0 @@
"use client"
import { GeneralPreferencesForm } from "@/modules/settings/configurations/general-preferences-form"
export default function GeneralPreferencesPage() {
return <GeneralPreferencesForm />
}
apps/dashboard/app/(authenticated)/settings/configurations/preferences/layout.tsx
-42
View File
@@ -1,42 +0,0 @@
"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/shared/lib/utils"
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
const TABS = [
{ label: "Sales", href: "/settings/configurations/preferences/sales" },
{ label: "Purchases", href: "/settings/configurations/preferences/purchases" },
{ label: "General", href: "/settings/configurations/preferences/general" },
]
export default function ConfigurationsLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
return (
<DashboardPage headerProps={{ title: "Configurations" }}>
<div className="space-y-6">
<nav className="flex gap-1 border-b">
{TABS.map((tab) => (
<Link
key={tab.href}
href={tab.href}
className={cn(
"px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
pathname === tab.href
? "border-primary text-primary"
: "border-transparent text-muted-foreground hover:text-foreground"
)}
>
{tab.label}
</Link>
))}
</nav>
<div className="max-w-xl">
{children}
</div>
</div>
</DashboardPage>
)
}
apps/dashboard/app/(authenticated)/settings/configurations/preferences/purchases/page.tsx
-7
View File
@@ -1,7 +0,0 @@
"use client"
import { PurchaseConfigForm } from "@/modules/settings/configurations/purchase-config-form"
export default function PurchasesConfigPage() {
return <PurchaseConfigForm />
}
apps/dashboard/app/(authenticated)/settings/configurations/preferences/sales/page.tsx
-7
View File
@@ -1,7 +0,0 @@
"use client"
import { SalesConfigForm } from "@/modules/settings/configurations/sales-config-form"
export default function SalesConfigPage() {
return <SalesConfigForm />
}
apps/dashboard/app/(authenticated)/settings/departments/page.tsx
-92
View File
@@ -1,92 +0,0 @@
"use client"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { toast } from "sonner"
import { StarIcon, StarOffIcon } from "lucide-react"
import { DepartmentForm } from "@/modules/settings/departments/department-form"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { Button } from "@/shared/components/ui/button"
import { useAuthApi } from "@/shared/useApi"
import { DEPARTMENT_ROUTES } from "@garage/api"
import type { DepartmentsClient } from "@garage/api"
function FavoriteCell({ row }: { row: any }) {
const api = useAuthApi()
const queryClient = useQueryClient()
const isFavorite: boolean = row.is_favorite ?? false
const { mutate, isPending } = useMutation({
mutationFn: () => {
const promise = isFavorite
? api.departments.removeFavorite({ id: row.id })
: api.departments.setFavorite({ id: row.id })
toast.promise(promise, {
loading: isFavorite ? "Removing from favourites..." : "Setting as favourite...",
success: isFavorite ? "Removed from favourites" : "Set as favourite",
error: isFavorite ? "Failed to remove favourite" : "Failed to set favourite",
})
return promise
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [DEPARTMENT_ROUTES.INDEX] })
},
})
return (
<Button
variant="ghost"
size="icon-sm"
disabled={isPending}
onClick={() => mutate()}
title={isFavorite ? "Remove from favourites" : "Set as favourite"}
>
{isFavorite
? <StarIcon className="h-4 w-4 text-yellow-500 fill-yellow-400" />
: <StarOffIcon className="h-4 w-4 text-muted-foreground" />}
</Button>
)
}
export default function DepartmentsPage() {
return (
<ResourcePage<DepartmentsClient>
pageTitle="Departments"
routeKey={DEPARTMENT_ROUTES.INDEX}
getClient={(api) => api.departments}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Department">
{(resourceId) => (
<DepartmentForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
},
{
accessorKey: "assignment_type",
header: ({ column }) => <ColumnHeader column={column} title="Assignment Type" />,
cell: ({ row }) => (row.original as any).assignment_type ?? "none",
},
{
id: "favourite",
header: () => <span className="sr-only">Favourite</span>,
enableSorting: false,
cell: ({ row }) => <FavoriteCell row={row.original} />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/settings/insurance-types/page.tsx
-39
View File
@@ -1,39 +0,0 @@
"use client"
import { InsuranceTypeForm } from "@/modules/settings/insurance-types/insurance-type-form"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { INSURANCE_TYPE_ROUTES } from "@garage/api"
import type { InsuranceTypesClient } from "@garage/api"
export default function InsuranceTypesPage() {
return (
<ResourcePage<InsuranceTypesClient>
pageTitle="Insurance Types"
routeKey={INSURANCE_TYPE_ROUTES.INDEX}
getClient={(api) => api.insuranceTypes}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Insurance Type">
{(resourceId) => (
<InsuranceTypeForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
cell: ({ row }) => (row.original as any).title ?? (row.original as any).name ?? "—",
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx
-60
View File
@@ -1,60 +0,0 @@
"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 { ShopTypeForm } from "@/modules/settings/shop-type/shop-type-form"
import { SHOP_TYPE_ROUTES } from "@garage/api"
import type { ShopTypesClient } from "@garage/api"
import { CheckIcon, XIcon } from "lucide-react"
export default function ShopTypesPage() {
return (
<ResourcePage<ShopTypesClient>
pageTitle="Shop Types"
routeKey={SHOP_TYPE_ROUTES.INDEX}
getClient={(api) => api.shopTypes}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Shop Type">
{(resourceId) => (
<ShopTypeForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "shop_type",
header: ({ column }) => <ColumnHeader column={column} title="Type" />,
},
{
accessorKey: "note",
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
cell: ({ row }) => (
<span className="text-muted-foreground line-clamp-1">
{(row.original as any).note ?? "—"}
</span>
),
},
{
accessorKey: "is_default",
header: ({ column }) => <ColumnHeader column={column} title="Default" />,
cell: ({ row }) =>
(row.original as any).is_default
? <CheckIcon className="h-4 w-4 text-green-600" />
: <XIcon className="h-4 w-4 text-muted-foreground" />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx
-108
View File
@@ -1,108 +0,0 @@
"use client"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { toast } from "sonner"
import { CheckIcon, StarIcon, StarOffIcon, XIcon } from "lucide-react"
import { TaxForm } from "@/modules/settings/tax-rates/tax-form"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { Button } from "@/shared/components/ui/button"
import { useAuthApi } from "@/shared/useApi"
import { TAX_ROUTES } from "@garage/api"
import type { TaxesClient } from "@garage/api"
function TaxDefaultCell({ row }: { row: any }) {
const api = useAuthApi()
const queryClient = useQueryClient()
const isDefault: boolean = row.is_default ?? false
const { mutate, isPending } = useMutation({
mutationFn: () => {
const promise = isDefault
? api.taxes.removeDefault({ id: row.id })
: api.taxes.setDefault({ id: row.id })
toast.promise(promise, {
loading: isDefault ? "Removing default..." : "Setting as default...",
success: isDefault ? "Default removed" : "Set as default",
error: isDefault ? "Failed to remove default" : "Failed to set as default",
})
return promise
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [TAX_ROUTES.INDEX] })
},
})
return (
<Button
variant="ghost"
size="icon-sm"
disabled={isPending}
onClick={() => mutate()}
title={isDefault ? "Remove default" : "Set as default"}
>
{isDefault
? <StarIcon className="h-4 w-4 text-yellow-500 fill-yellow-400" />
: <StarOffIcon className="h-4 w-4 text-muted-foreground" />}
</Button>
)
}
export default function TaxesPage() {
return (
<ResourcePage<TaxesClient>
pageTitle="Tax & Rates"
routeKey={TAX_ROUTES.INDEX}
getClient={(api) => api.taxes}
headerProps={({ selectedItem, invalidateQuery }) => ({
actions: (
<FormDialog title="Tax">
{(resourceId) => (
<TaxForm
resourceId={resourceId}
initialData={selectedItem}
onSuccess={invalidateQuery}
/>
)}
</FormDialog>
),
})}
columns={({ actionsColumn }) => [
{
accessorKey: "title",
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
},
{
accessorKey: "rate",
header: ({ column }) => <ColumnHeader column={column} title="Rate (%)" />,
cell: ({ row }) => `${(row.original as any).rate ?? 0}%`,
},
{
accessorKey: "note",
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
cell: ({ row }) => (
<span className="text-muted-foreground line-clamp-1">
{(row.original as any).note ?? "—"}
</span>
),
},
{
accessorKey: "is_default",
header: ({ column }) => <ColumnHeader column={column} title="Default" />,
cell: ({ row }) => (row.original as any).is_default
? <CheckIcon className="h-4 w-4 text-green-600" />
: <XIcon className="h-4 w-4 text-muted-foreground" />,
},
{
id: "set_default",
header: () => <span className="sr-only">Set Default</span>,
enableSorting: false,
cell: ({ row }) => <TaxDefaultCell row={row.original} />,
},
actionsColumn(),
]}
/>
)
}
apps/dashboard/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

apps/dashboard/app/globals.css
-179
View File
@@ -1,179 +0,0 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-heading: var(--font-sans);
--font-sans: var(--font-sans);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
--shadow-glow : 0 0 10px var(--primary);
}
:root {
--background: oklch(96.416% 0.00011 271.152);
--foreground: oklch(0.062 0 0);
--card: oklch(0.975 0 0);
--card-foreground: oklch(0.281 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.577 0.245 27.325);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.949 0 0);
--muted-foreground: oklch(0.6 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(75.417% 0.14818 18.15);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}
@layer utilities {
.dashboard-nav-item {
@apply
relative
overflow-hidden
data-active:bg-primary/10
data-active:text-primary
data-active:hover:text-primary
data-active:hover:bg-primary/15
transition-all
duration-300;
}
/* Accent bar — only in expanded mode */
/* .dashboard-nav-item:not([data-collapsed="true"])::after {
content: "";
position: absolute;
inset-inline-end: 0.25rem;
height: 80%;
border-radius: var(--radius-md);
z-index: 10;
box-shadow: 0 0 6px var(--primary);
}
.dashboard-nav-item:not([data-collapsed="true"])[data-active="true"]::after {
width: 0.25rem;
background-color: var(--primary);
} */
/* Collapsed mode: icon centered, no bar */
.dashboard-nav-item[data-collapsed="true"] {
@apply justify-center;
}
.dashboard-nav-sub-item {
@apply
transition-colors
duration-200
data-active:text-primary
data-active:font-medium
data-active:bg-primary/5
hover:text-primary/80;
}
}
apps/dashboard/app/layout.tsx
-40
View File
@@ -1,40 +0,0 @@
import { Geist_Mono, Inter } from "next/font/google"
import "./globals.css"
import { QueryProvider } from "@/shared/components/query-provider"
import { ThemeProvider } from "@/shared/components/theme-provider"
import { Toaster } from "@/shared/components/ui/sonner"
import { ConfirmDialog } from "@/shared/components/confirm-dialog"
import { NuqsAdapter } from "nuqs/adapters/next/app"
import { cn } from "@/shared/lib/utils"
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
const fontMono = Geist_Mono({
subsets: ["latin"],
variable: "--font-mono",
})
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html
lang="en"
suppressHydrationWarning
className={cn("antialiased", fontMono.variable, "font-sans", inter.variable)}
>
<body>
<NuqsAdapter>
<ThemeProvider>
<QueryProvider>{children}</QueryProvider>
<Toaster />
<ConfirmDialog />
</ThemeProvider>
</NuqsAdapter>
</body>
</html>
)
}
apps/dashboard/base/components/auth-store-initializer.tsx
-19
View File
@@ -1,19 +0,0 @@
"use client"
import { useRef } from "react"
import { useAuthStore } from "@/shared/stores/auth-store"
import type { AuthUser } from "@garage/api"
/**
* Synchronously initializes the auth store from server-side token/user before
* any child component renders. This avoids the first-render race condition where
* useEffect-based hydration hasn't fired yet and API requests go out without a token.
*/
export function AuthStoreInitializer({ token, user }: { token: string; user: AuthUser }) {
const initialized = useRef(false)
if (!initialized.current) {
initialized.current = true
useAuthStore.setState({ token, user, isAuthenticated: true })
}
return null
}
apps/dashboard/base/components/layout/dashboard/app-sidebar.tsx
-305
View File
@@ -1,305 +0,0 @@
"use client"
import { useCallback } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { ChevronRight, Circle, LogOutIcon, UserIcon } from "lucide-react"
import type { NavGroup, NavItem } from "@/base/types/navigation"
import type { UserInfo } from "@/base/types/navigation"
import { useAuthStore } from "@/shared/stores/auth-store"
import { cn } from "@/shared/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/shared/components/ui/collapsible"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarRail,
useSidebar,
} from "@/shared/components/ui/sidebar"
type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
navGroups: NavGroup[]
logo?: React.ReactNode
user?: UserInfo
}
export function AppSidebar({ navGroups, logo, user, ...props }: AppSidebarProps) {
const { state, isMobile } = useSidebar()
const isCollapsed = state === "collapsed" && !isMobile
const { logout } = useAuthStore((s) => s)
const router = useRouter()
const handleLogout = useCallback(async () => {
await logout()
router.push("/login")
}, [logout, router])
return (
<Sidebar collapsible="icon" {...props} className="bg-card">
{logo && (
<SidebarHeader className="flex p-4">
{logo}
</SidebarHeader>
)}
<SidebarContent className={cn("transition-[padding] duration-200", !isCollapsed && "ps-2")}>
{navGroups.map((group, groupIndex) => (
<SidebarGroup key={group.label ?? groupIndex}>
{group.label && (
<SidebarGroupLabel className="uppercase text-xs tracking-wider text-muted-foreground">
{group.label}
</SidebarGroupLabel>
)}
<SidebarMenu>
{group.items.map((item) =>
item.items && item.items.length > 0 ? (
<CollapsibleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
) : (
<SimpleNavItem key={item.href} item={item} isCollapsed={isCollapsed} />
)
)}
</SidebarMenu>
</SidebarGroup>
))}
</SidebarContent>
<SidebarFooter className="p-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="size-8 rounded-lg">
{user?.avatar && <AvatarImage src={user.avatar as string} alt={user.name} />}
<AvatarFallback className="rounded-lg">
{user?.initials ?? user?.name?.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
{!isCollapsed && (
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user?.name}</span>
{user?.email && (
<span className="truncate text-xs text-muted-foreground">{user.email}</span>
)}
</div>
)}
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
side="top"
align="start"
sideOffset={4}
className="w-56"
>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col">
<span className="text-sm font-medium">{user?.name}</span>
{user?.email && (
<span className="text-xs text-muted-foreground">{user.email}</span>
)}
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">
<UserIcon />
Profile
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onSelect={handleLogout}>
<LogOutIcon />
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
)
}
function SimpleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
const pathname = usePathname()
const isActive = item.isActive ?? pathname === item.href
return (
<SidebarMenuItem>
<SidebarMenuButton
asChild
isActive={isActive}
tooltip={item.title}
className="dashboard-nav-item"
data-collapsed={isCollapsed}
>
<Link href={item.href}>
{item.icon}
{
!isCollapsed &&
<span>{item.title}</span>
}
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
)
}
function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed: boolean }) {
const pathname = usePathname()
const isChildActive = item.items?.some((sub) => pathname === sub.href)
const isActive = item.isActive ?? (pathname === item.href || isChildActive === true)
// Collapsed sidebar → flyout dropdown with sub-items
if (isCollapsed) {
return (
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
isActive={isActive}
tooltip={item.title}
className="dashboard-nav-item"
data-collapsed={isCollapsed}
>
<span
className={cn(
"transition-transform duration-300",
isActive && "text-primary"
)}
>
{item.icon}
</span>
{
!isCollapsed &&
<span>{item.title}</span>
}
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
side="right"
align="start"
sideOffset={4}
className="min-w-45"
>
<DropdownMenuLabel className="text-xs text-muted-foreground">
{item.title}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{item.items?.map((sub) => {
const isSubActive = sub.isActive ?? pathname === sub.href
return (
<DropdownMenuItem key={sub.href} asChild>
<Link
href={sub.href}
className={cn(
"flex items-center gap-2",
isSubActive && "bg-primary/10 text-primary font-medium"
)}
>
{sub.icon ? (
<span className={cn("shrink-0 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70")}>
{sub.icon}
</span>
) : (
<Circle
className={cn(
"size-1.5",
isSubActive ? "fill-primary text-primary" : "fill-muted-foreground/50 text-muted-foreground/50"
)}
/>
)}
{sub.title}
</Link>
</DropdownMenuItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
)
}
// Expanded sidebar → collapsible/accordion sub-menu
return (
<Collapsible asChild defaultOpen={isActive} className="group/collapsible">
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton tooltip={item.title} isActive={isActive} className="dashboard-nav-item" data-collapsed={isCollapsed}>
<span
className={cn(
"transition-transform duration-300",
isActive && "text-primary"
)}
>
{item.icon}
</span>
<span>{item.title}</span>
<ChevronRight
className={cn(
"ms-auto size-4 shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)]",
"group-data-[state=open]/collapsible:rotate-90"
)}
/>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden py-2 data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
<SidebarMenuSub>
{item.items?.map((sub) => {
const isSubActive = sub.isActive ?? pathname === sub.href
return (
<SidebarMenuSubItem key={sub.href}>
<SidebarMenuSubButton asChild isActive={isSubActive} className="dashboard-nav-sub-item my-0.5">
<Link href={sub.href}>
{sub.icon ? (
<span className={cn("shrink-0 transition-colors duration-200 [&>svg]:size-4", isSubActive ? "text-primary" : "text-muted-foreground/70 group-hover/menu-sub-item:text-primary")}>
{sub.icon}
</span>
) : (
<Circle
className={cn(
"size-1.5 transition-colors duration-200",
isSubActive
? "fill-primary text-primary"
: "fill-muted-foreground/40 text-muted-foreground/40 group-hover/menu-sub-item:fill-foreground group-hover/menu-sub-item:text-primary"
)}
/>
)}
<span>{sub.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
)
})}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
)
}
apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx
-131
View File
@@ -1,131 +0,0 @@
"use client"
import React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/shared/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
import { Button } from "@/shared/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { DashboardHeader } from "./dashboard-header"
type Tab = {
/** URL path this tab navigates to */
href: string
label: string
}
type DashboardDetailsPageLayoutProps = {
/** Primary title displayed in the header */
title: string
/** Secondary text below the title */
description?: string
/** Avatar image URL */
avatarSrc?: string
/** Fallback text for the avatar (e.g. initials) */
avatarFallback?: string
/** Icon element rendered instead of avatar when no avatar is provided */
icon?: React.ReactNode
/** Action buttons rendered on the right side of the header */
actions?: React.ReactNode
/** Optional back navigation URL */
backHref?: string
/** Content rendered between the header and tabs */
subHeader?: React.ReactNode
/** Route-based tab definitions */
tabs?: Tab[]
/** Content from the active route (Next.js children) */
children?: React.ReactNode
className?: string
}
export default function DashboardDetailsPageLayout({
title,
description,
avatarSrc,
avatarFallback,
icon,
actions,
backHref,
subHeader,
tabs,
children,
className,
}: DashboardDetailsPageLayoutProps) {
const pathname = usePathname()
return (
<div className={cn("flex flex-col h-full ")}>
{/* Header */}
<div className="flex items-center justify-between gap-4 px-4 py-4 lg:px-6 bg-card">
<div className="flex items-center gap-3">
{backHref && (
<Button variant="ghost" size="icon" asChild>
<Link href={backHref}>
<ArrowLeft className="size-4" />
</Link>
</Button>
)}
{(avatarSrc || avatarFallback) && (
<a rel="preload" target="_blank" href={avatarSrc} >
<Avatar className="size-14">
{avatarSrc && <AvatarImage src={avatarSrc} alt={title} />}
<AvatarFallback>
{avatarFallback ?? title.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</a>
)}
{!avatarSrc && !avatarFallback && icon && (
<div className="flex items-center justify-center size-10 rounded-full bg-muted text-muted-foreground">
{icon}
</div>
)}
<div className="flex flex-col">
<h1 className="text-lg font-semibold leading-tight">{title}</h1>
{description && (
<p className="text-sm text-muted-foreground">{description}</p>
)}
</div>
</div>
{actions && (
<div className="flex items-center gap-1">{actions}</div>
)}
</div>
{/* Sub-header */}
{subHeader && (
<div className="border-b px-4 py-3 lg:px-6 bg-card">{subHeader}</div>
)}
{/* Navigation tabs */}
{tabs && tabs.length > 0 && (
<nav className="flex items-center gap-1 border-b px-4 lg:px-6 bg-card">
{tabs.map((tab) => {
const isActive = pathname === tab.href
return (
<Link
key={tab.href}
href={tab.href}
className={cn(
"relative inline-flex items-center justify-center px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors",
"text-muted-foreground hover:text-foreground",
isActive && "text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground"
)}
>
{tab.label}
</Link>
)
})}
</nav>
)}
{/* Route content */}
<div className={cn("flex-1 p-4 lg:p-6", className)}>{children}</div>
</div>
)
}
export type { DashboardDetailsPageLayoutProps, Tab as DashboardDetailsTab }
apps/dashboard/base/components/layout/dashboard/dashboard-header.tsx
-128
View File
@@ -1,128 +0,0 @@
"use client"
import { useCallback, useEffect, useState } from "react"
import { useTheme } from "next-themes"
import {
BellIcon,
MoonIcon,
SearchIcon,
SunIcon,
} from "lucide-react"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import { SidebarTrigger } from "@/shared/components/ui/sidebar"
import {
CommandDialog,
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
} from "@/shared/components/ui/command"
import { Separator } from "@/shared/components/ui/separator"
export type DashboardHeaderProps = {
actions?: React.ReactNode
className?: string
title?:string
}
export function DashboardHeader({ actions, className, title }: DashboardHeaderProps) {
const { resolvedTheme, setTheme } = useTheme()
const [searchOpen, setSearchOpen] = useState(false)
useEffect(() => {
function onKeyDown(e: KeyboardEvent) {
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
e.preventDefault()
setSearchOpen((prev) => !prev)
}
}
window.addEventListener("keydown", onKeyDown)
return () => window.removeEventListener("keydown", onKeyDown)
}, [])
const toggleTheme = useCallback(() => {
setTheme(resolvedTheme === "dark" ? "light" : "dark")
}, [resolvedTheme, setTheme])
return (
<header
className={cn(
"sticky top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b bg-card px-4",
className,
)}
>
{title && <h1 className="text-lg font-semibold">{title}</h1>}
{/* Sidebar toggle — mobile: hamburger, desktop: collapse */}
<SidebarTrigger className="-ms-2 md:hidden" />
<Separator orientation="vertical" className="md:hidden" />
{/* Left side — default actions */}
<div className="flex items-center gap-1">
{/* Search trigger */}
{/* <Button
variant="outline"
className="hidden h-8 w-56 justify-start gap-2 text-muted-foreground md:flex"
onClick={() => setSearchOpen(true)}
>
<SearchIcon className="size-4" />
<span className="text-sm">Search…</span>
<kbd className="pointer-events-none ms-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
⌘K
</kbd>
</Button> */}
{/* Mobile search icon */}
<Button
variant="ghost"
size="icon-sm"
className="md:hidden"
aria-label="Search"
onClick={() => setSearchOpen(true)}
>
<SearchIcon className="size-4" />
</Button>
{/* Theme toggle */}
<Button
variant="ghost"
size="icon-sm"
aria-label="Toggle theme"
onClick={toggleTheme}
>
<SunIcon className="size-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute size-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
</Button>
{/* Notifications */}
<Button variant="ghost" size="icon-sm" aria-label="Notifications">
<BellIcon className="size-4" />
</Button>
</div>
{/* Search command dialog */}
<CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
<Command>
<CommandInput placeholder="Type to search…" />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Quick Actions">
<CommandItem>Dashboard</CommandItem>
<CommandItem>Job Cards</CommandItem>
<CommandItem>Customers</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</CommandDialog>
{/* Right side — custom actions */}
{actions && (
<div className="ms-auto flex items-center gap-2">{actions}</div>
)}
</header>
)
}
apps/dashboard/base/components/layout/dashboard/dashboard-layout.tsx
-43
View File
@@ -1,43 +0,0 @@
"use client"
import type { NavGroup, UserInfo } from "@/base/types/navigation"
import { SidebarInset, SidebarProvider } from "@/shared/components/ui/sidebar"
import { TooltipProvider } from "@/shared/components/ui/tooltip"
import { AppSidebar } from "./app-sidebar"
import { DashboardHeader } from "./dashboard-header"
type DashboardLayoutProps = {
children: React.ReactNode
/** Navigation groups rendered in the sidebar */
navGroups: NavGroup[]
/** Logo element displayed at the top of the sidebar */
logo?: React.ReactNode
/** Current user info shown in the header */
user?: UserInfo
/** Custom actions rendered in the header (e.g. session timer, clock-in button) */
headerActions?: React.ReactNode
/** Default sidebar open state */
defaultOpen?: boolean
}
export function DashboardLayout({
children,
navGroups,
logo,
user,
headerActions,
defaultOpen = true,
}: DashboardLayoutProps) {
return (
<TooltipProvider>
<SidebarProvider defaultOpen={defaultOpen}>
<AppSidebar navGroups={navGroups} logo={logo} user={user} />
<SidebarInset className="min-w-0">
{children}
</SidebarInset>
</SidebarProvider>
</TooltipProvider>
)
}
apps/dashboard/base/components/layout/dashboard/dashboard-page.tsx
-31
View File
@@ -1,31 +0,0 @@
import { cn } from '@/shared/lib/utils'
import React from 'react'
import { DashboardHeader, type DashboardHeaderProps } from './dashboard-header'
type DashboardPageProps = {
children: React.ReactNode
header?: React.ReactNode | null
headerProps?: DashboardHeaderProps
fullscreen?: boolean
}
export default function DashboardPage({ children, header, headerProps, fullscreen, }: DashboardPageProps) {
const resolvedHeader = header !== undefined
? header
: <DashboardHeader {...headerProps} />
return (
<div className={cn("flex flex-col gap-4", fullscreen && "gap-0")}>
{resolvedHeader !== null && (
<header>
{resolvedHeader}
</header>
)}
<main >
<div className={cn(fullscreen ? "w-full px-0" : "p-4")}>
{children}
</div>
</main>
</div>
)
}
apps/dashboard/base/components/layout/dashboard/index.ts
-6
View File
@@ -1,6 +0,0 @@
export { DashboardLayout } from "./dashboard-layout"
export { AppSidebar } from "./app-sidebar"
export { DashboardHeader } from "./dashboard-header"
export type { DashboardHeaderProps } from "./dashboard-header"
export { default as DashboardDetailsPage } from "./dashboard-details-page-layout"
export type { DashboardDetailsPageLayoutProps, DashboardDetailsTab } from "./dashboard-details-page-layout"
apps/dashboard/base/types/navigation.ts
-31
View File
@@ -1,31 +0,0 @@
import { ReactNode } from "react"
export type NavItem = {
title: string
href: string
icon?: ReactNode
isActive?: boolean
badge?: string | number
items?: NavSubItem[]
}
export type NavSubItem = {
title: string
href: string
icon?: ReactNode
isActive?: boolean
}
export type NavGroup = {
label?: string
items: NavItem[]
}
export type UserInfo = {
name: string
email?: string
avatar?: string
initials?: string
role?: string
}
apps/dashboard/components.json
-25
View File
@@ -1,25 +0,0 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "radix-vega",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"rtl": true,
"aliases": {
"components": "@/shared/components",
"utils": "@/shared/lib/utils",
"ui": "@/shared/components/ui",
"lib": "@/shared/lib",
"hooks": "@/shared/hooks"
},
"menuColor": "default",
"menuAccent": "subtle",
"registries": {}
}
apps/dashboard/config/constants.ts
-4
View File
@@ -1,4 +0,0 @@
export const CONSTANTS = {
apiUrl: process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000",
getAssetUrl: (path: string) => `${CONSTANTS.apiUrl}/${path}`,
}
apps/dashboard/config/navGroups.tsx
-186
View File
@@ -1,186 +0,0 @@
import type { NavGroup } from "@/base/types/navigation"
import {
AlarmClockIcon,
AwardIcon,
BanknoteArrowDownIcon,
BarChart3Icon,
BellRingIcon,
BookIcon,
BriefcaseBusinessIcon,
Building2Icon,
CalendarCheck2Icon,
CalendarDaysIcon,
LayoutDashboardIcon,
ClipboardListIcon,
UsersIcon,
CalendarIcon,
CarIcon,
ClipboardCheckIcon,
Clock3Icon,
ClockIcon,
GemIcon,
GitBranchIcon,
HandCoinsIcon,
ListIcon,
ListTodoIcon,
MegaphoneIcon,
PackageIcon,
PhoneCallIcon,
PlugZapIcon,
ReceiptIcon,
ReceiptTextIcon,
SettingsIcon,
ShieldIcon,
ShoppingBasketIcon,
CircleDollarSign,
StarIcon,
StoreIcon,
TimerIcon,
UserCogIcon,
WalletIcon,
WrenchIcon,
ShoppingCartIcon,
} from "lucide-react"
export const navGroups: NavGroup[] = [
{
items: [
{
title: "Dashboard",
href: "/",
icon: <LayoutDashboardIcon />,
},
{
title: "Job Cards",
href: "/sales/job-cards",
icon: <ClipboardListIcon />,
},
{
title: "Customer & Vehicles",
href: "/customer-vehicles",
icon: <UsersIcon />,
},
{
title: "Reports",
href: "/reports",
icon: <BarChart3Icon />,
},
],
},
{
label: "Management",
items: [
{
title: "Calendars",
href: "/calendars",
icon: <CalendarIcon />,
items: [
{ title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
{ title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
],
},
{
title: "Sales",
href: "/sales",
icon: <CircleDollarSign />,
items: [
{ title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
{ title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
{ title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
{ title: "Estimates", href: "/sales/estimates", icon: <ReceiptTextIcon /> },
{ title: "Job Cards", href: "/sales/job-cards", icon: <ClipboardListIcon /> },
{ title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
{ title: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
{ title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
],
},
{
title: "Purchases",
href: "/purchases",
icon: <ShoppingCartIcon />,
items: [
{ title: "Vendors", href: "/purchase/vendor", icon: <StoreIcon /> },
{ title: "Expenses", href: "/purchase/expense", icon: <WalletIcon /> },
{ title: "Purchase Orders", href: "/purchase/purchase-order", icon: <ShoppingBasketIcon /> },
{ title: "Bills", href: "/purchase/bill", icon: <ReceiptIcon /> },
{ title: "Payments Made", href: "/purchase/payments-made", icon: <BanknoteArrowDownIcon /> },
{ title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
],
},
{
title: "CRM",
href: "/crm",
icon: <BriefcaseBusinessIcon />,
items: [
{ title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
{ title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
{ title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
],
},
{
title: "Marketing",
href: "/marketing",
icon: <MegaphoneIcon />,
items: [
{ title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
{ title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
{ title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
],
},
{
title: "Accountants",
href: "/accountants",
icon: <BookIcon />,
items: [
{ title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
{ title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
],
},
{
title: "Employees",
href: "/productivity",
icon: <UserCogIcon />,
items: [
{ title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
{ title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
{ title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
{ title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
{ title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
{ title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
{ title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
{ title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
{ title: "Tasks", href: "/productivity/tasks", icon: <ListTodoIcon /> },
],
},
{
title: "Items",
href: "/items",
icon: <PackageIcon />,
items: [
{ title: "Services", href: "/items/services", icon: <WrenchIcon /> },
{ title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
{ title: "Expense Item", href: "/items/expense-item", icon: <WalletIcon /> },
{ title: "Service Group", href: "/items/service-group", icon: <PackageIcon /> },
{ title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
{ title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
],
},
{
title: "Settings",
href: "/setting",
icon: <SettingsIcon />,
items: [
{ title: "Company", href: "/settings/company", icon: <Building2Icon /> },
{ title: "Shop Types", href: "/settings/shop-type", icon: <CarIcon /> },
{ title: "Departments", href: "/settings/departments", icon: <Building2Icon /> },
{ title: "Insurance Types", href: "/settings/insurance-types", icon: <ShieldIcon /> },
{ title: "Tax & Rates", href: "/settings/tax-rates", icon: <ReceiptTextIcon /> },
{ title: "Configurations", href: "/settings/configurations/preferences/sales", icon: <SettingsIcon /> },
{ title: "Templates", href: "/settings/templates", icon: <ClipboardListIcon /> },
{ title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> },
{ title: "Master", href: "/settings/master/body-type", icon: <ListIcon /> },
],
},
],
},
]
apps/dashboard/cypress.config.ts
-16
View File
@@ -1,16 +0,0 @@
import { defineConfig } from "cypress"
export default defineConfig({
e2e: {
baseUrl: "http://localhost:3000",
env: {
NEXT_PUBLIC_API_URL: "https://newgarage.yslootahtech.com"
},
specPattern: "cypress/e2e/**/*.cy.{ts,tsx}",
supportFile: "cypress/support/e2e.ts",
viewportWidth: 1280,
viewportHeight: 720,
defaultCommandTimeout: 10000,
requestTimeout: 10000,
},
})

Some files were not shown because too many files have changed in this diff Show More