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

updates

Browse Source
This commit is contained in:
Mohammad Khyata 2026-03-26 16:50:43 +03:00
parent 5dc54ffd00
commit 4b0aef983b
21 changed files with 1365 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
app/(authenticated)/items/parts/page.tsx Normal file
View File

@ -0,0 +1,90 @@
"use client"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { PartForm } from "@/modules/parts/part-form"
import { Badge } from "@/shared/components/ui/badge"
import { PARTS_ROUTES } from "@repo/api"
import type { PartsClient } from "@repo/api"
export default function PartsPage() {
return (
<ResourcePage<PartsClient>
pageTitle="Parts"
title="Part"
routeKey={PARTS_ROUTES.INDEX}
getClient={(api) => api.parts}
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(),
]}
renderForm={({ resourceId, initialData, onSuccess }) => (
<PartForm
resourceId={resourceId}
initialData={initialData}
onSuccess={onSuccess}
/>
)}
/>
)
}

72
app/(authenticated)/items/service-group/page.tsx Normal file
View File

@ -0,0 +1,72 @@
"use client"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { ServiceGroupForm } from "@/modules/service-groups/service-group-form"
import { Badge } from "@/shared/components/ui/badge"
import { SERVICE_GROUP_ROUTES } from "@repo/api"
import type { ServiceGroupsClient } from "@repo/api"
export default function ServiceGroupPage() {
return (
<ResourcePage<ServiceGroupsClient>
pageTitle="Service Groups"
title="Service Group"
routeKey={SERVICE_GROUP_ROUTES.INDEX}
getClient={(api) => api.serviceGroups}
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(),
]}
renderForm={({ resourceId, initialData, onSuccess }) => (
<ServiceGroupForm
resourceId={resourceId}
initialData={initialData}
onSuccess={onSuccess}
/>
)}
/>
)
}

69
app/(authenticated)/items/services/page.tsx Normal file
View File

@ -0,0 +1,69 @@
"use client"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { ServiceForm } from "@/modules/services/service-form"
import { SERVICE_ROUTES } from "@repo/api"
import type { ServicesClient } from "@repo/api"
export default function ServicesPage() {
return (
<ResourcePage<ServicesClient>
pageTitle="Services"
title="Service"
routeKey={SERVICE_ROUTES.INDEX}
getClient={(api) => api.services}
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(),
]}
renderForm={({ resourceId, initialData, onSuccess }) => (
<ServiceForm
resourceId={resourceId}
initialData={initialData}
onSuccess={onSuccess}
/>
)}
/>
)
}

44
app/(authenticated)/layout.tsx
View File

