Phase 1C: Frontend unified contact UI

2026-07-23 17:17:32 +02:00
parent a8331fbc2b
commit 879106c4eb
62 changed files with 552 additions and 1276 deletions
@@ -0,0 +1,66 @@
+/**
+ * Contact Detail Page — loads a single contact by ID from route params.
+ */
+
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ContactDetail } from '@/components/contacts/ContactDetail';
+import { ContactEditModal } from '@/components/contacts/ContactEditModal';
+import { useUnifiedContact, type UnifiedContact } from '@/api/hooks';
+import { Button } from '@/components/ui/Button';
+import { ChevronLeft } from 'lucide-react';
+
+export function ContactDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { data: contact, isLoading } = useUnifiedContact(id);
+  const [editModalOpen, setEditModalOpen] = React.useState(false);
+  const [editingContact, setEditingContact] = React.useState<UnifiedContact | null>(null);
+
+  const handleEdit = () => {
+    if (contact) {
+      setEditingContact(contact);
+      setEditModalOpen(true);
+    }
+  };
+
+  const handleDeleted = () => {
+    navigate('/contacts');
+  };
+
+  const handleSaved = () => {
+    setEditModalOpen(false);
+    setEditingContact(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full" data-testid="contact-detail-page">
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-secondary-200 bg-white">
+        <button
+          onClick={() => navigate('/contacts')}
+          className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
+          aria-label={t('common.back')}
+        >
+          <ChevronLeft className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
+          <span>{t('contacts.title')}</span>
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <ContactDetail
+          contact={contact ?? null}
+          loading={isLoading}
+          onEdit={handleEdit}
+          onDeleted={handleDeleted}
+        />
+      </div>
+      <ContactEditModal
+        open={editModalOpen}
+        onClose={() => setEditModalOpen(false)}
+        contact={editingContact}
+        onSaved={handleSaved}
+      />
+    </div>
+  );
+}