Report Management System

A lightweight daily report & hours tracking app with role-based dashboards, HR tools, client/activity analytics, and company-wide insights.
Frontend: React + Vite · Backend: Go (Gin) + MongoDB · Deployed on Vercel (FE) and Render (BE).

Superadmin + per-department Admin/Employee demo accounts are already provisioned on the live server so you can try the app end-to-end.

🌐 Live on Vercel:
https://report-management-system-one.vercel.app

Demo Credentials (pre-created)

Superadmin
  email: daniel.cross@example.com
  password: 123

Admin (e.g., Sales)
  email: olivia.trent@example.com
  password: 123

HR
  email: ellie.cantrell@example.com
  password: 123

Employee (e.g., Sales)
  email: aaron.blake@example.com
  password: 123

ℹ️ HR, multi-department accounts, and client analytics are easiest to see when logged in as Superadmin (for the Company Review & HR tools) and as Admin/Employee (for daily flow).

Key Features (High-Level)

🕒 Daily Reports
- Employees submit per-day reports with total hours + detailed entries (activity, client, hours, notes).
- Edit today’s report or revisit previous days from history.
🔍 Smart Search
- Full-text search on report content (title/body).
- Filter by department, date range, and employee (for admins/superadmin).
👥 Employee & Department Analytics
- Department dashboards with:
  - Time-series charts (7d, 30d, 6m, 12m).
  - Totals, averages, and top contributors.
- Compare multiple employees within a department on the same chart.
🧠 Company Review (Superadmin Analytics Layer)
- Company Summary card with:
  - Employees: total, active, on leave, sick, military, resigned
    (calculated unique per email, so multi-department clones count as one person).
  - Clients: total vs active (by usage).
  - Activities: total vs active.
  - Departments: total, active, archived.
- Reports Coverage:
  - View which departments actually uploaded reports.
  - Shows number of reports and unique employees who reported.
- Mix Pie Charts:
  - Client mix: which clients consume most hours (7d/30d/6m/12m).
  - Activity mix: which activities consume most hours.
  - Department hours pie: which departments log more hours.
  - Per-department activity pie: within a department, which activities dominate.
- Client Trends:
  - Detect clients whose hours are trending up or down between two consecutive periods.
  - Shows current vs previous hours, absolute & % delta, and “up/down/flat” trend.
📋 People / Clients / Activities / Departments Detail Modal
- A “Details” modal (Summary Inspect) where Superadmin can drill down into:
  - People: lists on leave, sick, military service, resigned (with dates & departments).
  - Clients: split into “Active / Not Active” based on last 30 days of recorded hours.
  - Activities: which activities were used vs not used in the recent period.
  - Departments: active vs archived departments and their employee counts.
- Built-in search inside the modal for quick filtering and highlighting.
💬 Reminders & Messages
- HR/Admin/Superadmin can send department-targeted or company-wide announcements.
- Reminders auto-expire after a certain time window so the UI stays clean.
📊 Exports (Experimental)
- Frontend-only export buttons (CSV/PNG) on some charts.
This feature is experimental and may not be fully reliable yet.
🧱 Role-Based Access Control
- Roles: Superadmin, HR, Admin, Employee.
- All protected routes are gated via JWT + role checks on both backend and frontend.
🔐 SPA-safe Routing & Auth
- React Router SPA setup, with RedirectIfAuth and RequireRole guard components.
- Deep links and refreshes work; unauthorized access redirects back to /login.

HR & Multi-Department Features

HR Dashboard

The HR role gets a dedicated dashboard to manage structural data about the company:

🗂 Departments Management
- Create, rename, and archive departments.
- Backend enforces department collection seeding and keeps field names consistent.
- Archived departments are treated separately in analytics & summaries.
🧑‍💼 Employee Status Tracking
- HR can maintain a status timeline for each employee:
  - active, on_leave, sick, military, resigned
  - Optional until dates for time-bound statuses (on_leave, sick, military).
  - resigned automatically pins the resignation date to “today”.
- Backend guarantees:
  - Per-user latest status via aggregation.
  - Company Summary uses these to compute active/leave/sick/military/resigned counts.
🎨 Branding
- HR can adjust basic branding:
  - Company name / brand label.
  - (Optionally) primary color / logo settings depending on environment.

Multi-Department Accounts & Switching

Some people work across multiple departments (e.g., Sales and Support).
The system models this via per-department user clones linked by the same email:

