pharmacy-erp 1.0.0

package/frontend/src/store/app-store.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AppState {
+  sidebarOpen: boolean;
+  sidebarCollapsed: boolean;
+  currentBranch: string;
+  theme: 'light' | 'dark';
+  locale: 'en' | 'ar';
+  density: 'compact' | 'comfortable' | 'touch';
+  currency: string;
+  toggleSidebar: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  setLocale: (locale: 'en' | 'ar') => void;
+  setCurrency: (currency: string) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      sidebarOpen: true,
+      sidebarCollapsed: false,
+      currentBranch: 'Main Branch (Riyadh)',
+      theme: 'light',
+      locale: 'en',
+      density: 'comfortable',
+      currency: 'SDG',
+      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+      setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+      setTheme: (theme) => set({ theme }),
+      setLocale: (locale) => set({ locale }),
+      setCurrency: (currency) => set({ currency }),
+    }),
+    { name: 'app-storage' }
+  )
+);

package/frontend/src/store/auth-store.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import { api } from '@/lib/api';
+
+interface User {
+  id: string;
+  email: string;
+  full_name: string;
+  full_name_ar?: string;
+  role: string;
+  is_active: boolean;
+}
+
+interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  login: (credentials: { email: string; password: string; remember_me?: boolean }) => Promise<void>;
+  logout: () => Promise<void>;
+  checkAuth: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  isAuthenticated: false,
+  isLoading: false,
+  error: null,
+  login: async (credentials) => {
+    set({ isLoading: true, error: null });
+    try {
+      const user = await api.login(credentials) as User;
+      set({ user, isAuthenticated: true, isLoading: false });
+    } catch (e: any) {
+      set({ isLoading: false, error: e.message || 'Login failed' });
+      throw e;
+    }
+  },
+  logout: async () => {
+    try {
+      await api.logout();
+    } catch {} 
+    set({ user: null, isAuthenticated: false });
+  },
+  checkAuth: async () => {
+    try {
+      const user = await api.getMe() as User;
+      set({ user, isAuthenticated: true });
+    } catch {
+      set({ user: null, isAuthenticated: false });
+    }
+  },
+}));

package/frontend/src/store/payment-methods-store.ts

