updated readme

2026-01-18 19:04:01 -05:00
parent 68f5b6eafc
commit f9d0e4c0fd
1 changed files with 97 additions and 11 deletions
--- a/README.md
+++ b/README.md
@@ -1,18 +1,104 @@
-# Vue 3 + TypeScript + Vite
+# EAMCO Office Frontend

-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+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.

-## Recommended IDE Setup
+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.

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[![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/)

-## Type Support For `.vue` Imports in TS
+---

-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+## Features

-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+- **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`.

-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+---
+
+## 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
+```