Progress {readyItems} ready • {servedItems} served • {totalItems - readyItems - servedItems} cooking ({Math.round(progress)}% complete)

{displayItems.map((item, index) => { const isServed = item.status === 'served' const isReady = checkedItems.has(item.id) return (

{/* Item checkbox */}

{item.quantity}x {item.product?.name || `Item ${index + 1}`} {isServed && SERVED}

{/* Special instructions */} {item.special_instructions && (

Note: {item.special_instructions}

)}

{/* Status indicator */}

{isServed ? '🍽️ Served' : isReady ? '✅ Ready' : '🍳 Cooking'}

{/* Individual serve button */} {isReady && !isServed && ( )}

) })}

) } ``` ### Sound Notification System ```typescript // Sound notification service for kitchen operations class KitchenSoundService { private audioContext: AudioContext | null = null private enabled: boolean = true private volume: number = 0.5 async initialize(): Promise { try { this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() } catch (error) { console.warn('Audio context not available:', error) } } // ✅ CORRECT: Different sounds for different kitchen events playNewOrderSound(): void { this.playTone(800, 0.5, this.volume * 0.4) // 800Hz for new orders } playAllReadySound(): void { this.playTone(1200, 0.3, this.volume * 0.3) // 1200Hz for all items ready } playItemServedSound(): void { this.playTone(1400, 0.2, this.volume * 0.2) // 1400Hz for item served } private playTone(frequency: number, duration: number, volume: number): void { if (!this.enabled || !this.audioContext) return try { const oscillator = this.audioContext.createOscillator() const gainNode = this.audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(this.audioContext.destination) oscillator.frequency.setValueAtTime(frequency, this.audioContext.currentTime) gainNode.gain.setValueAtTime(volume, this.audioContext.currentTime) oscillator.start() oscillator.stop(this.audioContext.currentTime + duration) } catch (error) { console.log('Sound playback failed:', error) } } setEnabled(enabled: boolean): void { this.enabled = enabled } setVolume(volume: number): void { this.volume = Math.max(0, Math.min(1, volume)) } } ``` ## 🎭 Role-Based Component Patterns ### Role-Specific Interface Components ```typescript // Role-based component rendering import { User } from '@/types' interface RoleBasedLayoutProps { user: User } // ✅ CORRECT: Role-based component switching export const RoleBasedLayout: React.FC = ({ user }) => { // Admin gets access to all interfaces if (user.role === 'admin') { return } // Role-specific interfaces switch (user.role) { case 'server': return case 'counter': return case 'kitchen': return // Enhanced with as-ready service default: return } } // Role-based feature flags interface FeatureGateProps { allowedRoles: string[] userRole: string children: React.ReactNode fallback?: React.ReactNode } export const FeatureGate: React.FC = ({ allowedRoles, userRole, children, fallback = null }) => { if (allowedRoles.includes(userRole)) { return <>{children} } return <>{fallback} } // Usage in components ``` ## 🎨 Styling & UI Patterns ### Conditional Styling with cn() ```typescript // ✅ CORRECT: Use cn() utility for conditional classes import { cn } from '@/lib/utils' const OrderCard = ({ order, isSelected, status }) => { return ( {/* Content */} ) } ``` ### Status-Based Styling ```typescript // Status badge utility const getStatusVariant = (status: string) => { const variants = { pending: 'secondary', confirmed: 'default', preparing: 'warning', ready: 'success', served: 'outline', completed: 'success', cancelled: 'destructive', } as const return variants[status] || 'secondary' } // Usage {order.status} ``` ## ⚡ Performance Optimization Patterns ### React.memo for Expensive Components ```typescript // ✅ CORRECT: Memo for components with expensive renders export const ProductGrid = React.memo(({ products, onProductSelect, selectedProducts }) => { return (

{products.map(product => ( ))}

) }, (prevProps, nextProps) => { // Custom comparison for optimization return ( prevProps.products.length === nextProps.products.length && prevProps.selectedProducts.length === nextProps.selectedProducts.length ) }) ``` ### Virtualization for Large Lists ```typescript // For large product catalogs or order lists import { FixedSizeList as List } from 'react-window' const VirtualizedProductList = ({ products, onSelect }) => { const Row = ({ index, style }) => (

) return ( {Row} ) } ``` ## 🔄 State Management Patterns ### Optimistic Updates ```typescript // Optimistic UI updates for better UX const useOptimisticOrderStatus = () => { const queryClient = useQueryClient() return useMutation({ mutationFn: ({ orderId, status }) => apiClient.updateOrderStatus(orderId, status), onMutate: async ({ orderId, status }) => { // Cancel outgoing refetches await queryClient.cancelQueries({ queryKey: ['orders'] }) // Snapshot previous value const previousOrders = queryClient.getQueryData(['orders']) // Optimistically update queryClient.setQueryData(['orders'], (old: any) => old?.map((order: any) => order.id === orderId ? { ...order, status } : order ) ) return { previousOrders } }, onError: (err, variables, context) => { // Rollback on error if (context?.previousOrders) { queryClient.setQueryData(['orders'], context.previousOrders) } toastHelpers.error('Failed to update order status') }, onSettled: () => { // Refetch to ensure consistency queryClient.invalidateQueries({ queryKey: ['orders'] }) }, }) } ``` ## 🎯 Error Handling Patterns ### Error Boundaries ```typescript // Error boundary for catching component errors class OrderErrorBoundary extends React.Component { constructor(props) { super(props) this.state = { hasError: false, error: null } } static getDerivedStateFromError(error) { return { hasError: true, error } } componentDidCatch(error, errorInfo) { console.error('Order component error:', error, errorInfo) } render() { if (this.state.hasError) { return ( Something went wrong

We encountered an error while processing your order.

) } return this.props.children } } ``` ### Loading States ```typescript // Consistent loading patterns const LoadingStates = { Spinner: () => (

), Skeleton: () => (

), Button: ({ isLoading, children, ...props }) => ( ), } ``` ## 🛠️ Development Patterns ### Component Organization ```typescript // ✅ CORRECT: Well-organized component file // ProductCard/index.tsx export { ProductCard } from './ProductCard' export type { ProductCardProps } from './ProductCard' // ProductCard/ProductCard.tsx import { memo, useCallback } from 'react' // ... imports interface ProductCardProps { // ... props } export const ProductCard: React.FC = memo(({ // ... implementation })) // ProductCard/ProductCard.stories.tsx (if using Storybook) export default { title: 'Components/ProductCard', component: ProductCard, } // ProductCard/ProductCard.test.tsx describe('ProductCard', () => { // ... tests }) ``` ### Type Safety Best Practices ```typescript // ✅ CORRECT: Strict typing throughout import type { Product, User, Order } from '@/types' // Generic component with proper constraints interface DataTableProps { data: T[] columns: Array<{ key: keyof T header: string render?: (value: T[keyof T], row: T) => React.ReactNode }> onRowClick?: (row: T) => void } export function DataTable>({ data, columns, onRowClick }: DataTableProps) { // Implementation with full type safety } ``` ## 🚀 Development Commands & Tools ### Essential Commands ```bash # Component development npm run dev # Start development server npm run build # Build for production npm run type-check # TypeScript checking # Quality assurance npm run lint # ESLint checking npm run format # Prettier formatting npm run test # Run component tests # Component generation (if using generator) npm run generate:component ProductCard ``` ### Recommended VS Code Extensions - **ES7+ React/Redux/React-Native snippets** - **Auto Rename Tag** - **Bracket Pair Colorizer** - **Tailwind CSS IntelliSense** - **TypeScript Importer** - **React Hook Form DevTools**