Service Call Report System Requirements Document

Introduction

The Service Call Report project aims to transform the existing paper-based service call management system into a digital platform. This system will allow engineers to create, manage, print, and track service calls from any device, featuring a premium Apple-inspired glassmorphism UI with responsive design for desktop, tablet, and mobile.

System Overview

The Service Call Report system will serve as a comprehensive digital service call management portal. It will enable Phoenix IT Solutions to efficiently manage customer service calls, repairs, spare parts, engineer reports, invoices, and printable service reports from a single dashboard. The system will include features such as QR codes, digital signatures, and WhatsApp sharing, leveraging technologies like Next.js, React, PostgreSQL, and Cloudinary for storage.

Functional Requirements as Story Points

• As an Engineer, I should be able to create a new service call report digitally.
• As an Engineer, I should be able to manage and track service calls from any device.
• As an Engineer, I should be able to print service call reports.
• As an Engineer, I should be able to upload and manage photos related to service calls.
• As an Engineer, I should be able to provide feedback and update the status of service calls.
• As an Admin, I should be able to manage engineers, customers, services, products, and inventory.
• As a User, I should be able to view and manage customer profiles and service history.
• As a User, I should be able to generate and print invoices with GST calculations.
• As a User, I should be able to share reports via email and WhatsApp.
• As a User, I should be able to search reports by customer name, phone, SCR number, or date.
• As an Engineer, I should be able to access a mobile-friendly interface for managing service calls.
• As an Admin, I should be able to view dashboard analytics and inventory reports.
• As a User, I should be able to receive AMC reminder notifications.
• As a User, I should be able to track customer warranties.
• As a User, I should be able to switch between dark and light modes.
• As an Engineer, I should be able to use the system offline with PWA support.
• As a User, I should be able to access the system with multi-user roles (Admin, Engineer, Receptionist).

User Personas

• Admin: Responsible for managing the overall system, including engineers, customers, services, and inventory.
• Engineer: Field personnel who create, manage, and complete service calls.
• Receptionist: Assists in managing customer interactions and service call scheduling.

Core User Flows

• Admin logs in -> manages engineers and customers -> views dashboard analytics.
• Engineer logs in -> creates a service call -> updates status -> uploads photos -> completes job.
• Receptionist logs in -> schedules service calls -> updates customer profiles -> manages invoices.

Visuals Colors and Theme

• primary: #1E3A8A (deep blue)
• primary_light: #3B82F6 (light blue)
• secondary: #F97316 (orange)
• accent: #EF4444 (red)
• highlight: #F59E0B (amber)
• bg: #F3F4F6 (light gray)
• surface: rgba(255, 255, 255, 0.8) (glassmorphism effect)
• text: #111827 (dark gray)
• text_muted: #6B7280 (muted gray)
• border: rgba(209, 213, 219, 0.2) (light gray)

Signature Design Concept

The homepage will feature an interactive animated motherboard background with floating elements like laptops, printers, and networking icons. Users can hover over these elements to reveal additional information or actions, such as creating a service call or accessing the engineer login. The design will use Framer Motion and GSAP for smooth animations and transitions, creating a dynamic and engaging user experience.

Landing Hero Motion Brief

The landing hero will depict a digital transformation journey: a paper service call report morphs into a digital dashboard. This transformation will be animated using motion/react, showcasing the transition from manual to digital processes. The animation will loop every 10 seconds, highlighting the efficiency and modernity of the new system. Users can interact with the animation by clicking on elements to explore features or learn more about the system.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "animated," featuring moderate scroll-triggered reveals and hover transitions. The homepage will include a continuous 2D motion loop to engage users and demonstrate the system's capabilities.

Non-Functional Requirements

• The system must be responsive and accessible on desktop, tablet, and mobile devices.
• The system should support offline functionality for engineers using PWA.
• The system should ensure data security and privacy with JWT and role-based access control.

Tech Stack

• Frontend: Next.js 15, React, TypeScript, Tailwind CSS
• UI: Shadcn UI, Framer Motion, GSAP
• Backend: Node.js, Express.js
• Database: PostgreSQL, Prisma ORM
• Authentication: JWT, Role-Based Access Control
• Storage: Cloudinary for images, PDF generation

Assumptions and Constraints

• The system will be developed using the specified tech stack.
• The system will integrate with existing customer databases.
• The system will adhere to local data protection regulations.

Glossary

• SCR: Service Call Report
• AMC: Annual Maintenance Contract
• ASC: Annual Service Contract
• PWA: Progressive Web App
• JWT: JSON Web Token

This document outlines the requirements for the Service Call Report project, ensuring a seamless transition from paper to digital service call management.