IT-Management-System
# ๐ฅ๏ธ IT Management System       --- ## ๐ About The Project **IT Management System** is a full-stack IT asset and user management platform that helps organizations securely manage employees, their assigned devices, and authentication. The platform offers **admin dashboards, secure login, device tracking, and project scalability**. Built using **Next.js, MongoDB, JWT, Zustand, and ShadCN UI**, this system ensures robust data handling, a modern responsive design, and **enterprise-ready security practices**. It is perfect for IT admins, HR teams, and organizations that need to manage large sets of users and their assets with precision. --- ## โจ Key Features - ๐ **JWT Authentication**: Secure login and session handling with token expiry and ban mechanism. - ๐ฅ **User Management**: Create, edit, list, and delete users with support for pagination and search. - ๐ป **Device Tracking**: Assign devices to users, track multiple devices per employee, and monitor status. - ๐ **Soft Delete System**: Devices are not permanently deleted; instead, they are flagged and preserved for audit history. - ๐ **Admin Settings**: Update password, change username, and manage authentication settings. - ๐งญ **Search & Pagination**: Optimized for large datasets to ensure smooth browsing. - ๐ผ **Modern Responsive UI**: Built with TailwindCSS + ShadCN for an interactive and mobile-first design. - โก **State Management**: Managed with Zustand for predictable app-wide state handling. --- ## ๐ธ Screenshots ### Login Page  ### Dashboard  ### Search User  ### Add User  ### Device Management  ### Admin Settings  ### Change Name  ### Change Password  --- ## ๐๏ธ Architecture The system follows a **client-server model** designed for performance, modularity, and scalability. - **Frontend (Next.js + TailwindCSS + ShadCN UI)**: - Renders the dashboard, forms, and settings. - Manages authentication state and client routing. - Zustand for state persistence. - **Backend (Next.js API Routes)**: - Handles authentication, user, and device CRUD operations. - Validates tokens and sessions. - **Database (MongoDB + Mongoose)**: - Stores user data, admin profiles, devices, and blacklisted tokens. - **Authentication (JWT)**: - Provides secure login with expiration and token invalidation. ```mermaid graph TD %% ============================== %% CLIENT LAYER %% ============================== subgraph Client U[๐ฅ๏ธ User Browser] --> F[๐ป Next.js Frontend] end %% ============================== %% BACKEND & API LAYER %% ============================== subgraph Backend F --> API[โ๏ธ Next.js API Routes] API --> DB[(๐๏ธ MongoDB via Mongoose)] API --> Auth[๐ JWT Authentication Service] API --> RT[๐ WebSocket - Real-Time Updates] API --> Files[๐ File Upload Service] end %% ============================== %% AUTHENTICATION %% ============================== subgraph Authentication Auth --> DB U -->|๐ Login/Signup| Auth Auth -->|โ Validate & Issue JWT| U end %% ============================== %% DATABASE %% ============================== subgraph Database DB[(๐๏ธ MongoDB)] DB --> Users[๐ค Users Collection] DB --> Devices[๐ป Devices Collection] DB --> Tickets[๐ซ Support Tickets Collection] DB --> Logs[๐ Activity Logs Collection] end %% ============================== %% SERVICES %% ============================== subgraph Services API --> Notif[๐ Notification Service] API --> Billing[๐ณ Billing/Payments Service] API --> Reports[๐ Reporting & Analytics Engine] end %% ============================== %% FLOWS %% ============================== U -->|๐ View Dashboard| F U -->|๐ก Request Device Data| API API -->|๐ Fetch & Return Data| Devices U -->|๐ค Upload Document| Files Files --> DB API -->|๐ Send Alert| Notif Billing --> API Reports --> API %% ============================== %% STYLING %% ============================== classDef client fill:#6ac6b7,stroke:#000,stroke-width:2px,color:#000; classDef backend fill:#f1a4cb,stroke:#000,stroke-width:2px,color:#000; classDef auth fill:#92f6c5,stroke:#000,stroke-width:2px,color:#000; classDef db fill:#f1e1a4,stroke:#000,stroke-width:2px,color:#000; classDef services fill:#82c7f9,stroke:#000,stroke-width:2px,color:#000; classDef user fill:#ffcc00,stroke:#000,stroke-width:2px,color:#000; %% Apply classes class U user; class F client; class API,RT,Files backend; class Auth auth; class DB,Users,Devices,Tickets,Logs db; class Notif,Billing,Reports services; ``` --- ## ๐ Built With - **Frontend**: Next.js 15, TypeScript, TailwindCSS, ShadCN UI - **Backend**: Next.js API Routes, Mongoose, JWT - **Database**: MongoDB - **State Management**: Zustand - **Forms & Validation**: React Hook Form + Zod --- ## โ๏ธ Getting Started ### Prerequisites Ensure you have the following installed: - Node.js 18+ - MongoDB (local or cloud instance) - A text editor (VS Code recommended) --- ### Installation 1. Clone the repository: ```bash git clone https://github.com/username/it-management-system.git cd it-management-system ``` 2. Install dependencies: ```bash npm install ``` --- ### Configuration Rename `.env.samples` to `.env.local` and set the following: ```env NODE_ENV=development NEXT_PUBLIC_SITE_URL=http://localhost:3000 NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api MONGODB_URI=mongodb://localhost:27017/ DB_NAME=IT_Management_System SALT_ROUNDS=10 JWT_SECRET=your_secret JWT_EXPIRES_IN=10h NEXT_PUBLIC_PAGE_SIZE=50 ``` --- ### Database Setup MongoDB is used as the primary database. Ensure your local/remote MongoDB instance is running. You can verify connection via: ```bash mongosh use IT_Management_System ``` --- ### Run Development Server ```bash npm run dev ``` Visit: [http://localhost:3000](http://localhost:3000) --- ## ๐ Directory Structure The project is organized as follows: ``` Directory structure: โโโ it-management-system/ โโโ README.md โโโ components.json โโโ eslint.config.mjs โโโ LICENSE โโโ next.config.ts โโโ package.json โโโ pnpm-workspace.yaml โโโ postcss.config.mjs โโโ tsconfig.json โโโ .env.samples โโโ .prettierignore โโโ .prettierrc.json โโโ app/ โ โโโ globals.css โ โโโ layout.tsx โ โโโ not-found.tsx โ โโโ page.tsx โ โโโ add-user/ โ โ โโโ page.tsx โ โโโ api/ โ โ โโโ auth/ โ โ โ โโโ log-out/ โ โ โ โ โโโ route.ts โ โ โ โโโ login/ โ โ โ โ โโโ route.ts โ โ โ โโโ validate/ โ โ โ โ โโโ route.ts โ โ โ โโโ verify/ โ โ โ โโโ route.ts โ โ โโโ settings/ โ โ โ โโโ change-password/ โ โ โ โ โโโ route.ts โ โ โ โโโ change-userName/ โ โ โ โโโ route.ts โ โ โโโ user/ โ โ โโโ edit/ โ โ โ โโโ [id]/ โ โ โ โโโ route.ts โ โ โโโ get-user-by-id/ โ โ โ โโโ [id]/ โ โ โ โโโ route.ts โ โ โโโ get-users/ โ โ โ โโโ route.ts โ โ โ โโโ [name]/ โ โ โ โโโ route.ts โ โ โโโ register-user/ โ โ โโโ route.ts โ โโโ home/ โ โ โโโ page.tsx โ โโโ manage-user/ โ โ โโโ page.tsx โ โ โโโ [userID]/ โ โ โโโ page.tsx โ โโโ settings/ โ โโโ page.tsx โโโ components/ โ โโโ footer/ โ โ โโโ Index.tsx โ โโโ header/ โ โ โโโ Index.tsx โ โโโ loadings/ โ โ โโโ AddUserPageLoading.tsx โ โ โโโ HomePageLoading.tsx โ โ โโโ SettingsPageLoading.tsx โ โโโ navigation/ โ โ โโโ Index.tsx โ โโโ ui/ โ โโโ button.tsx โ โโโ card.tsx โ โโโ dialog.tsx โ โโโ form.tsx โ โโโ input.tsx โ โโโ label.tsx โ โโโ separator.tsx โ โโโ sheet.tsx โ โโโ sidebar.tsx โ โโโ skeleton.tsx โ โโโ sonner.tsx โ โโโ tooltip.tsx โ โโโ UserBox.tsx โโโ hooks/ โ โโโ use-mobile.ts โ โโโ useAuth.ts โโโ lib/ โ โโโ axios.ts โ โโโ constant.ts โ โโโ db.ts โ โโโ parseJwtExpiry.ts โ โโโ types.ts โ โโโ utils.ts โ โโโ models/ โ โ โโโ Admin.model.ts โ โ โโโ BanToken.model.ts โ โ โโโ Device.model.ts โ โ โโโ User.model.ts โ โโโ store/ โ โโโ useStore.ts โโโ services/ โโโ GET.tsx โโโ POST.tsx ``` ### Key Folders: - **/app/api** โ Backend APIs for authentication, users, and devices. - **/models** โ Mongoose schemas (User, Device, Admin, Token). - **/components** โ UI components (forms, tables, modals). - **/lib** โ Helpers (JWT signing, validation, encryption). - **/hooks** โ Zustand state hooks. - **/public** โ Static assets. --- ## ๐ Authentication - **JWT Authentication**: All routes are secured via JSON Web Tokens. - **Password Hashing**: Passwords hashed with bcrypt and salt rounds. - **Token Blacklist**: Expired/banned tokens stored in DB to prevent misuse. --- ## ๐ Device & User Management - Add new users with multiple device assignments. - Update, search, and paginate users & devices. - Soft-delete devices for audit trail. - Admins can reset credentials via settings page. --- ## ๐ฃ๏ธ Roadmap - [x] User Management (CRUD) - [x] Device Management (CRUD + Soft Delete) - [x] JWT Authentication & Admin Settings - [ ] Role-Based Access Control (RBAC) - [ ] Export Reports (PDF, CSV) - [ ] Cloud Deployment (Vercel/AWS) --- ## ๐ License MIT License ยฉ 2025 Aryan Baadlas --- ## ๐ฌ Contact ๐จโ๐ป **Aryan Baadlas** ๐ง **[email protected]** --- ### โญ Show some love! If you like this project, **give it a star โญ on GitHub**!