@ -61,7 +61,7 @@ const navGroups: NavGroup[] = [
},
{
title: "Customer & Vehicles",
href: "/customer_vehicles",
href: "/customer-vehicles",
icon: <UsersIcon />,
},
{
@ -79,7 +79,7 @@ const navGroups: NavGroup[] = [
href: "/calendars",
icon: <CalendarIcon />,
items: [
{ title: "Work Schedule", href: "/calendar/work_schedule/list", icon: <Clock3Icon /> },
{ title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
{ title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
],
},
@ -94,8 +94,8 @@ const navGroups: NavGroup[] = [
{ title: "Estimates", href: "/sales/estimate", icon: <ReceiptTextIcon /> },
{ title: "Job Cards", href: "/sales/workorder/list", 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: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
{ title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
],
},
{
@ -105,10 +105,10 @@ const navGroups: NavGroup[] = [
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: "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: "Payments Made", href: "/purchase/payments-made", icon: <BanknoteArrowDownIcon /> },
{ title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
],
},
{
@ -117,7 +117,7 @@ const navGroups: NavGroup[] = [
icon: <BriefcaseBusinessIcon />,
items: [
{ title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
{ title: "Calls", href: "/crm/calls_follow_up/list", icon: <PhoneCallIcon /> },
{ title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
{ title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
],
},
@ -126,9 +126,9 @@ const navGroups: NavGroup[] = [
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: "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 /> },
],
},
{
@ -136,8 +136,8 @@ const navGroups: NavGroup[] = [
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: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
{ title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
],
},
{
@ -146,12 +146,12 @@ const navGroups: NavGroup[] = [
icon: <UserCogIcon />,
items: [
{ title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
{ title: "Time Clocks", href: "/productivity/time_clocks", icon: <TimerIcon /> },
{ 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: "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 /> },
],
},
@ -162,8 +162,8 @@ const navGroups: NavGroup[] = [
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: "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 /> },
],
@ -174,12 +174,12 @@ const navGroups: NavGroup[] = [
icon: <SettingsIcon />,
items: [
{ title: "Company", href: "/setting/company", icon: <Building2Icon /> },
{ title: "Shop Types", href: "/setting/shop_type", icon: <CarIcon /> },
{ title: "Tax & Rates", href: "/setting/tax_rates", icon: <ReceiptTextIcon /> },
{ title: "Shop Types", href: "/setting/shop-type", icon: <CarIcon /> },
{ title: "Tax & Rates", href: "/setting/tax-rates", icon: <ReceiptTextIcon /> },
{ title: "Configurations", href: "/setting/configurations/preferences/sales", icon: <SettingsIcon /> },
{ title: "Templates", href: "/setting/templates", icon: <ClipboardListIcon /> },
{ title: "Integrations", href: "/setting/integrations/providers", icon: <PlugZapIcon /> },
{ title: "Master", href: "/setting/master/body_type", icon: <ListIcon /> },
{ title: "Master", href: "/setting/master/body-type", icon: <ListIcon /> },
],
},
],

46
app/(authenticated)/sales/vehicles/page.tsx
View File

@ -20,11 +20,18 @@ export default function VehiclesPage() {
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
cell: ({ row }) => {
const r = row.original as any
const display = r.name || `${r.make ?? ""} ${r.model ?? ""}`.trim() || "—"
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" />
<span>{display}</span>
<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>
)
},
@ -37,12 +44,43 @@ export default function VehiclesPage() {
{
accessorKey: "license_plate",
header: ({ column }) => <ColumnHeader column={column} title="License Plate" />,
cell: ({ row }) => (row.original as any).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 }) => (row.original as any).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(),
]}

0
app/(authenticated)/setting/shop_type/page.tsx → app/(authenticated)/settings/shop-type/page.tsx
View File

4
base/components/layout/dashboard/app-sidebar.tsx
View File

@ -204,13 +204,13 @@ function CollapsibleNavItem({ item, isCollapsed }: { item: NavItem; isCollapsed:
/>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
<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">
<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-foreground")}>

242
modules/parts/part-form.tsx Normal file
View File

@ -0,0 +1,242 @@
"use client"
import { AlertTriangle, Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
Rhform,
RhfTextField,
RhfTextareaField,
RhfAsyncSelectField,
} from "@/shared/components/form"
import { ShopTypeInlineForm } from "@/modules/vehicles/inline-forms/shop-type-inline-form"
import { InventoryCategoryInlineForm } from "@/modules/services/inline-forms/inventory-category-inline-form"
import { UnitTypeInlineForm } from "@/modules/services/inline-forms/unit-type-inline-form"
import { DepartmentInlineForm } from "@/modules/services/inline-forms/department-inline-form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toId } from "@/shared/lib/utils"
import { partFormSchema, type PartFormValues } from "./part.schema"
import { PARTS_ROUTES } from "@repo/api"
// ── Props ──
export type PartFormProps = {
resourceId?: string | null
initialData?: unknown
onSuccess?: () => void
}
// ── Default values ──
const DEFAULT_VALUES: PartFormValues = {
shop_type: null,
category: null,
unit_type: null,
department: null,
title: "",
sku: "",
description: "",
selling_price: undefined,
purchase_price: undefined,
}
// ── Mapping helpers ──
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.name ?? item.title ?? String(item.id),
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
function mapToFormValues(data: unknown): PartFormValues {
const d = (data as any)?.data ?? data ?? {}
return {
shop_type: null,
category: null,
unit_type: null,
department: null,
title: d.title ?? d.name ?? "",
sku: d.sku ?? "",
description: d.description ?? "",
selling_price: d.selling_price ?? undefined,
purchase_price: d.purchase_price ?? undefined,
}
}
function mapCreatePayload(values: PartFormValues) {
return {
shop_type_id: toId(values.shop_type),
category_id: toId(values.category),
unit_type_id: toId(values.unit_type),
department_id: toId(values.department),
title: values.title,
sku: values.sku || undefined,
description: values.description || undefined,
selling_price: values.selling_price,
purchase_price: values.purchase_price,
}
}
function mapUpdatePayload(values: PartFormValues) {
return {
title: values.title,
selling_price: values.selling_price,
}
}
// ── Component ──
export function PartForm({ resourceId, initialData, onSuccess }: PartFormProps) {
const api = useAuthApi()
const { form, isEditing } = useResourceForm<PartFormValues, any>({
schema: partFormSchema,
defaultValues: DEFAULT_VALUES,
resourceId,
initialData,
mapToFormValues,
})
const { mutate, error, isPending } = useFormMutation(form, {
mutationFn: (values: PartFormValues) => {
const promise = isEditing && resourceId
? api.parts.update(resourceId, mapUpdatePayload(values))
: api.parts.create(mapCreatePayload(values))
toast.promise(promise, {
loading: isEditing ? "Updating part..." : "Creating part...",
success: isEditing ? "Part updated successfully" : "Part created successfully",
error: isEditing ? "Failed to update part" : "Failed to create part",
})
return promise
},
onSuccess: () => {
form.reset()
onSuccess?.()
},
})
return (
<Rhform form={form} onSubmit={(values) => mutate(values)}>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="me-2 h-4 w-4" />
<AlertTitle>
{isEditing ? "Failed to update part" : "Failed to create part"}
</AlertTitle>
{error.message}
</Alert>
)}
<FieldGroup>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="title"
label="Title"
placeholder="e.g. Brake Pad"
required
/>
<RhfTextField
name="sku"
label="SKU"
placeholder="e.g. BP-001"
/>
</div>
{!isEditing && (
<>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="shop_type"
label="Shop Type"
placeholder="Select shop type"
queryKey={["shop-types"]}
listFn={() => api.shopTypes.list()}
mapOption={mapLookupOption}
createForm={(props) => <ShopTypeInlineForm {...props} />}
createLabel="Shop Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="category"
label="Category"
placeholder="Select category"
queryKey={["inventory-categories"]}
listFn={() => api.inventory.listCategories()}
mapOption={mapLookupOption}
createForm={(props) => <InventoryCategoryInlineForm {...props} />}
createLabel="Category"
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="unit_type"
label="Unit Type"
placeholder="Select unit type"
queryKey={["unit-types"]}
listFn={() => api.inventory.listUnitTypes()}
mapOption={mapLookupOption}
createForm={(props) => <UnitTypeInlineForm {...props} />}
createLabel="Unit Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="department"
label="Department"
placeholder="Select department"
queryKey={["departments"]}
listFn={() => api.departments.list()}
mapOption={(item: any) => ({ value: String(item.id), label: item.name ?? String(item.id) })}
createForm={(props) => <DepartmentInlineForm {...props} />}
createLabel="Department"
{...STORE_OBJECT}
/>
</div>
</>
)}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="selling_price"
label="Selling Price"
placeholder="0.00"
type="number"
/>
{!isEditing && (
<RhfTextField
name="purchase_price"
label="Purchase Price"
placeholder="0.00"
type="number"
/>
)}
</div>
<RhfTextareaField
name="description"
label="Description"
placeholder="Optional description"
rows={3}
/>
</FieldGroup>
<div className="mt-4 flex justify-end">
<Button type="submit" disabled={isPending}>
{isEditing ? <Save className="me-2 h-4 w-4" /> : <Plus className="me-2 h-4 w-4" />}
{isPending
? isEditing ? "Updating..." : "Creating..."
: isEditing ? "Update Part" : "Create Part"}
</Button>
</div>
</Rhform>
)
}

19
modules/parts/part.schema.ts Normal file
View File

@ -0,0 +1,19 @@
import { z } from "zod"
export const relationFieldSchema = z
.object({ value: z.string(), label: z.string() })
.nullable()
export const partFormSchema = z.object({
shop_type: relationFieldSchema,
category: relationFieldSchema,
unit_type: relationFieldSchema,
department: relationFieldSchema,
title: z.string().min(1, "Title is required"),
sku: z.string().optional(),
description: z.string().optional(),
selling_price: z.coerce.number().min(0).optional(),
purchase_price: z.coerce.number().min(0).optional(),
})
export type PartFormValues = z.infer<typeof partFormSchema>

274
modules/service-groups/service-group-form.tsx Normal file
View File

@ -0,0 +1,274 @@
"use client"
import { AlertTriangle, Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
Rhform,
RhfTextField,
RhfTextareaField,
RhfAsyncSelectField,
RhfCheckboxField,
} from "@/shared/components/form"
import { ShopTypeInlineForm } from "@/modules/vehicles/inline-forms/shop-type-inline-form"
import { InventoryCategoryInlineForm } from "@/modules/services/inline-forms/inventory-category-inline-form"
import { UnitTypeInlineForm } from "@/modules/services/inline-forms/unit-type-inline-form"
import { DepartmentInlineForm } from "@/modules/services/inline-forms/department-inline-form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toId } from "@/shared/lib/utils"
import { serviceGroupFormSchema, type ServiceGroupFormValues } from "./service-group.schema"
import { SERVICE_GROUP_ROUTES } from "@repo/api"
// ── Props ──
export type ServiceGroupFormProps = {
resourceId?: string | null
initialData?: unknown
onSuccess?: () => void
}
// ── Default values ──
const DEFAULT_VALUES: ServiceGroupFormValues = {
shop_type: null,
inventory_category: null,
unit_type: null,
department: null,
service_name: "",
code: "",
service_description: "",
selling_price: undefined,
selling_chart_of_account: "",
show_as_lump_sum: false,
mark_as_recommended: false,
set_packaged_pricing: false,
is_active: true,
}
// ── Mapping helpers ──
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.name ?? item.title ?? String(item.id),
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
function mapToFormValues(data: unknown): ServiceGroupFormValues {
const d = (data as any)?.data ?? data ?? {}
return {
shop_type: null,
inventory_category: null,
unit_type: null,
department: null,
service_name: d.service_name ?? d.name ?? "",
code: d.code ?? "",
service_description: d.service_description ?? "",
selling_price: d.selling_price ?? undefined,
selling_chart_of_account: d.selling_chart_of_account ?? "",
show_as_lump_sum: d.show_as_lump_sum ?? false,
mark_as_recommended: d.mark_as_recommended ?? false,
set_packaged_pricing: d.set_packaged_pricing ?? false,
is_active: d.is_active ?? true,
}
}
function mapCreatePayload(values: ServiceGroupFormValues) {
return {
service_name: values.service_name,
shop_type_id: toId(values.shop_type),
code: values.code || undefined,
inventory_category_id: toId(values.inventory_category),
unit_type_id: toId(values.unit_type),
department_id: toId(values.department),
service_description: values.service_description || undefined,
show_as_lump_sum: values.show_as_lump_sum,
mark_as_recommended: values.mark_as_recommended,
set_packaged_pricing: values.set_packaged_pricing,
selling_price: values.selling_price,
selling_chart_of_account: values.selling_chart_of_account || undefined,
is_active: values.is_active,
}
}
function mapUpdatePayload(values: ServiceGroupFormValues) {
return {
service_name: values.service_name,
selling_price: values.selling_price,
is_active: values.is_active,
}
}
// ── Component ──
export function ServiceGroupForm({ resourceId, initialData, onSuccess }: ServiceGroupFormProps) {
const api = useAuthApi()
const { form, isEditing } = useResourceForm<ServiceGroupFormValues, any>({
schema: serviceGroupFormSchema,
defaultValues: DEFAULT_VALUES,
resourceId,
initialData,
mapToFormValues,
})
const { mutate, error, isPending } = useFormMutation(form, {
mutationFn: (values: ServiceGroupFormValues) => {
const promise = isEditing && resourceId
? api.serviceGroups.update(resourceId, mapUpdatePayload(values))
: api.serviceGroups.create(mapCreatePayload(values))
toast.promise(promise, {
loading: isEditing ? "Updating service group..." : "Creating service group...",
success: isEditing ? "Service group updated" : "Service group created",
error: isEditing ? "Failed to update service group" : "Failed to create service group",
})
return promise
},
onSuccess: () => {
form.reset()
onSuccess?.()
},
})
return (
<Rhform form={form} onSubmit={(values) => mutate(values)}>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="me-2 h-4 w-4" />
<AlertTitle>
{isEditing ? "Failed to update service group" : "Failed to create service group"}
</AlertTitle>
{error.message}
</Alert>
)}
<FieldGroup>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="service_name"
label="Service Name"
placeholder="e.g. Engine Service Group"
required
/>
<RhfTextField
name="code"
label="Code"
placeholder="e.g. SG-001"
/>
</div>
{!isEditing && (
<>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="shop_type"
label="Shop Type"
placeholder="Select shop type"
queryKey={["shop-types"]}
listFn={() => api.shopTypes.list()}
mapOption={mapLookupOption}
createForm={(props) => <ShopTypeInlineForm {...props} />}
createLabel="Shop Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="inventory_category"
label="Category"
placeholder="Select category"
queryKey={["inventory-categories"]}
listFn={() => api.inventory.listCategories()}
mapOption={mapLookupOption}
createForm={(props) => <InventoryCategoryInlineForm {...props} />}
createLabel="Category"
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="unit_type"
label="Unit Type"
placeholder="Select unit type"
queryKey={["unit-types"]}
listFn={() => api.inventory.listUnitTypes()}
mapOption={mapLookupOption}
createForm={(props) => <UnitTypeInlineForm {...props} />}
createLabel="Unit Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="department"
label="Department"
placeholder="Select department"
queryKey={["departments"]}
listFn={() => api.departments.list()}
mapOption={(item: any) => ({ value: String(item.id), label: item.name ?? String(item.id) })}
createForm={(props) => <DepartmentInlineForm {...props} />}
createLabel="Department"
{...STORE_OBJECT}
/>
</div>
</>
)}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="selling_price"
label="Selling Price"
placeholder="0.00"
type="number"
/>
<RhfTextField
name="selling_chart_of_account"
label="Selling Chart of Account"
placeholder="e.g. 4000"
/>
</div>
<RhfTextareaField
name="service_description"
label="Description"
placeholder="Optional description"
rows={3}
/>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfCheckboxField
name="show_as_lump_sum"
label="Show as Lump Sum"
/>
<RhfCheckboxField
name="mark_as_recommended"
label="Recommended"
/>
<RhfCheckboxField
name="set_packaged_pricing"
label="Set Packaged Pricing"
/>
<RhfCheckboxField
name="is_active"
label="Active"
/>
</div>
</FieldGroup>
<div className="mt-4 flex justify-end">
<Button type="submit" disabled={isPending}>
{isEditing ? <Save className="me-2 h-4 w-4" /> : <Plus className="me-2 h-4 w-4" />}
{isPending
? isEditing ? "Updating..." : "Creating..."
: isEditing ? "Update Service Group" : "Create Service Group"}
</Button>
</div>
</Rhform>
)
}

23
modules/service-groups/service-group.schema.ts Normal file
View File

@ -0,0 +1,23 @@
import { z } from "zod"
export const relationFieldSchema = z
.object({ value: z.string(), label: z.string() })
.nullable()
export const serviceGroupFormSchema = z.object({
shop_type: relationFieldSchema,
inventory_category: relationFieldSchema,
unit_type: relationFieldSchema,
department: relationFieldSchema,
service_name: z.string().min(1, "Service name is required"),
code: z.string().optional(),
service_description: z.string().optional(),
selling_price: z.coerce.number().min(0).optional(),
selling_chart_of_account: z.string().optional(),
show_as_lump_sum: z.boolean().optional(),
mark_as_recommended: z.boolean().optional(),
set_packaged_pricing: z.boolean().optional(),
is_active: z.boolean().optional(),
})
export type ServiceGroupFormValues = z.infer<typeof serviceGroupFormSchema>

7
modules/services/department-assignment-types.ts Normal file
View File

@ -0,0 +1,7 @@
export const DEPARTMENT_ASSIGNMENT_TYPE_OPTIONS = [
{ value: "none", label: "None" },
{ value: "bays", label: "Bays" },
{ value: "outsourced", label: "Outsourced" },
] as const
export type DepartmentAssignmentType = typeof DEPARTMENT_ASSIGNMENT_TYPE_OPTIONS[number]["value"]

2
modules/services/inline-forms/category-inline-form.tsx Normal file
View File

@ -0,0 +1,2 @@
// Renamed to inventory-category-inline-form.tsx
export { InventoryCategoryInlineForm as CategoryInlineForm } from "./inventory-category-inline-form"

66
modules/services/inline-forms/department-inline-form.tsx Normal file
View File

@ -0,0 +1,66 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextField, RhfSelectField, type InlineCreateFormProps } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { DEPARTMENT_ASSIGNMENT_TYPE_OPTIONS } from "../department-assignment-types"
const schema = z.object({
name: z.string().min(1, "Name is required"),
assignment_type: z.string().optional(),
})
type FormValues = z.infer<typeof schema>
export function DepartmentInlineForm({ onSuccess }: InlineCreateFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
defaultValues: { name: "", assignment_type: "none" },
})
const handleSubmit = async (values: FormValues) => {
try {
const result = await api.departments.create({
name: values.name,
assignment_type: values.assignment_type || undefined,
})
toast.success("Department created")
form.reset()
const item = (result as any)?.data ?? result
onSuccess({ value: String(item.id), label: item.name ?? String(item.id) })
} catch {
toast.error("Failed to create department")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<RhfTextField
name="name"
label="Name"
placeholder="e.g. Mechanical"
required
/>
<RhfSelectField
name="assignment_type"
label="Assignment Type"
placeholder="Select assignment type"
options={[...DEPARTMENT_ASSIGNMENT_TYPE_OPTIONS]}
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Creating..." : "Create Department"}
</Button>
</FieldGroup>
</Rhform>
)
}

78
modules/services/inline-forms/inventory-category-inline-form.tsx Normal file
View File

@ -0,0 +1,78 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextField, RhfAsyncSelectField, type InlineCreateFormProps } from "@/shared/components/form"
import { ShopTypeInlineForm } from "@/modules/vehicles/inline-forms/shop-type-inline-form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
const schema = z.object({
title: z.string().min(1, "Title is required"),
shop_type: z.object({ value: z.string(), label: z.string() }).nullable(),
})
type FormValues = z.infer<typeof schema>
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.name ?? item.title ?? String(item.id),
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
export function InventoryCategoryInlineForm({ onSuccess }: InlineCreateFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
defaultValues: { title: "", shop_type: null },
})
const handleSubmit = async (values: FormValues) => {
try {
const result = await api.inventory.createCategory({
title: values.title,
shop_type_id: values.shop_type ? Number(values.shop_type.value) : undefined,
})
toast.success("Category created")
form.reset()
const item = (result as any)?.data ?? result
onSuccess({ value: String(item.id), label: item.title ?? item.name ?? String(item.id) })
} catch {
toast.error("Failed to create category")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<RhfTextField
name="title"
label="Title"
placeholder="e.g. Parts"
required
/>
<RhfAsyncSelectField
name="shop_type"
label="Shop Type"
placeholder="Select shop type"
queryKey={["shop-types"]}
listFn={() => api.shopTypes.list()}
mapOption={mapLookupOption}
createForm={(props) => <ShopTypeInlineForm {...props} />}
createLabel="Shop Type"
{...STORE_OBJECT}
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Creating..." : "Create Category"}
</Button>
</FieldGroup>
</Rhform>
)
}

55
modules/services/inline-forms/unit-type-inline-form.tsx Normal file
View File

@ -0,0 +1,55 @@
"use client"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { FieldGroup } from "@/shared/components/ui/field"
import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
const schema = z.object({
title: z.string().min(1, "Title is required"),
})
type FormValues = z.infer<typeof schema>
export function UnitTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
const api = useAuthApi()
const form = useForm<FormValues>({
resolver: zodResolver(schema),
defaultValues: { title: "" },
})
const handleSubmit = async (values: FormValues) => {
try {
const result = await api.inventory.createUnitType({ title: values.title })
toast.success("Unit type created")
form.reset()
const item = (result as any)?.data ?? result
onSuccess({ value: String(item.id), label: item.title ?? item.name ?? String(item.id) })
} catch {
toast.error("Failed to create unit type")
}
}
return (
<Rhform form={form} onSubmit={handleSubmit}>
<FieldGroup>
<RhfTextField
name="title"
label="Title"
placeholder="e.g. Hour"
required
/>
<Button type="submit" disabled={form.formState.isSubmitting}>
<Plus />
{form.formState.isSubmitting ? "Creating..." : "Create Unit Type"}
</Button>
</FieldGroup>
</Rhform>
)
}

238
modules/services/service-form.tsx Normal file
View File

@ -0,0 +1,238 @@
"use client"
import { AlertTriangle, Plus, Save } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
import { FieldGroup } from "@/shared/components/ui/field"
import {
Rhform,
RhfTextField,
RhfTextareaField,
RhfAsyncSelectField,
} from "@/shared/components/form"
import { ShopTypeInlineForm } from "@/modules/vehicles/inline-forms/shop-type-inline-form"
import { InventoryCategoryInlineForm } from "./inline-forms/inventory-category-inline-form"
import { UnitTypeInlineForm } from "./inline-forms/unit-type-inline-form"
import { DepartmentInlineForm } from "./inline-forms/department-inline-form"
import { toast } from "sonner"
import { useAuthApi } from "@/shared/useApi"
import { useResourceForm } from "@/shared/hooks/use-resource-form"
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toId } from "@/shared/lib/utils"
import { serviceFormSchema, type ServiceFormValues } from "./service.schema"
import { SERVICE_ROUTES } from "@repo/api"
// ── Props ──
export type ServiceFormProps = {
resourceId?: string | null
initialData?: unknown
onSuccess?: () => void
}
// ── Default values ──
const DEFAULT_VALUES: ServiceFormValues = {
shop_type: null,
category: null,
unit_type: null,
department: null,
labor_name: "",
service_code: "",
labor_matrix: "",
description: "",
selling_price: undefined,
}
// ── Mapping helpers ──
const mapLookupOption = (item: any) => ({
value: String(item.id),
label: item.name ?? item.title ?? String(item.id),
})
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
function mapToFormValues(data: unknown): ServiceFormValues {
const d = (data as any)?.data ?? data ?? {}
return {
shop_type: null,
category: null,
unit_type: null,
department: null,
labor_name: d.name || d.labor_name || "",
service_code: d.service_code || "",
labor_matrix: d.labor_matrix || "",
description: d.description || "",
selling_price: d.selling_price ?? undefined,
}
}
function mapCreatePayload(values: ServiceFormValues) {
return {
shop_type_id: toId(values.shop_type),
category_id: toId(values.category),
unit_type_id: toId(values.unit_type),
department_id: toId(values.department),
labor_name: values.labor_name,
service_code: values.service_code || undefined,
labor_matrix: values.labor_matrix || undefined,
description: values.description || undefined,
selling_price: values.selling_price,
}
}
function mapUpdatePayload(values: ServiceFormValues) {
return {
labor_name: values.labor_name,
selling_price: values.selling_price,
}
}
// ── Component ──
export function ServiceForm({ resourceId, initialData, onSuccess }: ServiceFormProps) {
const api = useAuthApi()
const { form, isEditing } = useResourceForm<ServiceFormValues, any>({
schema: serviceFormSchema,
defaultValues: DEFAULT_VALUES,
resourceId,
initialData,
mapToFormValues,
})
const { mutate, error, isPending } = useFormMutation(form, {
mutationFn: (values: ServiceFormValues) => {
const promise = isEditing && resourceId
? api.services.update(resourceId, mapUpdatePayload(values))
: api.services.create(mapCreatePayload(values))
toast.promise(promise, {
loading: isEditing ? "Updating service..." : "Creating service...",
success: isEditing ? "Service updated successfully" : "Service created successfully",
error: isEditing ? "Failed to update service" : "Failed to create service",
})
return promise
},
onSuccess: () => {
form.reset()
onSuccess?.()
},
})
return (
<Rhform form={form} onSubmit={(values) => mutate(values)}>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertTriangle className="me-2 h-4 w-4" />
<AlertTitle>
{isEditing ? "Failed to update service" : "Failed to create service"}
</AlertTitle>
{error.message}
</Alert>
)}
<FieldGroup>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="labor_name"
label="Labor Name"
placeholder="e.g. Oil Change"
required
/>
<RhfTextField
name="service_code"
label="Service Code"
placeholder="e.g. SVC-001"
/>
</div>
{!isEditing && (
<>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="shop_type"
label="Shop Type"
placeholder="Select shop type"
queryKey={["shop-types"]}
listFn={() => api.shopTypes.list()}
mapOption={mapLookupOption}
createForm={(props) => <ShopTypeInlineForm {...props} />}
createLabel="Shop Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="category"
label="Category"
placeholder="Select category"
queryKey={["inventory-categories"]}
listFn={() => api.inventory.listCategories()}
mapOption={mapLookupOption}
createForm={(props) => <InventoryCategoryInlineForm {...props} />}
createLabel="Category"
{...STORE_OBJECT}
/>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfAsyncSelectField
name="unit_type"
label="Unit Type"
placeholder="Select unit type"
queryKey={["unit-types"]}
listFn={() => api.inventory.listUnitTypes()}
mapOption={mapLookupOption}
createForm={(props) => <UnitTypeInlineForm {...props} />}
createLabel="Unit Type"
{...STORE_OBJECT}
/>
<RhfAsyncSelectField
name="department"
label="Department"
placeholder="Select department"
queryKey={["departments"]}
listFn={() => api.departments.list()}
mapOption={(item: any) => ({ value: String(item.id), label: item.name ?? String(item.id) })}
createForm={(props) => <DepartmentInlineForm {...props} />}
createLabel="Department"
{...STORE_OBJECT}
/>
</div>
<RhfTextField
name="labor_matrix"
label="Labor Matrix"
placeholder="e.g. Standard"
/>
</>
)}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<RhfTextField
name="selling_price"
label="Selling Price"
type="number"
placeholder="e.g. 75"
/>
</div>
<RhfTextareaField
name="description"
label="Description"
placeholder="Describe the service..."
rows={3}
/>
<Button type="submit" variant="default" disabled={isPending}>
{isEditing ? <Save /> : <Plus />}
{isPending
? (isEditing ? "Updating..." : "Creating...")
: (isEditing ? "Update Service" : "Create Service")}
</Button>
</FieldGroup>
</Rhform>
)
}

