From afbad3d7e4945120670ebd844ca66d2e02e1261f Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Sat, 4 Jul 2026 00:26:22 +0000
Subject: [PATCH] feat(core): add SettingsSystem page

---
 frontend/src/pages/SettingsSystem.tsx | 277 ++++++++++++++++++++++++++
 1 file changed, 277 insertions(+)
 create mode 100644 frontend/src/pages/SettingsSystem.tsx

diff --git a/frontend/src/pages/SettingsSystem.tsx b/frontend/src/pages/SettingsSystem.tsx
new file mode 100644
index 0000000..ab61d77
--- /dev/null
+++ b/frontend/src/pages/SettingsSystem.tsx
@@ -0,0 +1,277 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import {
+  useSystemSettings,
+  useUpdateSystemSettings,
+  useCurrencies,
+  useTaxes,
+} from '@/api/hooks';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+
+const settingsSchema = z.object({
+  company_name: z.string().min(1, 'Name ist erforderlich').max(200),
+  company_legal_form: z.string().max(50).optional().or(z.literal('')),
+  company_street: z.string().min(1, 'Straße ist erforderlich').max(255),
+  company_city: z.string().min(1, 'Stadt ist erforderlich').max(100),
+  company_zip: z.string().min(1, 'PLZ ist erforderlich').max(20),
+  company_country: z.string().min(2, 'Land ist erforderlich').max(2),
+  tax_number: z.string().max(50).optional().or(z.literal('')),
+  vat_id: z.string().max(50).optional().or(z.literal('')),
+  iban: z.string().max(34).optional().or(z.literal('')),
+  bic: z.string().max(11).optional().or(z.literal('')),
+  bank_name: z.string().max(100).optional().or(z.literal('')),
+  ceo: z.string().max(100).optional().or(z.literal('')),
+  trade_register: z.string().max(100).optional().or(z.literal('')),
+  default_currency_id: z.string().optional().or(z.literal('')),
+  default_tax_id: z.string().optional().or(z.literal('')),
+  invoice_prefix: z.string().max(20).optional().or(z.literal('RE-')),
+  quote_prefix: z.string().max(20).optional().or(z.literal('AN-')),
+  payment_terms_days: z.number().int().min(0).max(365).default(14),
+});
+
+type SettingsFormValues = z.infer<typeof settingsSchema>;
+
+export function SettingsSystemPage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+
+  const { data: settings, isLoading } = useSystemSettings();
+  const { data: currenciesData } = useCurrencies();
+  const { data: taxesData } = useTaxes();
+  const updateMutation = useUpdateSystemSettings();
+
+  const currencies = currenciesData?.items ?? [];
+  const taxes = taxesData?.items ?? [];
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<SettingsFormValues>({
+    resolver: zodResolver(settingsSchema),
+    defaultValues: {
+      company_name: '',
+      company_legal_form: '',
+      company_street: '',
+      company_city: '',
+      company_zip: '',
+      company_country: 'DE',
+      tax_number: '',
+      vat_id: '',
+      iban: '',
+      bic: '',
+      bank_name: '',
+      ceo: '',
+      trade_register: '',
+      default_currency_id: '',
+      default_tax_id: '',
+      invoice_prefix: 'RE-',
+      quote_prefix: 'AN-',
+      payment_terms_days: 14,
+    },
+  });
+
+  useEffect(() => {
+    if (settings && Object.keys(settings).length > 0) {
+      reset({
+        company_name: settings.company_name || '',
+        company_legal_form: settings.company_legal_form || '',
+        company_street: settings.company_street || '',
+        company_city: settings.company_city || '',
+        company_zip: settings.company_zip || '',
+        company_country: settings.company_country || 'DE',
+        tax_number: settings.tax_number || '',
+        vat_id: settings.vat_id || '',
+        iban: settings.iban || '',
+        bic: settings.bic || '',
+        bank_name: settings.bank_name || '',
+        ceo: settings.ceo || '',
+        trade_register: settings.trade_register || '',
+        default_currency_id: settings.default_currency_id || '',
+        default_tax_id: settings.default_tax_id || '',
+        invoice_prefix: settings.invoice_prefix || 'RE-',
+        quote_prefix: settings.quote_prefix || 'AN-',
+        payment_terms_days: settings.payment_terms_days || 14,
+      });
+    }
+  }, [settings, reset]);
+
+  const onSubmit = async (values: SettingsFormValues) => {
+    try {
+      const payload = { ...values };
+      if (!payload.default_currency_id) payload.default_currency_id = null as any;
+      if (!payload.default_tax_id) payload.default_tax_id = null as any;
+      await updateMutation.mutateAsync(payload);
+      toast.success(t('systemSettings.saved'));
+    } catch (err: any) {
+      toast.error(err.message || t('systemSettings.saveFailed'));
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4" data-testid="settings-system-page">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-96" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6" data-testid="settings-system-page">
+      <h1 className="text-2xl font-bold text-secondary-900">{t('systemSettings.title')}</h1>
+
+      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
+        <Card title={t('systemSettings.companyInfo')}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              {...register('company_name')}
+              label={t('systemSettings.companyName')}
+              required
+              error={errors.company_name?.message}
+              data-testid="settings-company-name"
+            />
+            <Input
+              {...register('company_legal_form')}
+              label={t('systemSettings.legalForm')}
+              error={errors.company_legal_form?.message}
+            />
+          </div>
+        </Card>
+
+        <Card title={t('systemSettings.companyAddress')}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              {...register('company_street')}
+              label={t('address.street')}
+              required
+              error={errors.company_street?.message}
+            />
+            <Input
+              {...register('company_zip')}
+              label={t('address.zip')}
+              required
+              error={errors.company_zip?.message}
+            />
+            <Input
+              {...register('company_city')}
+              label={t('address.city')}
+              required
+              error={errors.company_city?.message}
+            />
+            <Input
+              {...register('company_country')}
+              label={t('address.country')}
+              required
+              error={errors.company_country?.message}
+              maxLength={2}
+            />
+          </div>
+        </Card>
+
+        <Card title={t('systemSettings.taxBankInfo')}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              {...register('tax_number')}
+              label={t('systemSettings.taxNumber')}
+              error={errors.tax_number?.message}
+            />
+            <Input
+              {...register('vat_id')}
+              label={t('systemSettings.vatId')}
+              error={errors.vat_id?.message}
+            />
+            <Input
+              {...register('iban')}
+              label={t('systemSettings.iban')}
+              error={errors.iban?.message}
+            />
+            <Input
+              {...register('bic')}
+              label={t('systemSettings.bic')}
+              error={errors.bic?.message}
+            />
+            <Input
+              {...register('bank_name')}
+              label={t('systemSettings.bankName')}
+              error={errors.bank_name?.message}
+            />
+            <Input
+              {...register('ceo')}
+              label={t('systemSettings.ceo')}
+              error={errors.ceo?.message}
+            />
+            <Input
+              {...register('trade_register')}
+              label={t('systemSettings.tradeRegister')}
+              error={errors.trade_register?.message}
+            />
+          </div>
+        </Card>
+
+        <Card title={t('systemSettings.defaults')}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-1">
+              <label className="text-sm font-medium text-secondary-700">
+                {t('systemSettings.defaultCurrency')}
+              </label>
+              <select
+                {...register('default_currency_id')}
+                className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              >
+                <option value="">—</option>
+                {currencies.map((c: any) => (
+                  <option key={c.id} value={c.id}>{c.code} — {c.name}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-1">
+              <label className="text-sm font-medium text-secondary-700">
+                {t('systemSettings.defaultTax')}
+              </label>
+              <select
+                {...register('default_tax_id')}
+                className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              >
+                <option value="">—</option>
+                {taxes.map((t: any) => (
+                  <option key={t.id} value={t.id}>{t.name} ({t.rate}%)</option>
+                ))}
+              </select>
+            </div>
+            <Input
+              {...register('invoice_prefix')}
+              label={t('systemSettings.invoicePrefix')}
+              error={errors.invoice_prefix?.message}
+            />
+            <Input
+              {...register('quote_prefix')}
+              label={t('systemSettings.quotePrefix')}
+              error={errors.quote_prefix?.message}
+            />
+            <Input
+              {...register('payment_terms_days', { valueAsNumber: true })}
+              label={t('systemSettings.paymentTermsDays')}
+              type="number"
+              error={errors.payment_terms_days?.message}
+            />
+          </div>
+        </Card>
+
+        <div className="flex justify-end gap-3">
+          <Button type="submit" isLoading={isSubmitting} data-testid="settings-system-save">
+            {t('common.save')}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}