humam kerdiah
3c55be5052
- Implemented PayrollPage for managing payroll runs with CRUD operations. - Created TimeClocksPage for tracking employee clock-ins and clock-outs. - Developed TimeSheetsPage for displaying employee timesheets. - Added EmployeeCertificationForm and EmployeeDocumentForm for managing employee certifications and documents. - Introduced LeaveRequestForm for submitting and managing leave requests. - Added usePermissions hook for UI-side permission checks. - Created LeaveRequestsClient and PayrollClient for API interactions.
423 lines
18 KiB
TypeScript
423 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { AlertTriangle, ImageIcon, Plus, Save, UploadIcon } from "lucide-react"
|
|
import { useRef, useState } from "react"
|
|
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
|
import { FieldGroup } from "@/shared/components/ui/field"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
|
import { Separator } from "@/shared/components/ui/separator"
|
|
import {
|
|
Rhform,
|
|
RhfTextField,
|
|
RhfSelectField,
|
|
RhfAsyncSelectField,
|
|
RhfCheckboxField,
|
|
RhfTextareaField,
|
|
} from "@/shared/components/form"
|
|
import { toast } from "sonner"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
|
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
|
import { toRelation, toId } from "@/shared/lib/utils"
|
|
|
|
import {
|
|
employeeFormSchema,
|
|
type EmployeeFormValues,
|
|
STATUS_OPTIONS,
|
|
TYPE_OPTIONS,
|
|
WAGE_TYPE_OPTIONS,
|
|
GENDER_OPTIONS,
|
|
MARITAL_OPTIONS,
|
|
} from "./employee.schema"
|
|
import { EMPLOYEE_ROUTES, DEPARTMENT_ROUTES, SHOP_TIMING_ROUTES, SHOP_CALENDAR_ROUTES, GEO_ROUTES } from "@garage/api"
|
|
|
|
const titleCase = (v: string) => v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
|
|
|
|
const STATUS_SELECT_OPTIONS = STATUS_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
|
const TYPE_SELECT_OPTIONS = TYPE_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
|
const WAGE_TYPE_SELECT_OPTIONS = WAGE_TYPE_OPTIONS.map((v) => ({ value: v, label: v }))
|
|
const GENDER_SELECT_OPTIONS = GENDER_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
|
const MARITAL_SELECT_OPTIONS = MARITAL_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
|
|
|
export type EmployeeFormProps = {
|
|
resourceId?: string | null
|
|
initialData?: unknown
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
const DEFAULT_VALUES: EmployeeFormValues = {
|
|
department: null,
|
|
country: null,
|
|
shop_calender: null,
|
|
shop_timing: null,
|
|
role_id: null,
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
password: "",
|
|
phone: "",
|
|
designation: "",
|
|
salary: null,
|
|
wage_type: null,
|
|
status: "active",
|
|
type: "employee",
|
|
track_attendance: true,
|
|
notify_owner_when_punch_in_out: false,
|
|
geo_fence_radius: null,
|
|
address: "",
|
|
date_of_birth: "",
|
|
gender: null,
|
|
marital_status: null,
|
|
national_id: "",
|
|
hire_date: "",
|
|
emergency_contact_name: "",
|
|
emergency_contact_phone: "",
|
|
bank_name: "",
|
|
bank_account_number: "",
|
|
bank_iban: "",
|
|
hourly_rate: null,
|
|
commission_rate: null,
|
|
}
|
|
|
|
function mapToFormValues(data: unknown): EmployeeFormValues {
|
|
const d = (data as any)?.data ?? data ?? {}
|
|
const formatDate = (v: unknown): string => {
|
|
if (!v) return ""
|
|
const s = String(v)
|
|
return s.length >= 10 ? s.slice(0, 10) : s
|
|
}
|
|
|
|
return {
|
|
department: toRelation(d.department_id, d.department?.name),
|
|
country: toRelation(d.country_id, d.country?.name),
|
|
shop_calender: toRelation(d.shop_calender_id, d.shop_calender?.title),
|
|
shop_timing: toRelation(d.shop_timing_id, d.shop_timing?.title),
|
|
role_id: d.role_id ? Number(d.role_id) : null,
|
|
first_name: d.first_name || "",
|
|
last_name: d.last_name || "",
|
|
email: d.email || "",
|
|
password: "",
|
|
phone: d.phone || "",
|
|
designation: d.designation || "",
|
|
salary: d.salary ?? null,
|
|
wage_type: d.wage_type ?? null,
|
|
status: d.status || "active",
|
|
type: d.type || "employee",
|
|
track_attendance: d.track_attendance ?? true,
|
|
notify_owner_when_punch_in_out: d.notify_owner_when_punch_in_out ?? false,
|
|
geo_fence_radius: d.geo_fence_radius ?? null,
|
|
address: d.address || "",
|
|
date_of_birth: formatDate(d.date_of_birth),
|
|
gender: d.gender ?? null,
|
|
marital_status: d.marital_status ?? null,
|
|
national_id: d.national_id || "",
|
|
hire_date: formatDate(d.hire_date),
|
|
emergency_contact_name: d.emergency_contact_name || "",
|
|
emergency_contact_phone: d.emergency_contact_phone || "",
|
|
bank_name: d.bank_name || "",
|
|
bank_account_number: d.bank_account_number || "",
|
|
bank_iban: d.bank_iban || "",
|
|
hourly_rate: d.hourly_rate ?? null,
|
|
commission_rate: d.commission_rate ?? null,
|
|
}
|
|
}
|
|
|
|
function mapFormToPayload(values: EmployeeFormValues) {
|
|
return {
|
|
department_id: toId(values.department),
|
|
country_id: toId(values.country),
|
|
shop_calender_id: toId(values.shop_calender),
|
|
shop_timing_id: toId(values.shop_timing),
|
|
role_id: values.role_id ?? undefined,
|
|
first_name: values.first_name,
|
|
last_name: values.last_name,
|
|
email: values.email,
|
|
password: values.password || undefined,
|
|
phone: values.phone || undefined,
|
|
designation: values.designation || undefined,
|
|
salary: values.salary ?? undefined,
|
|
wage_type: values.wage_type ?? undefined,
|
|
status: values.status,
|
|
type: values.type,
|
|
track_attendance: values.track_attendance,
|
|
notify_owner_when_punch_in_out: values.notify_owner_when_punch_in_out,
|
|
geo_fence_radius: values.geo_fence_radius ?? undefined,
|
|
address: values.address || undefined,
|
|
date_of_birth: values.date_of_birth || undefined,
|
|
gender: values.gender ?? undefined,
|
|
marital_status: values.marital_status ?? undefined,
|
|
national_id: values.national_id || undefined,
|
|
hire_date: values.hire_date || undefined,
|
|
emergency_contact_name: values.emergency_contact_name || undefined,
|
|
emergency_contact_phone: values.emergency_contact_phone || undefined,
|
|
bank_name: values.bank_name || undefined,
|
|
bank_account_number: values.bank_account_number || undefined,
|
|
bank_iban: values.bank_iban || undefined,
|
|
hourly_rate: values.hourly_rate ?? undefined,
|
|
commission_rate: values.commission_rate ?? undefined,
|
|
}
|
|
}
|
|
|
|
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 SectionHeading({ title, description }: { title: string; description?: string }) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-semibold">{title}</h3>
|
|
{description && <p className="text-xs text-muted-foreground">{description}</p>}
|
|
<Separator className="mt-2" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AvatarUpload({ employeeId, initialUrl }: { employeeId: string; initialUrl?: string | null }) {
|
|
const api = useAuthApi()
|
|
const inputRef = useRef<HTMLInputElement | null>(null)
|
|
const [previewUrl, setPreviewUrl] = useState<string | null>(initialUrl ?? null)
|
|
const [uploading, setUploading] = useState(false)
|
|
|
|
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0]
|
|
if (!file) return
|
|
|
|
setUploading(true)
|
|
try {
|
|
const res: any = await api.employees.uploadAvatar(employeeId, file)
|
|
const url = res?.data?.avatar_url ?? URL.createObjectURL(file)
|
|
setPreviewUrl(url)
|
|
toast.success("Avatar updated")
|
|
} catch (err: any) {
|
|
toast.error(err?.message ?? "Failed to upload avatar")
|
|
} finally {
|
|
setUploading(false)
|
|
e.target.value = ""
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<Avatar size="lg">
|
|
{previewUrl ? <AvatarImage src={previewUrl} alt="Avatar" /> : null}
|
|
<AvatarFallback>
|
|
<ImageIcon className="size-5 text-muted-foreground" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={uploading}
|
|
onClick={() => inputRef.current?.click()}
|
|
>
|
|
<UploadIcon className="size-4" />
|
|
{uploading ? "Uploading..." : "Upload photo"}
|
|
</Button>
|
|
<p className="mt-1 text-xs text-muted-foreground">JPG, PNG, WEBP. Max 5 MB.</p>
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function EmployeeForm({ resourceId, initialData, onSuccess }: EmployeeFormProps) {
|
|
const api = useAuthApi()
|
|
|
|
const { form, isEditing } = useResourceForm<EmployeeFormValues, any>({
|
|
schema: employeeFormSchema,
|
|
defaultValues: DEFAULT_VALUES,
|
|
resourceId,
|
|
initialData,
|
|
initialize: (id) => api.employees.show(id),
|
|
queryKey: [EMPLOYEE_ROUTES.BY_ID, resourceId],
|
|
mapToFormValues: mapToFormValues,
|
|
})
|
|
|
|
const { mutate, error, isPending } = useFormMutation(form, {
|
|
mutationFn: (values: EmployeeFormValues) => {
|
|
const payload = mapFormToPayload(values)
|
|
const promise = isEditing && resourceId
|
|
? api.employees.update(resourceId, payload)
|
|
: api.employees.create(payload)
|
|
toast.promise(promise, {
|
|
loading: isEditing ? "Updating employee..." : "Creating employee...",
|
|
success: isEditing ? "Employee updated successfully" : "Employee created successfully",
|
|
error: isEditing ? "Failed to update employee" : "Failed to create employee",
|
|
})
|
|
return promise
|
|
},
|
|
onSuccess: () => {
|
|
form.reset()
|
|
onSuccess?.()
|
|
},
|
|
})
|
|
|
|
const initialAvatarUrl = (initialData as any)?.avatar_url
|
|
?? ((initialData as any)?.avatar_path ? `/storage/${(initialData as any).avatar_path}` : null)
|
|
|
|
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 employee" : "Failed to create employee"}
|
|
</AlertTitle>
|
|
{error.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<FieldGroup>
|
|
{/* Personal */}
|
|
<SectionHeading title="Personal" />
|
|
|
|
{isEditing && resourceId ? (
|
|
<AvatarUpload employeeId={resourceId} initialUrl={initialAvatarUrl} />
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="first_name" label="First Name" placeholder="Jane" required />
|
|
<RhfTextField name="last_name" label="Last Name" placeholder="Smith" required />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="date_of_birth" label="Date of Birth" type="date" />
|
|
<RhfTextField name="national_id" label="National ID" placeholder="A1234567" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField name="gender" label="Gender" placeholder="Select gender" options={GENDER_SELECT_OPTIONS} />
|
|
<RhfSelectField name="marital_status" label="Marital Status" placeholder="Select status" options={MARITAL_SELECT_OPTIONS} />
|
|
</div>
|
|
|
|
{/* Contact */}
|
|
<SectionHeading title="Contact" />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="email" label="Email" placeholder="jane@example.com" type="email" required />
|
|
<RhfTextField name="password" label="Password" placeholder={isEditing ? "Leave blank to keep" : "At least 6 characters"} type="password" required={!isEditing} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="phone" label="Phone" placeholder="+971501234567" type="tel" />
|
|
<RhfAsyncSelectField
|
|
name="country"
|
|
label="Country"
|
|
placeholder="Select country"
|
|
queryKey={[GEO_ROUTES.COUNTRIES]}
|
|
listFn={() => api.geo.countries()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<RhfTextareaField name="address" label="Address" placeholder="Street, city, region..." rows={2} />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="emergency_contact_name" label="Emergency Contact Name" placeholder="Full name" />
|
|
<RhfTextField name="emergency_contact_phone" label="Emergency Contact Phone" type="tel" />
|
|
</div>
|
|
|
|
{/* Employment */}
|
|
<SectionHeading title="Employment" />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="hire_date" label="Hire Date" type="date" />
|
|
<RhfTextField name="designation" label="Designation" placeholder="Senior Technician" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField name="type" label="Type" placeholder="Select type" options={TYPE_SELECT_OPTIONS} />
|
|
<RhfSelectField name="status" label="Status" placeholder="Select status" options={STATUS_SELECT_OPTIONS} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="department"
|
|
label="Department"
|
|
placeholder="Select department"
|
|
queryKey={[DEPARTMENT_ROUTES.INDEX]}
|
|
listFn={() => api.departments.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfTextField name="role_id" label="Role ID" placeholder="1" type="number" />
|
|
</div>
|
|
|
|
{/* Compensation */}
|
|
<SectionHeading title="Compensation" />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfSelectField name="wage_type" label="Wage Type" placeholder="Select wage type" options={WAGE_TYPE_SELECT_OPTIONS} />
|
|
<RhfTextField name="salary" label="Salary" placeholder="0" type="number" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="hourly_rate" label="Hourly Rate" placeholder="0.00" type="number" />
|
|
<RhfTextField name="commission_rate" label="Commission (%)" placeholder="0" type="number" />
|
|
</div>
|
|
|
|
{/* Bank */}
|
|
<SectionHeading title="Bank" description="Used for payroll payouts." />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfTextField name="bank_name" label="Bank Name" placeholder="Bank of ..." />
|
|
<RhfTextField name="bank_account_number" label="Account Number" placeholder="000123456789" />
|
|
</div>
|
|
<RhfTextField name="bank_iban" label="IBAN" placeholder="AE00 0000 0000 0000 0000 000" />
|
|
|
|
{/* Tracking */}
|
|
<SectionHeading title="Attendance Tracking" />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfAsyncSelectField
|
|
name="shop_calender"
|
|
label="Shop Calendar"
|
|
placeholder="Select calendar"
|
|
queryKey={[SHOP_CALENDAR_ROUTES.INDEX]}
|
|
listFn={() => api.shopCalendars.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
<RhfAsyncSelectField
|
|
name="shop_timing"
|
|
label="Shop Timing"
|
|
placeholder="Select timing"
|
|
queryKey={[SHOP_TIMING_ROUTES.INDEX]}
|
|
listFn={() => api.shopTimings.list()}
|
|
mapOption={mapLookupOption}
|
|
{...STORE_OBJECT}
|
|
/>
|
|
</div>
|
|
|
|
<RhfTextField name="geo_fence_radius" label="Geo Fence Radius (m)" placeholder="100" type="number" />
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<RhfCheckboxField name="track_attendance" label="Track Attendance" />
|
|
<RhfCheckboxField name="notify_owner_when_punch_in_out" label="Notify Owner on Punch In/Out" />
|
|
</div>
|
|
|
|
<Button type="submit" variant="default" disabled={isPending}>
|
|
{isEditing ? <Save /> : <Plus />}
|
|
{isPending
|
|
? (isEditing ? "Updating..." : "Creating...")
|
|
: (isEditing ? "Update Employee" : "Create Employee")}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|