---
description: Admin interface development patterns and conventions for POS System
globs: **/admin/**,**/components/admin/**
---

# 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
```typescript
// 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
```typescript
// 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>
```

## Interface Switching Pattern

Admin users should be able to access all role interfaces:
```typescript
const renderCurrentSection = () => {
  switch (currentSection) {
    case 'dashboard': return <AdminDashboard />
    case 'pos': return <POSLayout user={user} />
    case 'server': return <ServerInterface />
    case 'counter': return <CounterInterface />
    case 'kitchen': return <KitchenLayout user={user} />
    // ... other sections
  }
}
```

## API Integration Patterns

### User Management
```typescript
// Admin-only endpoints
async getUsers(): Promise<APIResponse<User[]>> {
  return this.request({ method: 'GET', url: '/admin/users' });
}

async createUser(userData: CreateUserRequest): Promise<APIResponse<User>> {
  return this.request({ method: 'POST', url: '/admin/users', data: userData });
}
```

### Form Handling
```typescript
// Consistent form patterns for admin sections
const [showCreateForm, setShowCreateForm] = useState(false)
const [formData, setFormData] = useState<FormType>(initialValues)

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()
  if (validateForm()) {
    mutation.mutate(formData)
  }
}
```

## Styling Conventions

### Responsive Layout
- `min-h-screen bg-background flex` for full-height layout
- `flex flex-col` for sidebar with proper spacing
- `flex-1 overflow-auto` for main content area

### Color Scheme
- Primary actions: `bg-primary text-primary-foreground`
- Destructive actions: `text-destructive hover:bg-destructive/10`
- Muted backgrounds: `bg-muted/30` for subtle highlights

### Icon Consistency
- Navigation icons: `w-5 h-5` in expanded state
- User avatars: `w-8 h-8` for main display, `w-6 h-6` for collapsed
- Action buttons: `w-4 h-4` for standard buttons

## Error Handling

Always provide user feedback:
```typescript
onSuccess: () => {
  queryClient.invalidateQueries({ queryKey: ['users'] })
  alert('User created successfully!')
},
onError: (error: any) => {
  alert(`Failed to create user: ${error.message}`)
}
```

## Performance Considerations

- Use React Query for all API calls with proper cache invalidation
- Implement loading states for better UX
- Lazy load admin sections when possible
- Optimize re-renders with proper dependency arrays