improvements

2026-02-18 15:26:36 +01:00
parent 4cce62934e
commit f5c0a0b2f7
8 changed files with 354 additions and 179 deletions
--- 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>
  );
 }
--- 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>
  );
 }
--- 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>
  );
 }
--- 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>
  );
-}
+}