# System Flow Diagrams ## User Journey Flows ### Customer Flow ``` ┌─────────────────────────────────────────────────────────────┐ │ CUSTOMER JOURNEY │ └─────────────────────────────────────────────────────────────┘ 1. Login ↓ 2. Browse Products └─→ View product images, descriptions, prices ↓ 3. Add to Cart └─→ Select quantity for each product ↓ 4. Review Cart └─→ Adjust quantities, remove items ↓ 5. Submit Order └─→ Order saved with current prices ↓ 6. View Order History └─→ Track order status ``` ### Admin Flow - Initial Setup ``` ┌─────────────────────────────────────────────────────────────┐ │ ADMIN INITIAL SETUP │ └─────────────────────────────────────────────────────────────┘ 1. Login as Admin ↓ 2. Add Products ├─→ Enter name, description ├─→ Upload image ├─→ Set weight (kg) └─→ Set markup percentage (default 30%) ↓ 3. Use Cost Calculator ├─→ Enter batch name ├─→ Enter total transport cost ├─→ For each product: │ ├─→ Select product │ ├─→ Enter quantity │ ├─→ Enter purchase cost │ └─→ Enter processing cost ├─→ Click "Calculate" └─→ Review and "Save to Products" ↓ 4. Products now have final prices └─→ Visible to customers ``` ### Admin Flow - Regular Operations ``` ┌─────────────────────────────────────────────────────────────┐ │ ADMIN REGULAR OPERATIONS │ └─────────────────────────────────────────────────────────────┘ Daily Operations: ├─→ View new orders ├─→ Update order status └─→ Monitor sales When new import arrives: ├─→ Go to Cost Calculator ├─→ Enter new transport costs ├─→ Calculate new pricing └─→ Save to update product prices Product Management: ├─→ Add new products ├─→ Edit existing products ├─→ Adjust individual prices └─→ Activate/deactivate products ``` ## Data Flow Diagrams ### Order Submission Flow ``` Customer Browser Server Database │ │ │ ├─ Submit Order ──────────>│ │ │ (cart items) │ │ │ ├─ Create Order ─────>│ │ │ │ │ │<─ Order ID ─────────┤ │ │ │ │ ├─ For each item: ───>│ │ │ Get product price │ │ │ Save order_item │ │ │ │ │<─ Success + Order ID ────┤ │ │ │ │ ``` ### Cost Calculator Flow ``` Admin Browser Server Database │ │ │ ├─ Calculate Request ──────>│ │ │ (items, transport) │ │ │ ├─ Get product data ──>│ │ │ (weight, markup) │ │ │<─────────────────────┤ │ │ │ │ │ [Calculate:] │ │ │ • Total weight │ │ │ • Weight ratios │ │ │ • Transport/unit │ │ │ • Final prices │ │ │ │ │<─ Calculation Results ────┤ │ │ │ │ │ │ │ ├─ Save Pricing ───────────>│ │ │ ├─ Create batch ───────>│ │ ├─ Update products ────>│ │ ├─ Save import_items ──>│ │ │ │ │<─ Success ────────────────┤ │ │ │ │ ``` ## Pricing Calculation Algorithm ### Step-by-Step Breakdown ``` INPUT: Product A: 100 units, 0.5 kg each, €3 purchase, €0.50 processing Product B: 50 units, 1.0 kg each, €4 purchase, €0.75 processing Transport: €1,000 Markup: 30% STEP 1: Calculate Total Weight Product A weight = 100 × 0.5 = 50 kg Product B weight = 50 × 1.0 = 50 kg Total weight = 100 kg STEP 2: Calculate Weight Ratios Product A ratio = 50 / 100 = 0.5 (50%) Product B ratio = 50 / 100 = 0.5 (50%) STEP 3: Allocate Transport Cost Product A transport = €1,000 × 0.5 = €500 total Product B transport = €1,000 × 0.5 = €500 total STEP 4: Calculate Per-Unit Transport Product A per unit = €500 / 100 = €5.00 Product B per unit = €500 / 50 = €10.00 STEP 5: Calculate Total Cost Per Unit Product A = €3.00 + €0.50 + €5.00 = €8.50 Product B = €4.00 + €0.75 + €10.00 = €14.75 STEP 6: Apply Markup Product A = €8.50 × 1.30 = €11.05 Product B = €14.75 × 1.30 = €19.18 OUTPUT: Product A final price: €11.05 Product B final price: €19.18 ``` ### Visual Representation ``` ┌────────────────────────────────────────────────────────┐ │ COST COMPONENTS │ └────────────────────────────────────────────────────────┘ Product A (€11.05) ├─ Purchase Cost: €3.00 ████████████ (27%) ├─ Processing Cost: €0.50 ██ (5%) ├─ Transport Cost: €5.00 █████████████████████ (45%) ├─ Subtotal: €8.50 └─ Markup (30%): €2.55 ████████ (23%) FINAL PRICE: €11.05 Product B (€19.18) ├─ Purchase Cost: €4.00 ████████████ (21%) ├─ Processing Cost: €0.75 ██ (4%) ├─ Transport Cost: €10.00 ███████████████████████████████ (52%) ├─ Subtotal: €14.75 └─ Markup (30%): €4.43 ████████████ (23%) FINAL PRICE: €19.18 ``` ## Database Relationships ``` ┌─────────────┐ │ users │ │─────────────│ │ id (PK) │───┐ │ email │ │ │ password │ │ │ is_admin │ │ └─────────────┘ │ │ │ ┌─────────────┐ └────>│ orders │ │─────────────│ │ id (PK) │───┐ │ user_id (FK)│ │ │ status │ │ └─────────────┘ │ │ │ ┌─────────────────┐ │ │ products │ │ │─────────────────│ │ │ id (PK) │──┐ │ │ name │ │ │ │ weight_kg │ │ │ │ purchase_cost │ │ ┌──────────────┐ │ │ processing_cost │ └─>│ order_items │<┘ │ transport_cost │ │──────────────│ │ markup_% │ │ id (PK) │ │ final_price │ │ order_id (FK)│ └─────────────────┘ │ product_id │ │ │ quantity │ │ │ price_at_ord │ │ └──────────────┘ │ │ ┌──────────────────┐ └─>│ import_items │ │──────────────────│ ┌─────────────────┐ │ id (PK) │ │ import_batches │ │ batch_id (FK) │<────│─────────────────│ │ product_id (FK) │ │ id (PK) │ │ quantity │ │ batch_name │ │ purchase_cost │ │ transport_cost │ │ processing_cost │ │ created_at │ └──────────────────┘ └─────────────────┘ ``` ## System Architecture ``` ┌───────────────────────────────────────────────────────────┐ │ CLIENT LAYER │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ │ │ │ Customer Portal │ │ Admin Dashboard │ │ │ │ (customer.js) │ │ (admin.js) │ │ │ └──────────────────┘ └──────────────────┘ │ │ │ │ │ │ │ HTML/CSS/JavaScript │ │ └───────────┼───────────────────────────┼──────────────────┘ │ │ └───────────┬───────────────┘ │ HTTP/JSON │ ┌───────────────────────┼───────────────────────────────────┐ │ SERVER LAYER │ │ (Express.js) │ │ │ │ │ ┌────────────────────┴────────────────────┐ │ │ │ Middleware │ │ │ │ • CORS │ │ │ │ • JSON Parser │ │ │ │ • Static Files │ │ │ │ • JWT Authentication │ │ │ └────────────────────┬────────────────────┘ │ │ │ │ │ ┌────────────────────┴────────────────────┐ │ │ │ Route Handlers │ │ │ │ • /api/auth (Authentication) │ │ │ │ • /api/products (Product CRUD) │ │ │ │ • /api/orders (Order Management) │ │ │ │ • /api/pricing (Cost Calculator) │ │ │ └────────────────────┬────────────────────┘ │ │ │ │ └───────────────────────┼───────────────────────────────────┘ │ SQL Queries │ ┌───────────────────────┼───────────────────────────────────┐ │ DATABASE LAYER │ │ (SQLite) │ │ │ │ │ ┌────────────────────┴────────────────────┐ │ │ │ Database Tables │ │ │ │ • users │ │ │ │ • products │ │ │ │ • orders │ │ │ │ • order_items │ │ │ │ • import_batches │ │ │ │ • import_items │ │ │ └─────────────────────────────────────────┘ │ │ │ │ Stored in: database.db │ └───────────────────────────────────────────────────────────┘ ┌───────────────────────────────────────────────────────────┐ │ FILE STORAGE │ │ │ │ public/images/ │ │ └─ Uploaded product images │ └───────────────────────────────────────────────────────────┘ ``` ## Authentication Flow ``` ┌────────────┐ ┌──────────┐ ┌──────────┐ │ Client │ │ Server │ │ Database │ └─────┬──────┘ └────┬─────┘ └────┬─────┘ │ │ │ ├─ POST /api/auth/login │ │ (email, password) ─>│ │ │ │ │ │ ├─ Query user ──────>│ │ │ │ │ │<─ User data ───────┤ │ │ │ │ │ [Verify password] │ │ │ │ │ │ [Generate JWT] │ │ │ token │ │ │ │ │<─ Return token ──────┤ │ │ + user data │ │ │ │ │ │ [Store in │ │ │ localStorage] │ │ │ │ │ │ │ │ ├─ Subsequent requests ────────────> │ │ Header: Authorization: Bearer │ │ │ │ │ │ [Verify JWT] │ │ │ │ │ │ [Process request] │ │ │ │ │<─ Response ──────────┤ │ │ │ │ ``` ## File Upload Flow ``` Admin adds product with image: 1. HTML Form (multipart/form-data) ├─ Product name ├─ Description ├─ Weight ├─ Markup └─ Image file ↓ 2. Multer Middleware ├─ Validates file type (jpg, png, gif) ├─ Checks file size (max 5MB) ├─ Generates unique filename └─ Saves to public/images/ ↓ 3. Server receives: ├─ Form fields in req.body └─ File info in req.file ↓ 4. Database saves: └─ image_path: "/images/product-1234567890.jpg" ↓ 5. Client displays: └─ ``` ## Key Interaction Points ### Customer Ordering ``` Browse → Add to Cart → Review → Submit → Confirmation ↓ ↓ ↓ ↓ ↓ GET localStorage Show POST GET products total order orders ``` ### Admin Pricing ``` Add Products → Configure Calculator → Calculate → Review → Save ↓ ↓ ↓ ↓ ↓ POST Fill form Algorithm Display POST products on server results pricing/save ``` ### Status Updates ``` Customer Places Order → Admin Sees Order → Admin Updates Status ↓ ↓ ↓ status: pending View in list status: processing ↓ status: completed ``` ## System States ### Product States ``` Created → Unpiced → Priced → Active → Available to Customers ↓ ↓ ↓ ↓ ↓ POST final_ Calculator is_ GET /products/ product price=0 updates active=1 active prices ``` ### Order States ``` Draft (Cart) → Submitted → Pending → Processing → Completed ↓ Cancelled ``` This visual guide helps understand how all components work together!