sprint2: frontend permission checks for ContactDetail + ContactsList + Field-Level UI

frontend/src/components/contacts/ContactDetail.tsx

@@ -15,6 +15,7 @@ import { useAIUIControlStore } from '@/store/aiUIControlStore';
 import { PluginPage } from '@/components/plugins/PluginLoader';
 import { useAuthStore } from '@/store/authStore';
 import { CustomFieldRenderer } from '@/components/contacts/CustomFieldRenderer';
+import { usePermission } from '@/hooks/usePermission';
 import { TagBadge } from '@/components/tags/TagBadge';
 import { EntityHistoryPanel } from '@/components/common/EntityHistoryPanel';
 import { useCustomFields } from '@/api/customFields';
@@ -30,13 +31,19 @@ import {
 export interface ContactDetailProps {
   contact: UnifiedContact | null;
   loading?: boolean;
-  onEdit: () => void;
+  onEdit?: () => void;
   onDeleted: () => void;
 }
 
-function Field({ label, value }: { label: string; value?: string | null }) {
+function Field({ label, value, fieldName }: { label: string; value?: string | null; fieldName?: string }) {
+  const { hasFieldAccess } = usePermission();
+  if (fieldName) {
+    const access = hasFieldAccess('contacts', fieldName);
+    if (access === 'hidden') return null;
+  }
+  const isReadonly = fieldName ? hasFieldAccess('contacts', fieldName) === 'readonly' : false;
   return (
-    <div>
+    <div className={isReadonly ? 'opacity-50 pointer-events-none' : ''}>
       <dt className="text-xs font-medium text-secondary-500">{label}</dt>
       <dd className="text-sm text-secondary-900">{value || '—'}</dd>
     </div>
@@ -153,6 +160,7 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
   const { t } = useTranslation();
   const toast = useToast();
   const deleteMutation = useDeleteUnifiedContact();
+  const { hasPermission, hasFieldAccess } = usePermission();
   const createPersonMutation = useCreateContactPerson();
   const updatePersonMutation = useUpdateContactPerson();
   const deletePersonMutation = useDeleteContactPerson();
@@ -286,8 +294,12 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
           </div>
         </div>
         <div className="flex items-center gap-2 flex-shrink-0">
-          <Button variant="ghost" size="sm" onClick={onEdit}>{t('common.edit')}</Button>
-          <Button variant="ghost" size="sm" onClick={handleDelete} isLoading={deleteMutation.isPending}>{t('common.delete')}</Button>
+          {hasPermission('contacts:write') && onEdit && (
+            <Button variant="ghost" size="sm" onClick={onEdit}>{t('common.edit')}</Button>
+          )}
+          {hasPermission('contacts:delete') && (
+            <Button variant="ghost" size="sm" onClick={handleDelete} isLoading={deleteMutation.isPending}>{t('common.delete')}</Button>
+          )}
         </div>
       </div>
 
@@ -378,52 +390,52 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
         {/* Communication */}
         <Section title={t('contacts.communication')}>
           <dl className="grid grid-cols-2 gap-3">
-            <Field label={t('contacts.phone') + ' 1'} value={contact.phone_1} />
-            <Field label={t('contacts.phone') + ' 2'} value={contact.phone_2} />
-            <Field label={t('contacts.email') + ' 1'} value={contact.email_1} />
-            <Field label={t('contacts.email') + ' 2'} value={contact.email_2} />
-            <Field label={t('contacts.website')} value={contact.website} />
+            <Field label={t('contacts.phone') + ' 1'} value={contact.phone_1} fieldName="phone_1" />
+            <Field label={t('contacts.phone') + ' 2'} value={contact.phone_2} fieldName="phone_2" />
+            <Field label={t('contacts.email') + ' 1'} value={contact.email_1} fieldName="email_1" />
+            <Field label={t('contacts.email') + ' 2'} value={contact.email_2} fieldName="email_2" />
+            <Field label={t('contacts.website')} value={contact.website} fieldName="website" />
           </dl>
         </Section>
 
         {/* Financial */}
         <Section title={t('contacts.financial')}>
           <dl className="grid grid-cols-2 gap-3">
-            <Field label={t('contacts.vatCode')} value={contact.vat_code} />
-            <Field label={t('contacts.fiscalCode')} value={contact.fiscal_code} />
-            <Field label={t('contacts.commerceCode')} value={contact.commerce_code} />
-            <Field label={t('contacts.purchaseNumber')} value={contact.purchase_number} />
-            <Field label={t('contacts.bic')} value={contact.bic} />
-            <Field label={t('contacts.bankAccount')} value={contact.bank_account} />
+            <Field label={t('contacts.vatCode')} value={contact.vat_code} fieldName="vat_code" />
+            <Field label={t('contacts.fiscalCode')} value={contact.fiscal_code} fieldName="fiscal_code" />
+            <Field label={t('contacts.commerceCode')} value={contact.commerce_code} fieldName="commerce_code" />
+            <Field label={t('contacts.purchaseNumber')} value={contact.purchase_number} fieldName="purchase_number" />
+            <Field label={t('contacts.bic')} value={contact.bic} fieldName="bic" />
+            <Field label={t('contacts.bankAccount')} value={contact.bank_account} fieldName="bank_account" />
           </dl>
         </Section>
 
         {/* Discounts */}
         <Section title={t('contacts.discounts')}>
           <dl className="grid grid-cols-3 gap-3">
-            <Field label={t('contacts.discountCrew')} value={contact.discount_crew ? String(contact.discount_crew) : '0'} />
-            <Field label={t('contacts.discountTransport')} value={contact.discount_transport ? String(contact.discount_transport) : '0'} />
-            <Field label={t('contacts.discountRental')} value={contact.discount_rental ? String(contact.discount_rental) : '0'} />
-            <Field label={t('contacts.discountSale')} value={contact.discount_sale ? String(contact.discount_sale) : '0'} />
-            <Field label={t('contacts.discountSubrent')} value={contact.discount_subrent ? String(contact.discount_subrent) : '0'} />
-            <Field label={t('contacts.discountTotal')} value={contact.discount_total ? String(contact.discount_total) : '0'} />
+            <Field label={t('contacts.discountCrew')} value={contact.discount_crew ? String(contact.discount_crew) : '0'} fieldName="discount_crew" />
+            <Field label={t('contacts.discountTransport')} value={contact.discount_transport ? String(contact.discount_transport) : '0'} fieldName="discount_transport" />
+            <Field label={t('contacts.discountRental')} value={contact.discount_rental ? String(contact.discount_rental) : '0'} fieldName="discount_rental" />
+            <Field label={t('contacts.discountSale')} value={contact.discount_sale ? String(contact.discount_sale) : '0'} fieldName="discount_sale" />
+            <Field label={t('contacts.discountSubrent')} value={contact.discount_subrent ? String(contact.discount_subrent) : '0'} fieldName="discount_subrent" />
+            <Field label={t('contacts.discountTotal')} value={contact.discount_total ? String(contact.discount_total) : '0'} fieldName="discount_total" />
           </dl>
         </Section>
 
         {/* Geo */}
         <Section title={t('contacts.geo')}>
           <dl className="grid grid-cols-2 gap-3">
-            <Field label={t('contacts.latitude')} value={contact.latitude != null ? String(contact.latitude) : null} />
-            <Field label={t('contacts.longitude')} value={contact.longitude != null ? String(contact.longitude) : null} />
+            <Field label={t('contacts.latitude')} value={contact.latitude != null ? String(contact.latitude) : null} fieldName="latitude" />
+            <Field label={t('contacts.longitude')} value={contact.longitude != null ? String(contact.longitude) : null} fieldName="longitude" />
           </dl>
         </Section>
 
         {/* Notes & Tags */}
         <Section title={t('contacts.notes')}>
           <dl className="space-y-3">
-            <Field label={t('contacts.projectnote')} value={contact.projectnote} />
-            <Field label={t('contacts.projectnoteTitle')} value={contact.projectnote_title} />
-            <Field label={t('contacts.contactWarning')} value={contact.contact_warning} />
+            <Field label={t('contacts.projectnote')} value={contact.projectnote} fieldName="projectnote" />
+            <Field label={t('contacts.projectnoteTitle')} value={contact.projectnote_title} fieldName="projectnote_title" />
+            <Field label={t('contacts.contactWarning')} value={contact.contact_warning} fieldName="contact_warning" />
             <div>
               <dt className="text-xs font-medium text-secondary-500">{t('tags.title')}</dt>
               <dd>

frontend/src/pages/ContactDetailPage.tsx

@@ -12,6 +12,7 @@ import { useUnifiedContact, type UnifiedContact } from '@/api/hooks';
 import { Button } from '@/components/ui/Button';
 import { ChevronLeft } from 'lucide-react';
 import { PrintButton } from '@/components/common/PrintButton';
+import { usePermission } from '@/hooks/usePermission';
 
 export function ContactDetailPage() {
   const { t } = useTranslation();
@@ -19,6 +20,7 @@ export function ContactDetailPage() {
   const navigate = useNavigate();
   const { data: contact, isLoading } = useUnifiedContact(id);
   const openWindow = useWindowStore((s) => s.openWindow);
+  const { hasPermission } = usePermission();
 
   const handleEdit = () => {
     if (contact) {
@@ -51,13 +53,13 @@ export function ContactDetailPage() {
           <span>{t('contacts.title')}</span>
         </button>
         <div className="flex-1" />
-        <PrintButton targetId="contact-detail" />
+        {hasPermission('contacts:read') && <PrintButton targetId="contact-detail" />}
       </div>
       <div className="flex-1 overflow-y-auto" id="contact-detail">
         <ContactDetail
           contact={contact ?? null}
           loading={isLoading}
-          onEdit={handleEdit}
+          onEdit={hasPermission('contacts:write') ? handleEdit : undefined}
           onDeleted={handleDeleted}
         />
       </div>

frontend/src/pages/ContactsList.tsx

@@ -35,11 +35,13 @@ import {
 } from '@/api/hooks';
 import { useContactFolders } from '@/api/contacts';
 import { useCustomFieldDefinitions } from '@/api/customFieldDefinitions';
+import { usePermission } from '@/hooks/usePermission';
 
 const PAGE_SIZE = 25;
 
 export function ContactsListPage() {
   const { t } = useTranslation();
+  const { hasPermission } = usePermission();
 
   const [selectedFilter, setSelectedFilter] = useState<ContactFilter>('all');
   const [search, setSearch] = useState('');
@@ -356,7 +358,7 @@ export function ContactsListPage() {
   useEffect(() => {
     const items = [
       // New contact — ganz links
-      {
+      ...(hasPermission('contacts:write') ? [{
         id: 'new',
         plugin: 'contacts',
         label: t('contacts.create'),
@@ -364,7 +366,7 @@ export function ContactsListPage() {
         group: 'create',
         icon: <Plus className="w-3.5 h-3.5" strokeWidth={2} />,
         onClick: handleCreate,
-      },
+      }] : []),
       // View mode dropdown (list / table / cards)
       {
         id: 'view-mode',
@@ -455,7 +457,7 @@ export function ContactsListPage() {
         onClick: () => setSavedFiltersOpen(true),
       },
       // Print — icon only, right side
-      {
+      ...(hasPermission('contacts:read') ? [{
         id: 'print',
         plugin: 'contacts',
         label: t('common.print', 'Drucken'),
@@ -464,7 +466,7 @@ export function ContactsListPage() {
         icon: <Printer className="w-3.5 h-3.5" strokeWidth={2} />,
         iconOnly: true,
         onClick: () => window.print(),
-      },
+      }] : []),
       // Open standalone — icon only, right side
       {
         id: 'open-standalone',