From 2b601d9740f97112ba9f92944f325c77fd0b349d Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Tue, 7 Oct 2025 13:30:52 +0700
Subject: [PATCH] fix: update user level hierarchy

---
 .../tenant/component/table-user-level.tsx     | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/[locale]/(admin)/admin/settings/tenant/component/table-user-level.tsx b/app/[locale]/(admin)/admin/settings/tenant/component/table-user-level.tsx
index da9d1a3..c216152 100644
--- a/app/[locale]/(admin)/admin/settings/tenant/component/table-user-level.tsx
+++ b/app/[locale]/(admin)/admin/settings/tenant/component/table-user-level.tsx
@@ -16,6 +16,12 @@ import {
   UsersIcon,
   WorkflowIcon,
 } from "@/components/icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@/components/icons";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { ApprovalWorkflowForm } from "@/components/form/ApprovalWorkflowForm";
 import { UserLevelsForm } from "@/components/form/UserLevelsForm";
 import { useWorkflowModal } from "@/components/modals/WorkflowModalProvider";
@@ -65,6 +71,7 @@ function TenantSettingsContentTable() {
   const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false);
   const [editingUserLevel, setEditingUserLevel] =
     React.useState<UserLevel | null>(null);
+  const [isHierarchyExpanded, setIsHierarchyExpanded] = useState(false);
 
   const handleEditUserLevel = (userLevel: UserLevel) => {
     setEditingUserLevel(userLevel);
@@ -703,12 +710,26 @@ function TenantSettingsContentTable() {
           {/* User Levels Hierarchy */}
           {userLevels.length > 0 && (
             <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
+              <Collapsible
+                open={isHierarchyExpanded}
+                onOpenChange={setIsHierarchyExpanded}
+              >
+                <CollapsibleTrigger asChild>
+                  <CardHeader className="cursor-pointer hover:bg-gray-50 transition-colors">
+                    <CardTitle className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
                   <UsersIcon className="h-5 w-5" />
                   User Levels Hierarchy
+                      </div>
+                      {isHierarchyExpanded ? (
+                        <ChevronUpIcon className="h-4 w-4" />
+                      ) : (
+                        <ChevronDownIcon className="h-4 w-4" />
+                      )}
                 </CardTitle>
               </CardHeader>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
               <CardContent>
                 <div className="space-y-3">
                   {userLevels
@@ -781,6 +802,8 @@ function TenantSettingsContentTable() {
                     ))}
                 </div>
               </CardContent>
+                </CollapsibleContent>
+              </Collapsible>
             </Card>
           )}