HRAssignDepartment creates a new user record for the same email in another department:
- Copies only core fields (name, email, hash, role).
- Does not copy client assignments — new department starts clean.
HRRemoveDepartment removes a specific department copy:
- Cleans up related reports, messages, self_reminders, employee_status for that user/dept.
- Optionally creates a fallback “Development” user if no other department records exist for that email.

On the frontend:

Top bar shows current department and a department switcher:
- GET /api/auth/my-accounts returns all accounts (clones) for the logged-in email.
- POST /api/auth/switch-account returns a new JWT + user payload for the chosen department.
- A smooth overlay (DepartmentSwitchOverlay) shows a “Switching to X Department…” animation before reload.

This makes multi-department work realistic while still keeping per-department data isolated.

Client & Activity Management

Global Clients Registry

The clients collection stores all client names.
HR/Admin/Superadmin can:
- Add new clients from the Clients Manager modal.
- Soft-delete clients: DELETE /api/clients/:id sets active: false.
- Reactivate clients later with a dedicated “Reactivate” button.

On the frontend:

HRClientsManager allows:
- Adding new active clients.
- Listing active or inactive clients (toggle “Show Active / Show Inactive”).
- Soft-delete & restore using a clean confirmation flow and toast notifications.

Assign Clients to Users

Admins and Superadmin can assign which clients a user is allowed to report for:
- API: PUT /api/users/:id/clients with a list of client IDs.
- Enforced so department admins can only manage users within their department.
Employee dashboards can then use this set to drive:
- Allowed client dropdowns in report entries.
- Client-based analytics for that user.

Activity Management & Usage

Activities are defined per department.
HR/Admin/Superadmin can see:
- Which activities are in use vs unused in a given period via Company Review → Activities.
- Activity mix charts to understand where hours are spent.

Roles & Permissions

Superadmin

Full company-wide access:
- Company Review: summary cards, coverage stats, global mix pies, client trends.
- View analytics across all departments, switch context, and compare departments.
Manage:
- Users (add admin/employee, multi-department assignment).
- HR-related metadata (with HR role).
- Global reminders/messages.
Doesn’t submit personal reports (no “My Activity” section).

HR

Manage departments, employee statuses, and branding.
See company-level people breakdown:
- Who is on leave, sick, military, or resigned and until when.
Can coordinate with Superadmin/Admin for structural changes.

Admin (per-department)

Full analytics for their department only:
- Trends, stats, top contributors, coverage.
Manage:
- Employees in their department (user list, basic user info).
- Client assignments for their department’s employees.
- Department-level reminders/messages.
Also has a personal daily report flow (write/edit/search own reports).

Employee

Submit/edit daily/weekly reports (hours + content + activity/client breakdown).
View personal history and summary statistics (“My Activity”).
See department reminders & general announcements.

Tech Stack

Frontend

React + Vite
React Router (protected routes with RequireRole / RedirectIfAuth)
Recharts (data viz: trends, pies, coverage charts)
Lucide React (icons)
Vanilla CSS modules (custom layout & styling)
Lightweight Toast system for notifications

Backend

Go (Gin) for HTTP API
MongoDB with official Go driver
JWT auth (golang-jwt)
bcrypt for password hashing
CORS, environment-based configuration (dotenv style)

Infra

Vercel – frontend hosting
Render – backend hosting
MongoDB Atlas – managed database

Running the Project Locally

Prerequisites

Go ≥ 1.22 (install the latest stable)
Node.js ≥ 18 and npm
A MongoDB connection string (Atlas or local)

Departments are seeded automatically on backend start if the collection is empty.

1) First-time setup

1.1 Clone the repo

git clone https://github.com/<your-user>/<your-repo>.git
cd <your-repo>

1.2 Create env files

Backend (backend/.env)

PORT=5000
MONGO_URI=<your-mongodb-uri>
JWT_SECRET=<a-long-random-secret>
# Optional in local (CORS already allows localhost:5173)
# CLIENT_URL=http://localhost:5173

Frontend (frontend/.env)

VITE_API_URL=http://localhost:5000/api

1.3 Install dependencies

Backend

cd backend
go mod download

Frontend

cd frontend
npm install

2) Run (dev)

Two terminals:

Terminal A – Backend

cd backend
go run main.go
# → http://localhost:5000

Terminal B – Frontend

cd frontend
npm run dev
# → http://localhost:5173

Then open http://localhost:5173 in your browser and log in with one of the demo users.

3) Subsequent runs (after the first day)

You don’t need to reinstall anything unless dependencies changed.

Backend

cd backend
go run main.go

Frontend

cd frontend
npm run dev

Go Modules (go.mod / go.sum): Quick Reference

