# Future Admin Controls & Dynamic Frontend Config Notes

**Project:** Bangladesh Saree E-Commerce Website  
**Two-Phase Project Roadmap (Instruction for the AI Agent):**  
* **Phase A (Current Phase — Frontend Design & Storefront Build):** Build the complete, interactive, mobile-first Frontend Storefront first using a central Frontend Configuration & Mock Data layer (`storeConfig` + `sareesData`). **Do NOT build the backend database or admin panel during the Frontend build.**  
* **Phase B (Next Phase — Full Backend & Database Build):** Once the Frontend Storefront is finalized and approved, we will build the full Backend, Database, Order Management Pipeline, Email Notification Service, and Admin Dashboard that connects directly to the frontend structures defined below.

---

## 1. Root CSS Variables (12 Master Design Tokens)

Defined in `global_color_typography_design_plan.md` and declared once in `:root`. In Phase B, these 12 variables will be editable from the Admin Dashboard (`Appearance → Theme Settings`) with a 1-click *"Reset to Default Brand Palette"* button:

1. `--bg-main` (80% Base Canvas)
2. `--bg-surface` (Card & Box Surface)
3. `--brand-primary` (15% Main Authority Color — Header, Footer, H1/H2/H3, Active Dots/Pills, Star Ratings, Button Hover Fill)
4. `--brand-accent` (5% Conversion Accent — Primary CTA Buttons, Discount/New Badges, Cart Counter, Active Filter Chips, Footer Titles)
5. `--text-primary` (Main Text, BDT Prices & **All Text on `--brand-accent` Backgrounds**)
6. `--text-muted` (Secondary Text, Specs, Old Struck-Through Prices, Breadcrumbs)
7. `--text-light` (Inverted Text & Icons inside `--brand-primary` Header, Footer & Hovered Buttons)
8. `--border-subtle` (`1px` Card Borders, Input Outlines, Dividers, Progress Bar Track & Shimmer Wave)
9. `--state-success` (`● In Stock` dot, `✓ Verified Buyer` icon, applied coupon discount text, toast success border)
10. `--state-error` (Form validation error border/text, invalid coupon text, low-stock urgency note)
11. `--font-heading` (Global Heading Font)
12. `--font-body` (Global Body & UI Font)

---

## 2. Central Frontend Store Configuration (`storeConfig`)

During the Frontend build, place all store-level settings in a single `storeConfig` file so every page reads from one place:

### A. Brand, Header & Footer Config
* **`brandName`:** `"Angina"` *(or placeholder brand title)*
* **`tagline`:** `"Authentic Handwoven & Curated Sarees in Bangladesh"`
* **`headerNavigationMode` (`"MODE_A"` | `"MODE_B"`):**
  * `"MODE_A"` (Default): Flat Direct Saree Category Bar (`Home | All Sarees | Jamdani | Muslin | Katan | Silk | Cotton`).
  * `"MODE_B"`: Minimal Boutique Bar (`Home | All Sarees | New Arrivals | Festive Edit | Offers`).
* **`announcementBar`:**
  * `enabled`: `true`
  * `text`: `"✓ Cash on Delivery Across Bangladesh  •  Inside Dhaka Delivery BDT 70  •  Check Parcel Upon Delivery"`
* **`storeContactInfo` (Used in Footer, Mobile Menu Drawer, `/contact`, and Checkout):**
  * `phone`: `"+880 17XX-XXXXXX"`
  * `whatsappNumber`: `"88017XXXXXXXX"` *(for WhatsApp chat & share links)*
  * `messengerUrl`: `"https://m.me/..."`
  * `supportHours`: `"Daily, 10:00 AM – 10:00 PM"`
  * `email`: `"support@angina.com.bd"`
  * `location`: `"Dhaka, Bangladesh"`
  * `socialLinks`: `{ facebook, instagram, youtube, whatsapp }`
* **`floatingChatWidget`:**
  * `enabled`: `true` *(auto-hides on `/checkout`, `/order-received`, and when any modal/drawer is open)*

### B. Delivery Zones, Payment & Mock Coupons Config
* **`insideDhakaDelivery`:** `{ chargeBDT: 70, timeline: "2 – 3 Business Days" }`
* **`outsideDhakaDelivery`:** `{ chargeBDT: 130, timeline: "3 – 5 Business Days" }`
* **`paymentMethod`:** `"CASH_ON_DELIVERY_ONLY"` *(Phase B will add dormant toggles for bKash/Nagad/SSLCommerz)*
* **`mockCoupons` (For Frontend Coupon Box Testing):**
  * `[{ code: "EID10", type: "PERCENT", value: 10, minOrderBDT: 2000 }, { code: "WELCOME200", type: "FIXED", value: 200, minOrderBDT: 2500 }]`

