# Implementation Plan: Grosirin Frontend (React SPA)

This document outlines the architectural and implementation strategy for the **Grosirin** e-commerce frontend, designed for the LSP Junior Web Developer certification.

## 1. Technical Stack
- **Framework**: React 18+ with Vite (for fast HMR and optimized builds).
- **Styling**: Bootstrap 5 + Custom CSS (Modular structure).
- **Routing**: React Router DOM v6 (SPA Navigation).
- **State Management**: React Context API (Auth & Cart).
- **API Client**: Axios (with interceptors for JWT Auth).

---

## 2. Design System & UX
### Visual Aesthetics
- **Color Palette**: Modern Blue (`#2563eb`) as primary, slate grays for typography, and amber for accents.
- **Typography**: `Inter` font family for high legibility.
- **Components**: Rounded corners (`12px`), subtle soft shadows, and card-based layouts.
- **Hover Effects**: Interactive feedback on product cards and buttons to improve engagement.

### Layout Strategy
- **Public Layout**: Global Navbar + Main Content + Multi-column Footer.
- **Admin Layout**: Fixed/Sticky sidebar navigation with a distinct header.
- **Dashboard Layout**: Card-based sidebar for user profile and quick links.

---

## 3. Core Modules Implementation

### A. Authentication & Security
- **AuthContext**: Persistent login state using `localStorage`.
- **Private Routes**: Higher-Order Component (HOC) to protect admin and member pages.
- **JWT Handling**: Axios interceptors automatically attach the `Authorization: Bearer <token>` header to outgoing requests.

### B. Catalog & Shopping
- **Product Listing**: Server-side filtering with category and search capabilities.
- **Cart Logic**: Localized cart management with quantity updates and subtotal calculations.
- **Checkout Flow**: 
    - Integration with **Indoregion API** (Province/City selection).
    - Summary of orders before final submission.

### C. Admin Panel (Full CRUD)
- **Dashboard**: Visual statistics using summary endpoints.
- **Product Management**: Modal-driven CRUD with category mapping and stock control.
- **User Management**: Administrative control over user roles and profile data.
- **Order Management**: Real-time status updates and order reconciliation.
- **Reporting**: Data fetching based on date ranges using Stored Procedures from the backend.

---

## 4. Folder Structure
```text
frontend/
├── public/              # Static assets (favicons, etc.)
├── src/
│   ├── api/             # Axios instance & config
│   ├── assets/
│   │   └── css/         # Modular CSS (variables, base, components, pages)
│   ├── components/      # Reusable UI (Navbar, Sidebar, Footer, Layouts)
│   ├── context/         # State management (Auth, Cart)
│   ├── pages/           # Page components
│   │   └── admin/       # Admin-specific modules
│   ├── App.jsx          # Root routing & layout
│   └── main.jsx         # Entry point & Provider injection
└── vite.config.js       # Build config
```

---

## 5. Development Roadmap
1. **Foundation**: Setup Vite, Bootstrap, and the modular CSS structure.
2. **Contexts**: Implement Auth and Cart providers.
3. **Core Pages**: Build Home, Products, Login, and Register.
4. **Transaction Flow**: Build Cart, Checkout, and Success pages.
5. **Admin Core**: Build Admin Layout and the primary Dashboard.
6. **Admin Modules**: Sequential implementation of Product, Category, User, and Order CRUD.
7. **Reporting**: Integration of the date-range revenue report.
8. **Polishing**: Responsive testing, accessibility checks, and UX refinements.

---

## 6. Testing & Validation
- **Functional Testing**: Verify all CRUD operations and checkout flows.
- **Security Validation**: Ensure private routes cannot be bypassed without proper roles.
- **API Resilience**: Error handling (Try/Catch) for all network requests with user feedback (Toasts/Alerts).
- **Responsive Check**: Test on Mobile, Tablet, and Desktop resolutions.
