fix: update user level hierarchy

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>
           )}