### C. Homepage Section Config
* **`heroSlides`:** Array of 1–3 slides (`desktopImage` `4:3`, `mobilePortraitImage` `4:5`, `eyebrow`, `title`, `subtitle`, `buttonText`, `link`).
* **`spotlightBanner`:** `{ enabled: true, images: [...], eyebrow, title, description, buttonText, link: "/collections/festive-edit" }`
* **`bestSellersMode`:** `"AUTOMATIC"` (sorted by `salesCount`) or `"MANUAL"` (pinned product IDs).
* **`budgetTiles`:**
  1. `{ label: "Under BDT 2,500", subtext: "Everyday & Office Cotton →", slug: "under-2500", min: 0, max: 2499 }`
  2. `{ label: "BDT 2,500 – 4,999", subtext: "Classic Handloom & Tangail →", slug: "2500-4999", min: 2500, max: 4999 }`
  3. `{ label: "BDT 5,000 – 9,999", subtext: "Festive Jamdani & Muslin →", slug: "5000-9999", min: 5000, max: 9999 }`
  4. `{ label: "BDT 10,000 & Above", subtext: "Royal Katan & Bridal Edit →", slug: "10000-plus", min: 10000, max: 999999 }`

---

## 3. Complete Category & Product Data Schema (Frontend Mock Data & Future DB)

### A. Category Schema (`categoriesData`)
Each category object must include:
* `id`: `"cat-jamdani"`
* `slug`: `"jamdani"` *(powers `/category/jamdani`)*
* `name`: `"Jamdani Sarees"`
* `shortName`: `"Jamdani"` *(used in Header Mode A & Switcher Pills)*
* `parentDepartment`: `"Sarees"` *(future: `"Salwar Kameez"`, `"Kurtis"`, `"Jewelry"`)*
* `displayOrder`: `1` *(controls row order on `/sarees` and pill order)*
* `showInHeaderModeA`: `true`
* `coverImage`: `3:4` portrait URL (`900 × 1200px` for Homepage "Shop by Saree Weave")
* `description`: `"Authentic handwoven Dhakai Jamdani sarees crafted by master artisans"`
* `defaultCareInstructions`: `"Dry clean recommended. Store wrapped in soft cotton cloth away from direct sunlight."`

### B. Product Schema (`sareesData`)
Each product object must include every field needed by Cards, Filters, Quick View, PDP, Reviews, and Social Sharing:
* `id`: `"prod-104"`
* `sku`: `"ANG-JM-104"`
* `slug`: `"crimson-handwoven-dhakai-jamdani-saree"` *(powers `/product/[slug]`)*
* `title`: `"Crimson Handwoven Dhakai Jamdani Saree"`
* `parentDepartment`: `"Sarees"`
* `subCategorySlug`: `"jamdani"`
* `subCategoryName`: `"Jamdani Saree"`
* `collections`: `["new-arrivals", "festive-edit", "best-sellers"]` *(powers `/collections/[slug]`)*
* `priceBDT`: `4500` *(whole integer)*
* `oldPriceBDT`: `5200` *(optional whole integer; if `> priceBDT`, auto-calculates `-13%` card badge & `SAVE 13%` PDP/Quick View pill, and auto-includes item in `/collections/offers`)*
* `inStock`: `true`
* `stockQty`: `5` *(if `1–3`, shows `"Only X left in stock"` in `--state-error`; if `0`, shows `SOLD OUT`)*
* `createdAt`: `"2026-10-20"` *(ISO date; if within last 14 days, auto- qualifies for `NEW` badge & sorts first under Newest)*
* `salesCount`: `42` *(used for `Best Selling` sort and Homepage Most Loved slider)*
* `images`: Array of `3:4` portrait image objects (`[{ url, alt }]` — `images[0]` Front Drape, `images[1]` Aanchal Closeup for card hover/1st tap, `images[2..5]` Border, Blouse Piece, Back View)
* `shortDescription`: 2–3 sentence editorial story for PDP Accordion Panel 1
* `specs` *(standardized values matching `global_ui_components_and_content_standards.md` Section 6)*:
  * `fabric`: `"80-Count Pure Cotton Jamdani"`
  * `length`: `"12 Haat (5.5 Meters)"`
  * `width`: `"47 Inches"`
  * `blousePiece`: `"With Blouse Piece"` | `"Without Blouse Piece"`
  * `blousePieceDetail`: `"Included (1 Yard Unstitched)"` | `"Not Included"`
  * `workType`: `"Handloom / Tant"` | `"Zari Work"` | `"Embroidered"` | `"Karchupi"` | `"Printed"` | `"Plain / Solid"`
  * `colorFamily`: `"Red"` | `"Maroon"` | `"Pink / Pastel"` | `"Yellow / Mustard"` | `"Green"` | `"Blue"` | `"White / Off-White"` | `"Black"` | `"Gold / Champagne"` | `"Multi-Color"`
  * `aanchalStyle`: `"Grand Woven Floral Zari Pallu"`
  * `occasion`: `["Festive / Eid", "Bridal / Wedding"]`
  * `origin`: `"Made in Bangladesh"`
  * `careInstructions`: *(optional override; otherwise inherits from category `defaultCareInstructions`)*
* `siblingVariants`: Optional array of other color variants (`[{ colorName, swatchCode, productSlug }]`)
* `sizes`: `[]` *(Empty for Sarees so Size Selector stays hidden; populated like `["S", "M", "L", "XL"]` for future Kurtis/Salwar Kameez)*
* `reviews`: Array of review objects (`[{ id, reviewerName, city, rating, date, verified: true, comment, photoUrl }]`)