refactor: decouple DepartmentTable logic into separate list and tree view components
This commit is contained in:
parent
f87f552d52
commit
0510f15175
@ -28,7 +28,7 @@ export const DepartmentListView = ({
|
||||
onLimitChange,
|
||||
}: DepartmentListViewProps): ReactElement => {
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white rounded-2xl border-2 border-slate-50 shadow-sm overflow-hidden">
|
||||
<DataTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
@ -48,6 +48,6 @@ export const DepartmentListView = ({
|
||||
onLimitChange={onLimitChange}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Folder,
|
||||
Building2,
|
||||
Plus,
|
||||
Edit2,
|
||||
Trash2,
|
||||
@ -26,21 +27,34 @@ const TreeItem = ({
|
||||
onDelete,
|
||||
}: TreeItemProps) => {
|
||||
const { primaryColor } = useAppTheme();
|
||||
const [isExpanded, setIsExpanded] = useState(level === 0);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const hasChildren = item.children && item.children.length > 0;
|
||||
const isPrimaryActive = level === 0 && hasChildren && isExpanded;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div
|
||||
className={`group flex items-center py-2.5 px-4 rounded-lg transition-all duration-200 ${
|
||||
className={`group flex h-[44px] items-center gap-2 self-stretch transition-all duration-200 border ${
|
||||
level === 0
|
||||
? "text-white shadow-md"
|
||||
: "text-[#0f1724] hover:bg-[#f8fafc] border border-transparent hover:border-[#e2e8f0]"
|
||||
? isPrimaryActive
|
||||
? "border-transparent text-white rounded-t-md"
|
||||
: "border-[#E5E7EB] text-[#111827] rounded-md"
|
||||
: "border-transparent hover:border-[#E2E8F0] hover:bg-[#F8FAFC] text-[#111827] rounded-md"
|
||||
} ${
|
||||
level === 0 && isExpanded && hasChildren
|
||||
? "border-b-transparent"
|
||||
: ""
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: level === 0 ? primaryColor : undefined,
|
||||
marginLeft: level > 0 ? `${level * 28}px` : "0",
|
||||
marginBottom: "4px",
|
||||
backgroundColor:
|
||||
level === 0
|
||||
? isPrimaryActive
|
||||
? primaryColor
|
||||
: "#FFFFFF"
|
||||
: "transparent",
|
||||
paddingLeft: level > 0 ? `${level * 28 + 12}px` : "12px",
|
||||
paddingRight: "12px",
|
||||
marginBottom: level === 0 && isExpanded && hasChildren ? "0" : "4px",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
@ -52,7 +66,7 @@ const TreeItem = ({
|
||||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
className={`p-0.5 rounded transition-colors ${
|
||||
level === 0
|
||||
isPrimaryActive
|
||||
? "hover:bg-white/10 text-white/70"
|
||||
: "hover:bg-gray-100 text-[#94a3b8]"
|
||||
}`}
|
||||
@ -67,54 +81,76 @@ const TreeItem = ({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-1.5 rounded-md ${level === 0 ? "bg-white/10" : "bg-transparent"}`}
|
||||
className={`p-1.5 rounded-md ${isPrimaryActive ? "bg-white/10" : "bg-transparent"}`}
|
||||
>
|
||||
<Folder
|
||||
className={`w-4 h-4 shrink-0 ${level === 0 ? "text-white" : "text-[#64748b]"}`}
|
||||
/>
|
||||
{level === 0 ? (
|
||||
<Building2
|
||||
className={`w-4 h-4 shrink-0 ${isPrimaryActive ? "text-white" : "text-[#64748b]"}`}
|
||||
/>
|
||||
) : (
|
||||
<Folder
|
||||
className={`w-4 h-4 shrink-0 ${isPrimaryActive ? "text-white" : "text-[#64748b]"}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span
|
||||
className={`text-sm font-medium truncate ${level === 0 ? "text-white" : "text-[#1e293b]"}`}
|
||||
className={`text-[14px] font-medium truncate ${
|
||||
isPrimaryActive ? "text-white" : "text-[#111827]"
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-bold font-mono shrink-0 uppercase ${
|
||||
level === 0
|
||||
? "bg-white/20 text-white"
|
||||
: "bg-[#f1f5f9] text-[#475569]"
|
||||
className={`px-1.5 py-[2px] rounded text-[10px] font-semibold ${
|
||||
isPrimaryActive
|
||||
? "bg-white/15 text-white"
|
||||
: "bg-[#F3F4F6] text-[#374151]"
|
||||
}`}
|
||||
>
|
||||
{item.code}
|
||||
</span>
|
||||
|
||||
{level === 0 ? (
|
||||
<span className="text-xs text-white/60 font-normal ml-2">
|
||||
<span
|
||||
className={`text-xs ${
|
||||
isPrimaryActive ? "text-white/70" : "text-[#9CA3AF]"
|
||||
}`}
|
||||
>
|
||||
{item.user_count || 0} total
|
||||
</span>
|
||||
) : hasChildren ? (
|
||||
<span className="text-xs text-[#94a3b8] font-normal ml-2">
|
||||
<span
|
||||
className={`text-xs ${
|
||||
isPrimaryActive ? "text-white/70" : "text-[#9CA3AF]"
|
||||
}`}
|
||||
>
|
||||
{item.child_count || 0} sub-departments
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 ${level === 0 ? "text-white" : "text-[#64748b]"}`}
|
||||
>
|
||||
<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => onAddSub(item)}
|
||||
className={`p-1.5 rounded transition-colors ${level === 0 ? "hover:bg-white/10" : "hover:bg-gray-100"}`}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
isPrimaryActive
|
||||
? "hover:bg-white/10 text-white"
|
||||
: "hover:bg-gray-100 text-[#64748B]"
|
||||
}`}
|
||||
title="Add Sub-department"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onEdit(item)}
|
||||
className={`p-1.5 rounded transition-colors ${level === 0 ? "hover:bg-white/10" : "hover:bg-gray-100"}`}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
isPrimaryActive
|
||||
? "hover:bg-white/10 text-white"
|
||||
: "hover:bg-gray-100 text-[#64748B]"
|
||||
}`}
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
@ -122,7 +158,11 @@ const TreeItem = ({
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(item)}
|
||||
className={`p-1.5 rounded transition-colors ${level === 0 ? "hover:bg-white/10 text-white/70" : "hover:bg-red-50 hover:text-red-600"}`}
|
||||
className={`p-1.5 rounded transition-colors ${
|
||||
isPrimaryActive
|
||||
? "hover:bg-white/10 text-white/70"
|
||||
: "hover:bg-red-50 hover:text-red-600"
|
||||
}`}
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
@ -132,7 +172,16 @@ const TreeItem = ({
|
||||
</div>
|
||||
|
||||
{isExpanded && hasChildren && (
|
||||
<div className="flex flex-col">
|
||||
<div
|
||||
className={`flex flex-col self-stretch p-3 gap-1 ${
|
||||
level === 0
|
||||
? "rounded-b-md border border-[#D1D5DB] border-t-0 bg-white"
|
||||
: ""
|
||||
}`}
|
||||
style={{
|
||||
marginTop: "0px",
|
||||
}}
|
||||
>
|
||||
{item.children?.map((child) => (
|
||||
<TreeItem
|
||||
key={child.id}
|
||||
@ -170,7 +219,7 @@ export const DepartmentTreeView = ({
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div
|
||||
<div
|
||||
className="animate-spin rounded-full h-8 w-8 border-b-2"
|
||||
style={{ borderBottomColor: primaryColor }}
|
||||
></div>
|
||||
@ -195,7 +244,7 @@ export const DepartmentTreeView = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 flex flex-col gap-2 min-h-[400px]">
|
||||
<div className="flex flex-col gap-4 p-4 border border-[#D1D5DB] bg-white rounded-lg self-stretch">
|
||||
{data.map((item) => (
|
||||
<TreeItem
|
||||
key={item.id}
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import { useState, useEffect, useImperativeHandle, forwardRef, type ReactElement } from "react";
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
forwardRef,
|
||||
type ReactElement,
|
||||
} from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import {
|
||||
// PrimaryButton,
|
||||
@ -11,7 +17,6 @@ import {
|
||||
SearchBox,
|
||||
ActiveOnlyToggle,
|
||||
type Column,
|
||||
PrimaryButton,
|
||||
} from "@/components/shared";
|
||||
import {
|
||||
NewDepartmentModal,
|
||||
@ -32,7 +37,6 @@ import type { RootState } from "@/store/store";
|
||||
import { useAppTheme } from "@/hooks/useAppTheme";
|
||||
import { usePermissions } from "@/hooks/usePermissions";
|
||||
import CodeBadge from "../shared/CodeBadge";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
interface DepartmentsTableProps {
|
||||
tenantId?: string | null; // If provided, use this tenantId (Super Admin mode)
|
||||
@ -44,377 +48,383 @@ export interface DepartmentsTableRef {
|
||||
openNewModal: () => void;
|
||||
}
|
||||
|
||||
export const DepartmentsTable = forwardRef<DepartmentsTableRef, DepartmentsTableProps>(({
|
||||
tenantId: propsTenantId,
|
||||
compact = false,
|
||||
showHeader = true,
|
||||
}: DepartmentsTableProps, ref): ReactElement => {
|
||||
const { primaryColor } = useAppTheme();
|
||||
const { canCreate, canUpdate } = usePermissions();
|
||||
const reduxTenantId = useSelector((state: RootState) => state.auth.tenantId);
|
||||
const effectiveTenantId = propsTenantId || reduxTenantId;
|
||||
export const DepartmentsTable = forwardRef<
|
||||
DepartmentsTableRef,
|
||||
DepartmentsTableProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
tenantId: propsTenantId,
|
||||
compact = false,
|
||||
showHeader = true,
|
||||
}: DepartmentsTableProps,
|
||||
ref,
|
||||
): ReactElement => {
|
||||
const { primaryColor } = useAppTheme();
|
||||
const { canUpdate } = usePermissions();
|
||||
const reduxTenantId = useSelector(
|
||||
(state: RootState) => state.auth.tenantId,
|
||||
);
|
||||
const effectiveTenantId = propsTenantId || reduxTenantId;
|
||||
|
||||
const [departments, setDepartments] = useState<Department[]>([]);
|
||||
const [treeData, setTreeData] = useState<Department[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<'list' | 'tree'>('list');
|
||||
const [departments, setDepartments] = useState<Department[]>([]);
|
||||
const [treeData, setTreeData] = useState<Department[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [viewMode, setViewMode] = useState<"list" | "tree">("list");
|
||||
|
||||
// Pagination state (Client-side since backend doesn't support it yet)
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [limit, setLimit] = useState<number>(compact ? 10 : 5);
|
||||
// Pagination state (Client-side since backend doesn't support it yet)
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [limit, setLimit] = useState<number>(compact ? 10 : 5);
|
||||
|
||||
// Filter state
|
||||
const [activeOnly, setActiveOnly] = useState<boolean>(false);
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>("");
|
||||
// Filter state
|
||||
const [activeOnly, setActiveOnly] = useState<boolean>(false);
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] =
|
||||
useState<string>("");
|
||||
|
||||
// Modal states
|
||||
const [isNewModalOpen, setIsNewModalOpen] = useState(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
||||
// const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedDepartment, setSelectedDepartment] =
|
||||
useState<Department | null>(null);
|
||||
const [isActionLoading, setIsActionLoading] = useState(false);
|
||||
// Modal states
|
||||
const [isNewModalOpen, setIsNewModalOpen] = useState(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [isViewModalOpen, setIsViewModalOpen] = useState(false);
|
||||
// const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedDepartment, setSelectedDepartment] =
|
||||
useState<Department | null>(null);
|
||||
const [isActionLoading, setIsActionLoading] = useState(false);
|
||||
|
||||
// Expose methods to parent
|
||||
useImperativeHandle(ref, () => ({
|
||||
openNewModal: () => setIsNewModalOpen(true),
|
||||
}));
|
||||
// Expose methods to parent
|
||||
useImperativeHandle(ref, () => ({
|
||||
openNewModal: () => setIsNewModalOpen(true),
|
||||
}));
|
||||
|
||||
const fetchDepartments = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
if (viewMode === 'list') {
|
||||
const response = await departmentService.list(effectiveTenantId, {
|
||||
active_only: activeOnly,
|
||||
search: debouncedSearchQuery,
|
||||
});
|
||||
if (response.success) {
|
||||
setDepartments(response.data);
|
||||
const fetchDepartments = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
if (viewMode === "list") {
|
||||
const response = await departmentService.list(effectiveTenantId, {
|
||||
active_only: activeOnly,
|
||||
search: debouncedSearchQuery,
|
||||
});
|
||||
if (response.success) {
|
||||
setDepartments(response.data);
|
||||
} else {
|
||||
setError("Failed to load departments");
|
||||
}
|
||||
} else {
|
||||
setError("Failed to load departments");
|
||||
const response = await departmentService.getTree(
|
||||
effectiveTenantId,
|
||||
activeOnly,
|
||||
);
|
||||
if (response.success) {
|
||||
setTreeData(response.data);
|
||||
} else {
|
||||
setError("Failed to load department tree");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const response = await departmentService.getTree(effectiveTenantId, activeOnly);
|
||||
} catch (err: any) {
|
||||
setError(
|
||||
err?.response?.data?.error?.message || "Failed to load departments",
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Debouncing search query
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDepartments();
|
||||
}, [effectiveTenantId, activeOnly, debouncedSearchQuery, viewMode]);
|
||||
|
||||
const handleCreate = async (data: CreateDepartmentRequest) => {
|
||||
try {
|
||||
setIsActionLoading(true);
|
||||
const response = await departmentService.create(
|
||||
data,
|
||||
effectiveTenantId,
|
||||
);
|
||||
if (response.success) {
|
||||
setTreeData(response.data);
|
||||
} else {
|
||||
setError("Failed to load department tree");
|
||||
showToast.success("Department created successfully");
|
||||
setIsNewModalOpen(false);
|
||||
fetchDepartments();
|
||||
}
|
||||
} catch (err: any) {
|
||||
showToast.error(
|
||||
err?.response?.data?.error?.message || "Failed to create department",
|
||||
);
|
||||
} finally {
|
||||
setIsActionLoading(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(
|
||||
err?.response?.data?.error?.message || "Failed to load departments",
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Debouncing search query
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDepartments();
|
||||
}, [effectiveTenantId, activeOnly, debouncedSearchQuery, viewMode]);
|
||||
|
||||
const handleCreate = async (data: CreateDepartmentRequest) => {
|
||||
try {
|
||||
setIsActionLoading(true);
|
||||
const response = await departmentService.create(data, effectiveTenantId);
|
||||
if (response.success) {
|
||||
showToast.success("Department created successfully");
|
||||
setIsNewModalOpen(false);
|
||||
fetchDepartments();
|
||||
const handleUpdate = async (id: string, data: UpdateDepartmentRequest) => {
|
||||
try {
|
||||
setIsActionLoading(true);
|
||||
const response = await departmentService.update(
|
||||
id,
|
||||
data,
|
||||
effectiveTenantId,
|
||||
);
|
||||
if (response.success) {
|
||||
showToast.success("Department updated successfully");
|
||||
setIsEditModalOpen(false);
|
||||
fetchDepartments();
|
||||
}
|
||||
} catch (err: any) {
|
||||
showToast.error(
|
||||
err?.response?.data?.error?.message || "Failed to update department",
|
||||
);
|
||||
} finally {
|
||||
setIsActionLoading(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
showToast.error(
|
||||
err?.response?.data?.error?.message || "Failed to create department",
|
||||
);
|
||||
} finally {
|
||||
setIsActionLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const handleUpdate = async (id: string, data: UpdateDepartmentRequest) => {
|
||||
try {
|
||||
setIsActionLoading(true);
|
||||
const response = await departmentService.update(
|
||||
id,
|
||||
data,
|
||||
effectiveTenantId,
|
||||
);
|
||||
if (response.success) {
|
||||
showToast.success("Department updated successfully");
|
||||
setIsEditModalOpen(false);
|
||||
fetchDepartments();
|
||||
}
|
||||
} catch (err: any) {
|
||||
showToast.error(
|
||||
err?.response?.data?.error?.message || "Failed to update department",
|
||||
);
|
||||
} finally {
|
||||
setIsActionLoading(false);
|
||||
}
|
||||
};
|
||||
// const handleDelete = async () => {
|
||||
// if (!selectedDepartment) return;
|
||||
// try {
|
||||
// setIsActionLoading(true);
|
||||
// const response = await departmentService.delete(
|
||||
// selectedDepartment.id,
|
||||
// effectiveTenantId,
|
||||
// );
|
||||
// if (response.success) {
|
||||
// showToast.success("Department deleted successfully");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// fetchDepartments();
|
||||
// }
|
||||
// } catch (err: any) {
|
||||
// showToast.error(
|
||||
// err?.response?.data?.error?.message || "Failed to delete department",
|
||||
// );
|
||||
// } finally {
|
||||
// setIsActionLoading(false);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const handleDelete = async () => {
|
||||
// if (!selectedDepartment) return;
|
||||
// try {
|
||||
// setIsActionLoading(true);
|
||||
// const response = await departmentService.delete(
|
||||
// selectedDepartment.id,
|
||||
// effectiveTenantId,
|
||||
// );
|
||||
// if (response.success) {
|
||||
// showToast.success("Department deleted successfully");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// fetchDepartments();
|
||||
// }
|
||||
// } catch (err: any) {
|
||||
// showToast.error(
|
||||
// err?.response?.data?.error?.message || "Failed to delete department",
|
||||
// );
|
||||
// } finally {
|
||||
// setIsActionLoading(false);
|
||||
// }
|
||||
// };
|
||||
// Client-side pagination logic
|
||||
const totalItems = departments.length;
|
||||
const totalPages = Math.ceil(totalItems / limit);
|
||||
const paginatedData = departments.slice(
|
||||
(currentPage - 1) * limit,
|
||||
currentPage * limit,
|
||||
);
|
||||
|
||||
// Client-side pagination logic
|
||||
const totalItems = departments.length;
|
||||
const totalPages = Math.ceil(totalItems / limit);
|
||||
const paginatedData = departments.slice(
|
||||
(currentPage - 1) * limit,
|
||||
currentPage * limit,
|
||||
);
|
||||
|
||||
const columns: Column<Department>[] = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Department Name",
|
||||
render: (dept) => (
|
||||
<span className="text-sm font-medium text-[#0f1724]">{dept.name}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
label: "Code",
|
||||
render: (dept) => (
|
||||
<CodeBadge label={dept.code} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "parent_name",
|
||||
label: "Parent",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">
|
||||
{dept.parent_name || "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "level",
|
||||
label: "Level",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.level}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "sort_order",
|
||||
label: "Order",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.sort_order}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "child_count",
|
||||
label: "Sub-depts",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.child_count || 0}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "user_count",
|
||||
label: "Users",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.user_count || 0}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
render: (dept) => (
|
||||
<StatusBadge variant={dept.is_active ? "success" : "failure"}>
|
||||
{dept.is_active ? "Active" : "Inactive"}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: "Actions",
|
||||
align: "right",
|
||||
render: (dept) => (
|
||||
<div className="flex justify-end">
|
||||
<ActionDropdown
|
||||
onView={() => {
|
||||
setSelectedDepartment(dept);
|
||||
setIsViewModalOpen(true);
|
||||
}}
|
||||
onEdit={
|
||||
canUpdate("departments")
|
||||
? () => {
|
||||
setSelectedDepartment(dept);
|
||||
setIsEditModalOpen(true);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col gap-4 ${!compact ? "bg-white border border-[rgba(0,0,0,0.08)] rounded-lg shadow-sm" : ""}`}
|
||||
>
|
||||
{showHeader && (
|
||||
<div className="flex flex-col border-b border-[rgba(0,0,0,0.08)]">
|
||||
{/* Tabs */}
|
||||
<div className="px-4 pt-3 flex items-center justify-between border-b border-transparent">
|
||||
<div className="flex items-center gap-6">
|
||||
<button
|
||||
className="pb-3 text-sm font-medium transition-all relative"
|
||||
style={{ color: viewMode === 'list' ? primaryColor : '#64748b' }}
|
||||
onClick={() => setViewMode('list')}
|
||||
>
|
||||
List View
|
||||
{viewMode === 'list' && (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="pb-3 text-sm font-medium transition-all relative"
|
||||
style={{ color: viewMode === 'tree' ? primaryColor : '#64748b' }}
|
||||
onClick={() => setViewMode('tree')}
|
||||
>
|
||||
Tree View
|
||||
{viewMode === 'tree' && (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Only Toggle */}
|
||||
<ActiveOnlyToggle
|
||||
activeOnly={activeOnly}
|
||||
onChange={setActiveOnly}
|
||||
className="pb-3"
|
||||
const columns: Column<Department>[] = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Department Name",
|
||||
render: (dept) => (
|
||||
<span className="text-sm font-medium text-[#0f1724]">
|
||||
{dept.name}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
label: "Code",
|
||||
render: (dept) => <CodeBadge label={dept.code} />,
|
||||
},
|
||||
{
|
||||
key: "parent_name",
|
||||
label: "Parent",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">
|
||||
{dept.parent_name || "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "level",
|
||||
label: "Level",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.level}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "sort_order",
|
||||
label: "Order",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.sort_order}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "child_count",
|
||||
label: "Sub-depts",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">
|
||||
{dept.child_count || 0}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "user_count",
|
||||
label: "Users",
|
||||
render: (dept) => (
|
||||
<span className="text-sm text-[#6b7280]">{dept.user_count || 0}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
render: (dept) => (
|
||||
<StatusBadge variant={dept.is_active ? "success" : "failure"}>
|
||||
{dept.is_active ? "Active" : "Inactive"}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: "Actions",
|
||||
align: "right",
|
||||
render: (dept) => (
|
||||
<div className="flex justify-end">
|
||||
<ActionDropdown
|
||||
onView={() => {
|
||||
setSelectedDepartment(dept);
|
||||
setIsViewModalOpen(true);
|
||||
}}
|
||||
onEdit={
|
||||
canUpdate("departments")
|
||||
? () => {
|
||||
setSelectedDepartment(dept);
|
||||
setIsEditModalOpen(true);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
<div className="p-4 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3 w-full sm:w-auto">
|
||||
{viewMode === 'list' && (
|
||||
<SearchBox
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
)}
|
||||
return (
|
||||
<div className={`flex flex-col gap-4 `}>
|
||||
{showHeader && (
|
||||
<div className="flex flex-col border-b border-[rgba(0,0,0,0.08)]">
|
||||
{/* Tabs */}
|
||||
<div className="px-4 pt-3 flex items-center justify-between border-b border-transparent">
|
||||
<div className="flex items-center gap-6">
|
||||
<button
|
||||
className="pb-3 text-sm font-medium transition-all relative"
|
||||
style={{
|
||||
color: viewMode === "list" ? primaryColor : "#64748b",
|
||||
}}
|
||||
onClick={() => setViewMode("list")}
|
||||
>
|
||||
List View
|
||||
{viewMode === "list" && (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="pb-3 text-sm font-medium transition-all relative"
|
||||
style={{
|
||||
color: viewMode === "tree" ? primaryColor : "#64748b",
|
||||
}}
|
||||
onClick={() => setViewMode("tree")}
|
||||
>
|
||||
Tree View
|
||||
{viewMode === "tree" && (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
{viewMode === "list" && (
|
||||
<SearchBox
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
)}
|
||||
{/* Active Only Toggle */}
|
||||
<ActiveOnlyToggle
|
||||
activeOnly={activeOnly}
|
||||
onChange={setActiveOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canCreate("departments") && (
|
||||
<PrimaryButton
|
||||
size="default"
|
||||
className="flex items-center gap-2 w-full sm:w-auto"
|
||||
onClick={() => setIsNewModalOpen(true)}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>New Department</span>
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{viewMode === 'list' ? (
|
||||
<DepartmentListView
|
||||
data={paginatedData}
|
||||
columns={columns}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems}
|
||||
limit={limit}
|
||||
onPageChange={setCurrentPage}
|
||||
onLimitChange={(newLimit) => {
|
||||
setLimit(newLimit);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
{viewMode === "list" ? (
|
||||
<DepartmentListView
|
||||
data={paginatedData}
|
||||
columns={columns}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={totalItems}
|
||||
limit={limit}
|
||||
onPageChange={setCurrentPage}
|
||||
onLimitChange={(newLimit) => {
|
||||
setLimit(newLimit);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<DepartmentTreeView
|
||||
data={treeData}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
onAddSub={(item) => {
|
||||
setSelectedDepartment(item);
|
||||
setIsNewModalOpen(true);
|
||||
}}
|
||||
onEdit={(item) => {
|
||||
setSelectedDepartment(item);
|
||||
setIsEditModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NewDepartmentModal
|
||||
isOpen={isNewModalOpen}
|
||||
onClose={() => setIsNewModalOpen(false)}
|
||||
onSubmit={handleCreate}
|
||||
isLoading={isActionLoading}
|
||||
tenantId={effectiveTenantId}
|
||||
/>
|
||||
) : (
|
||||
<DepartmentTreeView
|
||||
data={treeData}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
onAddSub={(item) => {
|
||||
setSelectedDepartment(item);
|
||||
setIsNewModalOpen(true);
|
||||
}}
|
||||
onEdit={(item) => {
|
||||
setSelectedDepartment(item);
|
||||
setIsEditModalOpen(true);
|
||||
|
||||
<EditDepartmentModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => {
|
||||
setIsEditModalOpen(false);
|
||||
setSelectedDepartment(null);
|
||||
}}
|
||||
department={selectedDepartment}
|
||||
onSubmit={handleUpdate}
|
||||
isLoading={isActionLoading}
|
||||
tenantId={effectiveTenantId}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NewDepartmentModal
|
||||
isOpen={isNewModalOpen}
|
||||
onClose={() => setIsNewModalOpen(false)}
|
||||
onSubmit={handleCreate}
|
||||
isLoading={isActionLoading}
|
||||
tenantId={effectiveTenantId}
|
||||
/>
|
||||
<ViewDepartmentModal
|
||||
isOpen={isViewModalOpen}
|
||||
onClose={() => {
|
||||
setIsViewModalOpen(false);
|
||||
setSelectedDepartment(null);
|
||||
}}
|
||||
department={selectedDepartment}
|
||||
/>
|
||||
|
||||
<EditDepartmentModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => {
|
||||
setIsEditModalOpen(false);
|
||||
setSelectedDepartment(null);
|
||||
}}
|
||||
department={selectedDepartment}
|
||||
onSubmit={handleUpdate}
|
||||
isLoading={isActionLoading}
|
||||
tenantId={effectiveTenantId}
|
||||
/>
|
||||
|
||||
<ViewDepartmentModal
|
||||
isOpen={isViewModalOpen}
|
||||
onClose={() => {
|
||||
setIsViewModalOpen(false);
|
||||
setSelectedDepartment(null);
|
||||
}}
|
||||
department={selectedDepartment}
|
||||
/>
|
||||
|
||||
{/* <DeleteConfirmationModal
|
||||
{/* <DeleteConfirmationModal
|
||||
isOpen={isDeleteModalOpen}
|
||||
onClose={() => {
|
||||
setIsDeleteModalOpen(false);
|
||||
@ -426,6 +436,7 @@ export const DepartmentsTable = forwardRef<DepartmentsTableRef, DepartmentsTable
|
||||
itemName={selectedDepartment?.name || ""}
|
||||
isLoading={isActionLoading}
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,17 +1,33 @@
|
||||
import { type ReactElement } from 'react';
|
||||
import { useRef, type ReactElement } from 'react';
|
||||
import { Layout } from '@/components/layout/Layout';
|
||||
import { DepartmentsTable } from '@/components/superadmin';
|
||||
import { DepartmentsTable, type DepartmentsTableRef } from '@/components/superadmin/DepartmentsTable';
|
||||
import { PrimaryButton } from '@/components/shared';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { usePermissions } from '@/hooks/usePermissions';
|
||||
|
||||
const Departments = (): ReactElement => {
|
||||
const tableRef = useRef<DepartmentsTableRef>(null);
|
||||
const { canCreate } = usePermissions();
|
||||
|
||||
return (
|
||||
<Layout
|
||||
currentPage="Departments"
|
||||
pageHeader={{
|
||||
title: 'Department Management',
|
||||
description: 'View and manage all departments within your organization.',
|
||||
action: canCreate("departments") ? (
|
||||
<PrimaryButton
|
||||
size="default"
|
||||
className="flex items-center gap-2"
|
||||
onClick={() => tableRef.current?.openNewModal()}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>New Department</span>
|
||||
</PrimaryButton>
|
||||
) : null,
|
||||
}}
|
||||
>
|
||||
<DepartmentsTable />
|
||||
<DepartmentsTable ref={tableRef} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user