refactor: refactor superadmin modules

src/components/ui/tree.tsx

@@ -38,7 +38,7 @@ function TreeCheckbox({
       type="checkbox"
       checked={checked}
       onChange={(event) => onChange(event.target.checked)}
-      className="size-4 rounded border-border accent-primary"
+      className="size-4 shrink-0 rounded border-border accent-primary"
     />
   );
 }
@@ -48,11 +48,13 @@ function CheckboxTreeNode<TItem extends TreeItem>({
   selectedIds,
   onToggle,
   renderMeta,
+  showDescription = true,
 }: {
   item: TItem;
   selectedIds: Set<number>;
   onToggle: (item: TItem, checked: boolean) => void;
   renderMeta?: (item: TItem) => ReactNode;
+  showDescription?: boolean;
 }) {
   const [isExpanded, setIsExpanded] = useState(true);
   const itemIds = collectTreeItemIds(item);
@@ -63,35 +65,35 @@ function CheckboxTreeNode<TItem extends TreeItem>({
 
   return (
     <li className="space-y-2">
-      <div className="flex items-start gap-2 rounded-md border border-border/60 bg-background px-3 py-2">
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={() => setIsExpanded((current) => !current)}
-            aria-label={isExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
-            className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted hover:text-foreground"
-          >
-            <ChevronDown
-              className={`size-4 transition-transform ${isExpanded ? '' : '-rotate-90'}`}
-            />
-          </button>
-        ) : (
-          <span className="size-5 shrink-0" aria-hidden="true" />
-        )}
-        <TreeCheckbox
-          checked={checked}
-          indeterminate={indeterminate}
-          onChange={(isChecked) => onToggle(item, isChecked)}
-        />
-        <div className="min-w-0 flex-1 leading-none">
-          <div className="flex min-h-5 flex-wrap items-center gap-2">
-            <span className="text-sm font-medium leading-5">{item.label}</span>
+      <div className="rounded-md border border-border/60 bg-background px-3 py-2">
+        <div className="flex items-center gap-2">
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={() => setIsExpanded((current) => !current)}
+              aria-label={isExpanded ? `Collapse ${item.label}` : `Expand ${item.label}`}
+              className="inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted hover:text-foreground"
+            >
+              <ChevronDown
+                className={`size-4 transition-transform ${isExpanded ? '' : '-rotate-90'}`}
+              />
+            </button>
+          ) : (
+            <span className="size-5 shrink-0" aria-hidden="true" />
+          )}
+          <TreeCheckbox
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={(isChecked) => onToggle(item, isChecked)}
+          />
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <span className="truncate text-sm font-medium leading-none">{item.label}</span>
             {renderMeta?.(item)}
           </div>
-          {item.description ? (
-            <p className="mt-1 text-xs text-muted-foreground">{item.description}</p>
-          ) : null}
         </div>
+        {showDescription && item.description ? (
+          <p className="mt-1.5 pl-11 text-xs text-muted-foreground">{item.description}</p>
+        ) : null}
       </div>
       {hasChildren && isExpanded ? (
         <ul className="ml-5 space-y-2 border-l border-border/70 pl-3">
@@ -102,6 +104,7 @@ function CheckboxTreeNode<TItem extends TreeItem>({
               selectedIds={selectedIds}
               onToggle={onToggle}
               renderMeta={renderMeta}
+              showDescription={showDescription}
             />
           ))}
         </ul>
@@ -116,12 +119,14 @@ export function CheckboxTree<TItem extends TreeItem>({
   onSelectedIdsChange,
   renderMeta,
   emptyMessage = 'No items available.',
+  showDescription = true,
 }: {
   items: TItem[];
   selectedIds: number[];
   onSelectedIdsChange: (ids: number[]) => void;
   renderMeta?: (item: TItem) => ReactNode;
   emptyMessage?: string;
+  showDescription?: boolean;
 }) {
   const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
 
@@ -154,6 +159,7 @@ export function CheckboxTree<TItem extends TreeItem>({
           selectedIds={selectedSet}
           onToggle={handleToggle}
           renderMeta={renderMeta}
+          showDescription={showDescription}
         />
       ))}
     </ul>