# Frontend Development Guide

The frontend is a Vue 3 Single Page Application (SPA) built with Vite. It features a modern, responsive design with support for multiple languages and 3D visualization.

## Key Technologies
- **Vue 3**: Using the `<script setup>` syntax and Composition API.
- **Tailwind CSS**: Utility-first styling. Note that the project uses a custom color palette defined in `tailwind.config.ts`.
- **Three.js**: Used in `StlViewer.vue` to render 3D models directly in the browser.
- **Pinia**: Manages user authentication state (`stores/auth.ts`).

## Pages vs Components
- **Pages** (`src/pages/`): Components mapped to routes. Each page should represent a full view (e.g., `Index.vue`, `Orders.vue`).
- **Components** (`src/components/`): Reusable UI elements.
    - `ui/`: Small, primitive components like buttons or inputs.
    - `admin/`: Specialized components used only in the Admin Dashboard.

## Localization (i18n)
To add or modify text:
1. Locate the relevant fragment in `src/locales/master_user/` (for public site) or `master_admin/` (for admin panel).
2. Edit the JSON file (ensure all supported languages: `en`, `me`, `ru`, `ua` are present).
3. Run the generation script:
   ```bash
   # On Windows:
   backend\.venv\Scripts\python.exe scripts\manage_locales.py split
   ```
4. The changes will be reflected in the generated `src/locales/*.json` files and picked up by Vite.

## 3D Preview (STL)
The `StlViewer.vue` component handles the rendering of `.stl` files. It supports:
- Auto-scaling to fit the view.
- Color customization based on the selected material.
- Progress indication during large file loads.

## Routing and Auth Guards
Defined in `src/router/index.ts`.
- Paths starting with `/:lang/admin` require `admin` role.
- Paths starting with `/:lang/orders` require the user to be logged in.
- The router automatically handles language prefixes (redirecting `/about` to `/en/about` based on local storage or defaults).

## Adding a New Page
1. Create a new `.vue` file in `src/pages/`.
2. Add the route to `src/router/index.ts`.
3. Add translations for the page title in `src/locales/master_user/seo.json`.
4. Run `manage_locales.py split`.