Project Handler - Time Tracking & Work Records

A modern, responsive time tracking and work records management application built with Angular 20.3, Tailwind CSS, and PWA capabilities. Features signal-based state management, functional programming patterns, and beautiful light/dark mode themes.

✨ Features

• 🎨 Modern UI - Clean, responsive interface with Tailwind CSS
• 🌓 Dark Mode - Beautiful light and dark themes with smooth transitions
• 📱 PWA Ready - Progressive Web App with offline capabilities
• ⚡ Angular 20.3 - Latest Angular version with signals for reactive state management
• 🎯 Functional Programming - Immutable state patterns and pure functions
• 📊 Time Tracking - Comprehensive work records and attendance management
• 📈 Dashboard - Visual stats cards for total hours, work days, and tasks
• 🔄 Real-time Updates - Reactive UI updates with Angular signals
• ♿ Accessible - WCAG compliant with proper ARIA labels

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

# Install dependencies
npm install

Development Server

To start a local development server, run:

Navigate to http://localhost:4200/. The application will automatically reload when you modify source files.

🛠️ Technologies

• Angular 20.3 - Latest framework with signals
• Tailwind CSS 3.4 - Utility-first CSS framework
• TypeScript 5.9 - Strongly typed JavaScript
• RxJS 7.8 - Reactive programming
• Service Worker - PWA support for offline functionality

📁 Project Structure

src/
├── app/
│   ├── models/              # TypeScript interfaces and types
│   │   └── work-record.model.ts
│   ├── services/            # Business logic and state management
│   │   ├── theme.service.ts       # Dark/light mode theming
│   │   └── work-record.service.ts # Work records management
│   ├── app.ts              # Root component with signals
│   ├── app.html            # Main template
│   ├── app.config.ts       # App configuration with PWA
│   └── app.routes.ts       # Routing configuration
├── styles.css              # Global Tailwind styles
└── index.html              # Main HTML file with PWA manifest

🎯 Key Concepts

Signal-Based State Management

The application uses Angular signals for reactive state management:

// Read-only signal for theme state
readonly isDark = this.isDarkMode.asReadonly();

// Computed signal for derived values
readonly totalHours = computed(() => {
  return this.filteredRecords().reduce((sum, record) => sum + record.hours, 0);
});

Functional Programming Patterns

Pure functions and immutable state updates:

addWorkRecord = (record: Omit<WorkRecord, 'id'>): void => {
  const newRecord: WorkRecord = { ...record, id: this.generateId() };
  this.workRecords.update(records => [...records, newRecord]);
};

Dark Mode Theme Switching

Persistent theme preference with system detection:

toggleTheme = (): void => {
  this.isDarkMode.update(isDark => !isDark);
};

📊 Features in Detail

Work Records Management

• Create work records with task details, hours, and descriptions
• View records grouped by day with totals
• Filter by date range
• Track IN/OUT office status
• Display responsive table with row grouping

Dashboard Statistics

• Total hours worked
• Number of work days
• Total tasks completed

PWA Capabilities

• Offline Support - Works without internet connection
• App Install - Can be installed on mobile devices
• Fast Loading - Service worker caching for instant loads

🎨 Customization

Tailwind Configuration

Edit tailwind.config.js to customize colors, spacing, and more:

theme: {
  extend: {
    colors: {
      primary: {
        500: '#0ea5e9',
        // Add more shades...
      },
    },
  },
}

Mock Data

Update mock data in src/app/services/work-record.service.ts:

private generateMockData(): WorkRecord[] {
  // Add your data here
}

🔧 Building

Development Build

Production Build (with PWA)

ng build --configuration=production

The build artifacts will be stored in the dist/ directory with service worker enabled for offline support.

🧪 Testing

Unit Tests

Code Coverage

📦 Deployment

The application is production-ready and can be deployed to:

• Static Hosting: Netlify, Vercel, Firebase Hosting
• Cloud Platforms: AWS S3, Azure Static Web Apps, Google Cloud Storage
• Traditional Servers: Apache, Nginx

Just deploy the contents of the dist/project-handler/browser folder.

🌟 Future Enhancements

• Add authentication and user management
• Connect to real backend API
• Export reports to PDF/Excel
• Calendar view for work records
• Time tracking with start/stop timer
• Team collaboration features
• Notifications for daily standup reminders
• Analytics and insights dashboard

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

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

📧 Support

For questions or support, please open an issue in the repository.

Built with ❤️ using Angular 20.3.0, Tailwind CSS, and modern web technologies.