A full-stack web application for teams to submit structured weekly work reports and for managers to view, filter, and analyze reports across the team through a consolidated dashboard.
- Frontend & Backend: Next.js 16 (App Router) + JavaScript
- Styling: Tailwind CSS
- Database: PostgreSQL (hosted on Neon)
- ORM: Prisma
- Authentication: NextAuth.js (Credentials provider, JWT sessions)
- Charts: Recharts
- AI Assistant: Google Gemini API (gemini-2.5-flash)
- Role-based authentication (Team Member / Manager)
- Personal weekly report page (create, edit, submit, view history)
- Team dashboard for managers (filters by member/project/date, submission status tracking)
- Projects/categories management (CRUD)
- Visual insights: submission charts, workload distribution, hours trend
- AI Chat Assistant for managers to query team activity (bonus feature)
- Node.js v18 or higher
- A Neon PostgreSQL database (free tier) or any PostgreSQL instance
- A Google AI Studio API key (free, for the AI Chat Assistant)
Clone the repository and install all required packages:
git clone <your-repo-url>
cd weekly-report-app
npm installCreate a .env file in the root directory with the following:
DATABASE_URL="your_postgresql_connection_string"
NEXTAUTH_SECRET="a_random_secret_string"
NEXTAUTH_URL="http://localhost:3000"
GEMINI_API_KEY="your_google_gemini_api_key"DATABASE_URL: Get this from your Neon dashboard (or any PostgreSQL provider).NEXTAUTH_SECRET: Any random string (used to encrypt sessions).GEMINI_API_KEY: Get a free key from Google AI Studio (used for the AI Chat Assistant).
This project uses PostgreSQL via Prisma ORM. Run the migration to create all tables (User, Project, Report, ProjectMember) on your database:
npx prisma migrate dev --name initThis connects to the PostgreSQL database specified in DATABASE_URL and creates the schema automatically. No separate local database installation is required if using a cloud provider like Neon.
This project uses Next.js API Routes as the backend (REST API), which live in the same codebase as the frontend. The backend starts automatically as part of the same dev server command below — there is no separate backend process to run.
Backend API routes are located in src/app/api/ (auth, register, projects, reports, users, chat).
Start the Next.js development server, which serves both the frontend (React pages) and backend (API routes) together:
npm run devOpen http://localhost:3000 in your browser.
- Go to
/registerand create a Manager account and a Team Member account. - Log in as Manager to add Projects (
/dashboard/projects) before team members submit reports. - Log in as a Team Member to submit weekly reports (
/reports). - Log in as Manager to view the Team Dashboard (
/dashboard/team) with charts and the AI Chat Assistant.
src/
├── app/
│ ├── api/ # Backend REST API routes
│ │ ├── auth/ # NextAuth login/logout
│ │ ├── register/ # User registration
│ │ ├── projects/ # Projects CRUD
│ │ ├── reports/ # Reports CRUD + status
│ │ ├── users/ # Team member list (Manager only)
│ │ └── chat/ # AI Chat Assistant endpoint
│ ├── components/ # Reusable UI components (ChatWidget)
│ ├── dashboard/
│ │ ├── projects/ # Projects management page
│ │ └── team/ # Manager's team dashboard
│ ├── login/ # Login page
│ ├── register/ # Registration page
│ └── reports/ # Personal weekly report page (Team Member)
├── auth.js # NextAuth configuration
├── lib/prisma.js # Prisma client singleton
├── middleware.js # Route protection
prisma/
└── schema.prisma # Database schema
- User — id, name, email, password (hashed), role (MEMBER/MANAGER)
- Project — id, name (categories like Client A, Marketing, R&D)
- Report — id, userId, projectId, weekStartDate, weekEndDate, tasksCompleted, tasksPlanned, blockers, hoursWorked, notes, status
- ProjectMember — join table linking users to projects (optional assignment)
| Feature | Team Member | Manager |
|---|---|---|
| Submit/edit own reports | ✅ | ✅ |
| View own report history | ✅ | ✅ |
| View all team reports | ❌ | ✅ |
| Create/edit/delete projects | ❌ | ✅ |
| View team dashboard & charts | ❌ | ✅ |
| Use AI Chat Assistant | ❌ | ✅ |