creates application

2026-02-16 10:15:27 +01:00
parent 791c661395
commit 7d678c1c4d
65 changed files with 10389 additions and 0 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,40 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider } from './contexts/AuthContext';
+import { TimerProvider } from './contexts/TimerContext';
+import { Layout } from './components/Layout';
+import { ProtectedRoute } from './components/ProtectedRoute';
+import { LoginPage } from './pages/LoginPage';
+import { AuthCallbackPage } from './pages/AuthCallbackPage';
+import { DashboardPage } from './pages/DashboardPage';
+import { TimeEntriesPage } from './pages/TimeEntriesPage';
+import { ClientsPage } from './pages/ClientsPage';
+import { ProjectsPage } from './pages/ProjectsPage';
+
+function App() {
+  return (
+    <AuthProvider>
+      <TimerProvider>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/auth/callback" element={<AuthCallbackPage />} />
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute>
+                <Layout />
+              </ProtectedRoute>
+            }
+          >
+            <Route index element={<Navigate to="/dashboard" replace />} />
+            <Route path="dashboard" element={<DashboardPage />} />
+            <Route path="time-entries" element={<TimeEntriesPage />} />
+            <Route path="clients" element={<ClientsPage />} />
+            <Route path="projects" element={<ProjectsPage />} />
+          </Route>
+        </Routes>
+      </TimerProvider>
+    </AuthProvider>
+  );
+}
+
+export default App;
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -0,0 +1,25 @@
+import axios from 'axios';
+import type { User } from '@/types';
+
+const AUTH_BASE = '/auth';
+
+export const authApi = {
+  login: (): void => {
+    window.location.href = `${AUTH_BASE}/login`;
+  },
+
+  logout: async (): Promise<void> => {
+    await axios.post(`${AUTH_BASE}/logout`, {}, { withCredentials: true });
+  },
+
+  getCurrentUser: async (): Promise<User | null> => {
+    try {
+      const { data } = await axios.get<User>(`${AUTH_BASE}/me`, {
+        withCredentials: true,
+      });
+      return data;
+    } catch {
+      return null;
+    }
+  },
+};
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,26 @@
+import axios, { AxiosError } from 'axios';
+
+const apiClient = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError<{ error?: string; details?: unknown }>) => {
+    if (error.response?.status === 401) {
+      // Redirect to login on 401
+      window.location.href = '/login';
+      return Promise.reject(error);
+    }
+
+    const message = error.response?.data?.error || error.message || 'An error occurred';
+    return Promise.reject(new Error(message));
+  }
+);
+
+export default apiClient;
--- a/frontend/src/api/clients.ts
+++ b/frontend/src/api/clients.ts
@@ -0,0 +1,23 @@
+import apiClient from './client';
+import type { Client, CreateClientInput, UpdateClientInput } from '@/types';
+
+export const clientsApi = {
+  getAll: async (): Promise<Client[]> => {
+    const { data } = await apiClient.get<Client[]>('/clients');
+    return data;
+  },
+
+  create: async (input: CreateClientInput): Promise<Client> => {
+    const { data } = await apiClient.post<Client>('/clients', input);
+    return data;
+  },
+
+  update: async (id: string, input: UpdateClientInput): Promise<Client> => {
+    const { data } = await apiClient.put<Client>(`/clients/${id}`, input);
+    return data;
+  },
+
+  delete: async (id: string): Promise<void> => {
+    await apiClient.delete(`/clients/${id}`);
+  },
+};
--- a/frontend/src/api/projects.ts
+++ b/frontend/src/api/projects.ts
@@ -0,0 +1,25 @@
+import apiClient from './client';
+import type { Project, CreateProjectInput, UpdateProjectInput } from '@/types';
+
+export const projectsApi = {
+  getAll: async (clientId?: string): Promise<Project[]> => {
+    const { data } = await apiClient.get<Project[]>('/projects', {
+      params: clientId ? { clientId } : undefined,
+    });
+    return data;
+  },
+
+  create: async (input: CreateProjectInput): Promise<Project> => {
+    const { data } = await apiClient.post<Project>('/projects', input);
+    return data;
+  },
+
+  update: async (id: string, input: UpdateProjectInput): Promise<Project> => {
+    const { data } = await apiClient.put<Project>(`/projects/${id}`, input);
+    return data;
+  },
+
+  delete: async (id: string): Promise<void> => {
+    await apiClient.delete(`/projects/${id}`);
+  },
+};
--- a/frontend/src/api/timeEntries.ts
+++ b/frontend/src/api/timeEntries.ts
@@ -0,0 +1,31 @@
+import apiClient from './client';
+import type {
+  TimeEntry,
+  PaginatedTimeEntries,
+  CreateTimeEntryInput,
+  UpdateTimeEntryInput,
+  TimeEntryFilters,
+} from '@/types';
+
+export const timeEntriesApi = {
+  getAll: async (filters?: TimeEntryFilters): Promise<PaginatedTimeEntries> => {
+    const { data } = await apiClient.get<PaginatedTimeEntries>('/time-entries', {
+      params: filters,
+    });
+    return data;
+  },
+
+  create: async (input: CreateTimeEntryInput): Promise<TimeEntry> => {
+    const { data } = await apiClient.post<TimeEntry>('/time-entries', input);
+    return data;
+  },
+
+  update: async (id: string, input: UpdateTimeEntryInput): Promise<TimeEntry> => {
+    const { data } = await apiClient.put<TimeEntry>(`/time-entries/${id}`, input);
+    return data;
+  },
+
+  delete: async (id: string): Promise<void> => {
+    await apiClient.delete(`/time-entries/${id}`);
+  },
+};
--- a/frontend/src/api/timer.ts
+++ b/frontend/src/api/timer.ts
@@ -0,0 +1,30 @@
+import apiClient from './client';
+import type { OngoingTimer, TimeEntry } from '@/types';
+
+export const timerApi = {
+  getOngoing: async (): Promise<OngoingTimer | null> => {
+    const { data } = await apiClient.get<OngoingTimer | null>('/timer');
+    return data;
+  },
+
+  start: async (projectId?: string): Promise<OngoingTimer> => {
+    const { data } = await apiClient.post<OngoingTimer>('/timer/start', {
+      projectId,
+    });
+    return data;
+  },
+
+  update: async (projectId?: string | null): Promise<OngoingTimer> => {
+    const { data } = await apiClient.put<OngoingTimer>('/timer', {
+      projectId,
+    });
+    return data;
+  },
+
+  stop: async (projectId?: string): Promise<TimeEntry> => {
+    const { data } = await apiClient.post<TimeEntry>('/timer/stop', {
+      projectId,
+    });
+    return data;
+  },
+};
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import { Navbar } from './Navbar';
+import { TimerWidget } from './TimerWidget';
+
+export function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <main className="pt-4 pb-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <Outlet />
+        </div>
+      </main>
+      <TimerWidget />
+    </div>
+  );
+}
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -0,0 +1,78 @@
+import { NavLink } from 'react-router-dom';
+import { Clock, List, Briefcase, FolderOpen, LogOut } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';
+
+export function Navbar() {
+  const { user, logout } = useAuth();
+
+  const navItems = [
+    { to: '/dashboard', label: 'Dashboard', icon: Clock },
+    { to: '/time-entries', label: 'Time Entries', icon: List },
+    { to: '/clients', label: 'Clients', icon: Briefcase },
+    { to: '/projects', label: 'Projects', icon: FolderOpen },
+  ];
+
+  return (
+    <nav className="bg-white shadow-sm border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex">
+            <div className="flex-shrink-0 flex items-center">
+              <Clock className="h-8 w-8 text-primary-600" />
+              <span className="ml-2 text-xl font-bold text-gray-900">TimeTracker</span>
+            </div>
+            <div className="hidden sm:ml-8 sm:flex sm:space-x-4">
+              {navItems.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  className={({ isActive }) =>
+                    `inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+                      isActive
+                        ? 'text-primary-600 bg-primary-50'
+                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                    }`
+                  }
+                >
+                  <item.icon className="h-4 w-4 mr-2" />
+                  {item.label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-gray-600 hidden sm:block">
+              {user?.username}
+            </span>
+            <button
+              onClick={logout}
+              className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+            >
+              <LogOut className="h-4 w-4 sm:mr-2" />
+              <span className="hidden sm:inline">Logout</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Mobile navigation */}
+      <div className="sm:hidden border-t border-gray-200">
+        <div className="flex justify-around py-2">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `flex flex-col items-center p-2 text-xs font-medium rounded-md ${
+                  isActive ? 'text-primary-600' : 'text-gray-600'
+                }`
+              }
+            >
+              <item.icon className="h-5 w-5 mb-1" />
+              {item.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/frontend/src/components/ProtectedRoute.tsx
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,24 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+}
--- a/frontend/src/components/TimerWidget.tsx
+++ b/frontend/src/components/TimerWidget.tsx
@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import { Play, Square, ChevronDown } from 'lucide-react';
+import { useTimer } from '@/contexts/TimerContext';
+import { useProjects } from '@/hooks/useProjects';
+import { formatDuration } from '@/utils/dateUtils';
+
+export function TimerWidget() {
+  const { ongoingTimer, isLoading, elapsedSeconds, startTimer, stopTimer, updateTimerProject } = useTimer();
+  const { projects } = useProjects();
+  const [showProjectSelect, setShowProjectSelect] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleStart = async () => {
+    setError(null);
+    try {
+      await startTimer();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to start timer');
+    }
+  };
+
+  const handleStop = async () => {
+    setError(null);
+    try {
+      await stopTimer();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to stop timer');
+    }
+  };
+
+  const handleProjectChange = async (projectId: string) => {
+    setError(null);
+    try {
+      await updateTimerProject(projectId);
+      setShowProjectSelect(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update project');
+    }
+  };
+
+  const handleClearProject = async () => {
+    setError(null);
+    try {
+      await updateTimerProject(null);
+      setShowProjectSelect(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to clear project');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg">
+        <div className="max-w-7xl mx-auto flex items-center justify-center">
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg z-50">
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        {ongoingTimer ? (
+          <>
+            {/* Running Timer Display */}
+            <div className="flex items-center space-x-4 flex-1">
+              <div className="flex items-center space-x-2">
+                <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
+                <span className="text-2xl font-mono font-bold text-gray-900">
+                  {formatDuration(elapsedSeconds)}
+                </span>
+              </div>
+
+              {/* Project Selector */}
+              <div className="relative">
+                <button
+                  onClick={() => setShowProjectSelect(!showProjectSelect)}
+                  className="flex items-center space-x-2 px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
+                >
+                  {ongoingTimer.project ? (
+                    <>
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: ongoingTimer.project.color || '#6b7280' }}
+                      />
+                      <span className="text-sm font-medium text-gray-700">
+                        {ongoingTimer.project.name}
+                      </span>
+                    </>
+                  ) : (
+                    <span className="text-sm font-medium text-gray-500">
+                      Select project...
+                    </span>
+                  )}
+                  <ChevronDown className="h-4 w-4 text-gray-500" />
+                </button>
+
+                {showProjectSelect && (
+                  <div className="absolute bottom-full left-0 mb-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 max-h-64 overflow-y-auto">
+                    <button
+                      onClick={handleClearProject}
+                      className="w-full px-4 py-2 text-left text-sm text-gray-500 hover:bg-gray-50 border-b border-gray-100"
+                    >
+                      No project
+                    </button>
+                    {projects?.map((project) => (
+                      <button
+                        key={project.id}
+                        onClick={() => handleProjectChange(project.id)}
+                        className="w-full px-4 py-2 text-left text-sm hover:bg-gray-50 flex items-center space-x-2"
+                      >
+                        <div
+                          className="w-3 h-3 rounded-full flex-shrink-0"
+                          style={{ backgroundColor: project.color || '#6b7280' }}
+                        />
+                        <div className="min-w-0">
+                          <div className="font-medium text-gray-900 truncate">{project.name}</div>
+                          <div className="text-xs text-gray-500 truncate">{project.client.name}</div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Stop Button */}
+            <button
+              onClick={handleStop}
+              className="flex items-center space-x-2 px-6 py-3 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
+            >
+              <Square className="h-5 w-5 fill-current" />
+              <span>Stop</span>
+            </button>
+          </>
+        ) : (
+          <>
+            {/* Stopped Timer Display */}
+            <div className="flex items-center space-x-2">
+              <span className="text-gray-500">Ready to track time</span>
+            </div>
+
+            {/* Start Button */}
+            <button
+              onClick={handleStart}
+              className="flex items-center space-x-2 px-6 py-3 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors"
+            >
+              <Play className="h-5 w-5 fill-current" />
+              <span>Start</span>
+            </button>
+          </>
+        )}
+      </div>
+
+      {error && (
+        <div className="max-w-7xl mx-auto mt-2">
+          <p className="text-sm text-red-600">{error}</p>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,69 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { authApi } from '@/api/auth';
+import type { User } from '@/types';
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => Promise<void>;
+  refetchUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient();
+  
+  const { data: user, isLoading } = useQuery({
+    queryKey: ['currentUser'],
+    queryFn: authApi.getCurrentUser,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  const login = useCallback(() => {
+    authApi.login();
+  }, []);
+
+  const logout = useCallback(async () => {
+    await authApi.logout();
+    queryClient.setQueryData(['currentUser'], null);
+    queryClient.clear();
+  }, [queryClient]);
+
+  const refetchUser = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: ['currentUser'] });
+  }, [queryClient]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user: user ?? null,
+        isLoading,
+        isAuthenticated: !!user,
+        login,
+        logout,
+        refetchUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
--- a/frontend/src/contexts/TimerContext.tsx
+++ b/frontend/src/contexts/TimerContext.tsx
@@ -0,0 +1,136 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { timerApi } from '@/api/timer';
+import type { OngoingTimer, TimeEntry } from '@/types';
+
+interface TimerContextType {
+  ongoingTimer: OngoingTimer | null;
+  isLoading: boolean;
+  elapsedSeconds: number;
+  startTimer: (projectId?: string) => Promise<void>;
+  updateTimerProject: (projectId?: string | null) => Promise<void>;
+  stopTimer: (projectId?: string) => Promise<TimeEntry | null>;
+}
+
+const TimerContext = createContext<TimerContextType | undefined>(undefined);
+
+export function TimerProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient();
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  const [elapsedInterval, setElapsedInterval] = useState<NodeJS.Timeout | null>(null);
+
+  const { data: ongoingTimer, isLoading } = useQuery({
+    queryKey: ['ongoingTimer'],
+    queryFn: timerApi.getOngoing,
+    refetchInterval: 60000, // Refetch every minute to sync with server
+  });
+
+  // Calculate elapsed time
+  useEffect(() => {
+    if (ongoingTimer) {
+      const startTime = new Date(ongoingTimer.startTime).getTime();
+      const now = Date.now();
+      const initialElapsed = Math.floor((now - startTime) / 1000);
+      setElapsedSeconds(initialElapsed);
+
+      // Start interval to update elapsed time
+      const interval = setInterval(() => {
+        setElapsedSeconds(Math.floor((Date.now() - startTime) / 1000));
+      }, 1000);
+      setElapsedInterval(interval);
+    } else {
+      setElapsedSeconds(0);
+      if (elapsedInterval) {
+        clearInterval(elapsedInterval);
+        setElapsedInterval(null);
+      }
+    }
+
+    return () => {
+      if (elapsedInterval) {
+        clearInterval(elapsedInterval);
+      }
+    };
+  }, [ongoingTimer]);
+
+  // Start timer mutation
+  const startMutation = useMutation({
+    mutationFn: timerApi.start,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['ongoingTimer'] });
+    },
+  });
+
+  // Update timer mutation
+  const updateMutation = useMutation({
+    mutationFn: timerApi.update,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['ongoingTimer'] });
+    },
+  });
+
+  // Stop timer mutation
+  const stopMutation = useMutation({
+    mutationFn: timerApi.stop,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['ongoingTimer'] });
+      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+    },
+  });
+
+  const startTimer = useCallback(
+    async (projectId?: string) => {
+      await startMutation.mutateAsync(projectId);
+    },
+    [startMutation]
+  );
+
+  const updateTimerProject = useCallback(
+    async (projectId?: string | null) => {
+      await updateMutation.mutateAsync(projectId);
+    },
+    [updateMutation]
+  );
+
+  const stopTimer = useCallback(
+    async (projectId?: string): Promise<TimeEntry | null> => {
+      try {
+        const entry = await stopMutation.mutateAsync(projectId);
+        return entry;
+      } catch {
+        return null;
+      }
+    },
+    [stopMutation]
+  );
+
+  return (
+    <TimerContext.Provider
+      value={{
+        ongoingTimer: ongoingTimer ?? null,
+        isLoading,
+        elapsedSeconds,
+        startTimer,
+        updateTimerProject,
+        stopTimer,
+      }}
+    >
+      {children}
+    </TimerContext.Provider>
+  );
+}
+
+export function useTimer() {
+  const context = useContext(TimerContext);
+  if (context === undefined) {
+    throw new Error('useTimer must be used within a TimerProvider');
+  }
+  return context;
+}
--- a/frontend/src/hooks/useClients.ts
+++ b/frontend/src/hooks/useClients.ts
@@ -0,0 +1,45 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { clientsApi } from '@/api/clients';
+import type { CreateClientInput, UpdateClientInput } from '@/types';
+
+export function useClients() {
+  const queryClient = useQueryClient();
+
+  const { data: clients, isLoading, error } = useQuery({
+    queryKey: ['clients'],
+    queryFn: clientsApi.getAll,
+  });
+
+  const createClient = useMutation({
+    mutationFn: (input: CreateClientInput) => clientsApi.create(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['clients'] });
+    },
+  });
+
+  const updateClient = useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateClientInput }) =>
+      clientsApi.update(id, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['clients'] });
+    },
+  });
+
+  const deleteClient = useMutation({
+    mutationFn: (id: string) => clientsApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['clients'] });
+      // Also invalidate projects since they depend on clients
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+
+  return {
+    clients,
+    isLoading,
+    error,
+    createClient,
+    updateClient,
+    deleteClient,
+  };
+}
--- a/frontend/src/hooks/useProjects.ts
+++ b/frontend/src/hooks/useProjects.ts
@@ -0,0 +1,43 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { projectsApi } from '@/api/projects';
+import type { CreateProjectInput, UpdateProjectInput } from '@/types';
+
+export function useProjects(clientId?: string) {
+  const queryClient = useQueryClient();
+
+  const { data: projects, isLoading, error } = useQuery({
+    queryKey: ['projects', clientId],
+    queryFn: () => projectsApi.getAll(clientId),
+  });
+
+  const createProject = useMutation({
+    mutationFn: (input: CreateProjectInput) => projectsApi.create(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+
+  const updateProject = useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateProjectInput }) =>
+      projectsApi.update(id, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+
+  const deleteProject = useMutation({
+    mutationFn: (id: string) => projectsApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+
+  return {
+    projects,
+    isLoading,
+    error,
+    createProject,
+    updateProject,
+    deleteProject,
+  };
+}
--- a/frontend/src/hooks/useTimeEntries.ts
+++ b/frontend/src/hooks/useTimeEntries.ts
@@ -0,0 +1,43 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { timeEntriesApi } from '@/api/timeEntries';
+import type { CreateTimeEntryInput, UpdateTimeEntryInput, TimeEntryFilters } from '@/types';
+
+export function useTimeEntries(filters?: TimeEntryFilters) {
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['timeEntries', filters],
+    queryFn: () => timeEntriesApi.getAll(filters),
+  });
+
+  const createTimeEntry = useMutation({
+    mutationFn: (input: CreateTimeEntryInput) => timeEntriesApi.create(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+    },
+  });
+
+  const updateTimeEntry = useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateTimeEntryInput }) =>
+      timeEntriesApi.update(id, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+    },
+  });
+
+  const deleteTimeEntry = useMutation({
+    mutationFn: (id: string) => timeEntriesApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+    },
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    createTimeEntry,
+    updateTimeEntry,
+    deleteTimeEntry,
+  };
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,43 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-50 text-gray-900;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
+  }
+  
+  .btn-danger {
+    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+  
+  .btn-outline {
+    @apply btn border-2 border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
+  }
+  
+  .input {
+    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+  
+  .label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
+  }
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from './App';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>
+);
--- a/frontend/src/pages/AuthCallbackPage.tsx
+++ b/frontend/src/pages/AuthCallbackPage.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+
+export function AuthCallbackPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { refetchUser } = useAuth();
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      const success = searchParams.get('success');
+      const error = searchParams.get('error');
+
+      if (error) {
+        navigate('/login', { replace: true });
+        return;
+      }
+
+      if (success === 'true') {
+        await refetchUser();
+        navigate('/dashboard', { replace: true });
+      } else {
+        navigate('/login', { replace: true });
+      }
+    };
+
+    handleCallback();
+  }, [searchParams, navigate, refetchUser]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
+        <p className="mt-4 text-gray-600">Completing authentication...</p>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/ClientsPage.tsx
+++ b/frontend/src/pages/ClientsPage.tsx
@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2, Building2 } from 'lucide-react';
+import { useClients } from '@/hooks/useClients';
+import type { Client, CreateClientInput, UpdateClientInput } from '@/types';
+
+export function ClientsPage() {
+  const { clients, isLoading, createClient, updateClient, deleteClient } = useClients();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingClient, setEditingClient] = useState<Client | null>(null);
+  const [formData, setFormData] = useState<CreateClientInput>({ name: '', description: '' });
+  const [error, setError] = useState<string | null>(null);
+
+  const handleOpenModal = (client?: Client) => {
+    if (client) {
+      setEditingClient(client);
+      setFormData({ name: client.name, description: client.description || '' });
+    } else {
+      setEditingClient(null);
+      setFormData({ name: '', description: '' });
+    }
+    setError(null);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingClient(null);
+    setFormData({ name: '', description: '' });
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!formData.name.trim()) {
+      setError('Client name is required');
+      return;
+    }
+
+    try {
+      if (editingClient) {
+        await updateClient.mutateAsync({
+          id: editingClient.id,
+          input: formData as UpdateClientInput,
+        });
+      } else {
+        await createClient.mutateAsync(formData);
+      }
+      handleCloseModal();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save client');
+    }
+  };
+
+  const handleDelete = async (client: Client) => {
+    if (!confirm(`Are you sure you want to delete "${client.name}"? This will also delete all associated projects and time entries.`)) {
+      return;
+    }
+
+    try {
+      await deleteClient.mutateAsync(client.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to delete client');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Clients</h1>
+          <p className="mt-1 text-sm text-gray-600">
+            Manage your clients and customers
+          </p>
+        </div>
+        <button
+          onClick={() => handleOpenModal()}
+          className="btn-primary"
+        >
+          <Plus className="h-5 w-5 mr-2" />
+          Add Client
+        </button>
+      </div>
+
+      {/* Clients List */}
+      {clients?.length === 0 ? (
+        <div className="card text-center py-12">
+          <Building2 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900">No clients yet</h3>
+          <p className="mt-1 text-sm text-gray-600">
+            Get started by adding your first client
+          </p>
+          <button
+            onClick={() => handleOpenModal()}
+            className="btn-primary mt-4"
+          >
+            <Plus className="h-5 w-5 mr-2" />
+            Add Client
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {clients?.map((client) => (
+            <div key={client.id} className="card">
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-lg font-medium text-gray-900 truncate">
+                    {client.name}
+                  </h3>
+                  {client.description && (
+                    <p className="mt-1 text-sm text-gray-600 line-clamp-2">
+                      {client.description}
+                    </p>
+                  )}
+                </div>
+                <div className="flex space-x-2 ml-4">
+                  <button
+                    onClick={() => handleOpenModal(client)}
+                    className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100"
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(client)}
+                    className="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h2 className="text-lg font-semibold text-gray-900">
+                {editingClient ? 'Edit Client' : 'Add Client'}
+              </h2>
+            </div>
+
+            <form onSubmit={handleSubmit} className="p-6 space-y-4">
+              {error && (
+                <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label className="label">Client Name</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="input"
+                  placeholder="Enter client name"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label className="label">Description (Optional)</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="input"
+                  rows={3}
+                  placeholder="Enter description"
+                />
+              </div>
+
+              <div className="flex justify-end space-x-3 pt-4">
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="btn-secondary"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="btn-primary"
+                  disabled={createClient.isPending || updateClient.isPending}
+                >
+                  {createClient.isPending || updateClient.isPending
+                    ? 'Saving...'
+                    : editingClient
+                    ? 'Save Changes'
+                    : 'Add Client'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,161 @@
+import { Link } from 'react-router-dom';
+import { Clock, Calendar, Briefcase, TrendingUp } from 'lucide-react';
+import { useTimeEntries } from '@/hooks/useTimeEntries';
+import { formatDate, formatDurationFromDates } from '@/utils/dateUtils';
+import { startOfDay, endOfDay, format as formatDateFns } from 'date-fns';
+
+export function DashboardPage() {
+  const today = new Date();
+  const { data: todayEntries } = useTimeEntries({
+    startDate: startOfDay(today).toISOString(),
+    endDate: endOfDay(today).toISOString(),
+    limit: 5,
+  });
+
+  const { data: recentEntries } = useTimeEntries({
+    limit: 10,
+  });
+
+  const totalTodaySeconds = todayEntries?.entries.reduce((total, entry) => {
+    return total + calculateDuration(entry.startTime, entry.endTime);
+  }, 0) || 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+        <p className="mt-1 text-sm text-gray-600">
+          Overview of your time tracking activity
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={Clock}
+          label="Today"
+          value={formatDuration(totalTodaySeconds)}
+          color="blue"
+        />
+        <StatCard
+          icon={Calendar}
+          label="Entries Today"
+          value={todayEntries?.entries.length.toString() || '0'}
+          color="green"
+        />
+        <StatCard
+          icon={Briefcase}
+          label="Active Projects"
+          value={new Set(recentEntries?.entries.map(e => e.projectId)).size.toString() || '0'}
+          color="purple"
+        />
+        <StatCard
+          icon={TrendingUp}
+          label="Total Entries"
+          value={recentEntries?.pagination.total.toString() || '0'}
+          color="orange"
+        />
+      </div>
+
+      {/* Recent Activity */}
+      <div className="card">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-gray-900">Recent Activity</h2>
+          <Link
+            to="/time-entries"
+            className="text-sm text-primary-600 hover:text-primary-700"
+          >
+            View all →
+          </Link>
+        </div>
+
+        {recentEntries?.entries.length === 0 ? (
+          <p className="text-gray-500 text-center py-8">
+            No time entries yet. Start tracking time using the timer below.
+          </p>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Project
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Date
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Duration
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {recentEntries?.entries.slice(0, 5).map((entry) => (
+                  <tr key={entry.id}>
+                    <td className="px-4 py-3 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div
+                          className="w-3 h-3 rounded-full mr-2"
+                          style={{ backgroundColor: entry.project.color || '#6b7280' }}
+                        />
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">
+                            {entry.project.name}
+                          </div>
+                          <div className="text-xs text-gray-500">
+                            {entry.project.client.name}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+                      {formatDate(entry.startTime)}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900 font-mono">
+                      {formatDurationFromDates(entry.startTime, entry.endTime)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface StatCardProps {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  color: 'blue' | 'green' | 'purple' | 'orange';
+}
+
+function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
+  const colors = {
+    blue: 'bg-blue-50 text-blue-600',
+    green: 'bg-green-50 text-green-600',
+    purple: 'bg-purple-50 text-purple-600',
+    orange: 'bg-orange-50 text-orange-600',
+  };
+
+  return (
+    <div className="card p-4">
+      <div className="flex items-center">
+        <div className={`p-3 rounded-lg ${colors[color]}`}>
+          <Icon className="h-6 w-6" />
+        </div>
+        <div className="ml-4">
+          <p className="text-sm font-medium text-gray-600">{label}</p>
+          <p className="text-2xl font-bold text-gray-900">{value}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function calculateDuration(startTime: string, endTime: string): number {
+  return Math.floor((new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000);
+}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,51 @@
+import { Clock } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';
+
+export function LoginPage() {
+  const { login } = useAuth();
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full space-y-8 p-8">
+        <div className="text-center">
+          <div className="mx-auto h-16 w-16 bg-primary-100 rounded-full flex items-center justify-center">
+            <Clock className="h-8 w-8 text-primary-600" />
+          </div>
+          <h2 className="mt-6 text-3xl font-bold text-gray-900">TimeTracker</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Track your time efficiently across multiple projects and clients
+          </p>
+        </div>
+
+        <div className="mt-8">
+          <button
+            onClick={login}
+            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+          >
+            Sign in with SSO
+          </button>
+          <p className="mt-4 text-xs text-center text-gray-500">
+            Secure authentication via OpenID Connect
+          </p>
+        </div>
+
+        <div className="mt-8 border-t border-gray-200 pt-8">
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-2xl font-bold text-gray-900">Simple</div>
+              <div className="text-xs text-gray-500">Start/Stop Timer</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">Organized</div>
+              <div className="text-xs text-gray-500">Clients & Projects</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">Detailed</div>
+              <div className="text-xs text-gray-500">Time Reports</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/ProjectsPage.tsx
+++ b/frontend/src/pages/ProjectsPage.tsx
@@ -0,0 +1,195 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2, FolderOpen } from 'lucide-react';
+import { useProjects } from '@/hooks/useProjects';
+import { useClients } from '@/hooks/useClients';
+import type { Project, CreateProjectInput, UpdateProjectInput } from '@/types';
+
+const PRESET_COLORS = [
+  '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e',
+  '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6',
+  '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899',
+  '#f43f5e', '#6b7280', '#374151',
+];
+
+export function ProjectsPage() {
+  const { projects, isLoading: projectsLoading, createProject, updateProject, deleteProject } = useProjects();
+  const { clients, isLoading: clientsLoading } = useClients();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [formData, setFormData] = useState<CreateProjectInput>({
+    name: '',
+    description: '',
+    color: '#3b82f6',
+    clientId: '',
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const isLoading = projectsLoading || clientsLoading;
+
+  const handleOpenModal = (project?: Project) => {
+    if (project) {
+      setEditingProject(project);
+      setFormData({
+        name: project.name,
+        description: project.description || '',
+        color: project.color || '#3b82f6',
+        clientId: project.clientId,
+      });
+    } else {
+      setEditingProject(null);
+      setFormData({
+        name: '',
+        description: '',
+        color: '#3b82f6',
+        clientId: clients?.[0]?.id || '',
+      });
+    }
+    setError(null);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingProject(null);
+    setFormData({ name: '', description: '', color: '#3b82f6', clientId: '' });
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!formData.name.trim()) {
+      setError('Project name is required');
+      return;
+    }
+
+    if (!formData.clientId) {
+      setError('Please select a client');
+      return;
+    }
+
+    try {
+      if (editingProject) {
+        await updateProject.mutateAsync({
+          id: editingProject.id,
+          input: formData as UpdateProjectInput,
+        });
+      } else {
+        await createProject.mutateAsync(formData);
+      }
+      handleCloseModal();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save project');
+    }
+  };
+
+  const handleDelete = async (project: Project) => {
+    if (!confirm(`Are you sure you want to delete "${project.name}"?`)) {
+      return;
+    }
+
+    try {
+      await deleteProject.mutateAsync(project.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to delete project');
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  if (!clients?.length) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Projects</h1>
+        </div>
+        <div className="card text-center py-12">
+          <FolderOpen className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+          <p className="mt-2 text-gray-600">Please create a client first.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Projects</h1>
+        <button onClick={() => handleOpenModal()} className="btn-primary">
+          <Plus className="h-5 w-5 mr-2" />
+          Add Project
+        </button>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {projects?.map((project) => (
+          <div key={project.id} className="card">
+            <div className="flex items-start justify-between">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center space-x-2">
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: project.color || '#6b7280' }} />
+                  <h3 className="font-medium text-gray-900 truncate">{project.name}</h3>
+                </div>
+                <p className="mt-1 text-sm text-gray-500">{project.client.name}</p>
+              </div>
+              <div className="flex space-x-1 ml-2">
+                <button onClick={() => handleOpenModal(project)} className="p-1.5 text-gray-400 hover:text-gray-600 rounded">
+                  <Edit2 className="h-4 w-4" />
+                </button>
+                <button onClick={() => handleDelete(project)} className="p-1.5 text-gray-400 hover:text-red-600 rounded">
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+            <h2 className="text-lg font-semibold mb-4">{editingProject ? 'Edit Project' : 'Add Project'}</h2>
+            {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Project Name</label>
+                <input type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="input" />
+              </div>
+              <div>
+                <label className="label">Client</label>
+                <select value={formData.clientId} onChange={(e) => setFormData({ ...formData, clientId: e.target.value })} className="input">
+                  {clients?.map((client) => (
+                    <option key={client.id} value={client.id}>{client.name}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="label">Color</label>
+                <div className="flex flex-wrap gap-2">
+                  {PRESET_COLORS.map((color) => (
+                    <button key={color} type="button" onClick={() => setFormData({ ...formData, color })} className={`w-8 h-8 rounded-full ${formData.color === color ? 'ring-2 ring-offset-2 ring-gray-400' : ''}`} style={{ backgroundColor: color }} />
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="label">Description</label>
+                <textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
+              </div>
+              <div className="flex justify-end space-x-3 pt-2">
+                <button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
+                <button type="submit" className="btn-primary">{editingProject ? 'Save' : 'Create'}</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/TimeEntriesPage.tsx
+++ b/frontend/src/pages/TimeEntriesPage.tsx
@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2 } from 'lucide-react';
+import { useTimeEntries } from '@/hooks/useTimeEntries';
+import { useProjects } from '@/hooks/useProjects';
+import { formatDate, formatDurationFromDates, getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
+import type { TimeEntry, CreateTimeEntryInput, UpdateTimeEntryInput } from '@/types';
+
+export function TimeEntriesPage() {
+  const { data, isLoading, createTimeEntry, updateTimeEntry, deleteTimeEntry } = useTimeEntries();
+  const { projects } = useProjects();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingEntry, setEditingEntry] = useState<TimeEntry | null>(null);
+  const [formData, setFormData] = useState<CreateTimeEntryInput>({
+    startTime: '',
+    endTime: '',
+    description: '',
+    projectId: '',
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const handleOpenModal = (entry?: TimeEntry) => {
+    if (entry) {
+      setEditingEntry(entry);
+      setFormData({
+        startTime: getLocalISOString(new Date(entry.startTime)),
+        endTime: getLocalISOString(new Date(entry.endTime)),
+        description: entry.description || '',
+        projectId: entry.projectId,
+      });
+    } else {
+      setEditingEntry(null);
+      const now = new Date();
+      const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
+      setFormData({
+        startTime: getLocalISOString(oneHourAgo),
+        endTime: getLocalISOString(now),
+        description: '',
+        projectId: projects?.[0]?.id || '',
+      });
+    }
+    setError(null);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingEntry(null);
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!formData.projectId) {
+      setError('Please select a project');
+      return;
+    }
+
+    const input = {
+      ...formData,
+      startTime: toISOTimezone(formData.startTime),
+      endTime: toISOTimezone(formData.endTime),
+    };
+
+    try {
+      if (editingEntry) {
+        await updateTimeEntry.mutateAsync({ id: editingEntry.id, input: input as UpdateTimeEntryInput });
+      } else {
+        await createTimeEntry.mutateAsync(input);
+      }
+      handleCloseModal();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save');
+    }
+  };
+
+  const handleDelete = async (entry: TimeEntry) => {
+    if (!confirm('Delete this time entry?')) return;
+    try {
+      await deleteTimeEntry.mutateAsync(entry.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to delete');
+    }
+  };
+
+  if (isLoading) {
+    return <div className="flex justify-center h-64 items-center"><div className="animate-spin h-12 w-12 border-b-2 border-primary-600 rounded-full"></div></div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Time Entries</h1>
+          <p className="text-sm text-gray-600">Manage your tracked time</p>
+        </div>
+        <button onClick={() => handleOpenModal()} className="btn-primary">
+          <Plus className="h-5 w-5 mr-2" /> Add Entry
+        </button>
+      </div>
+
+      <div className="card overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Duration</th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {data?.entries.map((entry) => (
+              <tr key={entry.id} className="hover:bg-gray-50">
+                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{formatDate(entry.startTime)}</td>
+                <td className="px-4 py-3 whitespace-nowrap">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: entry.project.color || '#6b7280' }} />
+                    <div>
+                      <div className="text-sm font-medium text-gray-900">{entry.project.name}</div>
+                      <div className="text-xs text-gray-500">{entry.project.client.name}</div>
+                    </div>
+                  </div>
+                </td>
+                <td className="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900">{formatDurationFromDates(entry.startTime, entry.endTime)}</td>
+                <td className="px-4 py-3 whitespace-nowrap text-right">
+                  <button onClick={() => handleOpenModal(entry)} className="p-1.5 text-gray-400 hover:text-gray-600 mr-1"><Edit2 className="h-4 w-4" /></button>
+                  <button onClick={() => handleDelete(entry)} className="p-1.5 text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {data?.entries.length === 0 && (
+          <div className="text-center py-8 text-gray-500">No time entries yet</div>
+        )}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+            <h2 className="text-lg font-semibold mb-4">{editingEntry ? 'Edit Entry' : 'Add Entry'}</h2>
+            {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="label">Project</label>
+                <select value={formData.projectId} onChange={(e) => setFormData({ ...formData, projectId: e.target.value })} className="input">
+                  {projects?.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+                </select>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="label">Start</label>
+                  <input type="datetime-local" value={formData.startTime} onChange={(e) => setFormData({ ...formData, startTime: e.target.value })} className="input" />
+                </div>
+                <div>
+                  <label className="label">End</label>
+                  <input type="datetime-local" value={formData.endTime} onChange={(e) => setFormData({ ...formData, endTime: e.target.value })} className="input" />
+                </div>
+              </div>
+              <div>
+                <label className="label">Description</label>
+                <textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
+              </div>
+              <div className="flex justify-end space-x-3 pt-2">
+                <button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
+                <button type="submit" className="btn-primary">{editingEntry ? 'Save' : 'Create'}</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,105 @@
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+}
+
+export interface Client {
+  id: string;
+  name: string;
+  description: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  color: string | null;
+  clientId: string;
+  client: Pick<Client, 'id' | 'name'>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TimeEntry {
+  id: string;
+  startTime: string;
+  endTime: string;
+  description: string | null;
+  projectId: string;
+  project: Pick<Project, 'id' | 'name' | 'color'> & {
+    client: Pick<Client, 'id' | 'name'>;
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface OngoingTimer {
+  id: string;
+  startTime: string;
+  projectId: string | null;
+  project: (Pick<Project, 'id' | 'name' | 'color'> & {
+    client: Pick<Client, 'id' | 'name'>;
+  }) | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TimeEntryFilters {
+  startDate?: string;
+  endDate?: string;
+  projectId?: string;
+  clientId?: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface PaginatedTimeEntries {
+  entries: TimeEntry[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+export interface CreateClientInput {
+  name: string;
+  description?: string;
+}
+
+export interface UpdateClientInput {
+  name?: string;
+  description?: string;
+}
+
+export interface CreateProjectInput {
+  name: string;
+  description?: string;
+  color?: string;
+  clientId: string;
+}
+
+export interface UpdateProjectInput {
+  name?: string;
+  description?: string;
+  color?: string | null;
+  clientId?: string;
+}
+
+export interface CreateTimeEntryInput {
+  startTime: string;
+  endTime: string;
+  description?: string;
+  projectId: string;
+}
+
+export interface UpdateTimeEntryInput {
+  startTime?: string;
+  endTime?: string;
+  description?: string;
+  projectId?: string;
+}
--- a/frontend/src/utils/dateUtils.ts
+++ b/frontend/src/utils/dateUtils.ts
@@ -0,0 +1,54 @@
+import { format, parseISO, differenceInSeconds, formatDuration as dateFnsFormatDuration } from 'date-fns';
+
+export function formatDate(date: string | Date): string {
+  const d = typeof date === 'string' ? parseISO(date) : date;
+  return format(d, 'MMM d, yyyy');
+}
+
+export function formatTime(date: string | Date): string {
+  const d = typeof date === 'string' ? parseISO(date) : date;
+  return format(d, 'h:mm a');
+}
+
+export function formatDateTime(date: string | Date): string {
+  const d = typeof date === 'string' ? parseISO(date) : date;
+  return format(d, 'MMM d, yyyy h:mm a');
+}
+
+export function formatDuration(totalSeconds: number): string {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const parts = [];
+  if (hours > 0) {
+    parts.push(hours.toString().padStart(2, '0'));
+  }
+  parts.push(minutes.toString().padStart(2, '0'));
+  parts.push(seconds.toString().padStart(2, '0'));
+
+  return parts.join(':');
+}
+
+export function calculateDuration(startTime: string, endTime: string): number {
+  const start = parseISO(startTime);
+  const end = parseISO(endTime);
+  return differenceInSeconds(end, start);
+}
+
+export function formatDurationFromDates(startTime: string, endTime: string): string {
+  const seconds = calculateDuration(startTime, endTime);
+  return formatDuration(seconds);
+}
+
+export function getLocalISOString(date: Date = new Date()): string {
+  const timezoneOffset = date.getTimezoneOffset() * 60000;
+  const localISOTime = new Date(date.getTime() - timezoneOffset).toISOString().slice(0, 16);
+  return localISOTime;
+}
+
+export function toISOTimezone(dateStr: string): string {
+  // Convert a local datetime input to ISO string with timezone
+  const date = new Date(dateStr);
+  return date.toISOString();
+}