@@ -0,0 +1,144 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface PaymentMethod {
+  id: string;
+  name: string;
+  type: 'cash' | 'mobile';
+  logo: string; // emoji or URL
+  enabled: boolean;
+  color: string; // hex color for the card accent
+}
+
+export interface CompletedSale {
+  id: string;
+  items: { name: string; quantity: number; unit_price: number; line_total: number }[];
+  subtotal: number;
+  discount: number;
+  total: number;
+  paymentMethodId: string;
+  paymentMethodName: string;
+  paymentType: 'cash' | 'mobile';
+  customerName: string | null;
+  timestamp: string; // ISO string
+}
+
+interface PaymentMethodsState {
+  methods: PaymentMethod[];
+  completedSales: CompletedSale[];
+  requireCashSession: boolean;
+
+  // Settings
+  setRequireCashSession: (val: boolean) => void;
+
+  // Methods CRUD
+  addMethod: (method: Omit<PaymentMethod, 'id'>) => void;
+  updateMethod: (id: string, updates: Partial<Omit<PaymentMethod, 'id'>>) => void;
+  deleteMethod: (id: string) => void;
+  toggleMethod: (id: string) => void;
+
+  // Sales
+  recordSale: (sale: Omit<CompletedSale, 'id' | 'timestamp'>) => void;
+  clearSalesHistory: () => void;
+
+  // Computed helpers
+  getSalesTotals: () => {
+    cash: number;
+    mobile: number;
+    byMethod: Record<string, { name: string; total: number; count: number }>;
+    grandTotal: number;
+    totalCount: number;
+  };
+}
+
+const defaultMethods: PaymentMethod[] = [
+  { id: 'cash', name: 'Cash', type: 'cash', logo: '💵', enabled: true, color: '#22C55E' },
+  { id: 'bankak', name: 'Bankak', type: 'mobile', logo: '🏦', enabled: true, color: '#3B82F6' },
+  { id: 'fawry', name: 'Fawry', type: 'mobile', logo: '📱', enabled: true, color: '#F59E0B' },
+  { id: 'amin', name: 'Amin', type: 'mobile', logo: '💳', enabled: true, color: '#8B5CF6' },
+];
+
+export const usePaymentMethodsStore = create<PaymentMethodsState>()(
+  persist(
+    (set, get) => ({
+      methods: defaultMethods,
+      completedSales: [],
+      requireCashSession: false, // Default to false (optional)
+
+      setRequireCashSession: (val) => set({ requireCashSession: val }),
+
+      addMethod: (method) =>
+        set((state) => ({
+          methods: [
+            ...state.methods,
+            { ...method, id: `pm-${Date.now()}-${Math.random().toString(36).substr(2, 5)}` },
+          ],
+        })),
+
+      updateMethod: (id, updates) =>
+        set((state) => ({
+          methods: state.methods.map((m) =>
+            m.id === id ? { ...m, ...updates } : m
+          ),
+        })),
+
+      deleteMethod: (id) =>
+        set((state) => ({
+          methods: state.methods.filter((m) => m.id !== id),
+        })),
+
+      toggleMethod: (id) =>
+        set((state) => ({
+          methods: state.methods.map((m) =>
+            m.id === id ? { ...m, enabled: !m.enabled } : m
+          ),
+        })),
+
+      recordSale: (sale) =>
+        set((state) => ({
+          completedSales: [
+            ...state.completedSales,
+            {
+              ...sale,
+              id: `sale-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
+              timestamp: new Date().toISOString(),
+            },
+          ],
+        })),
+
+      clearSalesHistory: () => set({ completedSales: [] }),
+
+      getSalesTotals: () => {
+        const { completedSales } = get();
+        let cash = 0;
+        let mobile = 0;
+        const byMethod: Record<string, { name: string; total: number; count: number }> = {};
+
+        for (const sale of completedSales) {
+          if (sale.paymentType === 'cash') {
+            cash += sale.total;
+          } else {
+            mobile += sale.total;
+          }
+
+          if (!byMethod[sale.paymentMethodId]) {
+            byMethod[sale.paymentMethodId] = { name: sale.paymentMethodName, total: 0, count: 0 };
+          }
+          byMethod[sale.paymentMethodId].total += sale.total;
+          byMethod[sale.paymentMethodId].count += 1;
+        }
+
+        return {
+          cash,
+          mobile,
+          byMethod,
+          grandTotal: cash + mobile,
+          totalCount: completedSales.length,
+        };
+      },
+    }),
+    {
+      name: 'payment-methods-storage',
+    }
+  )
+);

package/frontend/src/store/pos-store.ts

@@ -0,0 +1,344 @@
+import { create } from 'zustand';
+
+export interface CartItem {
+  id: string;
+  medicine_id: string;
+  name: string;
+  batch: string;
+  lot_number: string;
+  quantity: number;
+  unit_price: number;
+  line_total: number;
+}
+
+export interface CustomerInfo {
+  id: string;
+  name: string;
+  phone?: string;
+}
+
+export interface DiscountInfo {
+  type: 'none' | 'percentage' | 'fixed' | 'final_total';
+  value: number;
+  amount: number;
+}
+
+export interface HeldSale {
+  id: string;
+  cart: CartItem[];
+  customer: CustomerInfo | null;
+  discount: DiscountInfo;
+  subtotal: number;
+  total: number;
+  timestamp: Date;
+  note: string;
+}
+
+interface PosState {
+  // Cart
+  cart: CartItem[];
+  customer: CustomerInfo | null;
+  subtotal: number;
+  total: number;
+  tax: number;
+  
+  // Discount
+  discount: DiscountInfo;
+  
+  // Held sales
+  heldSales: HeldSale[];
+  
+  // UI State
+  keypadVisible: boolean;
+  keypadMode: 'qty' | 'price' | 'discount';
+  keypadValue: string;
+  selectedItemId: string | null;
+  activePanel: 'keypad' | 'customer' | 'discount' | 'hold' | null;
+  
+  // Cart actions
+  addItem: (item: Omit<CartItem, 'id' | 'line_total'>) => void;
+  removeItem: (id: string) => void;
+  updateQuantity: (id: string, quantity: number) => void;
+  clearCart: () => void;
+  selectItem: (id: string | null) => void;
+  
+  // Customer
+  setCustomer: (customer: CustomerInfo | null) => void;
+  
+  // Discount
+  applyDiscount: (type: 'percentage' | 'fixed' | 'final_total', value: number) => void;
+  clearDiscount: () => void;
+  
+  // Hold/Resume
+  holdCurrentSale: (note?: string) => void;
+  resumeSale: (id: string) => void;
+  deleteHeldSale: (id: string) => void;
+  
+  // Sale completion
+  completeSale: () => void;
+  
+  // Keypad
+  toggleKeypad: () => void;
+  setKeypadMode: (mode: 'qty' | 'price' | 'discount') => void;
+  setKeypadValue: (value: string) => void;
+  applyKeypadValue: () => void;
+  
+  // Panel
+  setActivePanel: (panel: 'keypad' | 'customer' | 'discount' | 'hold' | null) => void;
+}
+
+const recalculate = (cart: CartItem[], discount: DiscountInfo) => {
+  const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
+  let discountAmount = 0;
+
+  switch (discount.type) {
+    case 'percentage':
+      discountAmount = subtotal * (discount.value / 100);
+      break;
+    case 'fixed':
+      discountAmount = discount.value;
+      break;
+    case 'final_total':
+      discountAmount = Math.max(0, subtotal - discount.value);
+      break;
+    default:
+      discountAmount = 0;
+  }
+
+  const total = Math.max(0, subtotal - discountAmount);
+  return { subtotal, total, discountAmount };
+};
+
+export const usePosStore = create<PosState>((set, get) => ({
+  cart: [],
+  customer: null,
+  subtotal: 0,
+  total: 0,
+  tax: 0,
+  discount: { type: 'none', value: 0, amount: 0 },
+  heldSales: [],
+  keypadVisible: false,
+  keypadMode: 'qty',
+  keypadValue: '',
+  selectedItemId: null,
+  activePanel: null,
+
+  addItem: (item) => set((state) => {
+    const existingItemIndex = state.cart.findIndex(
+      (i) => i.medicine_id === item.medicine_id && i.batch === item.batch
+    );
+
+    let newCart = [...state.cart];
+    
+    if (existingItemIndex >= 0) {
+      const existingItem = newCart[existingItemIndex];
+      const newQuantity = existingItem.quantity + item.quantity;
+      newCart[existingItemIndex] = {
+        ...existingItem,
+        quantity: newQuantity,
+        line_total: newQuantity * existingItem.unit_price,
+      };
+    } else {
+      const newItem: CartItem = {
+        ...item,
+        id: `item-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        line_total: item.quantity * item.unit_price,
+      };
+      newCart.push(newItem);
+    }
+
+    const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+
+    return {
+      cart: newCart,
+      subtotal,
+      total,
+      discount: { ...state.discount, amount: discountAmount },
+      selectedItemId: existingItemIndex >= 0 ? newCart[existingItemIndex].id : newCart[newCart.length - 1].id,
+    };
+  }),
+
+  removeItem: (id) => set((state) => {
+    const newCart = state.cart.filter((item) => item.id !== id);
+    const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+
+    return {
+      cart: newCart,
+      subtotal,
+      total,
+      discount: { ...state.discount, amount: discountAmount },
+      selectedItemId: state.selectedItemId === id ? null : state.selectedItemId,
+    };
+  }),
+
+  updateQuantity: (id, quantity) => set((state) => {
+    if (quantity <= 0) {
+      const newCart = state.cart.filter((item) => item.id !== id);
+      const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+      return {
+        cart: newCart,
+        subtotal,
+        total,
+        discount: { ...state.discount, amount: discountAmount },
+        selectedItemId: state.selectedItemId === id ? null : state.selectedItemId,
+      };
+    }
+
+    const newCart = state.cart.map((item) =>
+      item.id === id
+        ? { ...item, quantity, line_total: quantity * item.unit_price }
+        : item
+    );
+
+    const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+
+    return {
+      cart: newCart,
+      subtotal,
+      total,
+      discount: { ...state.discount, amount: discountAmount },
+    };
+  }),
+
+  clearCart: () => set({
+    cart: [],
+    subtotal: 0,
+    total: 0,
+    discount: { type: 'none', value: 0, amount: 0 },
+    customer: null,
+    selectedItemId: null,
+  }),
+
+  selectItem: (id) => set({ selectedItemId: id }),
+
+  setCustomer: (customer) => set({ customer }),
+
+  applyDiscount: (type, value) => set((state) => {
+    const newDiscount: DiscountInfo = { type, value, amount: 0 };
+    const { subtotal, total, discountAmount } = recalculate(state.cart, newDiscount);
+    newDiscount.amount = discountAmount;
+
+    return {
+      discount: newDiscount,
+      subtotal,
+      total,
+    };
+  }),
+
+  clearDiscount: () => set((state) => {
+    const newDiscount: DiscountInfo = { type: 'none', value: 0, amount: 0 };
+    const { subtotal, total } = recalculate(state.cart, newDiscount);
+
+    return {
+      discount: newDiscount,
+      subtotal,
+      total,
+    };
+  }),
+
+  holdCurrentSale: (note = '') => set((state) => {
+    if (state.cart.length === 0) return state;
+
+    const newHeldSale: HeldSale = {
+      id: `HOLD-${Date.now()}`,
+      cart: [...state.cart],
+      customer: state.customer,
+      discount: { ...state.discount },
+      subtotal: state.subtotal,
+      total: state.total,
+      timestamp: new Date(),
+      note,
+    };
+
+    return {
+      heldSales: [...state.heldSales, newHeldSale],
+      cart: [],
+      customer: null,
+      subtotal: 0,
+      total: 0,
+      discount: { type: 'none', value: 0, amount: 0 },
+      selectedItemId: null,
+    };
+  }),
+
+  resumeSale: (id) => set((state) => {
+    const saleToResume = state.heldSales.find((sale) => sale.id === id);
+    if (!saleToResume) return state;
+
+    return {
+      cart: saleToResume.cart,
+      customer: saleToResume.customer,
+      discount: saleToResume.discount,
+      subtotal: saleToResume.subtotal,
+      total: saleToResume.total,
+      heldSales: state.heldSales.filter((sale) => sale.id !== id),
+      selectedItemId: null,
+    };
+  }),
+
+  deleteHeldSale: (id) => set((state) => ({
+    heldSales: state.heldSales.filter((sale) => sale.id !== id),
+  })),
+
+  completeSale: () => set({
+    cart: [],
+    customer: null,
+    subtotal: 0,
+    total: 0,
+    discount: { type: 'none', value: 0, amount: 0 },
+    selectedItemId: null,
+  }),
+
+  toggleKeypad: () => set((state) => ({ keypadVisible: !state.keypadVisible })),
+
+  setKeypadMode: (mode) => set({ keypadMode: mode, keypadValue: '' }),
+
+  setKeypadValue: (value) => set({ keypadValue: value }),
+
+  applyKeypadValue: () => set((state) => {
+    if (!state.selectedItemId && state.keypadMode !== 'discount') return state;
+
+    const numericValue = parseFloat(state.keypadValue);
+    if (isNaN(numericValue) && state.keypadValue !== '') return state;
+
+    if (state.keypadMode === 'qty' && state.selectedItemId) {
+      if (state.keypadValue === '') return state;
+      const newCart = state.cart.map((item) => {
+        if (item.id === state.selectedItemId) {
+          const newQty = numericValue;
+          return { ...item, quantity: newQty, line_total: newQty * item.unit_price };
+        }
+        return item;
+      }).filter((item) => item.quantity > 0);
+      
+      const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+      return { cart: newCart, subtotal, total, discount: { ...state.discount, amount: discountAmount }, keypadValue: '' };
+    }
+
+    if (state.keypadMode === 'price' && state.selectedItemId) {
+      if (state.keypadValue === '') return state;
+      const newCart = state.cart.map((item) => {
+        if (item.id === state.selectedItemId) {
+          return { ...item, unit_price: numericValue, line_total: item.quantity * numericValue };
+        }
+        return item;
+      });
+      
+      const { subtotal, total, discountAmount } = recalculate(newCart, state.discount);
+      return { cart: newCart, subtotal, total, discount: { ...state.discount, amount: discountAmount }, keypadValue: '' };
+    }
+
+    if (state.keypadMode === 'discount') {
+      if (state.keypadValue === '') return state;
+      // Simple logic: apply percentage for keypad, could be expanded. Let's just apply percentage.
+      const newDiscount: DiscountInfo = { type: 'percentage', value: numericValue, amount: 0 };
+      const { subtotal, total, discountAmount } = recalculate(state.cart, newDiscount);
+      newDiscount.amount = discountAmount;
+      return { discount: newDiscount, subtotal, total, keypadValue: '' };
+    }
+
+    return state;
+  }),
+
+  setActivePanel: (panel) => set({ activePanel: panel }),
+}));

package/frontend/tailwind.config.ts

@@ -0,0 +1,85 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        pos: {
+          50: '#FAF5F9',
+          100: '#F0E6EE',
+          200: '#DCC8D9',
+          300: '#C4A3BD',
+          400: '#9B6E91',
+          500: '#714B67',
+          600: '#5D3D55',
+          700: '#4A3044',
+          800: '#362333',
+          900: '#231622',
+        },
+        success: '#12B76A',
+        warning: '#F79009',
+        danger: '#F04438',
+        brand: {
+          50: '#EAEFFE',
+          100: '#D5DFFE',
+          200: '#ABBDFE',
+          300: '#829DFD',
+          400: '#587CFC',
+          500: '#2A50D8',
+          600: '#213EAF',
+          700: '#172C85',
+          800: '#0E1A5C',
+          900: '#050833',
+        },
+        teal: {
+          50: '#E7F6F5',
+          100: '#D0ECE9',
+          200: '#A1D9D4',
+          300: '#72C5BE',
+          400: '#43B2A9',
+          500: '#12A594',
+          600: '#0E8476',
+          700: '#0B6359',
+          800: '#07423B',
+          900: '#04211E',
+        },
+        status: {
+          success: '#12B76A',
+          warning: '#F79009',
+          danger: '#F04438',
+          info: '#3B82F6'
+        },
+        gray: {
+          0: '#FFFFFF',
+          50: '#F9FAFB',
+          100: '#F3F4F6',
+          200: '#E5E7EB',
+          300: '#D1D5DB',
+          400: '#9CA3AF',
+          500: '#6B7280',
+          600: '#4B5563',
+          700: '#374151',
+          800: '#1F2937',
+          900: '#111827',
+          950: '#030712'
+        },
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        surface: 'var(--surface)',
+        border: 'var(--border)',
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}