133 lines
4.2 KiB
Markdown
133 lines
4.2 KiB
Markdown
# Atlas CMMS Frontend
|
|
|
|
Enterprise-grade facilities management application built with Vue.js 3, Vuetify, and Pinia.
|
|
|
|
## Features
|
|
|
|
- **Modern Architecture**: Built with Vue 3 Composition API, Pinia for state management, and Vuetify 3 for UI components
|
|
- **Enterprise Design Patterns**: Repository pattern, separation of concerns, and modular architecture
|
|
- **Authentication**: JWT-based authentication with role-based access control
|
|
- **CMMS Functionality**: Work orders, asset management, inventory tracking, maintenance scheduling
|
|
- **Responsive Design**: Mobile-first design with Vuetify components
|
|
- **Type Safety**: Built with TypeScript support and comprehensive validation
|
|
|
|
## Tech Stack
|
|
|
|
- **Frontend Framework**: Vue.js 3
|
|
- **UI Framework**: Vuetify 3
|
|
- **State Management**: Pinia
|
|
- **Routing**: Vue Router 4
|
|
- **HTTP Client**: Axios
|
|
- **Build Tool**: Vite
|
|
- **Styling**: Material Design Icons
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Reusable Vue components
|
|
│ ├── common/ # Common UI components
|
|
│ ├── forms/ # Form components
|
|
│ ├── layouts/ # Layout components
|
|
│ └── navigation/ # Navigation components
|
|
├── views/ # Page components
|
|
│ ├── auth/ # Authentication pages
|
|
│ ├── dashboard/ # Dashboard views
|
|
│ ├── workorders/ # Work order management
|
|
│ ├── assets/ # Asset management
|
|
│ ├── inventory/ # Inventory management
|
|
│ ├── maintenance/ # Maintenance scheduling
|
|
│ ├── reports/ # Reporting views
|
|
│ └── settings/ # Settings and configuration
|
|
├── services/ # Business logic layer
|
|
│ ├── api/ # API client configuration
|
|
│ └── repositories/ # Repository pattern implementation
|
|
├── stores/ # Pinia state stores
|
|
├── composables/ # Vue composables
|
|
├── utils/ # Utility functions
|
|
├── types/ # TypeScript type definitions
|
|
└── plugins/ # Vue plugins
|
|
```
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 16 or higher
|
|
- npm or yarn
|
|
- Atlas CMMS backend server running
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Copy environment variables:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
4. Update the `.env` file with your Atlas CMMS API endpoint:
|
|
```
|
|
VITE_API_BASE_URL=http://your-atlas-cmms-api:8080/api
|
|
```
|
|
|
|
5. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## Architecture Highlights
|
|
|
|
### Repository Pattern
|
|
All API interactions are abstracted through repository classes that extend a base repository, providing consistent CRUD operations and error handling.
|
|
|
|
### State Management
|
|
Pinia stores manage application state with composables providing reactive access to data and actions.
|
|
|
|
### Authentication
|
|
JWT-based authentication with automatic token refresh, role-based access control, and route guards.
|
|
|
|
### Component Structure
|
|
Modular component architecture with clear separation between presentation and business logic.
|
|
|
|
## Atlas CMMS API Integration
|
|
|
|
This frontend is designed to work with the Atlas CMMS backend API, supporting:
|
|
|
|
- **Authentication**: JWT-based login/logout with role management
|
|
- **Work Orders**: Full CRUD operations with status tracking and assignment
|
|
- **Assets**: Asset management with history tracking and file attachments
|
|
- **Users**: User management with team assignments and role-based permissions
|
|
- **Maintenance**: Preventive maintenance scheduling and tracking
|
|
|
|
## Development
|
|
|
|
### Scripts
|
|
|
|
- `npm run dev` - Start development server
|
|
- `npm run build` - Build for production
|
|
- `npm run preview` - Preview production build
|
|
- `npm run lint` - Run ESLint
|
|
- `npm run type-check` - Run TypeScript type checking
|
|
|
|
### Contributing
|
|
|
|
1. Follow the established code patterns and architecture
|
|
2. Use TypeScript types for all new code
|
|
3. Follow Vue 3 Composition API best practices
|
|
4. Ensure all components are responsive and accessible
|
|
5. Add appropriate error handling and validation
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License. |