# EAMCO Office Frontend

This is the official frontend for the EAMCO office management system. It is a modern Single-Page Application (SPA) built with **Vue 3**, **TypeScript**, and **Vite**, providing a rich, interactive, and responsive user interface for managing all aspects of the EAMCO business.

This application serves as the visual portal to the powerful backend services, including `eamco_office_api`, allowing office staff to manage customers, schedule deliveries, track finances, and more.

[![Framework](https://img.shields.io/badge/Framework-Vue.js%203-42b883)](https://vuejs.org/)
[![Language](https://img.shields.io/badge/Language-TypeScript-blue)](https://www.typescriptlang.org/)
[![Build Tool](https://img.shields.io/badge/Build%20Tool-Vite-646cff)](https://vitejs.dev/)
[![Styling](https://img.shields.io/badge/Styling-Tailwind%20CSS-38b2ac)](https://tailwindcss.com/)

---

## Features

- **Component-Based UI**: Built with Vue 3's Composition API (`<script setup>`) for clean and reusable components.
- **Centralized State Management**: Uses **Pinia** for predictable and maintainable application state.
- **Interactive Scheduling**: Integrates **FullCalendar** to provide a rich, drag-and-drop interface for managing delivery and service schedules.
- **Geospatial Visualization**: Utilizes **Leaflet** and `@vue-leaflet` to display interactive maps for customer locations, routing, and driver tracking.
- **Client-Side Routing**: **Vue Router** provides seamless navigation between different sections of the application without page reloads.
- **Robust Form Handling**: Employs **Vuelidate** for complex client-side form validation.
- **Modern Styling**: Styled with **Tailwind CSS** and the **DaisyUI** component library for a beautiful and consistent utility-first design system.
- **PDF Generation**: Capable of generating reports and documents on-the-fly using `vue3-pdfmake`.
- **Real-time Notifications**: Provides instant feedback to users via `@kyvg/vue3-notification`.

---

## Tech Stack

- **Framework**: [Vue 3](https://vuejs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Routing**: [Vue Router](https://router.vuejs.org/)
- **State Management**: [Pinia](https://pinia.vuejs.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) & [DaisyUI](https://daisyui.com/)
- **HTTP Client**: [Axios](https://axios-http.com/)
- **Form Validation**: [Vuelidate](https://vuelidate.js.org/)
- **Calendar**: [FullCalendar](https://fullcalendar.io/)
- **Mapping**: [Leaflet](https://leafletjs.com/)

---

## Getting Started

### Recommended IDE Setup

- [Visual Studio Code](https://code.visualstudio.com/)
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (the official Vue.js extension)
- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

### Installation

1.  **Clone the repository and navigate into it.**

2.  **Install dependencies using npm (or your preferred package manager):**
    ```bash
    npm install
    ```

3.  **Configure your environment:**
    The application will make requests to the backend API. Ensure that the API base URL is configured correctly, usually in an environment file (`.env.local`) or a dedicated service module.

### Development Commands

-   **Run the development server:**
    This command starts a hot-reloading development server powered by Vite.
    ```bash
    npm run dev
    ```

-   **Build for production:**
    This command type-checks the code and bundles it for production.
    ```bash
    npm run build
    ```

-   **Preview the production build:**
    This command starts a simple server to preview the production-ready application locally.
    ```bash
    npm run preview
    ```
---

## Project Structure

```
eamco_office_frontend/
├── src/
│   ├── assets/         # Static assets like images and fonts
│   ├── components/     # Reusable Vue components (buttons, modals, etc.)
│   ├── layouts/        # Main application layouts (e.g., with sidebar, without)
│   ├── pages/          # Top-level view components for each route
│   ├── router/         # Vue Router configuration
│   ├── services/       # API communication modules (e.g., axios instances)
│   ├── stores/         # Pinia store modules
│   ├── types/          # TypeScript type definitions
│   ├── main.ts         # Application entry point
│   └── App.vue         # Root Vue component
├── public/             # Static assets that are not processed by Vite
├── package.json        # Project dependencies and scripts
├── vite.config.ts      # Vite build configuration
├── tailwind.config.js  # Tailwind CSS configuration
└── README.md           # This file
```