admin-interface-patterns

Admin Interface Development Patterns

Admin Layout Structure

Component Organization

Admin components should follow this structure:

• AdminLayout.tsx - Main admin wrapper with sidebar navigation
• Admin[Section].tsx - Individual admin section components
• Navigation integrated within single sidebar (no duplicate headers)

Navigation Pattern

// AdminLayout.tsx navigation structure
const adminSections = [
  { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard /> },
  { id: 'pos', label: 'General POS', icon: <Store /> },
  { id: 'server', label: 'Server Interface', icon: <Users /> },
  { id: 'counter', label: 'Counter/Checkout', icon: <CreditCard /> },
  { id: 'kitchen', label: 'Kitchen Display', icon: <ChefHat /> },
  { id: 'settings', label: 'Settings', icon: <Settings /> },
  { id: 'staff', label: 'Manage Staff', icon: <UserCog /> },
  { id: 'menu', label: 'Manage Menu', icon: <Menu /> },
  { id: 'reports', label: 'View Reports', icon: <BarChart3 /> }
]

Sidebar Layout Best Practices

• Single Navigation Source: All navigation within sidebar, no duplicate top headers
• Collapsible Design: Support both expanded (w-64) and collapsed (w-16) states
• User Info Integration: User card and logout within navigation flow, not separate bottom section
• Flexible Layout: Use flexbox with spacer to push user info and logout to bottom
• Consistent Styling: Same button styles for all navigation items

User Authentication Integration

// User info within navigation
{!sidebarCollapsed && (
  <div className="p-3 bg-muted/30 rounded-lg">
    <div className="flex items-center gap-3">
      <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
        <User className="w-4 h-4 text-primary-foreground" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{user.first_name} {user.last_name}</p>
        <p className="text-xs text-muted-foreground truncate">{user.email}</p>
      </div>
      <Badge variant="outline">{user.role.toUpperCase()}</Badge>
    </div>
  </div>
)}

// Logout as navigation item
<Button
  variant="ghost"
  onClick={handleLogout}
  className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10"
>
  <LogOut className="w-5 h-5" />
  {!sidebarCollapsed && <span className="ml-3">Logout</span>}
</Button>