SnapNFix Dashboard

A comprehensive React TypeScript dashboard application for managing urban infrastructure issues and civic engagement. This administrative interface enables efficient tracking and management of infrastructure problems like potholes, defective manholes, and garbage collection issues.

🌟 Features

📊 Dashboard & Analytics

• Real-time Metrics: Track total incidents, resolved issues, and system performance
• Incident Trends: Visualize incident patterns and geographic distribution
• Category Analytics: Monitor incident types and resolution statistics

🎫 Incident Management

• Comprehensive Incident Tracking: View, filter, and manage all reported incidents
• Incident Trends: Visualize incident patterns and geographic distribution
• Category Analytics: Monitor incident types and resolution statistics

👥 User Management

• Admin Management: Add, suspend, activate, and manage administrator account
• Citizen Oversight: Monitor citizen users and their activity
• Role-Based Access Control: Secure access with super admin privilege

🌍 Internationalization

• Multi-Language Support: Full English and Arabic language support
• RTL Layout: Right-to-left layout support for Arabic users

🛠️ Tech Stack

Frontend Framework

• React 19 with TypeScript for type-safe development
• Vite for fast development and optimized builds

State Management & Routing

• Redux Toolkit with Redux Persist for state management
• React Router for client-side navigation

UI & Styling

• Tailwind CSS for utility-first styling
• Custom Component Library with reusable UI components

Backend Integration

• Axios for HTTP client communication
• Firebase for backend services

Development Tools

• ESLint for code quality and consistency
• TypeScript for static type checking

🚀 Getting Started

Prerequisites

• Node.js ≥18.0.0
• npm ≥7.0.0
• Git 22

Installation

1. Clone the repository

   git clone https://github.com/AbdelrhmanReda17/SnapNFix-Dashboard.git  
   cd SnapNFix-Dashboard  

2. Install dependencies

   npm install 

3. Start the development server

   npm run dev 

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Type check and build for production
• npm run lint - Run ESLint code quality checks
• npm run preview - Preview production build locally

📁 Project Structure

src/  
├── components/          # Reusable UI components  
│   ├── common/         # Shared components  
│   ├── support/        # Support system components  
│   └── ui/            # Base UI components  
├── pages/              # Application pages  
├── routes/             # Routing configuration  
├── services/           # API service layer  
├── store/              # Redux store and slices  
├── types/              # TypeScript type definitions  
├── utils/              # Utility functions  
├── hooks/              # Custom React hooks  
└── config/             # Configuration files  

🏗️ Architecture

The application follows a layered architecture pattern:

• Presentation Layer: React components with TypeScript
• State Management: Redux Toolkit with organized slices
• Service Layer: Axios-based API services extending BaseApiService
• Routing: React Router with protected routes and role-based access

Service Architecture

All API services extend a base service class providing standardized HTTP methods, error handling, and response transformation.

State Management

Redux Toolkit manages application state with domain-specific slices for users, incidents, metrics, and UI state. Some slices persist data for improved user experience.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/xxFeature)
3. Commit your changes (git commit -m 'Add some xxFeature')
4. Push to the branch (git push origin feature/xxFeature)
5. Open a Pull Request

📄 License

This project is part of the SnapNFix urban infrastructure management system.