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.

---

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
• Language: TypeScript
• Build Tool: Vite
• Routing: Vue Router
• State Management: Pinia
• Styling: Tailwind CSS & DaisyUI
• HTTP Client: Axios
• Form Validation: Vuelidate
• Calendar: FullCalendar
• Mapping: Leaflet

---

Getting Started

Recommended IDE Setup

• Visual Studio Code
• Volar (the official Vue.js extension)
• TypeScript Vue Plugin (Volar)

Installation

1. Clone the repository and navigate into it.

2. Install dependencies using npm (or your preferred package manager):

   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.

  npm run dev
  

• Build for production: This command type-checks the code and bundles it for production.

  npm run build
  

• Preview the production build: This command starts a simple server to preview the production-ready application locally.

  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