Most common (after pulling, or when you added/removed imports):

cd backend
go mod tidy        # cleans up go.mod/go.sum (adds missing, drops unused)
go mod download    # (optional) pre-download modules

Add a new dependency:

go get github.com/some/lib@latest
go mod tidy

Update all to latest minor/patch:

go get -u ./...
go mod tidy

Fix checksum / sum mismatches:

go clean -modcache
go mod tidy
go mod download

Verify everything is consistent:

cd backend
go mod verify

Rule of thumb: whenever go.mod or go.sum changes, go mod tidy is usually all you need. For new deps, do go get … then go mod tidy.

Notes & Tips

CORS (local): Already whitelisted for http://localhost:5173 and http://127.0.0.1:5173. CLIENT_URL is not required locally.
CORS (prod): When deployed, set CLIENT_URL on the backend to your Vercel URL, and set VITE_API_URL on the frontend to your backend’s /api base.
Ports: Backend defaults to :5000; Frontend (Vite) defaults to :5173.
Mongo: Use Atlas or a local MongoDB; just point MONGO_URI to the right place.
Auto seed: Departments indexes + seed run automatically on backend start if empty.

UX Notes

🔐 Auth & History
- Protected routes always check JWT + role.
- Hitting / (login) while already authenticated redirects to the correct dashboard (/superadmin, /admin, /hr, or /employee).
👥 Multi-Department Users
- Same email can have multiple department accounts.
- Switching departments refreshes your token and user context; an overlay shows which department you’re moving into.
🧍 Employee Status Consistency
- Statuses are stored in a separate collection with timestamps.
- Company Summary and People detail lists are derived from the latest status per user, with resigned users excluded from “active” counts.
📊 Analytics Context
- All charts (department, client, activity, company) respect the selected period (7d/30d/6m/12m).
- “Active / Not Active” for clients & activities is defined by non-zero hours in the last 30 days (for the relevant view).

Previews

Employee

_{Employee dashboard with department switcher and reminders}	_{Report editor with client selector for line items}
_{Report editor with activity dropdown for line items}	_{Reports history view with daily line-item breakdown}
_{Work Mix Analytics – top clients and top activities}	_{Work Mix Analytics – per-client activity mix and time trends}
_{Create Self Reminder modal with client, activity, and frequency}	_{Work Mix Analytics – client × activity hours and per-client pies}

Admin

_{Admin dashboard with department tools and system messages}	_{Employee Management – weekly view of reports, status, and hours}
_{Department Work Mix Analytics – top clients and top activities}	_{Department Work Mix Analytics – client × activity mix and per-client pies}
_{Department trends – hours over time with client/activity toggle}	_{Assign Clients – per-employee client selection panel}
_{Department Message Center – create and manage department notices}	_{Manage Activities – add, search, and remove department activities}

HR

_{HR dashboard with company-wide management tools}	_{Active Clients dialog for adding, searching, and archiving company clients}
_{Departments page with active/archived columns and per-department stats}	_{Add Employees dialog with single-employee form and CSV bulk import}
_{Report Schedules dialog for per-department submission frequency, day, and time}	_{Assign Department dialog for adding users to additional departments}
_{Employee Status view showing role, status, and leave information per employee}	_{Branding page to customize login logo and preview the sign-in screen}

Superadmin

_{Superadmin dashboard with employee, analytics & message tiles}	_{Employee list by department with report status badges}
_{Department Work Mix with client and activity hours charts}	_{Per-client activity mix shown with donut charts}
_{Department trends of client/activity hours over time}	_{Employees × Activities stacked bars by activity hours}
_{Single employee activity mix donut with trend line}	_{Employees × Clients stacked bars by client hours}
_{Employee client mix donut showing time split by clients}	_{Client trend lines per employee over time}
_{Superadmin landing dashboard for company-wide management}	_{Browse department employees and their report status}
_{Hours by client and activity for the selected period}	_{Per-client share of research, meetings & routine work}
_{Department client and activity trends by month}	_{How each employee distributes hours across activities}
_{Single employee activity mix and timeline}	_{How employees allocate hours across different clients}
_{Employee client mix and trend for one selected client}	_{Client trend chart of employee hours over time}
_{Summary counts for people, clients, activities & departments}	_{People details: on leave, sick, military & resigned}
_{Weekly reports uploaded vs missing by department}	_{Company-wide hours split by clients and activities}
_{Departments Mix: hours by department and activities}	_{Client Trends: top rising and falling clients}
_{Client change table with hour deltas and trend}	_{Department details with employee counts}