Add a ne model and card design across pages

frontend/src/styles/colors.d.ts

@@ -0,0 +1,131 @@
+export interface ColorScale {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+
+export interface StatusColorConfig {
+  primary: string;
+  light: string;
+  dark: string;
+}
+
+export interface BaseColors {
+  primary: ColorScale;
+  secondary: ColorScale;
+  success: ColorScale;
+  warning: ColorScale;
+  error: ColorScale;
+  info: ColorScale;
+  neutral: ColorScale;
+}
+
+export interface BakeryColors {
+  [key: string]: string;
+}
+
+export interface StatusColors {
+  pending: StatusColorConfig;
+  inProgress: StatusColorConfig;
+  completed: StatusColorConfig;
+  cancelled: StatusColorConfig;
+  normal: StatusColorConfig;
+  low: StatusColorConfig;
+  out: StatusColorConfig;
+  expired: StatusColorConfig;
+  approved: StatusColorConfig;
+  inTransit: StatusColorConfig;
+  delivered: StatusColorConfig;
+  bread: StatusColorConfig;
+  pastry: StatusColorConfig;
+  cake: StatusColorConfig;
+  cookie: StatusColorConfig;
+  other: StatusColorConfig;
+}
+
+export interface ChartColors {
+  [key: string]: string;
+}
+
+export interface ThemeColors {
+  bg: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    quaternary: string;
+    overlay: string;
+    modalBackdrop: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    quaternary: string;
+    inverse: string;
+    muted: string;
+    disabled: string;
+  };
+  border: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    focus: string;
+    error: string;
+    success: string;
+  };
+  surface: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    raised: string;
+    overlay: string;
+  };
+  input: {
+    bg: string;
+    border: string;
+    borderFocus: string;
+    borderError: string;
+    placeholder: string;
+  };
+  nav: {
+    bg: string;
+    border: string;
+    itemHover: string;
+    itemActive: string;
+  };
+  card: {
+    bg: string;
+    border: string;
+    shadow: string;
+  };
+}
+
+declare const baseColors: BaseColors;
+declare const bakeryColors: BakeryColors;
+declare const statusColors: StatusColors;
+declare const chartColors: ChartColors;
+declare const lightTheme: ThemeColors;
+declare const darkTheme: ThemeColors;
+declare const tailwindColorConfig: any;
+declare const generateCSSVariables: (theme?: string) => { [key: string]: string };
+
+declare const _default: {
+  baseColors: BaseColors;
+  bakeryColors: BakeryColors;
+  statusColors: StatusColors;
+  chartColors: ChartColors;
+  lightTheme: ThemeColors;
+  darkTheme: ThemeColors;
+  tailwindColorConfig: any;
+  generateCSSVariables: (theme?: string) => { [key: string]: string };
+};
+
+export { baseColors, bakeryColors, statusColors, chartColors, lightTheme, darkTheme, tailwindColorConfig, generateCSSVariables };
+export default _default;

frontend/src/styles/colors.js

@@ -123,6 +123,94 @@ export const bakeryColors = {
   cream: '#fffdd0',
 };
 
+// Status Colors for Cards and Components
+export const statusColors = {
+  // Order/Production Statuses
+  pending: {
+    primary: '#f59e0b',
+    light: '#fef3c7',
+    dark: '#d97706',
+  },
+  inProgress: {
+    primary: '#3b82f6',
+    light: '#dbeafe',
+    dark: '#2563eb',
+  },
+  completed: {
+    primary: '#10b981',
+    light: '#d1fae5',
+    dark: '#059669',
+  },
+  cancelled: {
+    primary: '#ef4444',
+    light: '#fee2e2',
+    dark: '#dc2626',
+  },
+  // Inventory Statuses
+  normal: {
+    primary: '#10b981',
+    light: '#d1fae5',
+    dark: '#059669',
+  },
+  low: {
+    primary: '#f59e0b',
+    light: '#fef3c7',
+    dark: '#d97706',
+  },
+  out: {
+    primary: '#ef4444',
+    light: '#fee2e2',
+    dark: '#dc2626',
+  },
+  expired: {
+    primary: '#ef4444',
+    light: '#fee2e2',
+    dark: '#dc2626',
+  },
+  // Purchase Order Statuses
+  approved: {
+    primary: '#3b82f6',
+    light: '#dbeafe',
+    dark: '#2563eb',
+  },
+  inTransit: {
+    primary: '#8b5cf6',
+    light: '#ede9fe',
+    dark: '#7c3aed',
+  },
+  delivered: {
+    primary: '#10b981',
+    light: '#d1fae5',
+    dark: '#059669',
+  },
+  // Recipe Categories
+  bread: {
+    primary: '#8b5cf6',
+    light: '#ede9fe',
+    dark: '#7c3aed',
+  },
+  pastry: {
+    primary: '#f59e0b',
+    light: '#fef3c7',
+    dark: '#d97706',
+  },
+  cake: {
+    primary: '#ef4444',
+    light: '#fee2e2',
+    dark: '#dc2626',
+  },
+  cookie: {
+    primary: '#3b82f6',
+    light: '#dbeafe',
+    dark: '#2563eb',
+  },
+  other: {
+    primary: '#6b7280',
+    light: '#f3f4f6',
+    dark: '#4b5563',
+  },
+};
+
 // Chart Colors (Colorblind-Safe Data Visualization)
 export const chartColors = {
   primary: '#d97706',    // Orange
@@ -313,6 +401,7 @@ export const generateCSSVariables = (theme = 'light') => {
 export default {
   baseColors,
   bakeryColors,
+  statusColors,
   chartColors,
   lightTheme,
   darkTheme,