page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { Icon } from '@/contexts/IconContext';
 
interface Department {
  id: number;
  name: string;
}
 
interface DepartmentNode extends Department {
  children: number[];
  isExpanded: boolean;
}
 
export default function DepartmentHierarchySettings() {
  const [departments, setDepartments] = useState<Department[]>([]);
  const [hierarchy, setHierarchy] = useState<Record<number, number[]>>({});
  const [nodes, setNodes] = useState<Record<number, DepartmentNode>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [draggedDept, setDraggedDept] = useState<number | null>(null);
  const [dragOverDept, setDragOverDept] = useState<number | null>(null);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      setLoading(true);
      
      // Load departments
      const deptResult = await apiClient.getDepartments();
      if (deptResult.success && deptResult.data) {
        const deptArray = (deptResult.data as any)?.DATS || [];
        const deptList: Department[] = deptArray.map((dept: any) => ({
          id: dept.f100 || dept.Depid,
          name: dept.f101 || dept.Name
        })).filter((d: Department) => d.id && d.name);
        
        setDepartments(deptList.sort((a, b) => a.id - b.id));
        
        // Load hierarchy configuration
        const hierarchyResult = await fetch('/api/v1/departments/hierarchy');
        const hierarchyData = await hierarchyResult.json();
        
        if (hierarchyData.success) {
          const loadedHierarchy = hierarchyData.data || {};
          setHierarchy(loadedHierarchy);
          
          // Build node structure
          const nodeMap: Record<number, DepartmentNode> = {};
          deptList.forEach(dept => {
            nodeMap[dept.id] = {
              ...dept,
              children: loadedHierarchy[dept.id] || [],
              isExpanded: false
            };
          });
          setNodes(nodeMap);
        }
      }
    } catch (error) {
      console.error('Error loading data:', error);
      showMessage('error', 'Failed to load department data');
    } finally {
      setLoading(false);
    }
  };
 
  const showMessage = (type: 'success' | 'error', text: string) => {
    setMessage({ type, text });
    setTimeout(() => setMessage(null), 3000);
  };
 
  const handleSave = async () => {
    try {
      setSaving(true);
      
      // Convert nodes back to hierarchy format
      const newHierarchy: Record<number, number[]> = {};
      Object.values(nodes).forEach(node => {
        if (node.children.length > 0) {
          newHierarchy[node.id] = node.children;
        }
      });
      
      const response = await fetch('/api/v1/departments/hierarchy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ hierarchy: newHierarchy })
      });
      
      const result = await response.json();
      
      if (result.success) {
        setHierarchy(newHierarchy);
        showMessage('success', 'Department hierarchy saved successfully!');
      } else {
        showMessage('error', result.error || 'Failed to save hierarchy');
      }
    } catch (error) {
      console.error('Error saving hierarchy:', error);
      showMessage('error', 'Failed to save department hierarchy');
    } finally {
      setSaving(false);
    }
  };
 
  const handleDragStart = (e: React.DragEvent, deptId: number) => {
    setDraggedDept(deptId);
    e.dataTransfer.effectAllowed = 'move';
    // Add visual feedback
    if (e.currentTarget instanceof HTMLElement) {
      e.currentTarget.style.opacity = '0.5';
    }
  };
 
  const handleDragEnd = (e: React.DragEvent) => {
    setDraggedDept(null);
    setDragOverDept(null);
    // Reset visual feedback
    if (e.currentTarget instanceof HTMLElement) {
      e.currentTarget.style.opacity = '1';
    }
  };
 
  const handleDragOver = (e: React.DragEvent, targetId: number) => {
    e.preventDefault();
    e.stopPropagation(); // Stop bubbling to parent elements
    e.dataTransfer.dropEffect = 'move';
    setDragOverDept(targetId);
  };
 
  const handleDragLeave = (e: React.DragEvent) => {
    e.stopPropagation(); // Stop bubbling to parent elements
    // Only clear if actually leaving the element
    if (e.currentTarget === e.target) {
      setDragOverDept(null);
    }
  };
 
  const handleDrop = (e: React.DragEvent, parentId: number) => {
    e.preventDefault();
    e.stopPropagation(); // Stop bubbling to parent elements
    
    if (draggedDept === null || draggedDept === parentId) {
      setDraggedDept(null);
      return;
    }
 
    const updatedNodes = { ...nodes };
    const parent = updatedNodes[parentId];
    
    // Check if already a child
    if (parent.children.includes(draggedDept)) {
      setDraggedDept(null);
      return;
    }
    
    // Remove from any existing parent (if moving within hierarchy)
    Object.values(updatedNodes).forEach(node => {
      if (node.children.includes(draggedDept)) {
        node.children = node.children.filter(id => id !== draggedDept);
      }
    });
    
    // Add to new parent
    parent.children = [...parent.children, draggedDept];
    setNodes(updatedNodes);
    
    setDraggedDept(null);
  };
 
  const removeChild = (parentId: number, childId: number) => {
    const updatedNodes = { ...nodes };
    updatedNodes[parentId].children = updatedNodes[parentId].children.filter(id => id !== childId);
    setNodes(updatedNodes);
  };
 
  const moveChild = (parentId: number, childId: number, direction: 'up' | 'down') => {
    const updatedNodes = { ...nodes };
    const children = [...updatedNodes[parentId].children];
    const index = children.indexOf(childId);
    
    if (direction === 'up' && index > 0) {
      [children[index], children[index - 1]] = [children[index - 1], children[index]];
    } else if (direction === 'down' && index < children.length - 1) {
      [children[index], children[index + 1]] = [children[index + 1], children[index]];
    }
    
    updatedNodes[parentId].children = children;
    setNodes(updatedNodes);
  };
 
  const toggleExpand = (deptId: number) => {
    const updatedNodes = { ...nodes };
    updatedNodes[deptId].isExpanded = !updatedNodes[deptId].isExpanded;
    setNodes(updatedNodes);
  };
 
  const clearHierarchy = () => {
    if (confirm('Are you sure you want to clear all department hierarchy settings?')) {
      const clearedNodes = { ...nodes };
      Object.keys(clearedNodes).forEach(key => {
        clearedNodes[Number(key)].children = [];
        clearedNodes[Number(key)].isExpanded = false;
      });
      setNodes(clearedNodes);
    }
  };
 
  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00946b] mx-auto"></div>
          <p className="mt-4 text-muted">Loading departments...</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-text flex items-center gap-2">
            <Icon name="account_tree" size={32} className="text-brand" />
            Department Hierarchy Configuration
          </h1>
          <p className="mt-2 text-muted">
            Configure how departments (also called categories) cascade in product forms. Drag departments onto others to create parent-child relationships.
          </p>
          <p className="mt-1 text-sm text-muted italic">
            Note: "Department" and "Category" mean the same thing - they're different ways to classify your products.
          </p>
        </div>
 
        {/* Message Banner */}
        {message && (
          <div className={`mb-6 p-4 rounded-lg ${
            message.type === 'success' ? 'bg-success/20 text-success' : 'bg-danger/20 text-danger'
          }`}>
            {message.text}
          </div>
        )}
 
        {/* Action Buttons */}
        <div className="mb-6 flex justify-end items-center">
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-6 py-3 bg-success text-surface rounded-lg hover:bg-success/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-semibold flex items-center gap-2"
          >
            <Icon name={saving ? "hourglass_empty" : "save"} size={20} />
            {saving ? 'Saving...' : 'Save Configuration'}
          </button>
        </div>
 
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Available Departments (Source) */}
          <div className="bg-surface rounded-lg shadow-md p-6">
            <h2 className="text-xl font-bold text-text mb-4">Available Departments (Categories)</h2>
            <p className="text-sm text-muted mb-4">
              Drag departments from here onto departments in the hierarchy section to create parent-child relationships.
            </p>
            <div className="space-y-2">
              {departments.map(dept => (
                <div
                  key={dept.id}
                  draggable
                  onDragStart={(e) => handleDragStart(e, dept.id)}
                  onDragEnd={handleDragEnd}
                  className={`p-3 bg-surface-2 border-2 rounded-lg cursor-move transition-all transform ${
                    draggedDept === dept.id 
                      ? 'border-brand bg-info/10 scale-105 shadow-lg' 
                      : 'border-border hover:bg-surface-2 hover:border-brand hover:shadow-md'
                  }`}
                >
                  <div className="flex items-center">
                    <Icon name="drag_indicator" size={20} className="text-muted mr-2" />
                    <span className="font-medium text-text">{dept.name}</span>
                    <span className="ml-2 text-sm text-muted">(ID: {dept.id})</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
 
          {/* Hierarchy Configuration (Target) */}
          <div className="bg-surface rounded-lg shadow-md p-6">
            <h2 className="text-xl font-bold text-text mb-4">Department Hierarchy</h2>
            <p className="text-sm text-muted mb-4">
              Drop departments here to define which categories can be sub-categories of others. This creates a cascading selection in product forms.
            </p>
            <div className="mb-3 p-3 bg-info/10 border border-info/30 rounded text-sm text-info">
              <strong>How levels work:</strong> Children you add here become <strong>Department 2</strong> options when the parent is selected as <strong>Department 1</strong>. Continue the chain for levels 3 and 4.
            </div>
            <div className="space-y-3">
              {departments.map(dept => {
                const node = nodes[dept.id];
                if (!node) return null;
 
                return (
                  <div
                    key={dept.id}
                    onDragOver={(e) => handleDragOver(e, dept.id)}
                    onDragLeave={handleDragLeave}
                    onDrop={(e) => handleDrop(e, dept.id)}
                    className={`border-2 rounded-lg transition-all relative ${
                      draggedDept === dept.id
                        ? 'border-border bg-surface-2 opacity-50'
                        : dragOverDept === dept.id
                        ? 'border-brand bg-info/10 shadow-lg scale-102 ring-4 ring-blue-300 animate-pulse'
                        : 'border-border hover:border-[#00946b] bg-surface'
                    }`}
                  >
                    {/* Drop Indicator */}
                    {dragOverDept === dept.id && draggedDept !== dept.id && (
                      <div className="absolute top-1 right-1 bg-brand text-surface px-3 py-1 rounded text-xs font-bold shadow-xl z-10 pointer-events-none animate-bounce flex items-center gap-1">
                        <Icon name="add" size={14} /> Add as Level 2
                      </div>
                    )}
                    <div className="p-3 flex items-center justify-between">
                      <div className="flex items-center flex-1">
                        {node.children.length > 0 && (
                          <button
                            onClick={() => toggleExpand(dept.id)}
                            className="mr-2 text-muted hover:text-text"
                          >
                            <Icon name={node.isExpanded ? "expand_more" : "chevron_right"} size={20} />
                          </button>
                        )}
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-text">{dept.name}</span>
                          <span className="text-xs text-muted">(ID: {dept.id})</span>
                          {node.children.length > 0 && (
                            <span className="text-xs bg-info/20 text-info px-2 py-0.5 rounded font-medium">
                              Level 1 → Level 2
                            </span>
                          )}
                        </div>
                      </div>
                      {node.children.length > 0 && (
                        <span className="text-xs bg-success text-surface px-2 py-1 rounded">
                          {node.children.length} child{node.children.length !== 1 ? 'ren' : ''}
                        </span>
                      )}
                    </div>
 
                    {/* Children */}
                    {node.isExpanded && node.children.length > 0 && (
                      <div className="px-3 pb-3 space-y-2">
                        <div className="ml-8 pl-4 border-l-2 border-border space-y-2">
                          {node.children.map((childId, childIndex) => {
                            const childDept = departments.find(d => d.id === childId);
                            if (!childDept) return null;
                            const childNode = nodes[childId];
                            const isFirst = childIndex === 0;
                            const isLast = childIndex === node.children.length - 1;
                            return (
                              <div key={childId}>
                                <div
                                  draggable
                                  onDragStart={(e) => handleDragStart(e, childId)}
                                  onDragEnd={handleDragEnd}
                                  onDragOver={(e) => handleDragOver(e, childId)}
                                  onDragLeave={handleDragLeave}
                                  onDrop={(e) => handleDrop(e, childId)}
                                  className={`relative flex items-center justify-between p-2 bg-surface-2 rounded border-2 transition-all cursor-move ${
                                    draggedDept === childId 
                                      ? 'border-border opacity-50' 
                                      : dragOverDept === childId
                                      ? 'border-accent bg-accent/20 shadow-xl ring-4 ring-accent/30 animate-pulse'
                                      : 'border-border hover:border-accent'
                                  }`}
                                >
                                  {/* Drop Indicator for Level 3 */}
                                  {dragOverDept === childId && draggedDept !== childId && (
                                    <div className="absolute top-1 right-1 bg-info text-surface px-3 py-1 rounded text-xs font-bold shadow-xl z-10 pointer-events-none animate-bounce flex items-center gap-1">
                                      <Icon name="add" size={14} /> Add as Level 3
                                    </div>
                                  )}
                                  <div className="flex items-center gap-2 flex-1">
                                    {childNode?.children.length > 0 && (
                                      <button
                                        onClick={() => toggleExpand(childId)}
                                        className="text-muted hover:text-text text-xs"
                                      >
                                        <Icon name={childNode.isExpanded ? "expand_more" : "chevron_right"} size={16} />
                                      </button>
                                    )}
                                    <span className="text-sm text-text">↳ {childDept.name}</span>
                                    {childNode?.children.length > 0 && (
                                      <span className="text-xs bg-accent/20 text-accent px-2 py-0.5 rounded font-medium">
                                        Level 2 → Level 3
                                      </span>
                                    )}
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <button
                                      onClick={() => moveChild(dept.id, childId, 'up')}
                                      disabled={isFirst}
                                      className="text-muted/70 hover:text-text disabled:opacity-30 disabled:cursor-not-allowed text-xs px-1"
                                      title="Move up"
                                    >
                                      ▲
                                    </button>
                                    <button
                                      onClick={() => moveChild(dept.id, childId, 'down')}
                                      disabled={isLast}
                                      className="text-muted/70 hover:text-text disabled:opacity-30 disabled:cursor-not-allowed text-xs px-1"
                                      title="Move down"
                                    >
                                      ▼
                                    </button>
                                    <button
                                      onClick={() => removeChild(dept.id, childId)}
                                      className="text-danger hover:text-danger/80 text-xs px-2 py-1"
                                    >
                                      Remove
                                    </button>
                                  </div>
                                </div>
                                
                                {/* Grandchildren (Level 3) */}
                                {childNode?.children.length > 0 && childNode.isExpanded && (
                                  <div className="ml-8 pl-4 mt-2 border-l-2 border-border space-y-2">
                                    {childNode.children.map((grandchildId, grandchildIndex) => {
                                      const grandchildDept = departments.find(d => d.id === grandchildId);
                                      if (!grandchildDept) return null;
                                      const grandchildNode = nodes[grandchildId];
                                      const isFirst = grandchildIndex === 0;
                                      const isLast = grandchildIndex === childNode.children.length - 1;
                                      return (
                                        <div key={grandchildId}>
                                          <div 
                                            draggable
                                            onDragStart={(e) => handleDragStart(e, grandchildId)}
                                            onDragEnd={handleDragEnd}
                                            onDragOver={(e) => handleDragOver(e, grandchildId)}
                                            onDragLeave={handleDragLeave}
                                            onDrop={(e) => handleDrop(e, grandchildId)}
                                            className={`relative flex items-center justify-between p-2 bg-surface-2 rounded border-2 transition-all cursor-move ${
                                              draggedDept === grandchildId
                                                ? 'border-border opacity-50'
                                                : dragOverDept === grandchildId
                                                ? 'border-success bg-success/20 shadow-xl ring-4 ring-success/30 animate-pulse'
                                                : 'border-border hover:border-success'
                                            }`}
                                          >
                                            {/* Drop Indicator for Level 4 */}
                                            {dragOverDept === grandchildId && draggedDept !== grandchildId && (
                                              <div className="absolute top-1 right-1 bg-success text-surface px-3 py-1 rounded text-xs font-bold shadow-xl z-10 pointer-events-none animate-bounce flex items-center gap-1">
                                                <Icon name="add" size={14} /> Add as Level 4
                                              </div>
                                            )}
                                            <div className="flex items-center gap-2 flex-1">
                                              {grandchildNode?.children.length > 0 && (
                                                <button
                                                  onClick={() => toggleExpand(grandchildId)}
                                                  className="text-muted hover:text-text text-xs"
                                                >
                                                  <Icon name={grandchildNode.isExpanded ? "expand_more" : "chevron_right"} size={16} />
                                                </button>
                                              )}
                                              <span className="text-sm text-text">↳↳ {grandchildDept.name}</span>
                                              {grandchildNode?.children.length > 0 && (
                                                <span className="text-xs bg-success/20 text-success px-2 py-0.5 rounded font-medium">
                                                  Level 3 → Level 4
                                                </span>
                                              )}
                                            </div>
                                            <div className="flex items-center gap-1">
                                              <button
                                                onClick={() => moveChild(childId, grandchildId, 'up')}
                                                disabled={isFirst}
                                                className="text-muted/70 hover:text-text disabled:opacity-30 disabled:cursor-not-allowed text-xs px-1"
                                                title="Move up"
                                              >
                                                ▲
                                              </button>
                                              <button
                                                onClick={() => moveChild(childId, grandchildId, 'down')}
                                                disabled={isLast}
                                                className="text-muted/70 hover:text-text disabled:opacity-30 disabled:cursor-not-allowed text-xs px-1"
                                                title="Move down"
                                              >
                                                ▼
                                              </button>
                                              <button
                                                onClick={() => removeChild(childId, grandchildId)}
                                                className="text-danger hover:text-danger/80 text-xs px-2 py-1"
                                              >
                                                Remove
                                              </button>
                                            </div>
                                          </div>
                                          
                                          {/* Great-grandchildren (Level 4) */}
                                          {grandchildNode?.children.length > 0 && grandchildNode.isExpanded && (
                                            <div className="ml-8 pl-4 mt-2 border-l-2 border-border space-y-2">
                                              {grandchildNode.children.map(greatGrandchildId => {
                                                const greatGrandchildDept = departments.find(d => d.id === greatGrandchildId);
                                                if (!greatGrandchildDept) return null;
                                                return (
                                                  <div key={greatGrandchildId} className="flex items-center justify-between p-2 bg-surface-2 rounded border border-border">
                                                    <div className="flex items-center gap-2">
                                                      <span className="text-sm text-text">↳↳↳ {greatGrandchildDept.name}</span>
                                                      <span className="text-xs bg-success/20 text-success px-2 py-0.5 rounded font-medium">
                                                        Level 4
                                                      </span>
                                                    </div>
                                                    <button
                                                      onClick={() => removeChild(grandchildId, greatGrandchildId)}
                                                      className="text-danger hover:text-danger/80 text-xs px-2 py-1"
                                                    >
                                                      Remove
                                                    </button>
                                                  </div>
                                                );
                                              })}
                                            </div>
                                          )}
                                        </div>
                                      );
                                    })}
                                  </div>
                                )}
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
 
        {/* Help Section */}
        <div className="mt-8 bg-info/10 border border-info/30 rounded-lg p-6">
          <h3 className="font-semibold text-info mb-2">How it works:</h3>
          <ul className="space-y-2 text-info text-sm">
            <li>• <strong>Level 1 → 2:</strong> Drag a department from the left panel and drop it onto a department on the right</li>
            <li>• <strong>Level 2 → 3:</strong> Click the arrow to expand Level 2 items, then drag and drop onto the purple children</li>
            <li>• <strong>Level 3 → 4:</strong> Expand Level 3 items and drag onto the orange children</li>
            <li>• Each level creates a cascading dropdown in product forms</li>
            <li>• Hover over items to see which level they accept (border color changes)</li>
            <li>• Click "Remove" to delete a relationship</li>
            <li>• Don't forget to click "Save Configuration" when you're done!</li>
          </ul>
        </div>
      </div>
    </div>
  );
}