104 lines
4.8 KiB
Markdown
Executable File
104 lines
4.8 KiB
Markdown
Executable File
# 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.
|
|
|
|
[](https://vuejs.org/)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://vitejs.dev/)
|
|
[](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
|
|
``` |