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

updates

Browse Source
This commit is contained in:
mohammadkhayata
2026-04-06 02:32:47 +03:00
parent 5f3d208158
commit 24a44481a0
152 changed files with 85913 additions and 44338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/shared/components/form/controls/date-picker-field.tsx
+61
View File
@@ -0,0 +1,61 @@
"use client"
import * as React from "react"
import { format, parse, isValid } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import { Calendar } from "@/shared/components/ui/calendar"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/shared/components/ui/popover"
import type { BaseFieldControlProps } from "../types"
export type DatePickerFieldProps = BaseFieldControlProps<string> & {
placeholder?: string
}
export function DatePickerField({
value,
onChange,
onBlur,
disabled,
invalid,
placeholder = "Pick a date",
}: DatePickerFieldProps) {
const dateValue = value ? parse(value, "yyyy-MM-dd", new Date()) : undefined
const isValidDate = dateValue ? isValid(dateValue) : false
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
type="button"
disabled={disabled}
onBlur={onBlur}
aria-invalid={invalid || undefined}
className={cn(
"w-full justify-start text-left font-normal",
!isValidDate && "text-muted-foreground",
invalid && "border-destructive ring-3 ring-destructive/20",
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{isValidDate ? format(dateValue!, "PPP") : <span>{placeholder}</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={isValidDate ? dateValue : undefined}
onSelect={(d) => onChange(d ? format(d, "yyyy-MM-dd") : "")}
autoFocus
/>
</PopoverContent>
</Popover>
)
}
apps/dashboard/shared/components/form/controls/text-input-field.tsx
+3
View File
@@ -4,6 +4,7 @@ import { Input } from "@/shared/components/ui/input"
export type TextInputFieldProps = BaseFieldControlProps<string> & {
placeholder?: string
type?: React.HTMLInputTypeAttribute
step?: React.InputHTMLAttributes<HTMLInputElement>["step"]
}
export function TextInputField({
@@ -15,6 +16,7 @@ export function TextInputField({
invalid,
placeholder,
type = "text",
step,
}: TextInputFieldProps) {
return (
<Input
@@ -26,6 +28,7 @@ export function TextInputField({
aria-invalid={invalid || undefined}
placeholder={placeholder}
type={type}
step={step}
/>
)
}
apps/dashboard/shared/components/form/controls/time-picker-field.tsx
+123
View File
@@ -0,0 +1,123 @@
"use client"
import * as React from "react"
import { ClockIcon } from "lucide-react"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/shared/components/ui/popover"
import type { BaseFieldControlProps } from "../types"
export type TimePickerFieldProps = BaseFieldControlProps<string> & {
placeholder?: string
withSeconds?: boolean
}
function pad(n: number) {
return String(Math.max(0, n)).padStart(2, "0")
}
function parseTime(value: string) {
const parts = (value ?? "").split(":")
return {
hours: Math.min(23, Math.max(0, Number(parts[0]) || 0)),
minutes: Math.min(59, Math.max(0, Number(parts[1]) || 0)),
seconds: Math.min(59, Math.max(0, Number(parts[2]) || 0)),
}
}
export function TimePickerField({
value,
onChange,
onBlur,
disabled,
invalid,
placeholder = "Pick a time",
withSeconds = true,
}: TimePickerFieldProps) {
const { hours, minutes, seconds } = parseTime(value ?? "")
const hasValue = !!value
function update(h: number, m: number, s: number) {
const hh = Math.min(23, Math.max(0, h))
const mm = Math.min(59, Math.max(0, m))
const ss = Math.min(59, Math.max(0, s))
onChange(withSeconds ? `${pad(hh)}:${pad(mm)}:${pad(ss)}` : `${pad(hh)}:${pad(mm)}`)
}
const display = hasValue
? withSeconds
? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
: `${pad(hours)}:${pad(minutes)}`
: null
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
type="button"
disabled={disabled}
onBlur={onBlur}
aria-invalid={invalid || undefined}
className={cn(
"w-full justify-start text-left font-normal",
!hasValue && "text-muted-foreground",
invalid && "border-destructive ring-3 ring-destructive/20",
)}
>
<ClockIcon className="mr-2 h-4 w-4" />
{display ?? <span>{placeholder}</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-4" align="start">
<div className="flex items-end gap-2">
<div className="flex flex-col items-center gap-1">
<span className="text-xs text-muted-foreground">HH</span>
<Input
type="number"
min={0}
max={23}
value={pad(hours)}
onChange={(e) => update(Number(e.target.value), minutes, seconds)}
className="w-16 text-center"
/>
</div>
<span className="mb-2 text-xl font-medium leading-none">:</span>
<div className="flex flex-col items-center gap-1">
<span className="text-xs text-muted-foreground">MM</span>
<Input
type="number"
min={0}
max={59}
value={pad(minutes)}
onChange={(e) => update(hours, Number(e.target.value), seconds)}
className="w-16 text-center"
/>
</div>
{withSeconds && (
<>
<span className="mb-2 text-xl font-medium leading-none">:</span>
<div className="flex flex-col items-center gap-1">
<span className="text-xs text-muted-foreground">SS</span>
<Input
type="number"
min={0}
max={59}
value={pad(seconds)}
onChange={(e) => update(hours, minutes, Number(e.target.value))}
className="w-16 text-center"
/>
</div>
</>
)}
</div>
</PopoverContent>
</Popover>
)
}
apps/dashboard/shared/components/form/fields/rhf-date-field.tsx
+24
View File
@@ -0,0 +1,24 @@
"use client"
import type { FieldValues, FieldPath } from "react-hook-form"
import { RhfField } from "../rhf-field"
import { DatePickerField, type DatePickerFieldProps } from "../controls/date-picker-field"
import type { BaseFieldControlProps } from "../types"
type RhfDateFieldProps<
TValues extends FieldValues,
TName extends FieldPath<TValues>,
> = {
name: TName
label?: string
description?: string
required?: boolean
disabled?: boolean
} & Omit<DatePickerFieldProps, keyof BaseFieldControlProps<string>>
export function RhfDateField<
TValues extends FieldValues,
TName extends FieldPath<TValues>,
>(props: RhfDateFieldProps<TValues, TName>) {
return <RhfField {...props} component={DatePickerField} />
}
apps/dashboard/shared/components/form/fields/rhf-time-field.tsx
+24
View File
@@ -0,0 +1,24 @@
"use client"
import type { FieldValues, FieldPath } from "react-hook-form"
import { RhfField } from "../rhf-field"
import { TimePickerField, type TimePickerFieldProps } from "../controls/time-picker-field"
import type { BaseFieldControlProps } from "../types"
type RhfTimeFieldProps<
TValues extends FieldValues,
TName extends FieldPath<TValues>,
> = {
name: TName
label?: string
description?: string
required?: boolean
disabled?: boolean
} & Omit<TimePickerFieldProps, keyof BaseFieldControlProps<string>>
export function RhfTimeField<
TValues extends FieldValues,
TName extends FieldPath<TValues>,
>(props: RhfTimeFieldProps<TValues, TName>) {
return <RhfField {...props} component={TimePickerField} />
}
apps/dashboard/shared/components/form/index.ts
+4
View File
@@ -24,6 +24,8 @@ export {
export { FileInputField, type FileInputFieldProps } from "./controls/file-input-field"
export { ImageInputField, type ImageInputFieldProps } from "./controls/image-input-field"
export { DocumentInputField, type DocumentInputFieldProps } from "./controls/document-input-field"
export { DatePickerField, type DatePickerFieldProps } from "./controls/date-picker-field"
export { TimePickerField, type TimePickerFieldProps } from "./controls/time-picker-field"
// ── RHF Field Wrappers ──
export { RhfTextField } from "./fields/rhf-text-field"
@@ -35,3 +37,5 @@ export { RhfImageField } from "./fields/rhf-image-field"
export { RhfDocumentField } from "./fields/rhf-document-field"
export { RhfAsyncSelectField, RhfAsyncMultiSelectField, type InlineCreateFormProps, type InlineCreateConfig } from "./fields/rhf-async-select-field"
export { SimpleTitleForm, type SimpleTitleFormProps } from "./fields/simple-title-form"
export { RhfDateField } from "./fields/rhf-date-field"
export { RhfTimeField } from "./fields/rhf-time-field"
apps/dashboard/shared/components/ui/avatar.tsx
+57 -11
View File
@@ -1,10 +1,21 @@
"use client"
import Image from "next/image"
import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"
import { cn } from "@/shared/lib/utils"
type AvatarImageStatus = "idle" | "loading" | "loaded" | "error"
type AvatarImageStatusContextValue = {
status: AvatarImageStatus
setStatus: React.Dispatch<React.SetStateAction<AvatarImageStatus>>
}
const AvatarImageStatusContext =
React.createContext<AvatarImageStatusContextValue | null>(null)
function Avatar({
className,
size = "default",
@@ -12,30 +23,59 @@ function Avatar({
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
size?: "default" | "sm" | "lg"
}) {
const [status, setStatus] = React.useState<AvatarImageStatus>("idle")
return (
<AvatarPrimitive.Root
data-slot="avatar"
data-size={size}
className={cn(
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
className
)}
{...props}
/>
<AvatarImageStatusContext.Provider value={{ status, setStatus }}>
<AvatarPrimitive.Root
data-slot="avatar"
data-size={size}
className={cn(
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
className
)}
{...props}
/>
</AvatarImageStatusContext.Provider>
)
}
function AvatarImage({
className,
sizes = "100%",
onLoadingStatusChange,
onLoad,
onError,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
}: Omit<React.ComponentPropsWithoutRef<typeof Image>, "fill"> &
Pick<React.ComponentProps<typeof AvatarPrimitive.Image>, "onLoadingStatusChange">) {
const imageStatusContext = React.useContext(AvatarImageStatusContext)
const { setStatus } = imageStatusContext ?? {}
React.useEffect(() => {
setStatus?.("loading")
onLoadingStatusChange?.("loading")
}, [onLoadingStatusChange, setStatus])
return (
<AvatarPrimitive.Image
<Image
data-slot="avatar-image"
fill
sizes={sizes}
className={cn(
"aspect-square size-full rounded-full object-cover",
className
)}
onLoad={(event) => {
setStatus?.("loaded")
onLoadingStatusChange?.("loaded")
onLoad?.(event)
}}
onError={(event) => {
setStatus?.("error")
onLoadingStatusChange?.("error")
onError?.(event)
}}
{...props}
/>
)
@@ -45,6 +85,12 @@ function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
const imageStatusContext = React.useContext(AvatarImageStatusContext)
if (imageStatusContext?.status === "loaded") {
return null
}
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
apps/dashboard/shared/components/ui/combobox.tsx
+2 -2
View File
@@ -112,7 +112,7 @@ function ComboboxContent({
<ComboboxPrimitive.Popup
data-slot="combobox-content"
data-chips={!!anchor}
className={cn("group/combobox-content relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
className={cn("group/combobox-content relative z-50 flex flex-col max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
{...props}
/>
</ComboboxPrimitive.Positioner>
@@ -125,7 +125,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
<ComboboxPrimitive.List
data-slot="combobox-list"
className={cn(
"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
"min-h-0 flex-1 scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
className
)}
{...props}
apps/dashboard/shared/data-view/resource-page/resource-page.tsx
+4 -1
View File
@@ -50,6 +50,7 @@ export type ResourcePageProps<TClient extends ResourcePageClient> = UseResourceP
paramKey?: string
onRowClick?: (row: ResourceItem<TClient>) => void
toolbar?: ReactNodeOrRender<TClient>
tableHeader?: ReactNodeOrRender<TClient>
}
@@ -64,6 +65,7 @@ export function ResourcePage<TClient extends ResourcePageClient>({
paramKey,
onRowClick,
toolbar,
tableHeader,
extraParams,
}: ResourcePageProps<TClient>) {
type TItem = ResourceItem<TClient>
@@ -112,7 +114,8 @@ export function ResourcePage<TClient extends ResourcePageClient>({
toolbar={resolvedToolbar}
>
<Card>
<CardContent>
<CardContent className="space-y-4">
{tableHeader && (typeof tableHeader === "function" ? tableHeader(context) : tableHeader)}
<DataTable
columns={columns}
data={items}
apps/dashboard/shared/data-view/table-view/data-table.tsx
+2 -2
View File
@@ -46,12 +46,12 @@ export function DataTable<TData>({
},
onSortingChange: (updater) => {
const next = typeof updater === "function" ? updater(sorting) : updater
onChange({ type: "sorting", sorting: next })
onChange?.({ type: "sorting", sorting: next })
},
onPaginationChange: (updater) => {
const current = { pageIndex: pagination.page - 1, pageSize: pagination.pageSize }
const next = typeof updater === "function" ? updater(current) : updater
onChange({
onChange?.({
type: "pagination",
pagination: {
page: next.pageIndex + 1,
apps/dashboard/shared/data-view/table-view/data-view-context.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import type { DataViewChangeEvent, DataViewPaginationState, DataViewSorting } fr
type DataViewContextValue = {
pagination: DataViewPaginationState
sorting: DataViewSorting
onChange: (event: DataViewChangeEvent) => void
onChange?: (event: DataViewChangeEvent) => void
isLoading: boolean
}
apps/dashboard/shared/data-view/table-view/types.ts
+1 -1
View File
@@ -31,7 +31,7 @@ export type DataViewProps<TData> = {
data: TData[]
pagination: DataViewPaginationState
sorting?: DataViewSorting
onChange: (event: DataViewChangeEvent) => void
onChange?: (event: DataViewChangeEvent) => void
isLoading?: boolean
onRowClick?: (row: TData) => void
slots?: DataViewSlots
apps/dashboard/shared/utils/getFullName.ts
+5
View File
@@ -0,0 +1,5 @@
export const getFullName = <T extends { first_name?: string | undefined; last_name?: string | undefined }>(user: T) => {
const firstName = user.first_name ?? ""
const lastName = user.last_name ?? ""
return `${firstName} ${lastName}`.trim()
}