Refactor root admin dashboard UI

components/root/portfolio-project-form.tsx

@@ -199,11 +199,11 @@ export function PortfolioProjectForm({
 
       <AppCard>
         <CardHeader>
-          <CardTitle>Project Basics</CardTitle>
+          <CardTitle>Projekt Basisdaten</CardTitle>
         </CardHeader>
         <CardContent className="grid gap-4 md:grid-cols-2">
           <div className="space-y-2">
-            <Label htmlFor="categoryId">Category</Label>
+            <Label htmlFor="categoryId">Kategorie</Label>
             <select
               id="categoryId"
               name="categoryId"
@@ -225,7 +225,7 @@ export function PortfolioProjectForm({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="clientName">Client Name</Label>
+            <Label htmlFor="clientName">Kundenname</Label>
             <Input
               id="clientName"
               name="clientName"
@@ -235,7 +235,7 @@ export function PortfolioProjectForm({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="projectYear">Project Year</Label>
+            <Label htmlFor="projectYear">Projektjahr</Label>
             <Input
               id="projectYear"
               name="projectYear"
@@ -259,7 +259,7 @@ export function PortfolioProjectForm({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="sortOrder">Sort Order</Label>
+            <Label htmlFor="sortOrder">Sortierung</Label>
             <Input
               id="sortOrder"
               name="sortOrder"
@@ -272,7 +272,7 @@ export function PortfolioProjectForm({
 
           <div className="space-y-2 md:col-span-2">
             <MediaFieldPicker
-              title="Cover Image"
+              title="Cover Bild"
               value={coverMedia}
               onChange={setCoverMedia}
               options={mediaOptions}
@@ -284,19 +284,19 @@ export function PortfolioProjectForm({
 
           <label className="flex items-center gap-3 rounded-nested border border-border px-4 py-3 text-sm">
             <input type="checkbox" name="isFeatured" defaultChecked={project?.isFeatured ?? false} />
-            Featured
+            Hervorgehoben
           </label>
 
           <label className="flex items-center gap-3 rounded-nested border border-border px-4 py-3 text-sm">
             <input type="checkbox" name="isPublished" defaultChecked={project?.isPublished ?? false} />
-            Published
+            Veroeffentlicht
           </label>
         </CardContent>
       </AppCard>
 
       <AppCard>
         <CardHeader>
-          <CardTitle>Localized Content</CardTitle>
+          <CardTitle>Lokalisierte Inhalte</CardTitle>
         </CardHeader>
         <CardContent>
           <Tabs defaultValue="de">
@@ -312,13 +312,13 @@ export function PortfolioProjectForm({
                 <div className="grid gap-4 rounded-surface border border-border p-4 md:grid-cols-2">
                   <div className="md:col-span-2 text-sm text-muted-foreground">
                     {locale.key === "ar"
-                      ? "Arabic content for the Arabic website."
+                      ? "Arabische Inhalte fuer die arabische Website."
                       : locale.key === "en"
-                        ? "English content for the English website."
-                        : "German content for the German website."}
+                        ? "Englische Inhalte fuer die englische Website."
+                        : "Deutsche Inhalte fuer die deutsche Website."}
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor={`title${locale.suffix}`}>{`Title ${locale.label}`}</Label>
+                    <Label htmlFor={`title${locale.suffix}`}>{`Titel ${locale.label}`}</Label>
                     <Input
                       id={`title${locale.suffix}`}
                       name={`title${locale.suffix}`}
@@ -327,7 +327,7 @@ export function PortfolioProjectForm({
                     />
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor={`serviceLabel${locale.suffix}`}>{`Service Label ${locale.label}`}</Label>
+                    <Label htmlFor={`serviceLabel${locale.suffix}`}>{`Leistungslabel ${locale.label}`}</Label>
                     <Input
                       id={`serviceLabel${locale.suffix}`}
                       name={`serviceLabel${locale.suffix}`}
@@ -336,7 +336,7 @@ export function PortfolioProjectForm({
                     />
                   </div>
                   <div className="space-y-2 md:col-span-2">
-                    <Label htmlFor={`summary${locale.suffix}`}>{`Summary ${locale.label}`}</Label>
+                    <Label htmlFor={`summary${locale.suffix}`}>{`Kurzbeschreibung ${locale.label}`}</Label>
                     <Textarea
                       id={`summary${locale.suffix}`}
                       name={`summary${locale.suffix}`}
@@ -354,14 +354,14 @@ export function PortfolioProjectForm({
 
       <AppCard>
         <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>Sections</CardTitle>
+          <CardTitle>Abschnitte</CardTitle>
           <Button
             type="button"
             variant="outline"
             onClick={() => setSections((current) => [...current, createEmptySection(current.length)])}
           >
             <Plus className="h-4 w-4" />
-            Add Section
+            Abschnitt hinzufuegen
           </Button>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -369,7 +369,7 @@ export function PortfolioProjectForm({
             <AppCard key={section.id ?? `${section.type}-${index}`} level={2}>
               <CardContent className="space-y-4 p-4">
                 <div className="flex items-center justify-between gap-4">
-                  <p className="text-sm font-medium text-foreground">Section #{index + 1}</p>
+                  <p className="text-sm font-medium text-foreground">{`Abschnitt #${index + 1}`}</p>
                   <div className="flex gap-2">
                     <Button
                       type="button"
@@ -401,14 +401,14 @@ export function PortfolioProjectForm({
                       disabled={sections.length === 1}
                     >
                       <Trash2 className="h-4 w-4" />
-                      Remove
+                      Entfernen
                     </Button>
                   </div>
                 </div>
 
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="space-y-2">
-                    <Label>Type</Label>
+                    <Label>Typ</Label>
                     <select
                       value={section.type}
                       onChange={(event) =>
@@ -432,7 +432,7 @@ export function PortfolioProjectForm({
 
                   <div className="space-y-2 md:col-span-2">
                     <MediaFieldPicker
-                      title="Section Image"
+                      title="Abschnitt Bild"
                       value={section.media}
                       onChange={(media) =>
                         setSections((current) =>
@@ -470,7 +470,7 @@ export function PortfolioProjectForm({
 
                   {localeFieldConfig.map((locale) => (
                     <div key={`${locale.key}-title-${index}`} className="space-y-2">
-                      <Label>{`Title ${locale.label}`}</Label>
+                      <Label>{`Titel ${locale.label}`}</Label>
                       <Input
                         value={section[`title${locale.suffix}` as keyof SectionFormValue] as string}
                         onChange={(event) =>
@@ -491,7 +491,7 @@ export function PortfolioProjectForm({
 
                   {localeFieldConfig.map((locale) => (
                     <div key={`${locale.key}-body-${index}`} className="space-y-2 md:col-span-2">
-                      <Label>{`Body ${locale.label}`}</Label>
+                      <Label>{`Text ${locale.label}`}</Label>
                       <Textarea
                         rows={4}
                         value={section[`body${locale.suffix}` as keyof SectionFormValue] as string}
@@ -519,26 +519,26 @@ export function PortfolioProjectForm({
 
       <AppCard>
         <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>Assets</CardTitle>
+          <CardTitle>Dateien</CardTitle>
           <Button
             type="button"
             variant="outline"
             onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
           >
             <Plus className="h-4 w-4" />
-            Add Asset
+            Datei hinzufuegen
           </Button>
         </CardHeader>
         <CardContent className="space-y-4">
           {assets.length === 0 ? (
-            <p className="text-sm text-muted-foreground">No assets added yet.</p>
+            <p className="text-sm text-muted-foreground">Noch keine Dateien hinzugefuegt.</p>
           ) : null}
 
           {assets.map((asset, index) => (
             <AppCard key={asset.id ?? `${asset.kind}-${index}`} level={2}>
               <CardContent className="space-y-4 p-4">
                 <div className="flex items-center justify-between gap-4">
-                  <p className="text-sm font-medium text-foreground">Asset #{index + 1}</p>
+                  <p className="text-sm font-medium text-foreground">{`Datei #${index + 1}`}</p>
                   <div className="flex gap-2">
                     <Button
                       type="button"
@@ -565,14 +565,14 @@ export function PortfolioProjectForm({
                       }
                     >
                       <Trash2 className="h-4 w-4" />
-                      Remove
+                      Entfernen
                     </Button>
                   </div>
                 </div>
 
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="space-y-2">
-                    <Label>Kind</Label>
+                    <Label>Typ</Label>
                     <select
                       value={asset.kind}
                       onChange={(event) =>
@@ -603,7 +603,7 @@ export function PortfolioProjectForm({
 
                   <div className="space-y-2 md:col-span-2">
                     <MediaFieldPicker
-                      title="Asset File"
+                      title="Datei"
                       value={asset.media}
                       onChange={(media) =>
                         setAssets((current) =>