syscare-dynamicdev_

🛠️ ITSM System (Information Technology Service Management)

A modern, full-stack IT Service Management system built with React, Node.js, and PostgreSQL.

Features • Tech Stack • Installation • Usage • Screenshots

---

🎯 Overview

syscare-dynamicdev_ is a comprehensive IT Service Management (ITSM) system designed to streamline service request handling, ticket management, and customer support operations. Built with modern web technologies and a sleek Cyberpunk Tech Red theme, it provides an intuitive interface for both customers and administrators.

---

✨ Features

📋 Customer Portal

• Service Request Submission - Customers can submit tickets with detailed descriptions
• File Attachments - Support for multiple image uploads (up to 5 files)
• Priority Selection - Low, Medium, High, and Critical priority levels
• Real-time Notifications - Instant feedback on ticket status

🎛️ Admin Dashboard

• Ticket Management - View, update, and resolve service requests
• Status Tracking - New → In Progress → Resolved workflow
• Admin Notes - Internal notes visible to customers
• Statistics Dashboard - Real-time charts and analytics
• Notification Bell - Real-time alerts for new tickets

👥 Role-Based Access Control (RBAC)

• Super Admin - Full system access including admin management
• General Admin - Ticket management and customer support

🌟 Premium Features - Unlock Professional Customization

Transform your ITSM into your own branded platform!

What Premium Unlocks:

• 🎨 Custom Branding Suite - Upload your company logo and rebrand the entire system with your identity
• ✨ Personalized Tagline - Replace default branding with your company slogan and messaging
• 🏷️ Custom Footer Text - Full footer customization for professional presentation
• ⏰ Flexible Activation - Choose between 1 hour (testing), 7 days, or 15 days duration
• 🔄 Hot-Swap Branding - Change branding on the fly without system restart
• 🔐 Secure License System - Advanced key-based activation for premium tier

Why Go Premium?

• Make the system truly yours with white-label capabilities
• Perfect for MSPs, IT consulting firms, and corporate deployments
• Impress clients with professional, branded service portals
• Flexible pricing with duration-based licensing

Ready to Upgrade? Scan the QR code in the App Settings panel to get your Premium License Key and unlock unlimited customization possibilities!

🔐 Security

• JWT Authentication - Secure token-based authentication
• Password Hashing - bcrypt encryption for passwords
• Protected Routes - Secure admin access

---

🛠️ Tech Stack

Frontend

Technology	Description
⚛️ React 18	UI Library with Hooks
📘 TypeScript	Type-safe JavaScript
⚡ Vite	Next-gen build tool
🎨 Tailwind CSS	Utility-first CSS framework
🔌 Socket.io Client	Real-time communication
🍞 React Hot Toast	Beautiful notifications
📊 Recharts	Chart library for analytics
🎯 Lucide React	Beautiful icon library

Backend

Technology	Description
🟢 Node.js 18	JavaScript runtime
🚀 Express.js	Web application framework
🔌 Socket.io	Real-time bidirectional communication
🔐 JWT	JSON Web Token authentication
🔒 bcryptjs	Password hashing
📁 Multer	File upload handling

Database

Technology	Description
🐘 PostgreSQL 15	Relational database
🔧 Adminer	Database management UI

DevOps

Technology	Description
🐳 Docker	Containerization
🐙 Docker Compose	Multi-container orchestration

---

📦 Installation

Prerequisites

• Docker & Docker Compose
• Node.js 18+ (for local development)
• Git

Quick Start with Docker

1. Clone the repository

   git clone https://github.com/your-username/syscare-dynamicdev.git
   cd syscare-dynamicdev

2. Start all services

   docker-compose up --build -d

3. Access the application

   • 🌐 Frontend: http://localhost:5173
   • 🔧 API: http://localhost:8798
   • 🗄️ Adminer (DB GUI): http://localhost:8993

4. Default Admin Credentials

   Email: default@localhost
   Password: password
   

   ⚠️ Important: Change the default password immediately after first login!

---

🔧 Configuration

Environment Variables

The following environment variables can be configured in docker-compose.yml:

Variable	Default	Description
DB_HOST	db	Database host
DB_PORT	5432	Database port
DB_USER	admin	Database username
DB_PASS	password	Database password
DB_NAME	db	Database name
PORT	8798	API server port
JWT_SECRET	change_this_secret_in_production	JWT signing secret

Database Connection (Adminer)

Field	Value
System	PostgreSQL
Server	db:5432
Username	admin
Password	password
Database	db

---

🚀 Usage

Customer Portal

1. Navigate to http://localhost:5173
2. Fill in the service request form:
   • Customer name and contact information
   • Problem description
   • Select priority level
   • Attach relevant images (optional)
3. Submit the request
4. Track your ticket status

Admin Dashboard

1. Click "Admin Login" in the navigation
2. Enter your credentials
3. Manage tickets:
   • View all service requests
   • Update ticket status
   • Add admin notes
   • View attached images
4. Access statistics and charts

App Settings (Super Admin Only)

1. Navigate to "App Settings" tab
2. Activate premium features with a license key
3. Customize:
   • Upload custom logo
   • Change app name
   • Modify tagline
   • Update footer text

---

📁 Project Structure

syscare-dynamicdev/
├── public/                 # Static assets
│   ├── dynamicdev.png     # Default logo
│   ├── payment-qr.jpg     # Payment QR code
│   └── uploads/           # User uploaded files
├── server/                # Backend API
│   ├── index.js          # Express server
│   ├── authMiddleware.js # JWT authentication
│   ├── upload-middleware.js # File upload handler
│   └── schema-migration.sql # Database schema
├── src/                   # Frontend source
│   ├── components/       # React components
│   ├── pages/           # Page components
│   ├── App.tsx          # Main app component
│   ├── config.ts        # API configuration
│   └── index.css        # Global styles
├── docker-compose.yml    # Docker services
├── dockerfile           # Frontend container
└── README.md           # This file

---

🔒 Security Recommendations

Before deploying to production:

1. Change Default Credentials

   • Update database password in docker-compose.yml
   • Change default admin password after first login
   • Set a strong JWT_SECRET

2. Environment Variables

   • Use .env files for sensitive data
   • Never commit secrets to version control

3. HTTPS

   • Enable HTTPS with SSL certificates
   • Use a reverse proxy (nginx, Traefik)

4. Firewall

   • Restrict port access
   • Only expose necessary ports

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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.

---

👨‍💻 Author

dynamicdev_

• GitHub: @dynamicdev-jamesdynamicdev

---

⭐ Star this repo if you find it useful! ⭐

Made with ❤️ and ☕