From f5c0a0b2f7459b3701b581c90d67178b0560c8b0 Mon Sep 17 00:00:00 2001
From: "simon.franken" <simon.franken@aracom.de>
Date: Wed, 18 Feb 2026 15:26:36 +0100
Subject: [PATCH] improvements

---
 frontend/src/components/ConfirmModal.tsx      |  35 +++++
 frontend/src/components/Modal.tsx             |  15 +-
 .../src/components/TimeEntryFormModal.tsx     | 122 ++++++++++++++++
 frontend/src/components/TimerWidget.tsx       | 101 ++++++-------
 frontend/src/pages/ClientsPage.tsx            |  35 ++++-
 frontend/src/pages/DashboardPage.tsx          |  68 ++++++++-
 frontend/src/pages/ProjectsPage.tsx           |  20 ++-
 frontend/src/pages/TimeEntriesPage.tsx        | 137 ++++--------------
 8 files changed, 354 insertions(+), 179 deletions(-)
 create mode 100644 frontend/src/components/ConfirmModal.tsx
 create mode 100644 frontend/src/components/TimeEntryFormModal.tsx

diff --git a/frontend/src/components/ConfirmModal.tsx b/frontend/src/components/ConfirmModal.tsx
new file mode 100644
index 0000000..1fb9b6f
--- /dev/null
+++ b/frontend/src/components/ConfirmModal.tsx
@@ -0,0 +1,35 @@
+import { Modal } from '@/components/Modal';
+
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmModal({
+  title,
+  message,
+  confirmLabel = 'Delete',
+  onConfirm,
+  onClose,
+}: ConfirmModalProps) {
+  return (
+    <Modal title={title} onClose={onClose} maxWidth="max-w-sm">
+      <p className="text-sm text-gray-600">{message}</p>
+      <div className="flex justify-end space-x-3 mt-6">
+        <button type="button" onClick={onClose} className="btn-secondary">
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={() => { onConfirm(); onClose(); }}
+          className="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors"
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index d45b8ae..1ccd602 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { X } from 'lucide-react';
 
 interface ModalProps {
@@ -10,6 +11,7 @@ interface ModalProps {
 
 /**
  * Generic modal overlay with a header and close button.
+ * Closes on Escape key or backdrop click.
  * Render form content (or any JSX) as children.
  *
  * @example
@@ -18,8 +20,19 @@ interface ModalProps {
  * </Modal>
  */
 export function Modal({ title, onClose, children, maxWidth = 'max-w-md' }: ModalProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 !m-0"
+      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
       <div className={`bg-white rounded-lg shadow-xl ${maxWidth} w-full`}>
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
           <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
diff --git a/frontend/src/components/TimeEntryFormModal.tsx b/frontend/src/components/TimeEntryFormModal.tsx
new file mode 100644
index 0000000..ad949ee
--- /dev/null
+++ b/frontend/src/components/TimeEntryFormModal.tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { Modal } from '@/components/Modal';
+import { useProjects } from '@/hooks/useProjects';
+import { getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
+import type { TimeEntry, CreateTimeEntryInput, UpdateTimeEntryInput } from '@/types';
+import type { UseMutationResult } from '@tanstack/react-query';
+
+interface TimeEntryFormModalProps {
+  entry: TimeEntry | null;
+  onClose: () => void;
+  createTimeEntry: UseMutationResult<TimeEntry, Error, CreateTimeEntryInput>;
+  updateTimeEntry: UseMutationResult<TimeEntry, Error, { id: string; input: UpdateTimeEntryInput }>;
+}
+
+export function TimeEntryFormModal({ entry, onClose, createTimeEntry, updateTimeEntry }: TimeEntryFormModalProps) {
+  const { projects } = useProjects();
+
+  const [formData, setFormData] = useState<CreateTimeEntryInput>(() => {
+    if (entry) {
+      return {
+        startTime: getLocalISOString(new Date(entry.startTime)),
+        endTime: getLocalISOString(new Date(entry.endTime)),
+        description: entry.description || '',
+        projectId: entry.projectId,
+      };
+    }
+    const now = new Date();
+    const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
+    return {
+      startTime: getLocalISOString(oneHourAgo),
+      endTime: getLocalISOString(now),
+      description: '',
+      projectId: projects?.[0]?.id || '',
+    };
+  });
+
+  const [error, setError] = useState<string | null>(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 (entry) {
+        await updateTimeEntry.mutateAsync({ id: entry.id, input: input as UpdateTimeEntryInput });
+      } else {
+        await createTimeEntry.mutateAsync(input);
+      }
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save');
+    }
+  };
+
+  return (
+    <Modal title={entry ? 'Edit Entry' : 'Add Entry'} onClose={onClose}>
+      {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={onClose} className="btn-secondary">Cancel</button>
+          <button
+            type="submit"
+            className="btn-primary"
+            disabled={createTimeEntry.isPending || updateTimeEntry.isPending}
+          >
+            {createTimeEntry.isPending || updateTimeEntry.isPending ? 'Saving...' : entry ? 'Save' : 'Create'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
diff --git a/frontend/src/components/TimerWidget.tsx b/frontend/src/components/TimerWidget.tsx
index 1717eda..57714f7 100644
--- a/frontend/src/components/TimerWidget.tsx
+++ b/frontend/src/components/TimerWidget.tsx
@@ -90,26 +90,38 @@ export function TimerWidget() {
 
   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">
+      <div className="max-w-7xl mx-auto flex flex-wrap sm:flex-nowrap items-center gap-2 sm:justify-between">
         {ongoingTimer ? (
           <>
-            {/* Running Timer Display */}
-            <div className="flex items-center space-x-4 flex-1">
-              <div className="flex items-center space-x-2">
+            {/* Row 1 (mobile): timer + stop side by side. On sm+ dissolves into the parent flex row via contents. */}
+            <div className="flex items-center justify-between w-full sm:contents">
+              {/* Timer Display */}
+              <div className="flex items-center space-x-2 shrink-0">
                 <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                 <TimerDisplay totalSeconds={elapsedSeconds} />
               </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"
-                >
+              {/* 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 shrink-0 sm:order-last"
+              >
+                <Square className="h-5 w-5 fill-current" />
+                <span>Stop</span>
+              </button>
+            </div>
+
+            {/* Project Selector — full width on mobile, auto on desktop */}
+            <div className="relative w-full sm:w-auto sm:flex-1 sm:mx-4">
+              <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 w-full sm:w-auto"
+              >
+                <span className="flex items-center space-x-2 min-w-0 flex-1">
                   {ongoingTimer.project ? (
                     <>
                       <ProjectColorDot color={ongoingTimer.project.color} />
-                      <span className="text-sm font-medium text-gray-700">
+                      <span className="text-sm font-medium text-gray-700 truncate">
                         {ongoingTimer.project.name}
                       </span>
                     </>
@@ -118,50 +130,41 @@ export function TimerWidget() {
                       Select project...
                     </span>
                   )}
-                  <ChevronDown className="h-4 w-4 text-gray-500" />
-                </button>
+                </span>
+                <ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
+              </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">
+              {showProjectSelect && (
+                <div className="absolute bottom-full left-0 mb-2 w-64 max-w-[calc(100vw-2rem)] 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
-                      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"
+                      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"
                     >
-                      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"
-                      >
-                        <ProjectColorDot color={project.color} />
-                        <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>
+                      <ProjectColorDot color={project.color} />
+                      <div className="min-w-0">
+                        <div className="font-medium text-gray-900 truncate">
+                          {project.name}
                         </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
+                        <div className="text-xs text-gray-500 truncate">
+                          {project.client.name}
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </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>
           </>
         ) : (
-          <>
+          <div className="flex items-center justify-between w-full">
             {/* Stopped Timer Display */}
             <div className="flex items-center space-x-2">
               <span className="text-gray-500">Ready to track time</span>
@@ -175,7 +178,7 @@ export function TimerWidget() {
               <Play className="h-5 w-5 fill-current" />
               <span>Start</span>
             </button>
-          </>
+          </div>
         )}
       </div>
 
diff --git a/frontend/src/pages/ClientsPage.tsx b/frontend/src/pages/ClientsPage.tsx
index d5f6cb9..db7c8ea 100644
--- a/frontend/src/pages/ClientsPage.tsx
+++ b/frontend/src/pages/ClientsPage.tsx
@@ -3,6 +3,7 @@ import { Plus, Edit2, Trash2, Building2, Target, ChevronDown, ChevronUp, X } fro
 import { useClients } from '@/hooks/useClients';
 import { useClientTargets } from '@/hooks/useClientTargets';
 import { Modal } from '@/components/Modal';
+import { ConfirmModal } from '@/components/ConfirmModal';
 import { Spinner } from '@/components/Spinner';
 import { formatDurationHoursMinutes } from '@/utils/dateUtils';
 import type {
@@ -129,8 +130,9 @@ function ClientTargetPanel({
     }
   };
 
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
   const handleDelete = async () => {
-    if (!confirm('Delete this target? All corrections will also be deleted.')) return;
     try {
       await onDeleted();
     } catch (err) {
@@ -267,7 +269,7 @@ function ClientTargetPanel({
             <Edit2 className="h-3.5 w-3.5" />
           </button>
           <button
-            onClick={handleDelete}
+            onClick={() => setShowDeleteConfirm(true)}
             className="p-1 text-gray-400 hover:text-red-600 rounded"
             title="Delete target"
           >
@@ -380,6 +382,15 @@ function ClientTargetPanel({
           )}
         </div>
       )}
+
+      {showDeleteConfirm && (
+        <ConfirmModal
+          title="Delete Target"
+          message="Delete this target? All corrections will also be deleted."
+          onConfirm={handleDelete}
+          onClose={() => setShowDeleteConfirm(false)}
+        />
+      )}
     </div>
   );
 }
@@ -436,13 +447,12 @@ export function ClientsPage() {
     }
   };
 
-  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;
-    }
+  const [confirmClient, setConfirmClient] = useState<Client | null>(null);
 
+  const handleDeleteConfirmed = async () => {
+    if (!confirmClient) return;
     try {
-      await deleteClient.mutateAsync(client.id);
+      await deleteClient.mutateAsync(confirmClient.id);
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to delete client');
     }
@@ -512,7 +522,7 @@ export function ClientsPage() {
                       <Edit2 className="h-4 w-4" />
                     </button>
                     <button
-                      onClick={() => handleDelete(client)}
+                      onClick={() => setConfirmClient(client)}
                       className="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50"
                     >
                       <Trash2 className="h-4 w-4" />
@@ -595,6 +605,15 @@ export function ClientsPage() {
           </form>
         </Modal>
       )}
+
+      {confirmClient && (
+        <ConfirmModal
+          title={`Delete "${confirmClient.name}"`}
+          message="This will also delete all associated projects and time entries. This action cannot be undone."
+          onConfirm={handleDeleteConfirmed}
+          onClose={() => setConfirmClient(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index f4d881e..645ed88 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,9 +1,12 @@
+import { useState } from "react";
 import { Link } from "react-router-dom";
-import { Clock, Calendar, Briefcase, TrendingUp, Target } from "lucide-react";
+import { Clock, Calendar, Briefcase, TrendingUp, Target, Edit2, Trash2 } from "lucide-react";
 import { useTimeEntries } from "@/hooks/useTimeEntries";
 import { useClientTargets } from "@/hooks/useClientTargets";
 import { ProjectColorDot } from "@/components/ProjectColorDot";
 import { StatCard } from "@/components/StatCard";
+import { TimeEntryFormModal } from "@/components/TimeEntryFormModal";
+import { ConfirmModal } from "@/components/ConfirmModal";
 import {
   formatDate,
   formatTime,
@@ -12,6 +15,7 @@ import {
   calculateDuration,
 } from "@/utils/dateUtils";
 import { startOfDay, endOfDay } from "date-fns";
+import type { TimeEntry } from "@/types";
 
 export function DashboardPage() {
   const today = new Date();
@@ -21,12 +25,35 @@ export function DashboardPage() {
     limit: 5,
   });
 
-  const { data: recentEntries } = useTimeEntries({
+  const { data: recentEntries, createTimeEntry, updateTimeEntry, deleteTimeEntry } = useTimeEntries({
     limit: 10,
   });
 
   const { targets } = useClientTargets();
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingEntry, setEditingEntry] = useState<TimeEntry | null>(null);
+  const [confirmEntry, setConfirmEntry] = useState<TimeEntry | null>(null);
+
+  const handleOpenModal = (entry: TimeEntry) => {
+    setEditingEntry(entry);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingEntry(null);
+  };
+
+  const handleDeleteConfirmed = async () => {
+    if (!confirmEntry) return;
+    try {
+      await deleteTimeEntry.mutateAsync(confirmEntry.id);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to delete');
+    }
+  };
+
   const totalTodaySeconds =
     todayEntries?.entries.reduce((total, entry) => {
       return total + calculateDuration(entry.startTime, entry.endTime);
@@ -163,11 +190,14 @@ export function DashboardPage() {
                   <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                     Duration
                   </th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
                 </tr>
               </thead>
               <tbody className="bg-white divide-y divide-gray-200">
                 {recentEntries?.entries.slice(0, 5).map((entry) => (
-                  <tr key={entry.id}>
+                  <tr key={entry.id} className="hover:bg-gray-50">
                     <td className="px-4 py-3 whitespace-nowrap">
                       <div className="flex items-center">
                         <ProjectColorDot color={entry.project.color} />
@@ -181,13 +211,17 @@ export function DashboardPage() {
                         </div>
                       </div>
                     </td>
-                     <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
-                       <div>{formatDate(entry.startTime)}</div>
-                       <div className="text-xs text-gray-400">{formatTime(entry.startTime)} – {formatTime(entry.endTime)}</div>
-                     </td>
-                     <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900 font-mono">
+                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+                      <div>{formatDate(entry.startTime)}</div>
+                      <div className="text-xs text-gray-400">{formatTime(entry.startTime)} – {formatTime(entry.endTime)}</div>
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900 font-mono">
                       {formatDurationFromDatesHoursMinutes(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={() => setConfirmEntry(entry)} className="p-1.5 text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>
+                    </td>
                   </tr>
                 ))}
               </tbody>
@@ -195,6 +229,24 @@ export function DashboardPage() {
           </div>
         )}
       </div>
+
+      {isModalOpen && (
+        <TimeEntryFormModal
+          entry={editingEntry}
+          onClose={handleCloseModal}
+          createTimeEntry={createTimeEntry}
+          updateTimeEntry={updateTimeEntry}
+        />
+      )}
+
+      {confirmEntry && (
+        <ConfirmModal
+          title="Delete Entry"
+          message="Are you sure you want to delete this time entry?"
+          onConfirm={handleDeleteConfirmed}
+          onClose={() => setConfirmEntry(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/ProjectsPage.tsx b/frontend/src/pages/ProjectsPage.tsx
index 862af11..8d34a53 100644
--- a/frontend/src/pages/ProjectsPage.tsx
+++ b/frontend/src/pages/ProjectsPage.tsx
@@ -3,6 +3,7 @@ import { Plus, Edit2, Trash2, FolderOpen } from 'lucide-react';
 import { useProjects } from '@/hooks/useProjects';
 import { useClients } from '@/hooks/useClients';
 import { Modal } from '@/components/Modal';
+import { ConfirmModal } from '@/components/ConfirmModal';
 import { Spinner } from '@/components/Spinner';
 import { ProjectColorDot } from '@/components/ProjectColorDot';
 import type { Project, CreateProjectInput, UpdateProjectInput } from '@/types';
@@ -87,13 +88,12 @@ export function ProjectsPage() {
     }
   };
 
-  const handleDelete = async (project: Project) => {
-    if (!confirm(`Are you sure you want to delete "${project.name}"?`)) {
-      return;
-    }
+  const [confirmProject, setConfirmProject] = useState<Project | null>(null);
 
+  const handleDeleteConfirmed = async () => {
+    if (!confirmProject) return;
     try {
-      await deleteProject.mutateAsync(project.id);
+      await deleteProject.mutateAsync(confirmProject.id);
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to delete project');
     }
@@ -142,7 +142,7 @@ export function ProjectsPage() {
                 <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">
+                <button onClick={() => setConfirmProject(project)} className="p-1.5 text-gray-400 hover:text-red-600 rounded">
                   <Trash2 className="h-4 w-4" />
                 </button>
               </div>
@@ -199,6 +199,14 @@ export function ProjectsPage() {
           </form>
         </Modal>
       )}
+      {confirmProject && (
+        <ConfirmModal
+          title={`Delete "${confirmProject.name}"`}
+          message="Are you sure you want to delete this project?"
+          onConfirm={handleDeleteConfirmed}
+          onClose={() => setConfirmProject(null)}
+        />
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/TimeEntriesPage.tsx b/frontend/src/pages/TimeEntriesPage.tsx
index 3cc77f9..cae974c 100644
--- a/frontend/src/pages/TimeEntriesPage.tsx
+++ b/frontend/src/pages/TimeEntriesPage.tsx
@@ -1,88 +1,34 @@
 import { useState } from 'react';
 import { Plus, Edit2, Trash2 } from 'lucide-react';
 import { useTimeEntries } from '@/hooks/useTimeEntries';
-import { useProjects } from '@/hooks/useProjects';
-import { Modal } from '@/components/Modal';
 import { Spinner } from '@/components/Spinner';
 import { ProjectColorDot } from '@/components/ProjectColorDot';
-import { formatDate, formatTime, formatDurationFromDatesHoursMinutes, getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
-import type { TimeEntry, CreateTimeEntryInput, UpdateTimeEntryInput } from '@/types';
+import { TimeEntryFormModal } from '@/components/TimeEntryFormModal';
+import { ConfirmModal } from '@/components/ConfirmModal';
+import { formatDate, formatTime, formatDurationFromDatesHoursMinutes } from '@/utils/dateUtils';
+import type { TimeEntry } 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 [confirmEntry, setConfirmEntry] = useState<TimeEntry | 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);
+    setEditingEntry(entry ?? 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),
-    };
-
+  const handleDeleteConfirmed = async () => {
+    if (!confirmEntry) return;
     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);
+      await deleteTimeEntry.mutateAsync(confirmEntry.id);
     } catch (err) {
       alert(err instanceof Error ? err.message : 'Failed to delete');
     }
@@ -105,6 +51,7 @@ export function TimeEntriesPage() {
       </div>
 
       <div className="card overflow-hidden">
+        <div className="overflow-x-auto">
         <table className="min-w-full divide-y divide-gray-200">
           <thead className="bg-gray-50">
             <tr>
@@ -130,64 +77,40 @@ export function TimeEntriesPage() {
                     </div>
                   </div>
                 </td>
-                <td className="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900">{formatDurationFromDatesHoursMinutes(entry.startTime, entry.endTime)}</td>
+                <td className="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900">
+                  {formatDurationFromDatesHoursMinutes(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>
+                  <button onClick={() => setConfirmEntry(entry)} className="p-1.5 text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
+        </div>
         {data?.entries.length === 0 && (
           <div className="text-center py-8 text-gray-500">No time entries yet</div>
         )}
       </div>
 
       {isModalOpen && (
-        <Modal
-          title={editingEntry ? 'Edit Entry' : 'Add Entry'}
+        <TimeEntryFormModal
+          entry={editingEntry}
           onClose={handleCloseModal}
-        >
-          {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"
-                disabled={createTimeEntry.isPending || updateTimeEntry.isPending}
-              >
-                {createTimeEntry.isPending || updateTimeEntry.isPending
-                  ? 'Saving...'
-                  : editingEntry
-                  ? 'Save'
-                  : 'Create'}
-              </button>
-            </div>
-          </form>
-        </Modal>
+          createTimeEntry={createTimeEntry}
+          updateTimeEntry={updateTimeEntry}
+        />
+      )}
+
+      {confirmEntry && (
+        <ConfirmModal
+          title="Delete Entry"
+          message="Are you sure you want to delete this time entry?"
+          onConfirm={handleDeleteConfirmed}
+          onClose={() => setConfirmEntry(null)}
+        />
       )}
     </div>
   );
-}
\ No newline at end of file
+}