Cursor rule

1---
2description: Performance optimization patterns for database queries, React components, and API efficiency in POS System
3---
4 
5# ⚡ Performance Optimization Patterns
6 
7## 🎯 Performance Philosophy for POS Systems
8 
9### Critical Performance Metrics
10- **Order Creation:** < 500ms from click to confirmation
11- **Payment Processing:** < 2s for complete transaction
12- **Kitchen Updates:** Real-time (< 100ms propagation)
13- **Product Search:** < 200ms for instant results
14- **Database Queries:** < 100ms for typical CRUD operations
15 
16### Performance Monitoring Strategy
17```typescript
18// Performance monitoring utilities
19class PerformanceMonitor {
20  static timeOperation<T>(name: string, operation: () => Promise<T>): Promise<T> {
21    console.time(name);
22    return operation().finally(() => console.timeEnd(name));
23  }
24 
25  static measureRender(componentName: string) {
26    return (Component: React.ComponentType<any>) => {
27      return React.memo(Component, (prevProps, nextProps) => {
28        const start = performance.now();
29        const shouldUpdate = !Object.is(prevProps, nextProps);
30        const end = performance.now();
31        
32        if (end - start > 1) {
33          console.warn(`${componentName} render check took ${end - start}ms`);
34        }
35        
36        return !shouldUpdate;
37      });
38    };
39  }
40}
41```
42 
43## 🗄️ Database Performance Patterns
44 
45### Optimized Query Patterns
46```go
47// ✅ CORRECT: Efficient query with proper indexing
48func (h *OrderHandler) GetOrdersWithPagination(c *gin.Context) {
49    page := getIntParam(c, "page", 1)
50    perPage := getIntParam(c, "per_page", 20)
51    status := c.Query("status")
52    
53    // Use indexed columns in WHERE clause
54    query := `
55        SELECT 
56            o.id, o.order_number, o.status, o.total_amount, o.created_at,
57            u.username, t.table_number,
58            COUNT(*) OVER() as total_count
59        FROM orders o
60        LEFT JOIN users u ON o.user_id = u.id
61        LEFT JOIN dining_tables t ON o.table_id = t.id
62        WHERE ($1 = '' OR o.status = $1)
63            AND o.created_at >= CURRENT_DATE - INTERVAL '7 days'
64        ORDER BY o.created_at DESC
65        LIMIT $2 OFFSET $3
66    `
67    
68    offset := (page - 1) * perPage
69    rows, err := h.db.Query(query, status, perPage, offset)
70    // ... handle results
71}
72 
73// ✅ CORRECT: Batch insert for order items
74func (h *OrderHandler) CreateOrderWithItems(c *gin.Context) {
75    tx, err := h.db.Begin()
76    if err != nil {
77        // handle error
78        return
79    }
80    defer tx.Rollback()
81 
82    // Create order
83    var orderID string
84    err = tx.QueryRow(`
85        INSERT INTO orders (customer_name, order_type, status, total_amount)
86        VALUES ($1, $2, $3, $4)
87        RETURNING id
88    `, req.CustomerName, req.OrderType, "pending", req.TotalAmount).Scan(&orderID)
89 
90    // Batch insert order items (much faster than individual inserts)
91    if len(req.Items) > 0 {
92        valueStrings := make([]string, 0, len(req.Items))
93        valueArgs := make([]interface{}, 0, len(req.Items)*4)
94        
95        for i, item := range req.Items {
96            valueStrings = append(valueStrings, fmt.Sprintf("($%d, $%d, $%d, $%d)", 
97                i*4+1, i*4+2, i*4+3, i*4+4))
98            valueArgs = append(valueArgs, orderID, item.ProductID, item.Quantity, item.Price)
99        }
100 
101        stmt := fmt.Sprintf(`
102            INSERT INTO order_items (order_id, product_id, quantity, price)
103            VALUES %s
104        `, strings.Join(valueStrings, ","))
105 
106        _, err = tx.Exec(stmt, valueArgs...)
107        if err != nil {
108            return // Rollback automatically called
109        }
110    }
111 
112    err = tx.Commit()
113    // ... handle success
114}
115```
116 
117### Database Connection Optimization
118```go
119// ✅ CORRECT: Optimized connection pool
120func SetupDatabase() *sql.DB {
121    db, err := sql.Open("postgres", dsn)
122    if err != nil {
123        log.Fatal("Failed to connect to database:", err)
124    }
125 
126    // Performance tuning for POS workload
127    db.SetMaxOpenConns(25)        // Limit concurrent connections
128    db.SetMaxIdleConns(10)        // Keep connections alive
129    db.SetConnMaxLifetime(5 * time.Minute) // Rotate connections
130    db.SetConnMaxIdleTime(2 * time.Minute) // Close idle connections
131 
132    return db
133}
134 
135// ✅ CORRECT: Connection health monitoring
136func (h *Handler) healthCheck(c *gin.Context) {
137    ctx, cancel := context.WithTimeout(c.Request.Context(), 2*time.Second)
138    defer cancel()
139 
140    if err := h.db.PingContext(ctx); err != nil {
141        c.JSON(http.StatusServiceUnavailable, gin.H{
142            "status": "unhealthy",
143            "database": "disconnected",
144        })
145        return
146    }
147 
148    c.JSON(http.StatusOK, gin.H{
149        "status": "healthy",
150        "database": "connected",
151    })
152}
153```
154 
155### Query Optimization Patterns
156```sql
157-- ✅ CORRECT: Strategic indexes for POS workload
158-- Covering index for order listing (includes all needed columns)
159CREATE INDEX CONCURRENTLY idx_orders_status_created_covering 
160ON orders (status, created_at DESC) 
161INCLUDE (id, order_number, total_amount, customer_name);
162 
163-- Partial index for active orders only
164CREATE INDEX CONCURRENTLY idx_orders_active 
165ON orders (created_at DESC) 
166WHERE status IN ('pending', 'confirmed', 'preparing', 'ready');
167 
168-- Composite index for order items lookup
169CREATE INDEX CONCURRENTLY idx_order_items_order_product 
170ON order_items (order_id, product_id);
171 
172-- ✅ CORRECT: Efficient aggregation queries
173-- Get daily sales summary with single query
174SELECT 
175    DATE(created_at) as sales_date,
176    COUNT(*) as order_count,
177    SUM(total_amount) as total_sales,
178    AVG(total_amount) as avg_order_value,
179    COUNT(DISTINCT table_id) as tables_served
180FROM orders 
181WHERE status = 'completed'
182    AND created_at >= CURRENT_DATE - INTERVAL '30 days'
183GROUP BY DATE(created_at)
184ORDER BY sales_date DESC;
185```
186 
187## ⚛️ React Performance Optimization
188 
189### Component Optimization Patterns
190```typescript
191// ✅ CORRECT: Optimized product grid with memoization
192import React, { memo, useMemo, useCallback } from 'react'
193import { FixedSizeGrid } from 'react-window'
194 
195interface ProductGridProps {
196  products: Product[]
197  onProductSelect: (product: Product) => void
198  selectedProducts: string[]
199  searchTerm: string
200}
201 
202export const ProductGrid = memo<ProductGridProps>(({
203  products,
204  onProductSelect,
205  selectedProducts,
206  searchTerm
207}) => {
208  // ✅ CORRECT: Memoize filtered products
209  const filteredProducts = useMemo(() => {
210    if (!searchTerm) return products
211    
212    return products.filter(product =>
213      product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
214      product.description?.toLowerCase().includes(searchTerm.toLowerCase())
215    )
216  }, [products, searchTerm])
217 
218  // ✅ CORRECT: Memoize selected set for O(1) lookup
219  const selectedSet = useMemo(() => 
220    new Set(selectedProducts), [selectedProducts]
221  )
222 
223  // ✅ CORRECT: Stable callback reference
224  const handleProductSelect = useCallback((product: Product) => {
225    onProductSelect(product)
226  }, [onProductSelect])
227 
228  // ✅ CORRECT: Virtual scrolling for large product catalogs
229  const Cell = useCallback(({ columnIndex, rowIndex, style }) => {
230    const index = rowIndex * 3 + columnIndex
231    const product = filteredProducts[index]
232    
233    if (!product) return <div style={style} />
234 
235    return (
236      <div style={style}>
237        <ProductCard
238          product={product}
239          isSelected={selectedSet.has(product.id)}
240          onSelect={handleProductSelect}
241        />
242      </div>
243    )
244  }, [filteredProducts, selectedSet, handleProductSelect])
245 
246  return (
247    <FixedSizeGrid
248      columnCount={3}
249      rowCount={Math.ceil(filteredProducts.length / 3)}
250      columnWidth={300}
251      rowHeight={200}
252      height={600}
253      width={920}
254    >
255      {Cell}
256    </FixedSizeGrid>
257  )
258}, (prevProps, nextProps) => {
259  // ✅ CORRECT: Custom comparison for performance
260  return (
261    prevProps.products === nextProps.products &&
262    prevProps.selectedProducts.length === nextProps.selectedProducts.length &&
263    prevProps.searchTerm === nextProps.searchTerm
264  )
265})
266```
267 
268### State Management Optimization
269```typescript
270// ✅ CORRECT: Optimized cart state with reducer
271import { useReducer, useCallback, useMemo } from 'react'
272 
273interface CartState {
274  items: Map<string, CartItem>
275  lastUpdated: number
276}
277 
278type CartAction =
279  | { type: 'ADD_ITEM'; product: Product; quantity: number }
280  | { type: 'UPDATE_QUANTITY'; productId: string; quantity: number }
281  | { type: 'REMOVE_ITEM'; productId: string }
282  | { type: 'CLEAR' }
283 
284// ✅ CORRECT: Reducer for predictable state updates
285const cartReducer = (state: CartState, action: CartAction): CartState => {
286  const newItems = new Map(state.items)
287  
288  switch (action.type) {
289    case 'ADD_ITEM':
290      const existingItem = newItems.get(action.product.id)
291      newItems.set(action.product.id, {
292        product: action.product,
293        quantity: existingItem ? existingItem.quantity + action.quantity : action.quantity,
294        subtotal: action.product.price * (existingItem ? existingItem.quantity + action.quantity : action.quantity)
295      })
296      break
297      
298    case 'UPDATE_QUANTITY':
299      if (action.quantity <= 0) {
300        newItems.delete(action.productId)
301      } else {
302        const item = newItems.get(action.productId)
303        if (item) {
304          newItems.set(action.productId, {
305            ...item,
306            quantity: action.quantity,
307            subtotal: item.product.price * action.quantity
308          })
309        }
310      }
311      break
312      
313    case 'REMOVE_ITEM':
314      newItems.delete(action.productId)
315      break
316      
317    case 'CLEAR':
318      newItems.clear()
319      break
320      
321    default:
322      return state
323  }
324  
325  return {
326    items: newItems,
327    lastUpdated: Date.now()
328  }
329}
330 
331export const useOptimizedCart = () => {
332  const [state, dispatch] = useReducer(cartReducer, {
333    items: new Map(),
334    lastUpdated: 0
335  })
336 
337  // ✅ CORRECT: Memoized calculations only when items change
338  const calculations = useMemo(() => {
339    const itemsArray = Array.from(state.items.values())
340    return {
341      total: itemsArray.reduce((sum, item) => sum + item.subtotal, 0),
342      itemCount: itemsArray.reduce((count, item) => count + item.quantity, 0),
343      isEmpty: state.items.size === 0,
344      items: itemsArray
345    }
346  }, [state.lastUpdated]) // Only recalculate when cart actually changes
347 
348  // ✅ CORRECT: Stable action creators
349  const actions = useMemo(() => ({
350    addItem: (product: Product, quantity = 1) => 
351      dispatch({ type: 'ADD_ITEM', product, quantity }),
352    updateQuantity: (productId: string, quantity: number) =>
353      dispatch({ type: 'UPDATE_QUANTITY', productId, quantity }),
354    removeItem: (productId: string) =>
355      dispatch({ type: 'REMOVE_ITEM', productId }),
356    clear: () => dispatch({ type: 'CLEAR' })
357  }), [])
358 
359  return { ...calculations, ...actions }
360}
361```
362 
363### Query Optimization with TanStack Query
364```typescript
365// ✅ CORRECT: Optimized API queries with caching strategy
366import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'
367 
368// Smart caching for products (rarely change)
369export const useProducts = (categoryId?: string) => {
370  return useQuery({
371    queryKey: ['products', categoryId],
372    queryFn: () => apiClient.getProducts({ category_id: categoryId }),
373    staleTime: 10 * 60 * 1000, // 10 minutes
374    gcTime: 30 * 60 * 1000,    // 30 minutes
375    select: (data) => data.data || [],
376    placeholderData: (previousData) => previousData, // Keep UI stable
377  })
378}
379 
380// Aggressive caching for categories (change infrequently)
381export const useCategories = () => {
382  return useQuery({
383    queryKey: ['categories'],
384    queryFn: () => apiClient.getCategories(),
385    staleTime: 60 * 60 * 1000, // 1 hour
386    gcTime: 24 * 60 * 60 * 1000, // 24 hours
387  })
388}
389 
390// Real-time polling for kitchen orders
391export const useKitchenOrders = () => {
392  return useQuery({
393    queryKey: ['kitchen-orders'],
394    queryFn: () => apiClient.getKitchenOrders(),
395    refetchInterval: 5000, // 5 seconds
396    staleTime: 0, // Always consider stale for real-time updates
397  })
398}
399 
400// ✅ CORRECT: Infinite scrolling for order history
401export const useOrderHistory = () => {
402  return useInfiniteQuery({
403    queryKey: ['order-history'],
404    queryFn: ({ pageParam = 1 }) => 
405      apiClient.getOrders({ page: pageParam, per_page: 50 }),
406    getNextPageParam: (lastPage, allPages) => {
407      const hasMore = lastPage.data.length === 50
408      return hasMore ? allPages.length + 1 : undefined
409    },
410    staleTime: 2 * 60 * 1000, // 2 minutes
411  })
412}
413 
414// ✅ CORRECT: Optimistic mutations with rollback
415export const useUpdateOrderStatus = () => {
416  const queryClient = useQueryClient()
417 
418  return useMutation({
419    mutationFn: ({ orderId, status }: { orderId: string; status: string }) =>
420      apiClient.updateOrderStatus(orderId, status),
421      
422    onMutate: async ({ orderId, status }) => {
423      // Cancel outgoing refetches
424      await queryClient.cancelQueries({ queryKey: ['kitchen-orders'] })
425      
426      // Snapshot previous value
427      const previousOrders = queryClient.getQueryData(['kitchen-orders'])
428      
429      // Optimistically update
430      queryClient.setQueryData(['kitchen-orders'], (old: any) => ({
431        ...old,
432        data: old?.data?.map((order: any) =>
433          order.id === orderId ? { ...order, status } : order
434        )
435      }))
436      
437      return { previousOrders, orderId, status }
438    },
439    
440    onError: (err, variables, context) => {
441      // Rollback on error
442      if (context?.previousOrders) {
443        queryClient.setQueryData(['kitchen-orders'], context.previousOrders)
444      }
445    },
446    
447    onSettled: () => {
448      // Ensure consistency
449      queryClient.invalidateQueries({ queryKey: ['kitchen-orders'] })
450    },
451  })
452}
453```
454 
455## 🌐 API Performance Patterns
456 
457### Response Optimization
458```go
459// ✅ CORRECT: Efficient response handling
460type APIResponse struct {
461    Success bool        `json:"success"`
462    Message string      `json:"message"`
463    Data    interface{} `json:"data,omitempty"`
464    Meta    *MetaInfo   `json:"meta,omitempty"`
465    Error   *string     `json:"error,omitempty"`
466}
467 
468type MetaInfo struct {
469    CurrentPage int `json:"current_page,omitempty"`
470    PerPage     int `json:"per_page,omitempty"`
471    Total       int `json:"total,omitempty"`
472    TotalPages  int `json:"total_pages,omitempty"`
473}
474 
475// Compressed response middleware
476func CompressionMiddleware() gin.HandlerFunc {
477    return gin.HandlerFunc(func(c *gin.Context) {
478        // Enable gzip compression for responses > 1KB
479        c.Header("Content-Encoding", "gzip")
480        c.Next()
481    })
482}
483 
484// ✅ CORRECT: Response caching for static data
485func CacheMiddleware(duration time.Duration) gin.HandlerFunc {
486    return gin.HandlerFunc(func(c *gin.Context) {
487        // Cache headers for categories, products
488        if c.Request.Method == "GET" {
489            c.Header("Cache-Control", fmt.Sprintf("max-age=%d", int(duration.Seconds())))
490        }
491        c.Next()
492    })
493}
494```
495 
496### Concurrent Request Handling
497```go
498// ✅ CORRECT: Concurrent data fetching
499func (h *OrderHandler) GetOrderWithDetails(c *gin.Context) {
500    orderID := c.Param("id")
501    
502    // Use goroutines for parallel data fetching
503    var (
504        order     *models.Order
505        items     []models.OrderItem
506        payments  []models.Payment
507        orderErr  error
508        itemsErr  error
509        payErr    error
510        wg        sync.WaitGroup
511    )
512    
513    // Fetch order details concurrently
514    wg.Add(3)
515    
516    go func() {
517        defer wg.Done()
518        order, orderErr = h.getOrderByID(orderID)
519    }()
520    
521    go func() {
522        defer wg.Done()
523        items, itemsErr = h.getOrderItems(orderID)
524    }()
525    
526    go func() {
527        defer wg.Done()
528        payments, payErr = h.getOrderPayments(orderID)
529    }()
530    
531    wg.Wait()
532    
533    // Check for errors
534    if orderErr != nil || itemsErr != nil || payErr != nil {
535        c.JSON(http.StatusInternalServerError, models.APIResponse{
536            Success: false,
537            Message: "Failed to fetch order details",
538        })
539        return
540    }
541    
542    // Combine results
543    orderWithDetails := models.OrderWithDetails{
544        Order:    order,
545        Items:    items,
546        Payments: payments,
547    }
548    
549    c.JSON(http.StatusOK, models.APIResponse{
550        Success: true,
551        Data:    orderWithDetails,
552    })
553}
554```
555 
556### Request Rate Limiting
557```go
558// ✅ CORRECT: Rate limiting to prevent abuse
559import "golang.org/x/time/rate"
560 
561type RateLimiter struct {
562    visitors map[string]*rate.Limiter
563    mu       sync.RWMutex
564    rate     rate.Limit
565    burst    int
566}
567 
568func NewRateLimiter(r rate.Limit, b int) *RateLimiter {
569    return &RateLimiter{
570        visitors: make(map[string]*rate.Limiter),
571        rate:     r,
572        burst:    b,
573    }
574}
575 
576func (rl *RateLimiter) getLimiter(ip string) *rate.Limiter {
577    rl.mu.Lock()
578    defer rl.mu.Unlock()
579    
580    limiter, exists := rl.visitors[ip]
581    if !exists {
582        limiter = rate.NewLimiter(rl.rate, rl.burst)
583        rl.visitors[ip] = limiter
584    }
585    
586    return limiter
587}
588 
589func (rl *RateLimiter) RateLimitMiddleware() gin.HandlerFunc {
590    return func(c *gin.Context) {
591        limiter := rl.getLimiter(c.ClientIP())
592        
593        if !limiter.Allow() {
594            c.JSON(http.StatusTooManyRequests, models.APIResponse{
595                Success: false,
596                Message: "Rate limit exceeded",
597                Error:   stringPtr("rate_limit_exceeded"),
598            })
599            c.Abort()
600            return
601        }
602        
603        c.Next()
604    }
605}
606```
607 
608## 📊 Performance Monitoring & Profiling
609 
610### Frontend Performance Monitoring
611```typescript
612// ✅ CORRECT: Performance monitoring utilities
613class POSPerformanceMonitor {
614  private static metrics: Map<string, number[]> = new Map()
615 
616  // Measure API response times
617  static async measureAPI<T>(
618    operation: string, 
619    apiCall: () => Promise<T>
620  ): Promise<T> {
621    const start = performance.now()
622    
623    try {
624      const result = await apiCall()
625      const duration = performance.now() - start
626      
627      this.recordMetric(operation, duration)
628      
629      if (duration > 1000) {
630        console.warn(`Slow API call: ${operation} took ${duration.toFixed(2)}ms`)
631      }
632      
633      return result
634    } catch (error) {
635      const duration = performance.now() - start
636      console.error(`Failed API call: ${operation} failed after ${duration.toFixed(2)}ms`)
637      throw error
638    }
639  }
640 
641  // Monitor component render times
642  static measureRender(componentName: string) {
643    return function<T extends Record<string, any>>(
644      Component: React.ComponentType<T>
645    ): React.ComponentType<T> {
646      return React.memo(Component, (prevProps, nextProps) => {
647        const start = performance.now()
648        const shouldUpdate = !shallowEqual(prevProps, nextProps)
649        const end = performance.now()
650        
651        POSPerformanceMonitor.recordMetric(`${componentName}_render_check`, end - start)
652        
653        return !shouldUpdate
654      })
655    }
656  }
657 
658  private static recordMetric(name: string, value: number) {
659    const existing = this.metrics.get(name) || []
660    existing.push(value)
661    
662    // Keep only last 100 measurements
663    if (existing.length > 100) {
664      existing.shift()
665    }
666    
667    this.metrics.set(name, existing)
668  }
669 
670  // Get performance summary
671  static getPerformanceSummary() {
672    const summary: Record<string, any> = {}
673    
674    this.metrics.forEach((values, name) => {
675      const avg = values.reduce((sum, val) => sum + val, 0) / values.length
676      const max = Math.max(...values)
677      const min = Math.min(...values)
678      
679      summary[name] = { avg, max, min, count: values.length }
680    })
681    
682    return summary
683  }
684}
685 
686// Usage in components
687export const ProductCard = POSPerformanceMonitor.measureRender('ProductCard')(
688  ({ product, onSelect }) => {
689    // Component implementation
690  }
691)
692```
693 
694### Backend Performance Profiling
695```go
696// ✅ CORRECT: Request timing middleware
697func TimingMiddleware() gin.HandlerFunc {
698    return gin.HandlerFunc(func(c *gin.Context) {
699        start := time.Now()
700        
701        // Process request
702        c.Next()
703        
704        // Calculate duration
705        duration := time.Since(start)
706        
707        // Log slow requests
708        if duration > 500*time.Millisecond {
709            log.Printf("SLOW REQUEST: %s %s took %v", 
710                c.Request.Method, c.Request.URL.Path, duration)
711        }
712        
713        // Add timing header
714        c.Header("X-Response-Time", duration.String())
715        
716        // Metrics collection (integrate with your monitoring system)
717        collectMetric(fmt.Sprintf("request_duration_%s", c.Request.URL.Path), duration)
718    })
719}
720 
721// Database query profiling
722func (h *Handler) profileQuery(query string, args ...interface{}) (*sql.Rows, error) {
723    start := time.Now()
724    rows, err := h.db.Query(query, args...)
725    duration := time.Since(start)
726    
727    if duration > 100*time.Millisecond {
728        log.Printf("SLOW QUERY: %s took %v", query, duration)
729    }
730    
731    return rows, err
732}
733```
734 
735## 🎯 Performance Optimization Checklist
736 
737### Database Optimization
738- [ ] **Indexes Created:** All frequently queried columns have appropriate indexes
739- [ ] **Query Analysis:** EXPLAIN ANALYZE used to verify query performance
740- [ ] **Connection Pooling:** Properly configured pool sizes and timeouts
741- [ ] **Batch Operations:** Multiple inserts/updates use batch processing
742- [ ] **Pagination:** Large result sets use LIMIT/OFFSET or cursor pagination
743 
744### React Optimization  
745- [ ] **Component Memoization:** Heavy components use React.memo with custom comparison
746- [ ] **State Structure:** State is normalized and minimizes re-renders
747- [ ] **List Rendering:** Large lists use virtualization or pagination
748- [ ] **Bundle Size:** Code splitting implemented for large components
749- [ ] **Image Optimization:** Images are properly sized and compressed
750 
751### API Optimization
752- [ ] **Response Caching:** Static data has appropriate cache headers
753- [ ] **Compression:** Responses are gzipped for large payloads
754- [ ] **Rate Limiting:** API endpoints protected from abuse
755- [ ] **Concurrent Processing:** I/O operations are handled concurrently
756- [ ] **Error Handling:** Timeouts and circuit breakers implemented
757 
758### Development Tools
759```bash
760# Performance testing commands
761npm run build:analyze    # Bundle size analysis
762npm run lighthouse      # Web performance audit
763go tool pprof           # Go profiling
764```
765 
766### Production Monitoring
767- **APM Integration:** Use tools like New Relic, DataDog, or Sentry
768- **Database Monitoring:** Track slow queries and connection pool usage
769- **Real User Monitoring:** Track actual user experience metrics
770- **Alert Thresholds:** Set up alerts for performance degradation
771 
772## 🚀 Performance-First Development Mindset
773 
774### 1. Performance-Driven Architecture Decisions
775```typescript
776// ✅ PERFORMANCE-FIRST: Architecture decisions with performance implications
777class PerformanceFirstArchitecture {
778  // Performance-aware component design
779  static createPerformantComponent<TProps>(
780    config: PerformanceComponentConfig<TProps>
781  ): React.FC<TProps> {
782    // Intelligent memoization based on performance profile
783    const memoStrategy = config.performance_profile === 'high_frequency' 
784      ? 'shallow_comparison'  // Fast for frequent updates
785      : config.performance_profile === 'complex_data'
786      ? 'deep_comparison'     // Thorough for complex objects
787      : 'custom_comparison'   // Custom logic for specific needs
788 
789    return React.memo((props: TProps) => {
790      // Performance monitoring built-in
791      const renderStart = performance.now()
792      
793      // Lazy load heavy dependencies
794      const HeavyComponent = useMemo(() => {
795        if (config.requires_heavy_component) {
796          return React.lazy(() => import(config.heavy_component_path))
797        }
798        return null
799      }, [])
800 
801      // Efficient state management
802      const optimizedState = usePerformantState(config.state_config)
803      
804      // Performance budgets enforcement
805      const result = config.render(props, optimizedState)
806      
807      const renderTime = performance.now() - renderStart
808      if (renderTime > config.performance_budget) {
809        console.warn(`Component ${config.name} exceeded performance budget: ${renderTime}ms > ${config.performance_budget}ms`)
810        PerformanceMonitor.recordSlowRender(config.name, renderTime, props)
811      }
812      
813      return result
814    }, this.createMemoComparison(memoStrategy))
815  }
816 
817  // Performance-aware API design
818  static createPerformantAPI<TRequest, TResponse>(
819    config: PerformanceAPIConfig<TRequest, TResponse>
820  ): PerformantAPI<TRequest, TResponse> {
821    return {
822      execute: async (request: TRequest): Promise<TResponse> => {
823        const executionStart = performance.now()
824        
825        // Request optimization
826        const optimizedRequest = await this.optimizeRequest(request, config)
827        
828        // Concurrent execution for independent operations
829        const [
830          validationResult,
831          cacheResult,
832          authResult
833        ] = await Promise.all([
834          config.validate ? this.validateRequest(optimizedRequest) : Promise.resolve(true),
835          config.cacheable ? this.checkCache(optimizedRequest) : Promise.resolve(null),
836          config.requires_auth ? this.validateAuth(optimizedRequest) : Promise.resolve(true)
837        ])
838 
839        if (cacheResult) {
840          return cacheResult // Early return from cache
841        }
842 
843        // Execute business logic with timeout
844        const result = await Promise.race([
845          config.execute(optimizedRequest),
846          this.createTimeout(config.timeout || 5000)
847        ])
848 
849        const executionTime = performance.now() - executionStart
850        
851        // Performance analysis and alerting
852        if (executionTime > config.performance_threshold) {
853          PerformanceMonitor.recordSlowAPI(config.endpoint, executionTime, {
854            request_size: JSON.stringify(request).length,
855            response_size: JSON.stringify(result).length,
856            cache_hit: false
857          })
858        }
859 
860        return result
861      }
862    }
863  }
864}
865```
866 
867### 2. Real-Time Performance Monitoring
868```typescript
869// ✅ REAL-TIME: Advanced performance monitoring with business intelligence
870class BusinessPerformanceMonitor {
871  // Real-time performance dashboard
872  static createRealtimeMonitor(): RealtimePerformanceMonitor {
873    return {
874      // Business-critical performance metrics
875      trackBusinessMetrics: () => {
876        return {
877          order_creation_speed: this.measureOrderCreationSpeed(),
878          payment_processing_speed: this.measurePaymentSpeed(),
879          kitchen_efficiency: this.measureKitchenThroughput(),
880          customer_wait_times: this.measureCustomerExperience(),
881          
882          // Advanced metrics
883          revenue_per_second: this.calculateRevenueVelocity(),
884          table_turnover_rate: this.calculateTableEfficiency(),
885          staff_productivity: this.calculateStaffEfficiency(),
886          system_reliability: this.calculateUptimeScore()
887        }
888      },
889 
890      // Predictive performance analysis
891      predictPerformanceIssues: async (): Promise<PredictiveAlert[]> => {
892        const currentMetrics = await this.gatherCurrentMetrics()
893        const historicalPatterns = await this.getHistoricalPatterns()
894        
895        const predictions: PredictiveAlert[] = []
896 
897        // Database performance prediction
898        if (currentMetrics.database.connection_count > historicalPatterns.database.avg_connections * 0.8) {
899          predictions.push({
900            type: 'database_capacity',
901            severity: 'warning',
902            predicted_impact: 'Order processing may slow down in 15-30 minutes',
903            recommendation: 'Scale database connections or implement connection pooling',
904            confidence: this.calculatePredictionConfidence(currentMetrics.database),
905            business_impact: await this.calculateBusinessImpact('database_slowdown')
906          })
907        }
908 
909        // Kitchen bottleneck prediction
910        const kitchenLoad = await this.calculateKitchenLoad()
911        if (kitchenLoad.projected_queue_time > 20) { // minutes
912          predictions.push({
913            type: 'kitchen_bottleneck',
914            severity: 'high',
915            predicted_impact: 'Customer complaints likely in next 30 minutes',
916            recommendation: 'Alert kitchen manager to optimize workflow or add staff',
917            confidence: this.calculateKitchenLoadPrediction(kitchenLoad),
918            business_impact: await this.calculateBusinessImpact('customer_satisfaction_drop')
919          })
920        }
921 
922        return predictions
923      },
924 
925      // Performance optimization recommendations
926      generateOptimizationRecommendations: async (): Promise<OptimizationRecommendation[]> => {
927        const performanceAnalysis = await this.analyzeSystemPerformance()
928        const recommendations: OptimizationRecommendation[] = []
929 
930        // Database optimization opportunities
931        if (performanceAnalysis.database.slow_queries.length > 0) {
932          recommendations.push({
933            category: 'database',
934            priority: 'high',
935            title: 'Optimize Slow Database Queries',
936            description: `${performanceAnalysis.database.slow_queries.length} queries taking > 100ms`,
937            implementation: {
938              effort: 'medium',
939              estimated_time: '2-4 hours',
940              expected_improvement: '20-40% faster order processing',
941              breaking_changes: false
942            },
943            specific_actions: [
944              'Add index on orders(created_at, status)',
945              'Optimize JOIN query in getOrdersWithItems',
946              'Implement query result caching for product catalog'
947            ]
948          })
949        }
950 
951        // Frontend performance opportunities
952        if (performanceAnalysis.frontend.bundle_size > 2048) { // KB
953          recommendations.push({
954            category: 'frontend',
955            priority: 'medium',
956            title: 'Reduce Bundle Size',
957            description: `Bundle size is ${performanceAnalysis.frontend.bundle_size}KB, affecting load times`,
958            implementation: {
959              effort: 'medium',
960              estimated_time: '4-6 hours',
961              expected_improvement: '30% faster initial page load',
962              breaking_changes: false
963            },
964            specific_actions: [
965              'Implement code splitting for role-specific interfaces',
966              'Lazy load non-critical components',
967              'Tree shake unused dependencies',
968              'Optimize images and assets'
969            ]
970          })
971        }
972 
973        return recommendations
974      }
975    }
976  }
977 
978  // Performance regression detection
979  static createRegressionDetector(): PerformanceRegressionDetector {
980    return {
981      detectRegressions: async (deployment: DeploymentMetrics): Promise<RegressionAnalysis> => {
982        const baselineMetrics = await this.getBaselineMetrics()
983        const regressions: PerformanceRegression[] = []
984 
985        // Response time regression
986        const responseTimeIncrease = (deployment.avg_response_time - baselineMetrics.avg_response_time) / baselineMetrics.avg_response_time
987        if (responseTimeIncrease > 0.1) { // 10% increase
988          regressions.push({
989            metric: 'response_time',
990            current_value: deployment.avg_response_time,
991            baseline_value: baselineMetrics.avg_response_time,
992            regression_percentage: responseTimeIncrease * 100,
993            business_impact: await this.calculateResponseTimeImpact(responseTimeIncrease),
994            severity: responseTimeIncrease > 0.25 ? 'critical' : 'warning'
995          })
996        }
997 
998        // Database query performance regression
999        const queryPerformanceRegression = this.analyzeQueryRegression(deployment.database_metrics, baselineMetrics.database_metrics)
1000        if (queryPerformanceRegression.has_regression) {
1001          regressions.push({
1002            metric: 'database_performance',
1003            current_value: queryPerformanceRegression.current_avg_time,
1004            baseline_value: queryPerformanceRegression.baseline_avg_time,
1005            regression_percentage: queryPerformanceRegression.percentage_increase,
1006            affected_queries: queryPerformanceRegression.affected_queries,
1007            business_impact: await this.calculateDatabaseImpact(queryPerformanceRegression),
1008            severity: queryPerformanceRegression.percentage_increase > 50 ? 'critical' : 'warning'
1009          })
1010        }
1011 
1012        return {
1013          has_regressions: regressions.length > 0,
1014          regressions,
1015          overall_performance_score: this.calculatePerformanceScore(deployment),
1016          recommendation: this.generateRegressionRecommendation(regressions)
1017        }
1018      },
1019 
1020      // Automatic rollback triggers
1021      shouldTriggerRollback: (regressions: PerformanceRegression[]): RollbackDecision => {
1022        const criticalRegressions = regressions.filter(r => r.severity === 'critical')
1023        const highBusinessImpact = regressions.some(r => r.business_impact.revenue_impact > 1000) // $1000+ impact
1024        
1025        return {
1026          should_rollback: criticalRegressions.length > 0 || highBusinessImpact,
1027          reason: criticalRegressions.length > 0 
1028            ? 'Critical performance regression detected'
1029            : highBusinessImpact 
1030            ? 'High business impact performance regression'
1031            : 'Performance within acceptable bounds',
1032          confidence: this.calculateRollbackConfidence(regressions),
1033          estimated_impact_if_not_rolled_back: this.estimateOngoingImpact(regressions)
1034        }
1035      }
1036    }
1037  }
1038}
1039```
1040 
1041### 3. Automated Performance Optimization
1042```typescript
1043// ✅ AUTOMATION: Self-optimizing system with ML-powered insights
1044class AutomatedPerformanceOptimizer {
1045  // Machine learning performance optimizer
1046  static createMLOptimizer(): MLPerformanceOptimizer {
1047    return {
1048      // Intelligent caching decisions
1049      optimizeCachingStrategy: async (): Promise<CacheOptimization> => {
1050        const accessPatterns = await this.analyzeAccessPatterns()
1051        const cachePerformance = await this.analyzeCacheHitRates()
1052        
1053        return {
1054          recommended_cache_sizes: {
1055            products: this.calculateOptimalCacheSize(accessPatterns.products),
1056            orders: this.calculateOptimalCacheSize(accessPatterns.orders),
1057            users: this.calculateOptimalCacheSize(accessPatterns.users)
1058          },
1059          
1060          cache_eviction_policies: {
1061            products: 'LRU', // Least recently used for menu items
1062            orders: 'TTL',   // Time-based for order data
1063            users: 'LFU'     // Least frequently used for user profiles
1064          },
1065          
1066          dynamic_ttl_recommendations: {
1067            products: this.calculateDynamicTTL(accessPatterns.products),
1068            categories: this.calculateDynamicTTL(accessPatterns.categories),
1069            settings: this.calculateDynamicTTL(accessPatterns.settings)
1070          }
1071        }
1072      },
1073 
1074      // Database query optimization
1075      optimizeDatabaseQueries: async (): Promise<QueryOptimization> => {
1076        const queryPatterns = await this.analyzeQueryPatterns()
1077        const indexUsage = await this.analyzeIndexUsage()
1078        
1079        return {
1080          recommended_indexes: [
1081            ...this.findMissingIndexes(queryPatterns),
1082            ...this.optimizeExistingIndexes(indexUsage)
1083          ],
1084          
1085          query_rewrites: [
1086            ...this.identifySuboptimalQueries(queryPatterns),
1087            ...this.suggestJoinOptimizations(queryPatterns)
1088          ],
1089          
1090          partitioning_recommendations: this.analyzePartitioningOpportunities(queryPatterns),
1091          
1092          connection_pool_optimization: {
1093            optimal_pool_size: this.calculateOptimalPoolSize(queryPatterns),
1094            connection_timeout: this.calculateOptimalTimeout(queryPatterns),
1095            idle_timeout: this.calculateOptimalIdleTimeout(queryPatterns)
1096          }
1097        }
1098      },
1099 
1100      // Frontend performance optimization
1101      optimizeFrontendPerformance: async (): Promise<FrontendOptimization> => {
1102        const userInteractions = await this.analyzeUserInteractions()
1103        const componentUsage = await this.analyzeComponentUsage()
1104        
1105        return {
1106          code_splitting_recommendations: {
1107            route_based: this.recommendRouteSplitting(userInteractions),
1108            component_based: this.recommendComponentSplitting(componentUsage),
1109            vendor_splitting: this.recommendVendorSplitting()
1110          },
1111          
1112          lazy_loading_opportunities: [
1113            ...this.identifyLazyLoadComponents(componentUsage),
1114            ...this.identifyLazyLoadImages(userInteractions),
1115            ...this.identifyLazyLoadData(userInteractions)
1116          ],
1117          
1118          preloading_strategy: {
1119            critical_resources: this.identifyCriticalResources(userInteractions),
1120            prefetch_candidates: this.identifyPrefetchCandidates(userInteractions),
1121            preconnect_domains: this.identifyPreconnectDomains()
1122          }
1123        }
1124      }
1125    }
1126  }
1127 
1128  // Continuous performance improvement
1129  static createContinuousImprovement(): ContinuousPerformanceImprovement {
1130    return {
1131      // Weekly performance reviews
1132      weeklyPerformanceReview: async (): Promise<WeeklyPerformanceReport> => {
1133        const weeklyMetrics = await this.gatherWeeklyMetrics()
1134        const improvements = await this.identifyImprovements()
1135        const regressions = await this.identifyRegressions()
1136        
1137        return {
1138          overall_trend: this.calculatePerformanceTrend(weeklyMetrics),
1139          key_improvements: improvements,
1140          performance_regressions: regressions,
1141          business_impact: {
1142            revenue_impact: this.calculateRevenueImpact(weeklyMetrics),
1143            customer_satisfaction: this.calculateSatisfactionImpact(weeklyMetrics),
1144            operational_efficiency: this.calculateEfficiencyImpact(weeklyMetrics)
1145          },
1146          recommended_actions: this.generateWeeklyRecommendations(weeklyMetrics)
1147        }
1148      },
1149 
1150      // Performance goal setting and tracking
1151      setPerformanceGoals: (goals: PerformanceGoals): PerformanceTracker => {
1152        return {
1153          trackProgress: async (): Promise<GoalProgress> => {
1154            const currentMetrics = await this.getCurrentMetrics()
1155            
1156            return {
1157              response_time: {
1158                goal: goals.response_time,
1159                current: currentMetrics.avg_response_time,
1160                progress: this.calculateProgress(goals.response_time, currentMetrics.avg_response_time),
1161                trend: this.calculateTrend(currentMetrics.response_time_history)
1162              },
1163              
1164              throughput: {
1165                goal: goals.throughput,
1166                current: currentMetrics.requests_per_second,
1167                progress: this.calculateProgress(goals.throughput, currentMetrics.requests_per_second),
1168                trend: this.calculateTrend(currentMetrics.throughput_history)
1169              },
1170              
1171              error_rate: {
1172                goal: goals.error_rate,
1173                current: currentMetrics.error_rate,
1174                progress: this.calculateProgress(goals.error_rate, currentMetrics.error_rate),
1175                trend: this.calculateTrend(currentMetrics.error_rate_history)
1176              }
1177            }
1178          },
1179 
1180          generateImprovementPlan: async (): Promise<ImprovementPlan> => {
1181            const progress = await this.trackProgress()
1182            const gaps = this.identifyPerformanceGaps(progress)
1183            
1184            return {
1185              priority_actions: this.prioritizeImprovements(gaps),
1186              timeline: this.createImprovementTimeline(gaps),
1187              resource_requirements: this.calculateResourceNeeds(gaps),
1188              expected_outcomes: this.predictImprovementOutcomes(gaps)
1189            }
1190          }
1191        }
1192      }
1193    }
1194  }
1195}
1196```
1197 
1198### Advanced Performance Development Commands
1199```bash
1200# Performance monitoring
1201npm run perf:monitor           # Real-time performance monitoring
1202npm run perf:analyze          # Comprehensive performance analysis
1203npm run perf:regression       # Check for performance regressions
1204npm run perf:optimize         # Run automated optimizations
1205 
1206# Performance testing
1207npm run perf:load-test        # Load testing with realistic scenarios
1208npm run perf:stress-test      # Stress testing to find breaking points
1209npm run perf:benchmark        # Benchmark critical operations
1210npm run perf:profile          # Profile CPU and memory usage
1211 
1212# Performance budgets
1213npm run perf:budget-check     # Validate performance budgets
1214npm run perf:bundle-analyze   # Analyze bundle size and composition
1215npm run perf:lighthouse       # Run Lighthouse performance audit
1216npm run perf:vitals           # Check Core Web Vitals
1217 
1218# Backend performance
1219go run perf:database          # Database performance analysis
1220go run perf:api               # API endpoint performance testing
1221go run perf:memory            # Memory usage profiling
1222go run perf:cpu               # CPU usage profiling
1223```