🏢 Service Request & Operations Management System (ERP)

A full-stack ERP system for managing service requests, users, assignments, billing, and operations with role-based access.

---

🚀 Overview

This project is a modern ERP (Enterprise Resource Planning) system designed to manage:

• Service Requests
• User Management
• Assignments & Operations
• Billing & Invoices
• Audit Trails

It provides Admin and Customer dashboards with a clean, responsive UI and real-time operations.

---

✨ Key Features

👥 User Management

• Create users (Admin)
• Update user profiles
• Profile image upload (Cloudinary)
• Role-based access (Admin / Customer)

📋 Service Requests

• Create and manage requests
• View request details
• Status updates (pending, approved, rejected)
• Request timeline tracking

🔧 Assignment Management

• Assign/reassign jobs
• Track assignment history
• Operation logs (audit trail)

💰 Billing System

• Invoice creation
• Payment tracking
• Billing history

🧾 Audit Trail

• Track all system actions:
  • Request approvals
  • Assignments
  • Invoice creation
  • Payments
  • Profile updates

🖼 Profile Management

• Upload profile image (Cloudinary)
• Image preview + progress bar
• Replace image (auto delete old)
• Remove profile image (with confirmation)

📱 UI/UX

• Responsive dashboard (mobile + desktop)
• Collapsible sidebar
• Mobile drawer navigation
• Toast notifications
• Skeleton loaders

---

🛠 Tech Stack

Frontend

• Next.js (App Router)
• React
• Tailwind CSS
• lucide-react (icons)
• react-hot-toast
• Framer Motion

Backend

• Node.js + Express
• PostgreSQL
• Prisma ORM

External Services

• Cloudinary → Image uploads
• JWT → Authentication

---

🏗 Architecture

┌────────────────────────────┐
│        Frontend            │
│   (Next.js App Router)     │
│                            │
│ - Dashboard UI             │
│ - Profile Management       │
│ - Requests / Billing       │
│ - Sidebar / Navigation     │
└────────────┬───────────────┘
             │
             │ HTTP (REST API)
             │
┌────────────▼───────────────┐
│         Backend            │
│     (Node.js + Express)    │
│                            │
│ - Authentication (JWT)     │
│ - User Management          │
│ - Request Services         │
│ - Assignment Logic         │
│ - Billing & Payments       │
│ - Audit Trail System       │
└───────┬─────────┬──────────┘
        │         │
        │         │
        │         │
┌───────▼───┐  ┌──▼──────────────┐
│ PostgreSQL│  │   Cloudinary    │
│ Database  │  │ (Image Storage) │
│           │  │                 │
│ - Users   │  │ - Profile imgs  │
│ - Requests│  │ - Upload API    │
│ - Billing │  │                 │
│ - Audit   │  └─────────────────┘
└───────────┘

---

📂 Project Structure

🧩 Root Structure

Service-Request-and-Operations-Management-ERP-System/
│
├── frontend/          # Next.js frontend application
├── backend/           # Node.js + Express backend
├── README.md
└── .gitignore

🎨 Frontend Structure (Next.js)

