creates application

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>
+  );
+}

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>
+  );
+}

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);
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}