bettertend/frontend

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:

   npm install
   

3. Copy environment variables:

   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:

   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

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.