car_mms/project.md

this is remix web app with sqlite and prisma, create a comprehensive car maintenance management system with cool, sleek, modern responsive and Mobile-friendly UI/UX . Build a complete web application with the following detailed specifications:

Core Requirements

• Framework: Remix web app with SQLite database and Prisma ORM
• Purpose: Car maintenance management system for business owners to track vehicle visits and maintenance records
• Language: Primary Arabic language support with RTL (Right-to-Left) design
• Responsiveness: Mobile-friendly responsive design throughout

UI/UX Requirements

1. RTL Layout: All components must support Arabic RTL text direction
2. Responsive Design: Ensure optimal viewing on desktop, tablet, and mobile devices
3. Dashboard Layout: Create a responsive dashboard with:
   • Collapsible sidebar navigation menu (full menu, icons-only menu)
   • Collapsible sidebar for mobile devices (and full browser)
   • Smooth transitions and mobile-optimized interactions

Authentication System

4. Custom Auth Logic: Implement custom authentication compatible with both web and mobile applications

5. User Schema: Users must have the following fields:

   • name (string)
   • username (string, unique)
   • email (string, unique)
   • password (hashed)
   • status (enum: "active", "inactive")
   • authLevel (integer: 1=superadmin, 2=admin, 3=user)
   • createdDate (datetime)
   • editDate (datetime)

6. Auth Routes: Create signin and signup routes with shared layout

   • Signup Restriction: Signup page should only be accessible when no auth-level=2 users exist in database. and signin can be done using username or email.
   • auth-levels are: 1 for user, 2 for admin, 3 for superadmin
   • Implement proper form validation and error handling

7. Database Seeding: Create seed file containing:

   • One superadmin account (auth-level=1)
   • Essential system data for initial setup

Access Control & User Management

8. User Management Page:
   • Accessible only to auth-level=3 (superadmin) and auth-level=2 (admin)
   • Admin users (level=2) cannot view superadmin accounts (level=3)
   • Superadmin users (level=3) can view and manage all accounts
   • Include user creation, editing, status management, and deleting

Core Business Features

9. Data Management: Implement full CRUD operations for:

   • Vehicles
   • Customers
   • Maintenance Visits
   • Expenses
   • Income (records are generated from maintenance visits)

10. Vehicle Schema: Include the following fields:

    • id (integer @id @default(autoincrement()))

    • plateNumber (string, unique)

    • bodyType (string) - e.g., Sedan, Coupe, HatchBack, PickUp, Bus - Van..a dropdownlist

    • manufacturer (string) - e.g., Toyota, Mercedes, Ford, BMW,

    • model (string) - e.g., Camry, S-Class

    • trim (string) optional - e.g., GLX, S 600

    • year (integer)

    • Transmission (string) - dropdownlist : Automatic, Manual

    • Fuel (string) - dropdownlist : Gasoline, Diesel, Hybrid, Mild Hybrid, Electric

    • cylinders (integer) optional

    • engineDisplacement (decimal) optional

    • useType (enum: "personal", "taxi", "apps", "loading", "travel")

    • ownerId (foreign key to customer)

    • lastVisitDate (datetime)

    • suggestedNextVisitDate (datetime)

    • createdDate (datetime)

    • updateDate (datetime)

    • Recommended Next Visit Delay: Dropdown selection in the Visits route with options: 1 months, 2 months, 3 months and 4 months... when a vehicle register a maintenance visit the lastVisitDate at the Vehicle table will be the current date (current maintenance visit date) and the suggestedNextVisitDate should be the current maintenance visit date + the delay in months that selected from the Dropdown list.

11. Maintenance Visit Schema: Include standard maintenance visit fields plus:

    • Link to vehicle and customer records
    • Maintenance type and description
    • Cost and payment status
    • Kilometers
    • visitDate, createdDate and updateDate

Technical Implementation Requirements

• Set up proper Prisma schema with relationships
• Implement proper error handling and validation
• Create reusable components for forms and data tables
• Ensure proper TypeScript typing throughout
• Implement proper session management and route protection
• Create responsive navigation with mobile hamburger menu
• Use proper Arabic fonts and ensure text rendering works correctly in RTL

Deliverables

Provide complete implementation including:

• Database schema (Prisma)
• Authentication system
• All CRUD operations for (users, customers, Vehicle, Maintenance Visits and Expenses)
• Responsive UI components
• Seed data file
• Route protection middleware
• Mobile-optimized navigation

Focus on creating a production-ready application with clean code architecture, proper error handling, and excellent user experience across all devices.