Service Guru

Introduction

Service Guru is a comprehensive cross-platform application designed for a 'Customer Service Mechanic App & Garage Management System'. The application is intended to function identically across Mobile, Tablet, Desktop, and Web platforms. It is built with an offline-first architecture to ensure seamless data storage and entry creation when offline, with automatic cloud synchronization to the backend once an internet connection is restored. This document outlines the system requirements for Service Guru.

System Overview

Service Guru aims to streamline garage management and customer service processes by providing a unified platform for managing jobs, customers, vehicles, and service records. The application supports offline functionality, ensuring that all local changes made offline are automatically updated to the live server once connectivity is restored. Key features include a dynamic dashboard, customer and vehicle management, service tracking, and customizable settings.

Functional Requirements

• As a User, I should be able to view a main dashboard showing job overviews and quick actions for adding customers or vehicles.
• As a User, I should be able to navigate using a bottom tab bar with icons for 'Dashboard', 'Customers', 'Vehicles', 'History', and 'Settings'.
• As a User, I should be able to grant app permissions for Camera, Storage, Notifications, and Internet.
• As a User, I should be able to search and view client details in the customer management section.
• As a User, I should be able to manage vehicles with tabs for 'All', 'Bike', and 'Car'.
• As a User, I should be able to dynamically select vehicle brand and model options.
• As a User, I should be able to view a service history log for each vehicle.
• As a User, I should be able to generate and scan a unique QR code for each vehicle.
• As a User, I should be able to edit my profile details in the settings.
• As a User, I should be able to manage team members including Admins, Staff, and Technicians.
• As a User, I should be able to select from multiple regional languages.
• As a User, I should be able to choose from various visual theme options.
• As a User, I should be able to contact support, report problems, and access the FAQ & Help center.
• As a User, I should be able to add, edit, and search records seamlessly.

User Personas

• Garage Owner: Manages the overall operations, views reports, and manages team members.
• Mechanic: Performs vehicle repairs and updates service records.
• Customer: Views service history and interacts with the garage for service appointments.

Core User Flows

• Garage Owner logs in -> Views dashboard -> Manages team -> Updates profile
• Mechanic logs in -> Scans vehicle QR code -> Updates service record -> Logs out
• Customer logs in -> Searches for vehicle -> Views service history -> Contacts support

Visuals Colors and Theme

• primary: #1A73E8 (Deep Blue)
• primary_light: #E8F0FE (Light Blue)
• secondary: #FF6F61 (Coral)
• accent: #FFD700 (Gold)
• highlight: #FFA500 (Orange)
• bg: #FFFFFF (White)
• surface: rgba(240, 240, 240, 0.8)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: rgba(200, 200, 200, 0.5)

Signature Design Concept

The Service Guru homepage will feature an interactive 3D garage environment using @react-three/fiber and @react-three/drei. Users can navigate through different sections of the garage by clicking on various tools and vehicles, which will animate and provide detailed information about services, customer management, and settings. The environment will be dynamic, with animations triggered by user interactions, creating an immersive experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, with layered depth via scroll. Decorative elements like tools and vehicles will translate at different speeds, while real content scrolls naturally. This approach will create a visually rich first impression, suitable for a marketing landing page.

Non-Functional Requirements

• The application must support offline data entry and synchronization.
• The system should ensure data security during synchronization.
• The application should be responsive and function identically across all platforms.

Tech Stack

• Frontend: React for Web, React Native for mobile app
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, Alembic for migrations
• AI Models: Not specified
• Local orchestration: Docker, docker-compose
• Server-side orchestration: Kubernetes

Assumptions and Constraints

• The application will support multiple regional languages.
• The system will require internet access for data synchronization.
• The application will be designed to function identically across all platforms.

Glossary

• Offline-first architecture: A design approach where the application is built to function offline and sync data when online.
• QR Code: A machine-readable code used for storing URLs or other information.
• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.