4.2 KiB

Raw Permalink Blame History

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

Clone the repository
Install dependencies:
```
npm install
```
Copy environment variables:
```
cp .env.example .env
```

Update the .env file with your Atlas CMMS API endpoint:

VITE_API_BASE_URL=http://your-atlas-cmms-api:8080/api

Start the development server:
```
npm run dev
```

Building for Production

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

Follow the established code patterns and architecture
Use TypeScript types for all new code
Follow Vue 3 Composition API best practices
Ensure all components are responsive and accessible
Add appropriate error handling and validation

License

This project is licensed under the MIT License.

4.2 KiB Raw Permalink Blame History