Timesheet Management User Portal

The Timesheet Management User Portal is a full-stack web application that combines a professional marketing landing page with a powerful user dashboard for tracking daily and weekly work hours. The project demonstrates end-to-end development with Next.js App Router, TypeScript, and Supabase.

The landing page serves as the entry point, showcasing the product's value proposition, features, pricing, and social proof. It is built with reusable components and follows modern design principles.

User authentication is handled by Supabase, supporting email/password and OAuth logins. After authentication, users are redirected to their personal dashboard where they can manage their timesheets. The dashboard provides real-time insights into their working hours, with the ability to filter by various periods and projects.

Timesheet entries are stored in Supabase with Row Level Security ensuring users can only access their own data. The interface includes inline editing and deletion, with visual status indicators. Charts powered by Recharts give users a clear picture of their time allocation over time.

The project is deployed on Vercel and demonstrates a modern, scalable architecture suitable for production use.

• Built with Next.js App Router and TypeScript for type-safe, scalable development.
• Integrated Supabase for authentication, database, and row-level security.
• Designed responsive UI with CSS Modules, ensuring a consistent look across devices.
• Implemented full CRUD operations for timesheet entries with real-time updates.
• Added interactive charts using Recharts to visualize hourly data by day.
• Created flexible filtering by day, week, month, year, and custom range.
• Developed a professional landing page with components for features, pricing, testimonials, and contact.
• Deployed on Vercel with environment variables and production-ready configurations.

Landing Page

Modern marketing landing page showcasing features, stats, testimonials, pricing, and contact information. Designed to attract users and highlight the benefits of the timesheet tracking system.

Authentication

Secure login and signup pages with email/password and OAuth providers (Google, GitHub, Twitter). Integrated with Supabase for seamless user management and session handling.

User Dashboard

Personalized dashboard displaying key metrics: weekly progress, daily target, pending approvals, and monthly totals. Includes period filter (day, week, month, year, custom) and project filter.

Timesheet Management

Full CRUD operations for timesheet entries. Users can add, edit, and delete entries with fields for date, hours, project, and description. Entries are color-coded by status (pending, approved, rejected).

Analytics & Charts

Interactive bar chart visualizing hours worked per day within the selected period. Built with Recharts, it helps users track their productivity and identify trends.

Responsive Design

Fully responsive layout ensuring optimal user experience on mobile, tablet, and desktop devices. All components adapt gracefully to different screen sizes.