Complaint Management System

A modern, user-friendly web application for managing and tracking complaints. This system provides a streamlined process for submitting, tracking, and resolving complaints, with features for both users and administrators.

Features

• Complaint Submission: A comprehensive form for users to submit new complaints, including details like issue category, department, and a detailed description.
• Ticket Tracking: A robust ticketing system to view, manage, and track the status of all submitted complaints.
• Detailed Ticket View: An in-depth view for each ticket, showing all relevant information and a history of actions taken.
• Reporting and Analytics: Generate reports and view analytics on complaint data.
• Customizable Configurations: Easily configure departments, issue categories, and other application settings.
• QR Code Generation: Generate QR codes for easy access to specific tickets or pages.
• Responsive Design: A fully responsive and mobile-friendly user interface.

Tech Stack

• Frontend:
  • React
  • Vite
  • React Router
• Styling:
  • Material-UI (MUI)
  • Tailwind CSS
• State Management & Forms:
  • React Hook Form
• Data Fetching:
  • Axios
• Linting & Code Quality:
  • ESLint

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/complaint-system.git

2. Navigate to the project directory:

   cd complaint-system

3. Install dependencies:

   npm install

Running the Application

To run the application in development mode, use the following command:

npm run dev

This will start the development server, and you can view the application in your browser at http://localhost:5173 (or another port if 5173 is in use).

Building for Production

To create a production build of the application, run:

npm run build

This will create a dist folder with the optimized and minified files for deployment.

Available Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm run lint: Lints the codebase for errors and style issues.
• npm run preview: Starts a local server to preview the production build.
• npm test: Runs the test suite.

Project Structure

/
├── public/              # Static assets
├── src/
│   ├── assets/          # Images, icons, etc.
│   ├── pages/           # Application pages
│   │   ├── api/         # Axios instance
│   │   ├── Components/  # Shared components
│   │   ├── Context/     # Auth context
│   │   ├── Hooks/       # Custom hooks
│   │   ├── MasterSettings/ # Configuration pages
│   │   └── Report/      # Report pages
│   ├── App.jsx          # Main application component with routing
│   ├── main.jsx         # Entry point of the application
│   └── index.css        # Global styles
├── .gitignore           # Git ignore file
├── eslint.config.js     # ESLint configuration
├── package.json         # Project dependencies and scripts
├── README.md            # Project documentation
└── vite.config.js       # Vite configuration