483 lines
13 KiB
TypeScript
483 lines
13 KiB
TypeScript
import { useEffect, type ReactElement, useState } from "react";
|
|
import { useForm, type SubmitHandler } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import {
|
|
Modal,
|
|
FormField,
|
|
FormSelect,
|
|
PrimaryButton,
|
|
SecondaryButton,
|
|
PaginatedSelect,
|
|
} from "@/components/shared";
|
|
import type {
|
|
Department,
|
|
CreateDepartmentRequest,
|
|
UpdateDepartmentRequest,
|
|
} from "@/types/department";
|
|
import { departmentService } from "@/services/department-service";
|
|
|
|
// Validation schema
|
|
const departmentSchema = z.object({
|
|
name: z.string().min(1, "Name is required"),
|
|
code: z.string().min(1, "Code is required"),
|
|
description: z.string().optional(),
|
|
is_active: z.boolean(),
|
|
parent_id: z.string().nullable().optional(),
|
|
sort_order: z.number().int().min(0).optional(),
|
|
});
|
|
|
|
type DepartmentFormData = z.infer<typeof departmentSchema>;
|
|
|
|
const statusOptions = [
|
|
{ value: "true", label: "Active" },
|
|
{ value: "false", label: "Inactive" },
|
|
];
|
|
|
|
interface NewDepartmentModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: CreateDepartmentRequest) => Promise<void>;
|
|
isLoading?: boolean;
|
|
tenantId?: string | null;
|
|
}
|
|
|
|
export const NewDepartmentModal = ({
|
|
isOpen,
|
|
onClose,
|
|
onSubmit,
|
|
isLoading = false,
|
|
tenantId,
|
|
}: NewDepartmentModalProps): ReactElement | null => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
clearErrors,
|
|
formState: { errors },
|
|
} = useForm<DepartmentFormData>({
|
|
resolver: zodResolver(departmentSchema),
|
|
defaultValues: {
|
|
is_active: true,
|
|
parent_id: null,
|
|
sort_order: 0,
|
|
},
|
|
});
|
|
|
|
const statusValue = watch("is_active");
|
|
const parentIdValue = watch("parent_id");
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
reset();
|
|
clearErrors();
|
|
}
|
|
}, [isOpen, reset, clearErrors]);
|
|
|
|
const loadDepartments = async () => {
|
|
const response = await departmentService.list(tenantId, {
|
|
active_only: true,
|
|
});
|
|
return {
|
|
options: response.data.map((dept) => ({
|
|
value: dept.id,
|
|
label: dept.name,
|
|
})),
|
|
pagination: {
|
|
page: 1,
|
|
limit: response.data.length,
|
|
total: response.data.length,
|
|
totalPages: 1,
|
|
hasMore: false,
|
|
},
|
|
};
|
|
};
|
|
|
|
const handleFormSubmit: SubmitHandler<DepartmentFormData> = async (data) => {
|
|
await onSubmit(data as CreateDepartmentRequest);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Create New Department"
|
|
description="Add a new department to the system"
|
|
maxWidth="md"
|
|
footer={
|
|
<>
|
|
<SecondaryButton onClick={onClose} disabled={isLoading}>
|
|
Cancel
|
|
</SecondaryButton>
|
|
<PrimaryButton
|
|
onClick={handleSubmit(handleFormSubmit)}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Creating..." : "Create Department"}
|
|
</PrimaryButton>
|
|
</>
|
|
}
|
|
>
|
|
<form
|
|
onSubmit={handleSubmit(handleFormSubmit)}
|
|
className="p-5 flex flex-col gap-4"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
label="Department Name"
|
|
required
|
|
placeholder="e.g. Engineering"
|
|
error={errors.name?.message}
|
|
{...register("name")}
|
|
/>
|
|
<FormField
|
|
label="Department Code"
|
|
required
|
|
placeholder="e.g. ENG"
|
|
error={errors.code?.message}
|
|
{...register("code")}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
label="Description"
|
|
placeholder="Enter department description"
|
|
error={errors.description?.message}
|
|
{...register("description")}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<PaginatedSelect
|
|
label="Parent Department"
|
|
placeholder="Select parent (optional)"
|
|
value={parentIdValue || ""}
|
|
onValueChange={(value) => setValue("parent_id", value || null)}
|
|
onLoadOptions={loadDepartments}
|
|
error={errors.parent_id?.message}
|
|
/>
|
|
<FormField
|
|
label="Sort Order"
|
|
type="number"
|
|
placeholder="0"
|
|
error={errors.sort_order?.message}
|
|
{...register("sort_order", { valueAsNumber: true })}
|
|
/>
|
|
</div>
|
|
|
|
<FormSelect
|
|
label="Status"
|
|
required
|
|
options={statusOptions}
|
|
value={String(statusValue)}
|
|
onValueChange={(value) => setValue("is_active", value === "true")}
|
|
error={errors.is_active?.message}
|
|
/>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
interface EditDepartmentModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (id: string, data: UpdateDepartmentRequest) => Promise<void>;
|
|
department: Department | null;
|
|
isLoading?: boolean;
|
|
tenantId?: string | null;
|
|
}
|
|
|
|
export const EditDepartmentModal = ({
|
|
isOpen,
|
|
onClose,
|
|
onSubmit,
|
|
department,
|
|
isLoading = false,
|
|
tenantId,
|
|
}: EditDepartmentModalProps): ReactElement | null => {
|
|
const [initialParentOption, setInitialParentOption] = useState<{
|
|
value: string;
|
|
label: string;
|
|
} | null>(null);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
clearErrors,
|
|
formState: { errors },
|
|
} = useForm<DepartmentFormData>({
|
|
resolver: zodResolver(departmentSchema),
|
|
});
|
|
|
|
const statusValue = watch("is_active");
|
|
const parentIdValue = watch("parent_id");
|
|
|
|
useEffect(() => {
|
|
if (isOpen && department) {
|
|
reset({
|
|
name: department.name,
|
|
code: department.code,
|
|
description: department.description || "",
|
|
is_active: department.is_active,
|
|
parent_id: department.parent_id,
|
|
sort_order: department.sort_order || 0,
|
|
});
|
|
|
|
if (department.parent_id && department.parent_name) {
|
|
setInitialParentOption({
|
|
value: department.parent_id,
|
|
label: department.parent_name,
|
|
});
|
|
} else {
|
|
setInitialParentOption(null);
|
|
}
|
|
} else if (!isOpen) {
|
|
reset();
|
|
clearErrors();
|
|
setInitialParentOption(null);
|
|
}
|
|
}, [isOpen, department, reset, clearErrors]);
|
|
|
|
const loadDepartments = async () => {
|
|
const response = await departmentService.list(tenantId, {
|
|
active_only: true,
|
|
});
|
|
// Filter out current department to prevent self-referencing
|
|
let options = response.data
|
|
.filter((d) => d.id !== department?.id)
|
|
.map((dept) => ({
|
|
value: dept.id,
|
|
label: dept.name,
|
|
}));
|
|
|
|
// Ensure initial parent is in options if not already there
|
|
if (initialParentOption) {
|
|
if (!options.find((o) => o.value === initialParentOption.value)) {
|
|
options = [initialParentOption, ...options];
|
|
}
|
|
}
|
|
|
|
return {
|
|
options,
|
|
pagination: {
|
|
page: 1,
|
|
limit: options.length,
|
|
total: options.length,
|
|
totalPages: 1,
|
|
hasMore: false,
|
|
},
|
|
};
|
|
};
|
|
|
|
const handleFormSubmit: SubmitHandler<DepartmentFormData> = async (data) => {
|
|
if (department) {
|
|
await onSubmit(department.id, data as UpdateDepartmentRequest);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Edit Department"
|
|
description="Update department details"
|
|
maxWidth="md"
|
|
footer={
|
|
<>
|
|
<SecondaryButton onClick={onClose} disabled={isLoading}>
|
|
Cancel
|
|
</SecondaryButton>
|
|
<PrimaryButton
|
|
onClick={handleSubmit(handleFormSubmit)}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Updating..." : "Update Department"}
|
|
</PrimaryButton>
|
|
</>
|
|
}
|
|
>
|
|
<form
|
|
onSubmit={handleSubmit(handleFormSubmit)}
|
|
className="p-5 flex flex-col gap-4"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
label="Department Name"
|
|
required
|
|
placeholder="e.g. Engineering"
|
|
error={errors.name?.message}
|
|
{...register("name")}
|
|
/>
|
|
<FormField
|
|
label="Department Code"
|
|
required
|
|
placeholder="e.g. ENG"
|
|
error={errors.code?.message}
|
|
{...register("code")}
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
label="Description"
|
|
placeholder="Enter department description"
|
|
error={errors.description?.message}
|
|
{...register("description")}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<PaginatedSelect
|
|
label="Parent Department"
|
|
placeholder="Select parent (optional)"
|
|
value={parentIdValue || ""}
|
|
onValueChange={(value) => setValue("parent_id", value || null)}
|
|
onLoadOptions={loadDepartments}
|
|
error={errors.parent_id?.message}
|
|
/>
|
|
<FormField
|
|
label="Sort Order"
|
|
type="number"
|
|
placeholder="0"
|
|
error={errors.sort_order?.message}
|
|
{...register("sort_order", { valueAsNumber: true })}
|
|
/>
|
|
</div>
|
|
|
|
<FormSelect
|
|
label="Status"
|
|
required
|
|
options={statusOptions}
|
|
value={String(statusValue)}
|
|
onValueChange={(value) => setValue("is_active", value === "true")}
|
|
error={errors.is_active?.message}
|
|
/>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
interface ViewDepartmentModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
department: Department | null;
|
|
}
|
|
|
|
export const ViewDepartmentModal = ({
|
|
isOpen,
|
|
onClose,
|
|
department,
|
|
}: ViewDepartmentModalProps): ReactElement | null => {
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Department Details"
|
|
description="View full information about this department"
|
|
maxWidth="md"
|
|
footer={<SecondaryButton onClick={onClose}>Close</SecondaryButton>}
|
|
>
|
|
{department && (
|
|
<div className="p-5 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="flex flex-col gap-4">
|
|
<h3 className="text-sm font-semibold text-[#0f1724]">
|
|
Basic Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Name
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">{department.name}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Code
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">{department.code}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Status
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1 capitalize">
|
|
{department.is_active ? "Active" : "Inactive"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<h3 className="text-sm font-semibold text-[#0f1724]">
|
|
Hierarchy & Stats
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Parent Department
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">
|
|
{department.parent_name || "-"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Level
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">
|
|
{department.level}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Sort Order
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">
|
|
{department.sort_order}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Sub-departments
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">
|
|
{department.child_count || 0}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Users
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1">
|
|
{department.user_count || 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-span-1 md:col-span-2">
|
|
<p className="text-xs font-medium text-[#9aa6b2] uppercase">
|
|
Description
|
|
</p>
|
|
<p className="text-sm text-[#0f1724] mt-1 bg-[#f5f7fa] p-3 rounded-md border border-[rgba(0,0,0,0.05)]">
|
|
{department.description || "No description provided."}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="col-span-1 md:col-span-2 text-xs text-[#9aa6b2]">
|
|
<span>
|
|
Created: {new Date(department.created_at).toLocaleString()}
|
|
</span>
|
|
<span className="mx-2">|</span>
|
|
<span>
|
|
Updated: {new Date(department.updated_at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|