Internal Time Tracker

A lightweight web application for tracking employee time against projects. Employees log daily effort (0.5 or 1 day) against validated projects, and admins get an aggregated view with filters. All data is stored in Google Sheets.

Live Demo

Production: https://internal-time-tracker.vercel.app

Features

Employee Dashboard

• Log time entries (0.5 or 1 day) against projects fetched from Google Sheets
• Searchable type-ahead project selector with validation
• Per-date validation: total logged time per day cannot exceed 1
• View past time entries in a read-only table
• 7-day summary showing completion status (Complete when total = 1 for the day)

Admin Dashboard

• View all employee entries across the organization
• Filter by date range, employee, and project
• Two views:
  • Raw Entries — individual time entries with all details
  • Aggregated — total days per employee and per project
• Per-employee 7-day completion summary

Authentication

• Google OAuth sign-in via Firebase Authentication
• Role-based access control (employee / admin) stored in Firestore
• Automatic redirect based on user role after login
• Protected routes with role-based guards

Tech Stack

Layer	Technology
Frontend	React 19, TypeScript, Vite
Routing	React Router v7
Authentication	Firebase Auth (Google OAuth)
Database	Cloud Firestore (user roles)
Data Storage	Google Sheets API v4
Deployment	Vercel

Project Structure

src/
├── components/
│   ├── EntriesTable.tsx       # Read-only past entries table
│   ├── Layout.tsx             # App shell with navbar
│   ├── Navbar.tsx             # Top navigation bar with logout
│   ├── ProtectedRoute.tsx     # Route guard (auth + role check)
│   ├── TimeEntryForm.tsx      # Time entry form with project search
│   └── WeekSummary.tsx        # 7-day completion tracker
├── hooks/
│   └── useAuth.tsx            # Auth context provider
├── pages/
│   ├── AdminPage.tsx          # Admin dashboard with filters
│   ├── DashboardPage.tsx      # Employee dashboard
│   └── LoginPage.tsx          # Google sign-in page
├── services/
│   ├── auth.ts                # Firebase auth operations
│   ├── firebase.ts            # Firebase initialization + config validation
│   └── sheets.ts              # Google Sheets API service
├── types/
│   └── index.ts               # TypeScript type definitions
├── utils/
│   └── date.ts                # Date utility functions
├── routes.tsx                 # Route definitions
├── App.tsx                    # Root component
└── main.tsx                   # Entry point

Google Sheet Format

The app reads projects from one sheet and writes time entries to another within the same spreadsheet.

Projects sheet (Sheet1): list of valid project names.

Time Entries sheet (Sheet2) columns:

EntryID	UserEmail	Project	Date	TimeValue	Timestamp
UUID	user@example.com	Project A	2026-03-01	0.5	2026-03-01T10:30:00Z

Getting Started

Prerequisites

• Node.js 18+
• A Firebase project with Google Auth enabled
• A Google Cloud project with the Google Sheets API enabled
• A Google Sheet with projects listed in Sheet1

1. Clone the repository

git clone https://github.com/vinay02022/Internal-Time-Tracker.git
cd Internal-Time-Tracker

2. Install dependencies

npm install

3. Configure environment variables

Copy the example file and fill in your values:

cp .env.example .env

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_GOOGLE_SHEET_ID=your_google_sheet_id

4. Firebase Setup

1. Create a project at Firebase Console
2. Enable Authentication → Sign-in method → Google
3. Add your domain to Authorized domains (e.g., localhost, your-app.vercel.app)
4. Enable Cloud Firestore in the Firebase Console

5. Google Cloud Setup

1. Go to Google Cloud Console for the same project
2. Enable the Google Sheets API under APIs & Services
3. Configure the OAuth consent screen (Branding, Audience, Data Access)
4. Add the https://www.googleapis.com/auth/spreadsheets scope

6. Firestore User Roles

Users are auto-created as employee on first login. To make a user an admin, go to Firestore and edit their document in the users collection:

users/{uid}
  ├── name: "Admin Name"
  ├── email: "admin@example.com"
  └── role: "admin"

7. Run locally

npm run dev

Deployment (Vercel)

1. Import the GitHub repo on Vercel
2. Add all VITE_* environment variables in Vercel project settings
3. Deploy — Vercel auto-detects Vite and builds accordingly
4. Add the Vercel domain to Firebase Authorized domains

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Type-check and build for production
npm run preview	Preview production build locally