⚙️ Settings, Departments & Administrator Guide

This technical reference details component mechanics across Company Settings (/company-settings), Department Hierarchies (/departments), and Administrator Management (/admin).

---

⚙️ 1. Company Settings Container (components/settings/company-settings.tsx)

The /company-settings page is structured as a controlled tab container managing multiple state domains:

export function CompanySettings() {
  const [activeTab, setActiveTab] = useState("company-details");

  return (
    <div>
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="company-details">Company Details</TabsTrigger>
          <TabsTrigger value="locations">Locations</TabsTrigger>
          <TabsTrigger value="schedule">Schedule</TabsTrigger>
          <TabsTrigger value="shift">Shift</TabsTrigger>
          <TabsTrigger value="holiday">Holiday</TabsTrigger>
          <TabsTrigger value="lateness">Lateness Policy</TabsTrigger>
          <TabsTrigger value="roles">Roles & Permissions</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
        </TabsList>
        {/* Tab contents... */}
      </Tabs>
    </div>
  );
}

---

🏢 2. Department Hierarchy Mechanics (/departments)

The Department system enforces a Mutually Exclusive Hierarchy Rule: A parent department can contain EITHER direct staff OR sub-departments, but never both simultaneously.

Hierarchy Validation Hook (department-detail.tsx)

Inside components/settings/department-detail.tsx, conditional logic calculates staff and sub-department presence to disable action buttons:

const hasSubDepartments = subDepartments.length > 0;
const hasDirectStaff = staff.length > 0;

// Button States:
// 1. "+ Add User" disabled if hasSubDepartments === true
// 2. "+ Add Sub-Department" disabled if hasDirectStaff === true

---

👑 3. Administrator Management Engineering (/admin)

The /admin route manages workspace executive personnel (OrganizationAdmin objects) using components in components/organization/.

Administrative Access Protection Logic (AdminTable.tsx)

When rendering administrator rows, protective flags prevent unauthorized edits or lockouts:

const isSelf = admin.id === currentAdminId;
const isOwner = admin.admin_type === "owner";
const isAdmin = currentAdminType === "admin";

// Governance Rules:
// 1. Standard Admins cannot perform edit/disable actions on Owners
const canPerformActionOnTarget = !(isAdmin && isOwner);

// 2. Admins cannot disable their own active account
const canToggleStatus = !isSelf || !isAdmin;