improvements

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