19
modules/services/service.schema.ts Normal file
View File

@ -0,0 +1,19 @@
import { z } from "zod"
export const relationFieldSchema = z
.object({ value: z.string(), label: z.string() })
.nullable()
export const serviceFormSchema = z.object({
shop_type: relationFieldSchema,
category: relationFieldSchema,
unit_type: relationFieldSchema,
department: relationFieldSchema,
labor_name: z.string().min(1, "Labor name is required"),
service_code: z.string().optional(),
labor_matrix: z.string().optional(),
description: z.string().optional(),
selling_price: z.coerce.number().min(0).optional(),
})
export type ServiceFormValues = z.infer<typeof serviceFormSchema>

4
shared/components/form/controls/checkbox-field.tsx
View File

@ -1,7 +1,7 @@
"use client"
import type { BaseFieldControlProps } from "../types"
import { Checkbox } from "@/shared/components/ui/checkbox"
import { Switch } from "@/shared/components/ui/switch"
export type CheckboxFieldProps = BaseFieldControlProps<boolean> & {
label?: string
@ -16,7 +16,7 @@ export function CheckboxField({
invalid,
}: CheckboxFieldProps) {
return (
<Checkbox
<Switch
checked={value}
onCheckedChange={(checked) => onChange(checked === true)}
onBlur={onBlur}

44
shared/components/form/fields/rhf-checkbox-field.tsx
View File

@ -1,9 +1,10 @@
"use client"
import type { FieldValues, FieldPath } from "react-hook-form"
import { RhfField } from "../rhf-field"
import { useFormContext, useController } from "react-hook-form"
import { CheckboxField, type CheckboxFieldProps } from "../controls/checkbox-field"
import type { BaseFieldControlProps } from "../types"
import { FieldError } from "@/shared/components/ui/field"
type RhfCheckboxFieldProps<
TValues extends FieldValues,
@ -19,6 +20,43 @@ type RhfCheckboxFieldProps<
export function RhfCheckboxField<
TValues extends FieldValues,
TName extends FieldPath<TValues>,
>(props: RhfCheckboxFieldProps<TValues, TName>) {
return <RhfField {...props} component={CheckboxField} />
>({
name,
label,
description,
required,
disabled,
...controlProps
}: RhfCheckboxFieldProps<TValues, TName>) {
const { control } = useFormContext<TValues>()
const {
field,
fieldState: { error },
} = useController({ name, control, disabled })
return (
<div className="flex items-center justify-between gap-4 rounded-lg border p-4">
<div className="flex-1 space-y-0.5">
{label && (
<p className="text-sm font-medium leading-none">
{label}
{required && <span className="text-destructive"> *</span>}
</p>
)}
{description && (
<p className="text-sm text-muted-foreground">{description}</p>
)}
{error && <FieldError>{error.message}</FieldError>}
</div>
<CheckboxField
{...(controlProps as any)}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
name={field.name}
disabled={field.disabled}
invalid={!!error}
/>
</div>
)
}

2
shared/components/ui/checkbox.tsx
View File

@ -14,7 +14,7 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
"peer relative flex size-4 max-w-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
className
)}
{...props}