ReportHub

A highly professional and fully functional team management web application built with the MERN stack (MongoDB, Express, React, Node.js).

Features

🔐 User Authentication and Authorization

• Secure user login and registration using JSON Web Tokens (JWT)
• Password hashing with bcrypt for enhanced security
• Role-based access control (Admin/User)

📊 Daily and Weekly Reports

• Easy-to-use forms for submitting daily work reports
• Automatic compilation into weekly summaries
• Track tasks completed, hours worked, blockers, and notes
• Admin approval workflow

👨‍💼 Admin Dashboard

• Comprehensive overview of team performance
• User management (activate/deactivate, assign roles)
• View and manage all reports
• Assign tasks to team members
• Send announcements to the team
• Visual analytics and statistics

📈 Progress Tracking

• Visual progress bars for individual tasks
• Real-time analytics for team performance
• Interactive charts for data visualization
• Task completion tracking

📱 Responsive and Intuitive UI/UX

• Mobile-friendly design
• Seamless user experience across all devices
• Modern and clean interface
• Accessible navigation

🔔 Real-Time Notifications

• WebSocket integration for instant updates
• Notifications for task assignments
• Alerts for new announcements
• Live updates for report submissions

Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• JWT - Authentication
• bcryptjs - Password hashing
• Socket.io - Real-time communication
• Helmet - Security headers
• express-rate-limit - Rate limiting

Frontend

• React - UI library
• React Router - Client-side routing
• Axios - HTTP client
• Socket.io-client - Real-time updates
• Recharts - Data visualization
• Vite - Build tool

Installation and Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas account)
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file in the backend directory:

cp .env.example .env

4. Update the .env file with your configuration:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/reporthub
JWT_SECRET=your_super_secret_jwt_key_change_this
JWT_EXPIRE=7d
NODE_ENV=development
CLIENT_URL=http://localhost:5173

5. Start the backend server:

# Development mode with auto-restart
npm run dev

# Production mode
npm start

The backend server will run on http://localhost:5000

6. (Optional) Seed the database with sample data:

npm run seed

This will create:

• An admin user: admin@reporthub.com / admin123
• Sample users: john@reporthub.com, jane@reporthub.com, bob@reporthub.com / user123

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create a .env file in the frontend directory:

cp .env.example .env

4. Update the .env file:

VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

5. Start the frontend development server:

npm run dev

The frontend will run on http://localhost:5173

Usage

First Time Setup

1. Open your browser and navigate to http://localhost:5173
2. Click on "Register" to create a new account
3. Fill in your details and submit
4. You'll be automatically logged in and redirected to the dashboard

Creating an Admin User

Option 1: Using the seed script (Recommended)

cd backend
npm run seed

This will create an admin user with credentials:

• Email: admin@reporthub.com
• Password: admin123

Option 2: Manual database update

To manually create an admin user, update the user role in MongoDB:

// Connect to MongoDB and run:
db.users.updateOne(
  { email: "your-email@example.com" },
  { $set: { role: "admin" } }
)

User Features

• Dashboard: View your tasks, recent reports, and statistics
• Submit Reports: Create daily work reports with tasks, hours, and notes
• View Reports: Access all your submitted reports
• Manage Tasks: Update task progress and status
• View Announcements: Stay updated with team announcements

Admin Features

• Admin Dashboard: Comprehensive overview of team metrics
• User Management: Activate/deactivate users, manage roles
• Task Assignment: Assign tasks to team members with priorities and due dates
• Report Review: Review and approve team member reports
• Announcements: Create and manage team-wide announcements
• Analytics: View team performance with interactive charts

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user

Users

• GET /api/users - Get all users (Admin only)
• GET /api/users/me - Get current user profile
• GET /api/users/:id - Get user by ID (Admin only)
• PUT /api/users/:id - Update user (Admin only)
• PUT /api/users/me/profile - Update own profile
• GET /api/users/stats/dashboard - Get user statistics
• DELETE /api/users/:id - Delete user (Admin only)

Reports

• POST /api/reports - Create daily report
• GET /api/reports - Get reports (with filters)
• GET /api/reports/:id - Get single report
• PUT /api/reports/:id - Update report
• DELETE /api/reports/:id - Delete report
• GET /api/reports/weekly/summary - Get weekly summary
• PUT /api/reports/:id/status - Update report status (Admin only)

Tasks

• POST /api/tasks - Create task (Admin only)
• GET /api/tasks - Get tasks
• GET /api/tasks/:id - Get single task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task (Admin only)

Announcements

• POST /api/announcements - Create announcement (Admin only)
• GET /api/announcements - Get all active announcements
• GET /api/announcements/:id - Get single announcement
• PUT /api/announcements/:id - Update announcement (Admin only)
• DELETE /api/announcements/:id - Delete announcement (Admin only)
• PUT /api/announcements/:id/read - Mark announcement as read

Security Features

• JWT-based authentication
• Password hashing with bcrypt
• Role-based access control
• Rate limiting to prevent abuse
• Security headers with Helmet
• Input validation
• Protected routes
• XSS prevention
• CORS configuration

Project Structure

ReportHub/
├── backend/
│   ├── config/
│   │   └── db.js
│   ├── models/
│   │   ├── User.js
│   │   ├── Report.js
│   │   ├── Task.js
│   │   └── Announcement.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── users.js
│   │   ├── reports.js
│   │   ├── tasks.js
│   │   └── announcements.js
│   ├── middleware/
│   │   ├── auth.js
│   │   └── error.js
│   ├── utils/
│   │   └── helpers.js
│   ├── server.js
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Navbar.jsx
│   │   │   └── Notifications.jsx
│   │   ├── pages/
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── AdminDashboard.jsx
│   │   │   ├── Reports.jsx
│   │   │   ├── CreateReport.jsx
│   │   │   ├── Tasks.jsx
│   │   │   └── Announcements.jsx
│   │   ├── context/
│   │   │   ├── AuthContext.jsx
│   │   │   └── SocketContext.jsx
│   │   ├── services/
│   │   │   ├── api.js
│   │   │   └── index.js
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
└── README.md

Contributing

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

License

This project is licensed under the MIT License.

Support

For support, please open an issue in the GitHub repository.