frontend/
│
├── app/                          # App Router (Next.js)
│   ├── dashboard/
│   │   ├── page.tsx              # Dashboard home
│   │   ├── layout.tsx            # Dashboard layout
│   │   │
│   │   ├── profile/
│   │   │   └── page.tsx          # Profile page
│   │   │
│   │   ├── requests/
│   │   │   ├── page.tsx
│   │   │   ├── create/
│   │   │   ├── my/
│   │   │   └── [id]/             # Dynamic request details
│   │   │       └── page.tsx
│   │   │
│   │   ├── billing/
│   │   │   └── my-invoices/
│   │   │       └── page.tsx
│   │   │
│   │   ├── users/
│   │   │   └── create/
│   │   │       └── page.tsx
│   │   │
│   │   └── audit/
│   │       └── page.tsx
│   │
│   ├── login/
│   ├── register/
│   ├── layout.tsx
│   └── globals.css
│
├── components/                   # Reusable UI components
│   │
│   ├── layout/                  # Layout components
│   │   ├── Sidebar.tsx
│   │   ├── MobileSidebar.tsx
│   │   ├── DashboardTopbar.tsx
│   │   ├── UserMenu.tsx
│   │   └── UserAvatar.tsx
│   │
│   ├── ui/                      # Generic UI elements
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Table.tsx
│   │   ├── Modal.tsx
│   │   ├── ConfirmDialog.tsx
│   │   ├── SectionCard.tsx
│   │   └── StatusBadge.tsx
│   │
│   ├── profile/                 # Profile-related components
│   │   └── ImageDropzone.tsx
│   │
│   ├── requests/                # Request-related components
│   │   ├── RequestOverviewCard.tsx
│   │   ├── CustomerDetailsCard.tsx
│   │   ├── AssignmentHistoryCard.tsx
│   │   ├── BillingHistoryCard.tsx
│   │   └── StatusTimelineCard.tsx
│   │
│   └── charts/                  # Dashboard charts
│       ├── RequestsStatusChart.tsx
│       ├── InvoiceStatusChart.tsx
│       └── AssignmentsStatusChart.tsx
│
├── context/
│   └── AuthContext.tsx          # Authentication context
│
├── hooks/
│   ├── useMediaQuery.ts
│   ├── useDebounce.ts
│   └── usePagination.ts
│
├── services/                    # API layer
│   ├── api.ts
│   ├── profile.ts
│   ├── upload.ts
│   ├── profile-image.ts
│   ├── request.ts
│   ├── billing.ts
│   ├── assignment.ts
│   └── audit.ts
│
├── lib/                         # Utilities
│   ├── navigation.ts
│   ├── formatDate.ts
│   ├── formatCurrency.ts
│   └── exportCsv.ts
│
├── types/                       # TypeScript types
│
├── public/                      # Static assets
│
├── next.config.ts
├── package.json
└── tsconfig.json

⚙️ Backend Structure (Node.js + Express + Prisma)

backend/
│
├── src/
│   │
│   ├── controllers/             # Request handlers
│   │   ├── auth.controller.ts
│   │   ├── user.controller.ts
│   │   ├── request.controller.ts
│   │   ├── assignment.controller.ts
│   │   ├── billing.controller.ts
│   │   └── audit.controller.ts
│   │
│   ├── services/                # Business logic
│   │   ├── user.service.ts
│   │   ├── request.service.ts
│   │   ├── assignment.service.ts
│   │   ├── billing.service.ts
│   │   └── audit.service.ts
│   │
│   ├── routes/                  # API routes
│   │   ├── auth.routes.ts
│   │   ├── user.routes.ts
│   │   ├── request.routes.ts
│   │   ├── assignment.routes.ts
│   │   ├── billing.routes.ts
│   │   └── audit.routes.ts
│   │
│   ├── middleware/              # Middleware
│   │   ├── auth.middleware.ts
│   │   ├── role.middleware.ts
│   │   ├── error.middleware.ts
│   │   └── upload.middleware.ts
│   │
│   ├── config/                  # Configurations
│   │   ├── prisma.ts
│   │   └── cloudinary.ts
│   │
│   ├── utils/                   # Helper functions
│   │
│   └── server.ts                # Entry point
│
├── prisma/
│   ├── schema.prisma
│   └── migrations/
│
├── package.json
└── tsconfig.json

---

⚙️ Setup Instructions

1️⃣ Clone Repository

git clone https://github.com/supunakalanka76/Service-Request-and-Operations-Management-ERP-System.git

2️⃣ Install Dependencies

cd frontend
npm install

cd backend
npm install

3️⃣ Environment Variables

Backend .env

DATABASE_URL=postgresql://user:password@localhost:5432/erp_db

JWT_SECRET=your_secret_key

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_key
CLOUDINARY_API_SECRET=your_secret

Frontend .env.local

NEXT_PUBLIC_API_URL=http://localhost:5000/api

4️⃣ Run Project

cd backend
npm start

cd frontend
npm start

---

📊 Core Modules

Module	Description
Users	Manage system users
Requests	Handle service requests
Assignments	Job assignment tracking
Billing	Invoices & payments
Audit	Activity logs
Profile	User profile management

---

🔧 Future Improvements

• 🔐 Role permissions (fine-grained RBAC)
• 📊 Advanced analytics dashboard
• 📧 Email notifications
• 📱 Mobile app (React Native)
• 🔄 Real-time updates (WebSockets)
• 🧪 Unit & integration testing

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

📧 Support

For support, questions, or feedback:

• Email:
  • Personal: supunakalanka76@gmail.com
• GitHub Issues: Create an issue

---

Made with ❤️ by Supun Akalanka

---