Cursor rule

1---
2description: Admin interface development patterns and conventions for POS System
3globs: **/admin/**,**/components/admin/**
4---
5 
6# Admin Interface Development Patterns
7 
8## Admin Layout Structure
9 
10### Component Organization
11Admin components should follow this structure:
12- `AdminLayout.tsx` - Main admin wrapper with sidebar navigation
13- `Admin[Section].tsx` - Individual admin section components
14- Navigation integrated within single sidebar (no duplicate headers)
15 
16### Navigation Pattern
17```typescript
18// AdminLayout.tsx navigation structure
19const adminSections = [
20  { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard /> },
21  { id: 'pos', label: 'General POS', icon: <Store /> },
22  { id: 'server', label: 'Server Interface', icon: <Users /> },
23  { id: 'counter', label: 'Counter/Checkout', icon: <CreditCard /> },
24  { id: 'kitchen', label: 'Kitchen Display', icon: <ChefHat /> },
25  { id: 'settings', label: 'Settings', icon: <Settings /> },
26  { id: 'staff', label: 'Manage Staff', icon: <UserCog /> },
27  { id: 'menu', label: 'Manage Menu', icon: <Menu /> },
28  { id: 'reports', label: 'View Reports', icon: <BarChart3 /> }
29]
30```
31 
32### Sidebar Layout Best Practices
33- **Single Navigation Source**: All navigation within sidebar, no duplicate top headers
34- **Collapsible Design**: Support both expanded (w-64) and collapsed (w-16) states
35- **User Info Integration**: User card and logout within navigation flow, not separate bottom section
36- **Flexible Layout**: Use flexbox with spacer to push user info and logout to bottom
37- **Consistent Styling**: Same button styles for all navigation items
38 
39### User Authentication Integration
40```typescript
41// User info within navigation
42{!sidebarCollapsed && (
43  <div className="p-3 bg-muted/30 rounded-lg">
44    <div className="flex items-center gap-3">
45      <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
46        <User className="w-4 h-4 text-primary-foreground" />
47      </div>
48      <div className="flex-1 min-w-0">
49        <p className="text-sm font-medium truncate">{user.first_name} {user.last_name}</p>
50        <p className="text-xs text-muted-foreground truncate">{user.email}</p>
51      </div>
52      <Badge variant="outline">{user.role.toUpperCase()}</Badge>
53    </div>
54  </div>
55)}
56 
57// Logout as navigation item
58<Button
59  variant="ghost"
60  onClick={handleLogout}
61  className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10"
62>
63  <LogOut className="w-5 h-5" />
64  {!sidebarCollapsed && <span className="ml-3">Logout</span>}
65</Button>
66```
67 
68## Interface Switching Pattern
69 
70Admin users should be able to access all role interfaces:
71```typescript
72const renderCurrentSection = () => {
73  switch (currentSection) {
74    case 'dashboard': return <AdminDashboard />
75    case 'pos': return <POSLayout user={user} />
76    case 'server': return <ServerInterface />
77    case 'counter': return <CounterInterface />
78    case 'kitchen': return <KitchenLayout user={user} />
79    // ... other sections
80  }
81}
82```
83 
84## API Integration Patterns
85 
86### User Management
87```typescript
88// Admin-only endpoints
89async getUsers(): Promise<APIResponse<User[]>> {
90  return this.request({ method: 'GET', url: '/admin/users' });
91}
92 
93async createUser(userData: CreateUserRequest): Promise<APIResponse<User>> {
94  return this.request({ method: 'POST', url: '/admin/users', data: userData });
95}
96```
97 
98### Form Handling
99```typescript
100// Consistent form patterns for admin sections
101const [showCreateForm, setShowCreateForm] = useState(false)
102const [formData, setFormData] = useState<FormType>(initialValues)
103 
104const handleSubmit = (e: React.FormEvent) => {
105  e.preventDefault()
106  if (validateForm()) {
107    mutation.mutate(formData)
108  }
109}
110```
111 
112## Styling Conventions
113 
114### Responsive Layout
115- `min-h-screen bg-background flex` for full-height layout
116- `flex flex-col` for sidebar with proper spacing
117- `flex-1 overflow-auto` for main content area
118 
119### Color Scheme
120- Primary actions: `bg-primary text-primary-foreground`
121- Destructive actions: `text-destructive hover:bg-destructive/10`
122- Muted backgrounds: `bg-muted/30` for subtle highlights
123 
124### Icon Consistency
125- Navigation icons: `w-5 h-5` in expanded state
126- User avatars: `w-8 h-8` for main display, `w-6 h-6` for collapsed
127- Action buttons: `w-4 h-4` for standard buttons
128 
129## Error Handling
130 
131Always provide user feedback:
132```typescript
133onSuccess: () => {
134  queryClient.invalidateQueries({ queryKey: ['users'] })
135  alert('User created successfully!')
136},
137onError: (error: any) => {
138  alert(`Failed to create user: ${error.message}`)
139}
140```
141 
142## Performance Considerations
143 
144- Use React Query for all API calls with proper cache invalidation
145- Implement loading states for better UX
146- Lazy load admin sections when possible
147- Optimize re-renders with proper dependency arrays