Merge pull request 'dev' (#21) from dev into main

Reviewed-on: #21

global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
@@ -54,18 +56,22 @@
     "@eslint/eslintrc": "^3",
     "@eslint/js": "^9.0.1",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^25",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/coverage-v8": "^4.1.5",
     "autoprefixer": "^10.4.24",
     "baseline-browser-mapping": "^2.9.19",
     "eslint": "^9.0.0",
     "eslint-config-next": "^16.1.6",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
+    "jsdom": "^29.1.1",
     "postcss": "^8.5.6",
     "postcss-preset-env": "^11.1.3",
     "tailwindcss": "^4.1.18",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.1.5"
   }
 }

scripts/check-translations.mjs

@@ -0,0 +1,25 @@
+import { readFileSync } from 'fs';
+
+const enRaw = readFileSync('src/app/i18n/translations/en.ts', 'utf8');
+const deRaw = readFileSync('src/app/i18n/translations/de.ts', 'utf8');
+
+// Extract all "key": "value" pairs
+const kvRegex = /"(k[0-9a-f]+)": "([^"\\]*(\\.[^"\\]*)*)"/g;
+
+const en = {};
+const de = {};
+let m;
+while ((m = kvRegex.exec(enRaw)) !== null) en[m[1]] = m[2];
+kvRegex.lastIndex = 0;
+while ((m = kvRegex.exec(deRaw)) !== null) de[m[1]] = m[2];
+
+// Find keys in both with identical values
+const same = Object.keys(en).filter(k => de[k] !== undefined && en[k] === de[k]);
+console.log(`Keys with identical en/de values (${same.length} total):`);
+same.forEach(k => console.log(`  ${k}: ${JSON.stringify(en[k])}`));
+
+// Find keys in en that look German (contain typical German words or chars)
+const germanPattern = /\b(den|die|das|der|und|nicht|Sie|Ihr|Bitte|werden|wurde|kein|eine|einem|ist|sind|können|bitte|beim|durch|für|mit|Keine|Alle|Alle|beim|oder)\b/;
+const germanInEn = Object.keys(en).filter(k => germanPattern.test(en[k]));
+console.log(`\nKeys in en.ts that look German (${germanInEn.length} total):`);
+germanInEn.forEach(k => console.log(`  ${k}: ${JSON.stringify(en[k])}`));

src/app/about-us/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../i18n/useTranslation';
 import {
   AcademicCapIcon,
   CheckCircleIcon,
@@ -206,6 +209,7 @@ const footerNavigation = {
 }
 
 export default function AboutUsPage() {
+  const { t } = useTranslation();
   return (
     <PageLayout>
       <div className="bg-gray-900 pb-24 sm:pb-32">
@@ -227,7 +231,7 @@ export default function AboutUsPage() {
         {/* Header section */}
         <div className="px-6 pt-14 lg:px-8">
           <div className="mx-auto max-w-2xl pt-24 text-center sm:pt-40">
-            <h1 className="text-5xl font-semibold tracking-tight text-white sm:text-7xl">We are a community</h1>
+            <h1 className="text-5xl font-semibold tracking-tight text-white sm:text-7xl">{t('autofix.kbd979e13')}</h1>
             <p className="mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8">
               Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
               fugiat veniam occaecat fugiat.
@@ -288,7 +292,7 @@ export default function AboutUsPage() {
         {/* Feature section */}
         <div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
           <div className="mx-auto max-w-2xl lg:mx-0">
-            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Our values</h2>
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">{t('autofix.kf0646f35')}</h2>
             <p className="mt-6 text-lg/8 text-gray-300">
               Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste
               dolor cupiditate blanditiis.
@@ -310,7 +314,7 @@ export default function AboutUsPage() {
         {/* Team section */}
         <div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
           <div className="mx-auto max-w-2xl lg:mx-0">
-            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Our team</h2>
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">{t('autofix.k3777e830')}</h2>
             <p className="mt-6 text-lg/8 text-gray-400">
               We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
               best results for our clients.
@@ -345,9 +349,7 @@ export default function AboutUsPage() {
                 className="h-96 w-full flex-none rounded-2xl object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm"
               />
               <div className="w-full flex-auto">
-                <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
-                  Join our team
-                </h2>
+                <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">{t('autofix.k5ef19112')}</h2>
                 <p className="mt-6 text-lg/8 text-pretty text-gray-400">
                   Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis
                   in accusamus quisquam.
@@ -364,9 +366,7 @@ export default function AboutUsPage() {
                   ))}
                 </ul>
                 <div className="mt-10 flex">
-                  <a href="#" className="text-sm/6 font-semibold text-indigo-400 hover:text-indigo-300">
-                    See our job postings
-                    <span aria-hidden="true">&rarr;</span>
+                  <a href="#" className="text-sm/6 font-semibold text-indigo-400 hover:text-indigo-300">{t('autofix.k81b056f2')}<span aria-hidden="true">&rarr;</span>
                   </a>
                 </div>
               </div>

src/app/admin/affiliate-management/components/AffiliateCropModal.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React, { useState, useCallback } from 'react'
 import Cropper from 'react-easy-crop'
 import { Point, Area } from 'react-easy-crop'
@@ -11,6 +14,7 @@ interface AffiliateCropModalProps {
 }
 
 export default function AffiliateCropModal({ isOpen, imageSrc, onClose, onCropComplete }: AffiliateCropModalProps) {
+  const { t } = useTranslation();
   const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
   const [zoom, setZoom] = useState(1)
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
@@ -70,7 +74,7 @@ export default function AffiliateCropModal({ isOpen, imageSrc, onClose, onCropCo
       <div className="relative w-full max-w-4xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden">
         {/* Header */}
         <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-50 to-white">
-          <h2 className="text-xl font-semibold text-blue-900">Crop Affiliate Logo</h2>
+          <h2 className="text-xl font-semibold text-blue-900">{t('autofix.kcf4ba87d')}</h2>
           <button
             onClick={onClose}
             className="text-gray-500 hover:text-gray-700 transition"
@@ -120,9 +124,7 @@ export default function AffiliateCropModal({ isOpen, imageSrc, onClose, onCropCo
               <button
                 onClick={handleSave}
                 className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
-              >
-                Apply Crop
-              </button>
+              >{t('autofix.kef1656df')}</button>
             </div>
           </div>
         </div>

src/app/admin/affiliate-management/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import React, { useState } from 'react'
 import Header from '../../components/nav/Header'
 import Footer from '../../components/Footer'
@@ -40,6 +43,7 @@ const AFFILIATE_CATEGORIES = [
 ] as const
 
 export default function AffiliateManagementPage() {
+  const { t } = useTranslation();
   const router = useRouter()
   const user = useAuthStore(s => s.user)
   const isAdmin = !!user && (
@@ -133,9 +137,7 @@ export default function AffiliateManagementPage() {
                 <button 
                   onClick={refresh}
                   className="mt-2 text-sm text-red-600 hover:text-red-800 font-medium"
-                >
-                  Try again
-                </button>
+                >{t('autofix.k3b7dd87a')}</button>
               </div>
             )}
 
@@ -143,20 +145,14 @@ export default function AffiliateManagementPage() {
             <header className="bg-white/90 backdrop-blur border-b border-blue-100 py-6 md:py-10 px-4 md:px-8 rounded-2xl shadow-lg mb-6 md:mb-8">
               <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-6 mb-4 md:mb-6">
                 <div className="min-w-0">
-                  <h1 className="text-2xl md:text-4xl font-extrabold text-blue-900 tracking-tight">
-                    Affiliate Management
-                  </h1>
-                  <p className="text-sm md:text-lg text-blue-700 mt-1 md:mt-2">
-                    Manage your affiliate partners and tracking links
-                  </p>
+                  <h1 className="text-2xl md:text-4xl font-extrabold text-blue-900 tracking-tight">{t('autofix.k0fe28e0b')}</h1>
+                  <p className="text-sm md:text-lg text-blue-700 mt-1 md:mt-2">{t('autofix.k49568342')}</p>
                 </div>
                 <button
                   onClick={() => setShowCreateModal(true)}
                   className="w-full md:w-auto inline-flex items-center justify-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-sm font-semibold shadow transition"
                 >
-                  <PlusIcon className="h-5 w-5" />
-                  Add Affiliate
-                </button>
+                  <PlusIcon className="h-5 w-5" />{t('autofix.ke1abc7d9')}</button>
               </div>
 
               {/* Search and Filter */}
@@ -165,7 +161,7 @@ export default function AffiliateManagementPage() {
                   <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                   <input
                     type="text"
-                    placeholder="Search affiliates..."
+                    placeholder={t('autofix.k832a032b')}
                     value={searchQuery}
                     onChange={e => setSearchQuery(e.target.value)}
                     className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
@@ -177,9 +173,7 @@ export default function AffiliateManagementPage() {
                   className="w-full sm:w-auto px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
                 >
                   {categories.map(cat => (
-                    <option key={cat} value={cat}>
-                      {cat === 'all' ? 'All Categories' : cat}
-                    </option>
+                    <option key={cat} value={cat}>{cat === 'all' ? t('autofix.k32a13592') : cat}</option>
                   ))}
                 </select>
               </div>
@@ -193,7 +187,7 @@ export default function AffiliateManagementPage() {
                     <LinkIcon className="h-6 w-6 text-blue-900" />
                   </div>
                   <div>
-                    <p className="text-sm text-gray-600">Total Affiliates</p>
+                    <p className="text-sm text-gray-600">{t('autofix.k410ff9a9')}</p>
                     <p className="text-2xl font-bold text-gray-900">{affiliates.length}</p>
                   </div>
                 </div>
@@ -231,7 +225,7 @@ export default function AffiliateManagementPage() {
               {loading && (
                 <div className="col-span-full text-center py-12">
                   <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
-                  <p className="mt-4 text-sm text-gray-600">Loading affiliates...</p>
+                  <p className="mt-4 text-sm text-gray-600">{t('autofix.ka991f523')}</p>
                 </div>
               )}
 
@@ -276,7 +270,7 @@ export default function AffiliateManagementPage() {
                     
                     {affiliate.commissionRate && (
                       <div className="mb-4 flex items-center gap-2">
-                        <span className="text-xs text-gray-500">Commission:</span>
+                        <span className="text-xs text-gray-500">{t('autofix.k03cd9b72')}</span>
                         <span className="text-sm font-semibold text-blue-900">{affiliate.commissionRate}</span>
                       </div>
                     )}
@@ -350,12 +344,10 @@ export default function AffiliateManagementPage() {
               {!loading && filteredAffiliates.length === 0 && (
                 <div className="col-span-full text-center py-12">
                   <PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 className="mt-2 text-sm font-medium text-gray-900">No affiliates found</h3>
-                  <p className="mt-1 text-sm text-gray-500">
-                    {searchQuery || categoryFilter !== 'all' 
-                      ? 'Try adjusting your search or filter' 
-                      : 'Get started by adding a new affiliate partner'}
-                  </p>
+                  <h3 className="mt-2 text-sm font-medium text-gray-900">{t('autofix.k19f2c5dc')}</h3>
+                  <p className="mt-1 text-sm text-gray-500">{searchQuery || categoryFilter !== 'all' 
+                      ? t('autofix.k6c341c65') 
+                      : t('autofix.kfd0ee006')}</p>
                 </div>
               )}
             </div>
@@ -453,6 +445,7 @@ export default function AffiliateManagementPage() {
 
 // Create Modal Component
 function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCreate: (affiliate: Omit<Affiliate, 'id' | 'createdAt'> & { logoFile?: File }) => void }) {
+  const { t } = useTranslation();
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [url, setUrl] = useState('')
@@ -551,7 +544,7 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
         <div className="relative w-full max-w-2xl mx-0 sm:mx-4 bg-white rounded-none sm:rounded-2xl shadow-2xl max-h-[100vh] sm:max-h-[90vh] overflow-y-auto">
           <div className="sticky top-0 bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between rounded-none sm:rounded-t-2xl">
-            <h2 className="text-xl sm:text-2xl font-bold text-blue-900">Add New Affiliate</h2>
+            <h2 className="text-xl sm:text-2xl font-bold text-blue-900">{t('autofix.k8d84b4c5')}</h2>
             <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition">
               <XMarkIcon className="h-6 w-6" />
             </button>
@@ -559,30 +552,30 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
 
           <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-5 sm:space-y-6">
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Partner Name *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k31cadca6')}</label>
               <input
                 required
                 value={name}
                 onChange={e => setName(e.target.value)}
                 className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-                placeholder="e.g., Coffee Equipment Co."
+                placeholder={t('autofix.k890ff52f')}
               />
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Description *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.kfb92efe9')}</label>
               <textarea
                 required
                 value={description}
                 onChange={e => setDescription(e.target.value)}
                 rows={3}
                 className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-                placeholder="Brief description of the affiliate partner..."
+                placeholder={t('autofix.k2a37c394')}
               />
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Affiliate URL *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k6828cdd9')}</label>
               <input
                 required
                 type="url"
@@ -594,7 +587,7 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Logo Image</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.kde1c3c69')}</label>
               <div
                 className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
                 style={{ minHeight: '200px' }}
@@ -608,16 +601,16 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
                   <div className="text-center w-full px-6 py-10">
                     <PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-gray-400" />
                     <div className="mt-4 text-sm font-medium text-gray-700">
-                      <span>Click to upload logo</span>
+                      <span>{t('autofix.k05626798')}</span>
                     </div>
-                    <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP, SVG up to 5MB</p>
+                    <p className="text-xs text-gray-500 mt-2">{t('autofix.k578dcc0b')}</p>
                   </div>
                 )}
                 {previewUrl && (
                   <div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
                     <img 
                       src={previewUrl} 
-                      alt="Logo preview" 
+                      alt={t('autofix.k1af107a4')} 
                       className="max-h-[180px] max-w-full object-contain" 
                     />
                     <button
@@ -644,7 +637,7 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-blue-900 mb-2">Category *</label>
+                <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k3def5ebf')}</label>
                 <select
                   value={category}
                   onChange={e => setCategory(e.target.value)}
@@ -657,12 +650,12 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-blue-900 mb-2">Commission Rate</label>
+                <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k1e62338a')}</label>
                 <input
                   value={commissionRate}
                   onChange={e => setCommissionRate(e.target.value)}
                   className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-                  placeholder="e.g., 10%"
+                  placeholder={t('autofix.k7c19388f')}
                 />
               </div>
             </div>
@@ -691,9 +684,7 @@ function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCr
               <button
                 type="submit"
                 className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
-              >
-                Add Affiliate
-              </button>
+              >{t('autofix.ke1abc7d9')}</button>
             </div>
           </form>
         </div>
@@ -708,6 +699,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
   onClose: () => void; 
   onUpdate: (affiliate: Affiliate & { logoFile?: File; removeLogo?: boolean }) => void 
 }) {
+  const { t } = useTranslation();
   const [name, setName] = useState(affiliate.name)
   const [description, setDescription] = useState(affiliate.description)
   const [url, setUrl] = useState(affiliate.url)
@@ -815,7 +807,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
         <div className="relative w-full max-w-2xl mx-0 sm:mx-4 bg-white rounded-none sm:rounded-2xl shadow-2xl max-h-[100vh] sm:max-h-[90vh] overflow-y-auto">
           <div className="sticky top-0 bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between rounded-none sm:rounded-t-2xl">
-            <h2 className="text-xl sm:text-2xl font-bold text-blue-900">Edit Affiliate</h2>
+            <h2 className="text-xl sm:text-2xl font-bold text-blue-900">{t('autofix.k09def344')}</h2>
             <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition">
               <XMarkIcon className="h-6 w-6" />
             </button>
@@ -823,7 +815,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
 
           <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-5 sm:space-y-6">
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Partner Name *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k31cadca6')}</label>
               <input
                 required
                 value={name}
@@ -833,7 +825,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Description *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.kfb92efe9')}</label>
               <textarea
                 required
                 value={description}
@@ -844,7 +836,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Affiliate URL *</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k6828cdd9')}</label>
               <input
                 required
                 type="url"
@@ -855,7 +847,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-blue-900 mb-2">Logo Image</label>
+              <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.kde1c3c69')}</label>
               <div
                 className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
                 style={{ minHeight: '200px' }}
@@ -869,9 +861,9 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
                   <div className="text-center w-full px-6 py-10">
                     <PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-gray-400" />
                     <div className="mt-4 text-sm font-medium text-gray-700">
-                      <span>Click to upload logo</span>
+                      <span>{t('autofix.k05626798')}</span>
                     </div>
-                    <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP, SVG up to 5MB</p>
+                    <p className="text-xs text-gray-500 mt-2">{t('autofix.k578dcc0b')}</p>
                   </div>
                 )}
                 {displayLogoUrl && (
@@ -881,9 +873,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
                       alt="Logo" 
                       className="max-h-[180px] max-w-full object-contain" 
                     />
-                    <p className="mt-2 text-xs text-gray-600">
-                      {logoFile ? '🆕 New logo selected' : '📷 Current logo'}
-                    </p>
+                    <p className="mt-2 text-xs text-gray-600">{logoFile ? t('autofix.k55d88592') : t('autofix.k86d84b6d')}</p>
                     <button
                       type="button"
                       onClick={(e) => {
@@ -908,7 +898,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="block text-sm font-medium text-blue-900 mb-2">Category *</label>
+                <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k3def5ebf')}</label>
                 <select
                   value={category}
                   onChange={e => setCategory(e.target.value)}
@@ -921,7 +911,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-blue-900 mb-2">Commission Rate</label>
+                <label className="block text-sm font-medium text-blue-900 mb-2">{t('autofix.k1e62338a')}</label>
                 <input
                   value={commissionRate}
                   onChange={e => setCommissionRate(e.target.value)}
@@ -954,9 +944,7 @@ function EditAffiliateModal({ affiliate, onClose, onUpdate }: {
               <button
                 type="submit"
                 className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
-              >
-                Save Changes
-              </button>
+              >{t('autofix.k5a489751')}</button>
             </div>
           </form>
         </div>
@@ -972,6 +960,7 @@ function DeleteConfirmModal({ affiliateName, onClose, onConfirm, isDeleting }: {
   onConfirm: () => void;
   isDeleting: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
       <div className="relative w-full max-w-md mx-0 sm:mx-4 bg-white rounded-none sm:rounded-2xl shadow-2xl p-4 sm:p-6">
@@ -979,10 +968,8 @@ function DeleteConfirmModal({ affiliateName, onClose, onConfirm, isDeleting }: {
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
             <TrashIcon className="h-6 w-6 text-red-600" />
           </div>
-          <h3 className="mt-4 text-lg font-semibold text-center text-gray-900">Delete Affiliate</h3>
-          <p className="mt-2 text-sm text-center text-gray-600">
-            Are you sure you want to delete <span className="font-semibold">{affiliateName}</span>? This action cannot be undone.
-          </p>
+          <h3 className="mt-4 text-lg font-semibold text-center text-gray-900">{t('autofix.kccbc54c1')}</h3>
+          <p className="mt-2 text-sm text-center text-gray-600">{t('autofix.k055bba0c')}<span className="font-semibold">{affiliateName}</span>{t('autofix.kd5cca6e9')}</p>
         </div>
 
         <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">

src/app/admin/contract-management/components/companySettingsPanel.tsx

@@ -1,67 +1,68 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useTranslation } from '../../../i18n/useTranslation'
+import { useEffect, useRef, useState } from 'react'
 import useContractManagement from '../hooks/useContractManagement'
 
-function fileToDataUrl(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
+const LOGO_ACCEPTED_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml']
+const MAX_LOGO_BYTES = 1024 * 1024
+
+type CompanySettingsForm = {
+  company_name: string
+  company_street: string
+  company_postal_city: string
+  company_country: string
+  company_logo_base64: string | null
+  company_logo_mime_type: string | null
+}
+
+function fileToBase64Payload(file: File) {
+  return new Promise<{ base64: string; mimeType: string }>((resolve, reject) => {
     const reader = new FileReader()
-    reader.onerror = () => reject(new Error('Failed to read file'))
     reader.onload = () => {
-      const result = reader.result
-      if (typeof result === 'string') resolve(result)
-      else reject(new Error('Invalid file result'))
+      const result = typeof reader.result === 'string' ? reader.result : ''
+      const match = result.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/)
+      if (!match) {
+        reject(new Error('invalid_data_url'))
+        return
+      }
+      resolve({ mimeType: match[1], base64: match[2] })
     }
+    reader.onerror = () => reject(new Error('read_failed'))
     reader.readAsDataURL(file)
   })
 }
 
-function summarizeForLog(payload: Record<string, any>) {
-  const out: Record<string, any> = {}
-  for (const [k, v] of Object.entries(payload)) {
-    if (typeof v === 'string' && (k.toLowerCase().includes('base64') || k.toLowerCase().includes('qr_code'))) {
-      out[k] = { kind: 'base64', len: v.length, head: v.slice(0, 32) }
-    } else if (typeof v === 'string' && v.length > 200) {
-      out[k] = { kind: 'string', len: v.length, head: v.slice(0, 32) }
-    } else {
-      out[k] = v
-    }
-  }
-  return out
-}
-
 export default function CompanySettingsPanel() {
+  const { t } = useTranslation()
   const { getCompanySettings, updateCompanySettings } = useContractManagement()
+  const logoInputRef = useRef<HTMLInputElement | null>(null)
 
-  const [form, setForm] = useState({
+  const [form, setForm] = useState<CompanySettingsForm>({
     company_name: '',
     company_street: '',
     company_postal_city: '',
     company_country: '',
+    company_logo_base64: null,
+    company_logo_mime_type: null,
   })
-  const [hasQr60, setHasQr60] = useState(false)
-  const [hasQr120, setHasQr120] = useState(false)
-  const [qr60DataUrl, setQr60DataUrl] = useState<string>('')
-  const [qr120DataUrl, setQr120DataUrl] = useState<string>('')
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
   const [saveError, setSaveError] = useState<string>('')
+  const [logoError, setLogoError] = useState<string>('')
 
   useEffect(() => {
     getCompanySettings()
-      .then(data => {
+      .then((data) => {
         setForm({
           company_name: data.company_name || '',
           company_street: data.company_street || '',
           company_postal_city: data.company_postal_city || '',
           company_country: data.company_country || '',
+          company_logo_base64: data.company_logo_base64 || null,
+          company_logo_mime_type: data.company_logo_mime_type || null,
         })
-
-        const qr60 = (data as any)?.qr_code_60_base64 ?? (data as any)?.qrCode60Base64
-        const qr120 = (data as any)?.qr_code_120_base64 ?? (data as any)?.qrCode120Base64
-        setHasQr60(!!qr60)
-        setHasQr120(!!qr120)
       })
       .catch(() => {})
       .finally(() => setLoading(false))
@@ -69,204 +70,203 @@ export default function CompanySettingsPanel() {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target
-    setForm(prev => ({ ...prev, [name]: value }))
+    setForm((prev) => ({ ...prev, [name]: value }))
     setSaved(false)
   }
 
+  const handleLogoChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    setLogoError('')
+    if (!file) return
+
+    if (!LOGO_ACCEPTED_TYPES.includes(file.type)) {
+      setLogoError(t('autofix.k2bd38d5e'))
+      if (logoInputRef.current) logoInputRef.current.value = ''
+      return
+    }
+
+    if (file.size > MAX_LOGO_BYTES) {
+      setLogoError(t('autofix.k394b7f42'))
+      if (logoInputRef.current) logoInputRef.current.value = ''
+      return
+    }
+
+    try {
+      const { base64, mimeType } = await fileToBase64Payload(file)
+      setForm((prev) => ({
+        ...prev,
+        company_logo_base64: base64,
+        company_logo_mime_type: mimeType,
+      }))
+      setSaved(false)
+    } catch {
+      setLogoError(t('autofix.k8a1d4c20'))
+    } finally {
+      if (logoInputRef.current) logoInputRef.current.value = ''
+    }
+  }
+
+  const handleRemoveLogo = () => {
+    setForm((prev) => ({
+      ...prev,
+      company_logo_base64: null,
+      company_logo_mime_type: null,
+    }))
+    setLogoError('')
+    setSaved(false)
+    if (logoInputRef.current) logoInputRef.current.value = ''
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setSaving(true)
     setSaved(false)
     setSaveError('')
     try {
-      // IMPORTANT: send `payload` (full strings), not the redacted log view.
-      const payload: any = { ...form }
-      if (qr60DataUrl) payload.qr_code_60_base64 = qr60DataUrl
-      if (qr120DataUrl) payload.qr_code_120_base64 = qr120DataUrl
-
-      // For logging only (redacted); never send this object.
-      const logPayload: any = summarizeForLog(payload)
-
-      try {
-        const qr60 = payload.qr_code_60_base64
-        const qr120 = payload.qr_code_120_base64
-        console.info('[CompanySettingsPanel] updateCompanySettings payload', {
-          logPayload,
-          keys: Object.keys(payload),
-          jsonLength: JSON.stringify(payload).length,
-          qrFieldTypes: {
-            qr_code_60_base64: qr60 ? typeof qr60 : null,
-            qr_code_120_base64: qr120 ? typeof qr120 : null,
-          },
-          qrFieldLengths: {
-            qr_code_60_base64: typeof qr60 === 'string' ? qr60.length : null,
-            qr_code_120_base64: typeof qr120 === 'string' ? qr120.length : null,
-          },
-        })
-
-        if (qr60 && typeof qr60 !== 'string') console.warn('[CompanySettingsPanel] qr_code_60_base64 is not a string!', qr60)
-        if (qr120 && typeof qr120 !== 'string') console.warn('[CompanySettingsPanel] qr_code_120_base64 is not a string!', qr120)
-      } catch {}
-
-      await updateCompanySettings(payload)
+      await updateCompanySettings(form)
       setSaved(true)
       setTimeout(() => setSaved(false), 3000)
     } catch {
-      setSaveError('Could not save settings.')
+      setSaveError(t('autofix.k95a16b2b'))
     } finally {
       setSaving(false)
     }
   }
 
-  const handleQrUpload = async (which: '60' | '120', file: File | null) => {
-    setSaved(false)
-    setSaveError('')
-    if (!file) return
-
-    // Backend accepts 10MB JSON, but base64 expands the payload.
-    // Keep a conservative limit to avoid 413 Payload Too Large.
-    const MAX_FILE_BYTES = 7_000_000
-    if (file.size > MAX_FILE_BYTES) {
-      setSaveError('QR image is too large. Please upload a smaller PNG.')
-      return
-    }
-    if (file.type && file.type !== 'image/png') {
-      setSaveError('Please upload a PNG file for the QR code.')
-      return
-    }
-
-    try {
-      const dataUrl = await fileToDataUrl(file)
-      // Normalize to raw base64, to match other endpoints (e.g. company stamp upload)
-      const m = dataUrl.match(/^data:(.+?);base64,(.*)$/)
-      const base64 = m ? m[2] : dataUrl
-      if (which === '60') {
-        setQr60DataUrl(base64)
-        setHasQr60(true)
-      } else {
-        setQr120DataUrl(base64)
-        setHasQr120(true)
-      }
-    } catch {
-      setSaveError('Could not read QR image file.')
-    }
-  }
+  const logoPreviewSrc = form.company_logo_base64
+    ? `data:${form.company_logo_mime_type || 'image/png'};base64,${form.company_logo_base64}`
+    : null
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 text-sm text-gray-500 py-4">
-        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-900" />
-        Loading settings…
+      <div className="flex items-center gap-2 py-4 text-sm text-gray-500">
+        <div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-900" />
+        {t('autofix.k81a1b900')}
       </div>
     )
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label htmlFor="company_name" className="block text-sm font-medium text-gray-700 mb-1">
-            Company Name
-          </label>
-          <input
-            type="text"
-            id="company_name"
-            name="company_name"
-            value={form.company_name}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="ProfitPlanet GmbH"
-          />
-        </div>
-        <div>
-          <label htmlFor="company_street" className="block text-sm font-medium text-gray-700 mb-1">
-            Street
-          </label>
-          <input
-            type="text"
-            id="company_street"
-            name="company_street"
-            value={form.company_street}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="Musterstraße 1"
-          />
-        </div>
-        <div>
-          <label htmlFor="company_postal_city" className="block text-sm font-medium text-gray-700 mb-1">
-            Postal Code &amp; City
-          </label>
-          <input
-            type="text"
-            id="company_postal_city"
-            name="company_postal_city"
-            value={form.company_postal_city}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="12345 Berlin"
-          />
-        </div>
-        <div>
-          <label htmlFor="company_country" className="block text-sm font-medium text-gray-700 mb-1">
-            Country
-          </label>
-          <input
-            type="text"
-            id="company_country"
-            name="company_country"
-            value={form.company_country}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            placeholder="Germany"
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Invoice QR Code (60 pcs)</label>
-          <input
-            type="file"
-            accept="image/png"
-            onChange={e => handleQrUpload('60', e.target.files?.[0] || null)}
-            className="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-900 hover:file:bg-blue-100"
-          />
-          <div className="mt-1 text-xs text-gray-500">
-            {qr60DataUrl ? 'Selected (will be saved on Save)' : hasQr60 ? 'Already uploaded' : 'Not uploaded'}
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="rounded-2xl border border-slate-200 bg-slate-50/80 p-4 shadow-sm">
+        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+          <div className="space-y-1">
+            <h3 className="text-lg font-semibold text-slate-900">{t('autofix.k0198ce13')}</h3>
+            <p className="text-sm text-slate-500">{t('autofix.k03d7361d')}</p>
+            <p className="text-xs text-slate-400">{t('autofix.k1c2b0975')}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <input
+              ref={logoInputRef}
+              type="file"
+              accept={LOGO_ACCEPTED_TYPES.join(',')}
+              onChange={handleLogoChange}
+              className="hidden"
+            />
+            <button
+              type="button"
+              onClick={() => logoInputRef.current?.click()}
+              className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-100"
+            >
+              {logoPreviewSrc ? t('autofix.k7d3f0e11') : t('autofix.k089f42a1')}
+            </button>
+            {logoPreviewSrc && (
+              <button
+                type="button"
+                onClick={handleRemoveLogo}
+                className="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-semibold text-red-700 transition hover:bg-red-100"
+              >
+                {t('autofix.k0d8e2d01')}
+              </button>
+            )}
           </div>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Invoice QR Code (120 pcs)</label>
-          <input
-            type="file"
-            accept="image/png"
-            onChange={e => handleQrUpload('120', e.target.files?.[0] || null)}
-            className="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-900 hover:file:bg-blue-100"
-          />
-          <div className="mt-1 text-xs text-gray-500">
-            {qr120DataUrl ? 'Selected (will be saved on Save)' : hasQr120 ? 'Already uploaded' : 'Not uploaded'}
+        <div className="mt-4 rounded-2xl border border-dashed border-slate-300 bg-white p-4">
+          {logoPreviewSrc ? (
+            <img
+              src={logoPreviewSrc}
+              alt={t('autofix.k0198ce13')}
+              className="max-h-24 max-w-full object-contain"
+            />
+          ) : (
+            <div className="text-sm text-slate-500">{t('autofix.k432b8a12')}</div>
+          )}
+        </div>
+
+        {logoError && <div className="mt-3 text-sm font-medium text-red-600">{logoError}</div>}
+      </div>
+
+      <div>
+        <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
+          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
+          {t('autofix.kaa8bbc8e')}
+        </h3>
+        <p className="mb-4 text-sm text-slate-500">{t('autofix.k15bea9bb')}</p>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div>
+            <label htmlFor="company_name" className="mb-1 block text-sm font-medium text-gray-700">{t('autofix.k33918465')}</label>
+            <input
+              type="text"
+              id="company_name"
+              name="company_name"
+              value={form.company_name}
+              onChange={handleChange}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+              placeholder={t('autofix.k91e69df1')}
+            />
+          </div>
+          <div>
+            <label htmlFor="company_street" className="mb-1 block text-sm font-medium text-gray-700">Street</label>
+            <input
+              type="text"
+              id="company_street"
+              name="company_street"
+              value={form.company_street}
+              onChange={handleChange}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+              placeholder={t('autofix.k81c7c2f2')}
+            />
+          </div>
+          <div>
+            <label htmlFor="company_postal_city" className="mb-1 block text-sm font-medium text-gray-700">Postal Code &amp; City</label>
+            <input
+              type="text"
+              id="company_postal_city"
+              name="company_postal_city"
+              value={form.company_postal_city}
+              onChange={handleChange}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+              placeholder={t('autofix.k93165aea')}
+            />
+          </div>
+          <div>
+            <label htmlFor="company_country" className="mb-1 block text-sm font-medium text-gray-700">Country</label>
+            <input
+              type="text"
+              id="company_country"
+              name="company_country"
+              value={form.company_country}
+              onChange={handleChange}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+              placeholder="Germany"
+            />
           </div>
         </div>
       </div>
 
-      {saveError && (
-        <div className="text-sm text-red-600 font-medium">{saveError}</div>
-      )}
+      {saveError && <div className="text-sm font-medium text-red-600">{saveError}</div>}
 
       <div className="flex items-center gap-3">
         <button
           type="submit"
           disabled={saving}
-          className={`px-5 py-2 rounded-lg text-sm font-semibold text-white transition-colors ${
-            saving ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-900 hover:bg-blue-800'
-          }`}
+          className={`rounded-lg px-5 py-2 text-sm font-semibold text-white transition-colors ${saving ? 'cursor-not-allowed bg-gray-400' : 'bg-blue-900 hover:bg-blue-800'}`}
         >
-          {saving ? 'Saving…' : 'Save'}
+          {saving ? t('autofix.kac6cedc7') : 'Save'}
         </button>
-        {saved && (
-          <span className="text-sm text-green-600 font-medium">Saved successfully</span>
-        )}
+        {saved && <span className="text-sm font-medium text-green-600">{t('autofix.ka29ac729')}</span>}
       </div>
     </form>
   )

src/app/admin/contract-management/components/contractEditor.tsx

@@ -4,6 +4,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import useContractManagement from '../hooks/useContractManagement';
 import ConfirmActionModal from '../../../components/modals/ConfirmActionModal';
 
+import { useTranslation } from '../../../i18n/useTranslation';
+
 type Props = {
   editingTemplateId?: string | null;
   onCancelEdit?: () => void;
@@ -11,6 +13,7 @@ type Props = {
 };
 
 export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdit }: Props) {
+  const { t } = useTranslation();
   const [name, setName] = useState('');
   const [htmlCode, setHtmlCode] = useState('');
   const [isPreview, setIsPreview] = useState(false);
@@ -251,7 +254,7 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
       {editingMeta && (
         <div className="rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3 flex items-center justify-between gap-3">
           <div className="text-sm text-indigo-900">
-            <span className="font-semibold">Editing:</span> {name || 'Untitled'} (v{editingMeta.version}) • state: {editingMeta.state}
+            <span className="font-semibold">{t('autofix.k41afd863')}</span> {name || 'Untitled'} (v{editingMeta.version}) • state: {editingMeta.state}
           </div>
           {onCancelEdit && (
             <button
@@ -261,9 +264,7 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
                 onCancelEdit();
               }}
               className="inline-flex items-center rounded-lg bg-white hover:bg-gray-50 text-gray-900 px-3 py-1.5 text-sm font-medium shadow border border-gray-200 transition"
-            >
-              Cancel editing
-            </button>
+            >{t('autofix.k06d4487f')}</button>
           )}
         </div>
       )}
@@ -271,7 +272,7 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
         <div className="flex flex-col sm:flex-row gap-4">
           <input
             type="text"
-            placeholder="Template name"
+            placeholder={t('autofix.k2fac9ff2')}
             value={name}
             onChange={(e) => setName(e.target.value)}
             required
@@ -282,9 +283,7 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
               type="button"
               onClick={() => setIsPreview((v) => !v)}
               className="inline-flex items-center rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-900 px-4 py-2 text-sm font-medium shadow transition"
-            >
-              {isPreview ? 'Switch to Code' : 'Preview HTML'}
-            </button>
+            >{isPreview ? t('autofix.k49165061') : t('autofix.k95d19932')}</button>
             {isPreview && (
               <button
                 type="button"
@@ -360,9 +359,9 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
         <div className="space-y-3">
           {type === 'invoice' && (
             <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-900">
-              <p className="font-semibold">Invoice template variables</p>
-              <p className="mt-1">Use these placeholders in your HTML: invoiceNumber, customerName, issuedAt, totalNet, totalTax, totalGross, itemsHtml.</p>
-              <p className="mt-1">Important: include <span className="font-semibold">itemsHtml</span> to render invoice line items.</p>
+              <p className="font-semibold">{t('autofix.k221fa311')}</p>
+              <p className="mt-1">{t('autofix.kb791958e')}</p>
+              <p className="mt-1">Important: include <span className="font-semibold">itemsHtml</span>{t('autofix.k7a3a6ea3')}</p>
             </div>
           )}
           <textarea
@@ -379,7 +378,7 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
         <div className="rounded-lg border border-gray-300 bg-white shadow">
           <iframe
             ref={iframeRef}
-            title="Contract Preview"
+            title={t('autofix.kd9e4bcbd')}
             className="w-full rounded-lg"
             style={{ height: 1200, background: 'transparent' }}
           />
@@ -398,19 +397,17 @@ export default function ContractEditor({ onSaved, editingTemplateId, onCancelEdi
           onClick={() => save(true)}
           disabled={saving || !canSave}
           className="inline-flex items-center rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 text-sm font-medium shadow disabled:opacity-60 transition"
-        >
-          Create & Activate
-        </button>
+        >{t('autofix.k0af6c6be')}</button>
         {/* NEW: helper text */}
-        {!canSave && <span className="text-xs text-red-600">Fill all fields to proceed.</span>}
-        {saving && <span className="text-xs text-gray-500">Saving…</span>}
+        {!canSave && <span className="text-xs text-red-600">{t('autofix.k99bffb65')}</span>}
+        {saving && <span className="text-xs text-gray-500">{t('autofix.kac6cedc7')}</span>}
         {statusMsg && <span className="text-xs text-gray-600">{statusMsg}</span>}
       </div>
 
       <ConfirmActionModal
         open={publishConfirmOpen}
         pending={saving}
-        title="Activate template now?"
+        title={t('autofix.k0c51fa85')}
         description={publishConfirmMessage || 'This will activate this template.'}
         confirmText="Activate"
         onClose={() => !saving && setPublishConfirmOpen(false)}

src/app/admin/contract-management/components/contractUploadCompanyStamp.tsx

@@ -4,11 +4,14 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import useContractManagement, { CompanyStamp } from '../hooks/useContractManagement';
 import DeleteConfirmationModal from '../../../components/delete/deleteConfirmationModal';
 
+import { useTranslation } from '../../../i18n/useTranslation';
+
 type Props = {
   onUploaded?: () => void;
 };
 
 export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
+  const { t } = useTranslation();
   const [file, setFile] = useState<File | null>(null);
   const [label, setLabel] = useState<string>('');
   const [uploading, setUploading] = useState(false);
@@ -215,15 +218,13 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
     <div className="space-y-6">
       {/* Header with Add New Stamp modal trigger */}
       <div className="flex items-center justify-between">
-        <p className="text-sm text-gray-700">Manage your company stamps. One active at a time.</p>
+        <p className="text-sm text-gray-700">{t('autofix.k096f4013')}</p>
         <button
           type="button"
           onClick={openModal}
           className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 text-sm font-semibold shadow transition"
         >
-          <svg width="18" height="18" fill="currentColor" className="opacity-90"><path d="M7 1a1 1 0 0 1 2 0v5h5a1 1 0 1 1 0 2H9v5a1 1 0 1 1-2 0V8H2a1 1 0 1 1 0-2h5V1z"/></svg>
-          Add New Stamp
-        </button>
+          <svg width="18" height="18" fill="currentColor" className="opacity-90"><path d="M7 1a1 1 0 0 1 2 0v5h5a1 1 0 1 1 0 2H9v5a1 1 0 1 1-2 0V8H2a1 1 0 1 1 0-2h5V1z"/></svg>{t('autofix.k6070f6e3')}</button>
       </div>
 
       {/* Emphasized Active stamp */}
@@ -234,13 +235,11 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
               {activeStamp.base64 ? (
                 <img
                   src={toImgSrc(activeStamp)}
-                  alt="Active stamp"
+                  alt={t('autofix.k134e3932')}
                   className="h-24 w-24 object-contain rounded-xl ring-2 ring-indigo-200 shadow"
                 />
               ) : (
-                <div className="h-24 w-24 flex items-center justify-center rounded-xl ring-2 ring-gray-200 bg-gray-50 text-xs text-gray-500">
-                  no image
-                </div>
+                <div className="h-24 w-24 flex items-center justify-center rounded-xl ring-2 ring-gray-200 bg-gray-50 text-xs text-gray-500">{t('autofix.k56717603')}</div>
               )}
               <span className="absolute -top-2 -right-2 rounded-full bg-green-600 text-white text-xs px-3 py-1 shadow font-bold">
                 Active
@@ -248,7 +247,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
             </div>
             <div className="min-w-0">
               <p className="text-base font-semibold text-gray-900 truncate">{activeStamp.label || activeStamp.id}</p>
-              <p className="text-xs text-gray-500">Auto-applied to documents where applicable.</p>
+              <p className="text-xs text-gray-500">{t('autofix.kf1a9384b')}</p>
             </div>
             <div className="ml-auto flex items-center gap-2">
               <button
@@ -265,7 +264,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
       {/* Stamps list */}
       {!!stamps.length && (
         <div className="mt-2">
-          <p className="text-sm font-medium text-gray-900 mb-2">Your Company Stamps</p>
+          <p className="text-sm font-medium text-gray-900 mb-2">{t('autofix.k7775eddb')}</p>
           <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             {stamps.map((s) => {
               const src = toImgSrc(s);
@@ -285,9 +284,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
                         className="h-14 w-14 object-contain rounded-lg ring-1 ring-gray-200 bg-white"
                       />
                     ) : (
-                      <div className="h-14 w-14 flex items-center justify-center rounded-lg ring-1 ring-gray-200 bg-white text-xs text-gray-500">
-                        no image
-                      </div>
+                      <div className="h-14 w-14 flex items-center justify-center rounded-lg ring-1 ring-gray-200 bg-white text-xs text-gray-500">{t('autofix.k56717603')}</div>
                     )}
                     <div className="flex flex-col">
                       <span className="text-sm text-gray-900">{s.label || s.id}</span>
@@ -335,10 +332,8 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
           <div className="absolute inset-0 flex items-center justify-center p-4">
             <div className="w-full max-w-lg rounded-2xl bg-white shadow-2xl ring-1 ring-black/5">
               <div className="p-6 border-b border-gray-100">
-                <h3 className="text-lg font-bold text-indigo-700">Add New Stamp</h3>
-                <p className="mt-1 text-xs text-gray-500">
-                  Accepted types: PNG, JPEG, WebP, SVG. Max size: 5MB.
-                </p>
+                <h3 className="text-lg font-bold text-indigo-700">{t('autofix.k6070f6e3')}</h3>
+                <p className="mt-1 text-xs text-gray-500">{t('autofix.k825359ab')}</p>
               </div>
               <div className="p-6 space-y-4">
                 <div>
@@ -347,7 +342,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
                     type="text"
                     value={modalLabel}
                     onChange={(e) => setModalLabel(e.target.value)}
-                    placeholder="e.g., Company Seal 2025"
+                    placeholder={t('autofix.kcb65c692')}
                     className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-indigo-500/50"
                   />
                 </div>
@@ -365,13 +360,11 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
                         className="h-20 w-20 object-contain rounded-lg ring-1 ring-gray-200 bg-white"
                       />
                     ) : (
-                      <div className="h-20 w-20 flex items-center justify-center rounded-lg ring-1 ring-gray-200 bg-white text-xs text-gray-500">
-                        No image
-                      </div>
+                      <div className="h-20 w-20 flex items-center justify-center rounded-lg ring-1 ring-gray-200 bg-white text-xs text-gray-500">{t('autofix.k18872b63')}</div>
                     )}
                     <div className="min-w-0">
-                      <p className="text-sm text-gray-900">Drag and drop your stamp here</p>
-                      <p className="text-xs text-gray-500">or click to browse</p>
+                      <p className="text-sm text-gray-900">{t('autofix.ke58b7627')}</p>
+                      <p className="text-xs text-gray-500">{t('autofix.kba6bd6f3')}</p>
                       <div className="mt-2">
                         <label className="inline-block">
                           <input
@@ -381,9 +374,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
                             className="hidden"
                           />
                           <span className="cursor-pointer text-xs px-3 py-2 rounded-lg bg-white hover:bg-gray-50 text-gray-800 border border-gray-200 inline-flex items-center gap-1">
-                            <svg width="14" height="14" fill="currentColor"><path d="M12 10v2H2v-2H0v4h14v-4h-2zM7 0l4 4H9v5H5V4H3l4-4z"/></svg>
-                            Choose file
-                          </span>
+                            <svg width="14" height="14" fill="currentColor"><path d="M12 10v2H2v-2H0v4h14v-4h-2zM7 0l4 4H9v5H5V4H3l4-4z"/></svg>{t('autofix.kfeac3f7e')}</span>
                         </label>
                       </div>
                     </div>
@@ -406,9 +397,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
                   onClick={confirmUpload}
                   disabled={modalUploading || !modalFile}
                   className="text-sm px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white disabled:opacity-60 transition"
-                >
-                  {modalUploading ? 'Uploading…' : 'Upload'}
-                </button>
+                >{modalUploading ? t('autofix.ka3076020') : 'Upload'}</button>
               </div>
             </div>
           </div>
@@ -418,7 +407,7 @@ export default function ContractUploadCompanyStamp({ onUploaded }: Props) {
       {/* Delete Confirmation Modal */}
       <DeleteConfirmationModal
         open={deleteModal.open}
-        title="Delete Company Stamp"
+        title={t('autofix.ka8f53660')}
         description={
           deleteModal.active
             ? `This stamp (${deleteModal.label || deleteModal.id}) is currently active. Are you sure you want to delete it? This action cannot be undone.`

src/app/admin/contract-management/components/mailTemplatesManager.tsx

@@ -0,0 +1,632 @@
+'use client';
+
+import { useTranslation } from '../../../i18n/useTranslation';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { authFetch } from '../../../utils/authFetch';
+import { useToast } from '../../../components/toast/toastComponent';
+
+const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || '').replace(/\/+$/, '');
+const MAIL_TEMPLATES_BASE = `${API_BASE}/api/admin/mail-templates`;
+
+/** Convert kebab-case to camelCase for use as i18n key segment */
+function toCamelCase(str: string): string {
+  return str.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+}
+
+/** Derive the i18n translation key for a mail template's subject */
+function subjectI18nKey(templateType: string): string {
+  return `mailTemplates.${toCamelCase(templateType)}.subject`;
+}
+
+/** Derive the i18n translation key for a mail template's HTML content */
+function htmlI18nKey(templateType: string): string {
+  return `mailTemplates.${toCamelCase(templateType)}.htmlContent`;
+}
+
+/**
+ * Sync mail template content to the i18n translation files so it appears
+ * in Language Management and can be translated to other languages.
+ */
+async function syncToI18n(templateType: string, subject: string, htmlContent: string): Promise<void> {
+  const res = await fetch('/api/i18n/translations', { cache: 'no-store' });
+  const data = await res.json();
+  if (!res.ok || !data?.ok) throw new Error(data?.message || 'Failed to load translations');
+
+  const translations: Record<string, Record<string, string>> = data.translations ?? {};
+  const sKey = subjectI18nKey(templateType);
+  const hKey = htmlI18nKey(templateType);
+
+  const updated = {
+    ...translations,
+    en: { ...(translations.en ?? {}), [sKey]: subject, [hKey]: htmlContent },
+  };
+
+  const putRes = await fetch('/api/i18n/translations', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ translations: updated }),
+  });
+  const putData = await putRes.json();
+  if (!putRes.ok || !putData?.ok) throw new Error(putData?.message || 'Failed to sync to Language Management');
+}
+
+type MailTemplate = {
+  id: number;
+  template_type: string;
+  name: string;
+  subject: string | null;
+  html_content: string;
+  is_active: boolean;
+  is_archived: boolean;
+  archived_at: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type EditorState = {
+  template_type: string;
+  name: string;
+  subject: string;
+  html_content: string;
+};
+
+function createBlankEditor(t: (key: string) => string): EditorState {
+  return {
+    template_type: '',
+    name: '',
+    subject: '',
+    html_content: `<div style="font-family:Arial,sans-serif;line-height:1.5;"><h2>${t('autofix.k88f0d12a')}</h2><p>${t('autofix.k4f530782')}</p></div>`,
+  };
+}
+
+export default function MailTemplatesManager() {
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const blankEditor = useMemo(() => createBlankEditor(t), [t]);
+
+  const [tab, setTab] = useState<'active' | 'archived'>('active');
+  const [templates, setTemplates] = useState<MailTemplate[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [i18nSyncStatus, setI18nSyncStatus] = useState<'idle' | 'syncing' | 'synced' | 'error'>('idle');
+  const [editor, setEditor] = useState<EditorState>(blankEditor);
+  const [isSaving, setIsSaving] = useState(false);
+  const [actionLoadingId, setActionLoadingId] = useState<number | null>(null);
+
+  const fetchTemplates = useCallback(async (includeArchived: boolean) => {
+    setIsLoading(true);
+    setFetchError(null);
+    try {
+      const url = `${MAIL_TEMPLATES_BASE}${includeArchived ? '?includeArchived=true' : ''}`;
+      const res = await authFetch(url);
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error((err as any)?.message || `Error ${res.status}`);
+      }
+      const raw = await res.json();
+      // API may return a bare array or a wrapper object { data: [...] } / { templates: [...] }
+      const data: MailTemplate[] = Array.isArray(raw)
+        ? raw
+        : Array.isArray(raw?.data)
+          ? raw.data
+          : Array.isArray(raw?.templates)
+            ? raw.templates
+            : [];
+      setTemplates(data);
+    } catch (e: any) {
+      setFetchError(e?.message || 'Failed to load templates');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTemplates(tab === 'archived');
+    setSelectedId(null);
+    setIsCreating(false);
+    setEditor(blankEditor);
+  }, [tab, fetchTemplates, blankEditor]);
+
+  const visibleTemplates = tab === 'archived'
+    ? templates.filter((tmpl) => tmpl.is_archived)
+    : templates.filter((tmpl) => !tmpl.is_archived);
+
+  const selectedTemplate = templates.find((tmpl) => tmpl.id === selectedId) ?? null;
+
+  const openEditor = (template: MailTemplate) => {
+    setIsCreating(false);
+    setSelectedId(template.id);
+    setI18nSyncStatus('idle');
+    setEditor({
+      template_type: template.template_type,
+      name: template.name,
+      subject: template.subject ?? '',
+      html_content: template.html_content,
+    });
+  };
+
+  const startCreate = () => {
+    setIsCreating(true);
+    setSelectedId(null);
+    setI18nSyncStatus('idle');
+    setEditor(blankEditor);
+  };
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    setI18nSyncStatus('idle');
+    let savedTemplateType = editor.template_type;
+    let savedSubject = editor.subject;
+    let savedHtmlContent = editor.html_content;
+    try {
+      if (isCreating) {
+        const res = await authFetch(MAIL_TEMPLATES_BASE, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            template_type: editor.template_type,
+            name: editor.name,
+            subject: editor.subject || undefined,
+            html_content: editor.html_content,
+          }),
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error((err as any)?.message || `Error ${res.status}`);
+        }
+        const created: MailTemplate = await res.json();
+        savedTemplateType = created.template_type;
+        savedSubject = created.subject ?? editor.subject;
+        savedHtmlContent = created.html_content;
+        showToast({ variant: 'success', message: t('autofix.ke8a3bd92') });
+        await fetchTemplates(false);
+        setTab('active');
+        setIsCreating(false);
+        setSelectedId(created.id);
+        setEditor({
+          template_type: created.template_type,
+          name: created.name,
+          subject: created.subject ?? '',
+          html_content: created.html_content,
+        });
+      } else if (selectedId !== null) {
+        const res = await authFetch(`${MAIL_TEMPLATES_BASE}/${selectedId}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            template_type: editor.template_type,
+            name: editor.name,
+            subject: editor.subject || undefined,
+            html_content: editor.html_content,
+          }),
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error((err as any)?.message || `Error ${res.status}`);
+        }
+        showToast({ variant: 'success', message: t('autofix.k9535ed27') });
+        await fetchTemplates(tab === 'archived');
+      }
+
+      // Sync content to i18n system so it's translatable in Language Management
+      if (savedTemplateType?.trim()) {
+        setI18nSyncStatus('syncing');
+        syncToI18n(savedTemplateType, savedSubject, savedHtmlContent)
+          .then(() => setI18nSyncStatus('synced'))
+          .catch(() => setI18nSyncStatus('error'));
+      }
+    } catch (e: any) {
+      showToast({ variant: 'error', message: e?.message || t('autofix.kb743b7c2') });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleActivate = async (id: number) => {
+    setActionLoadingId(id);
+    try {
+      const res = await authFetch(`${MAIL_TEMPLATES_BASE}/${id}/activate`, { method: 'PATCH' });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error((err as any)?.message || `Error ${res.status}`);
+      }
+      showToast({ variant: 'success', message: t('autofix.ke1a18ce6') });
+      await fetchTemplates(tab === 'archived');
+    } catch (e: any) {
+      showToast({ variant: 'error', message: e?.message || t('autofix.k1c5f641a') });
+    } finally {
+      setActionLoadingId(null);
+    }
+  };
+
+  const handleArchive = async (id: number) => {
+    setActionLoadingId(id);
+    try {
+      const res = await authFetch(`${MAIL_TEMPLATES_BASE}/${id}/archive`, { method: 'PATCH' });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error((err as any)?.message || `Error ${res.status}`);
+      }
+      showToast({ variant: 'success', message: t('autofix.k2f162f5d') });
+      if (selectedId === id) {
+        setSelectedId(null);
+        setEditor(blankEditor);
+      }
+      await fetchTemplates(tab === 'archived');
+    } catch (e: any) {
+      showToast({ variant: 'error', message: e?.message || t('autofix.kff7b3b21') });
+    } finally {
+      setActionLoadingId(null);
+    }
+  };
+
+  const handleUnarchive = async (id: number) => {
+    setActionLoadingId(id);
+    try {
+      const res = await authFetch(`${MAIL_TEMPLATES_BASE}/${id}/unarchive`, { method: 'PATCH' });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error((err as any)?.message || (err as any)?.error || `Error ${res.status}`);
+      }
+      showToast({ variant: 'success', message: t('autofix.kc3a71e92') });
+      setSelectedId(null);
+      setEditor(blankEditor);
+      setTab('active');
+      await fetchTemplates(false);
+    } catch (e: any) {
+      showToast({ variant: 'error', message: e?.message || t('autofix.ka91f3c05') });
+    } finally {
+      setActionLoadingId(null);
+    }
+  };
+
+  const removeI18nKeys = async (templateType: string) => {
+    try {
+      const res = await fetch('/api/i18n/translations', { cache: 'no-store' });
+      const data = await res.json();
+      if (!res.ok || !data?.ok) return;
+      const translations: Record<string, Record<string, string>> = data.translations ?? {};
+      const sKey = subjectI18nKey(templateType);
+      const hKey = htmlI18nKey(templateType);
+      const updated: Record<string, Record<string, string>> = {};
+      for (const lang of Object.keys(translations)) {
+        const copy = { ...translations[lang] };
+        delete copy[sKey];
+        delete copy[hKey];
+        updated[lang] = copy;
+      }
+      await fetch('/api/i18n/translations', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ translations: updated }),
+      });
+    } catch {
+      // best-effort — don't block the delete flow
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm(t('autofix.ka63bb731'))) return;
+    const templateType = templates.find((tmpl) => tmpl.id === id)?.template_type ?? '';
+    setActionLoadingId(id);
+    try {
+      const res = await authFetch(`${MAIL_TEMPLATES_BASE}/${id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error((err as any)?.message || `Error ${res.status}`);
+      }
+      showToast({ variant: 'success', message: t('autofix.kf6b83106') });
+      if (selectedId === id) {
+        setSelectedId(null);
+        setEditor(blankEditor);
+      }
+      await fetchTemplates(tab === 'archived');
+      if (templateType.trim()) {
+        await removeI18nKeys(templateType);
+      }
+    } catch (e: any) {
+      showToast({ variant: 'error', message: e?.message || t('autofix.kccf6593a') });
+    } finally {
+      setActionLoadingId(null);
+    }
+  };
+
+  const editorOpen = isCreating || selectedId !== null;
+
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/85 p-4 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] backdrop-blur md:p-6 xl:p-7">
+      {/* Header */}
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <h2 className="flex items-center gap-2 text-xl font-semibold text-slate-900">
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+          {t('autofix.kd93a60af')}
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          {tab === 'active' && (
+            <button
+              type="button"
+              onClick={startCreate}
+              className="inline-flex items-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 transition"
+            >
+              + New Mail Template
+            </button>
+          )}
+          {editorOpen && (
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={isSaving}
+              className="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50 transition disabled:opacity-50"
+            >{isSaving ? t('autofix.kac6cedc7') : (isCreating ? t('autofix.k987f2b90') : t('autofix.k9f7c3d1e'))}</button>
+          )}
+          <button
+            type="button"
+            onClick={() => fetchTemplates(tab === 'archived')}
+            disabled={isLoading}
+            title="Refresh"
+            className="inline-flex items-center rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 transition disabled:opacity-50"
+          >
+            <svg className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="mb-5 flex gap-1 rounded-2xl border border-slate-200 bg-slate-100/60 p-1 w-fit">
+        <button
+          type="button"
+          onClick={() => setTab('active')}
+          className={`rounded-xl px-4 py-2 text-sm font-semibold transition ${
+            tab === 'active' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'
+          }`}
+        >{t('autofix.kbdcb654a')}</button>
+        <button
+          type="button"
+          onClick={() => setTab('archived')}
+          className={`rounded-xl px-4 py-2 text-sm font-semibold transition ${
+            tab === 'archived' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-800'
+          }`}
+        >
+          Archived
+        </button>
+      </div>
+
+      {fetchError && (
+        <div className="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+          {fetchError}
+        </div>
+      )}
+
+      <div className={`grid gap-4 ${editorOpen ? 'lg:grid-cols-[290px_minmax(0,1fr)]' : ''}`}>
+        {/* Template List */}
+        <aside className="rounded-2xl border border-slate-200 bg-white/80 p-3">
+          <h3 className="px-2 pb-2 text-sm font-semibold text-slate-800">{tab === 'archived' ? t('autofix.kc097ece0') : t('autofix.k2fbe0857')}</h3>
+
+          {isLoading && (
+            <div className="px-2 py-4 text-sm text-slate-400 text-center">{t('autofix.k832387c5')}</div>
+          )}
+
+          {!isLoading && visibleTemplates.length === 0 && !isCreating && (
+            <div className="rounded-lg border border-dashed border-slate-200 p-3 text-xs text-slate-500">{tab === 'archived' ? t('autofix.k245ba4af') : t('autofix.k247b74e1')}</div>
+          )}
+
+          {isCreating && (
+            <div className="mb-2 rounded-xl border border-slate-900 bg-slate-900 px-3 py-2 text-white">
+              <div className="text-sm font-semibold truncate">{t('autofix.k2f343849')}</div>
+              <div className="mt-0.5 text-[11px] text-slate-300">Draft</div>
+            </div>
+          )}
+
+          <div className="space-y-2">
+            {visibleTemplates.map((template) => {
+              const isSelected = !isCreating && selectedId === template.id;
+              const isBusy = actionLoadingId === template.id;
+              return (
+                <div
+                  key={template.id}
+                  className={`rounded-xl border transition ${
+                    isSelected ? 'border-slate-900 bg-slate-900' : 'border-slate-200 bg-white hover:bg-slate-50'
+                  }`}
+                >
+                  <button
+                    type="button"
+                    onClick={() => openEditor(template)}
+                    className="w-full px-3 pt-2 pb-1 text-left"
+                  >
+                    <div className={`text-sm font-semibold truncate ${isSelected ? 'text-white' : 'text-slate-800'}`}>
+                      {template.name}
+                    </div>
+                    <div className={`mt-0.5 text-[11px] flex items-center gap-1.5 ${isSelected ? 'text-slate-300' : 'text-slate-500'}`}>
+                      <span className="truncate">{template.template_type}</span>
+                      {template.is_active && !template.is_archived && (
+                        <span className={`shrink-0 inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold ${isSelected ? 'bg-emerald-500 text-white' : 'bg-emerald-100 text-emerald-700'}`}>
+                          Active
+                        </span>
+                      )}
+                    </div>
+                  </button>
+
+                  <div className="flex flex-wrap items-center gap-1 px-3 pb-2">
+                    <button
+                      type="button"
+                      title="Edit"
+                      onClick={() => openEditor(template)}
+                      className={`rounded-lg px-2 py-1 text-[11px] font-semibold transition ${
+                        isSelected ? 'bg-slate-700 text-slate-200 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+                      }`}
+                    >
+                      Edit
+                    </button>
+
+                    {!template.is_archived && !template.is_active && (
+                      <button
+                        type="button"
+                        title="Activate"
+                        disabled={isBusy}
+                        onClick={() => handleActivate(template.id)}
+                        className="rounded-lg px-2 py-1 text-[11px] font-semibold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 transition disabled:opacity-50"
+                      >
+                        Activate
+                      </button>
+                    )}
+
+                    {!template.is_archived && template.is_active && (
+                      <span className="rounded-lg px-2 py-1 text-[11px] font-semibold bg-emerald-100 text-emerald-700 cursor-default select-none">{t('autofix.k26404a1a')}</span>
+                    )}
+
+                    {!template.is_archived && (
+                      <button
+                        type="button"
+                        title="Archive"
+                        disabled={isBusy}
+                        onClick={() => handleArchive(template.id)}
+                        className="rounded-lg px-2 py-1 text-[11px] font-semibold bg-amber-50 text-amber-700 hover:bg-amber-100 transition disabled:opacity-50"
+                      >
+                        Archive
+                      </button>
+                    )}
+
+                    {template.is_archived && (
+                      <button
+                        type="button"
+                        title="Unarchive"
+                        disabled={isBusy}
+                        onClick={() => handleUnarchive(template.id)}
+                        className="rounded-lg px-2 py-1 text-[11px] font-semibold bg-sky-50 text-sky-700 hover:bg-sky-100 transition disabled:opacity-50"
+                      >
+                        Unarchive
+                      </button>
+                    )}
+
+                    <button
+                      type="button"
+                      title="Delete"
+                      disabled={isBusy}
+                      onClick={() => handleDelete(template.id)}
+                      className="rounded-lg px-2 py-1 text-[11px] font-semibold bg-rose-50 text-rose-700 hover:bg-rose-100 transition disabled:opacity-50"
+                    >
+                      Delete
+                    </button>
+
+                    {isBusy && (
+                      <svg className="ml-1 w-3.5 h-3.5 animate-spin text-slate-400" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                      </svg>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </aside>
+
+        {/* Editor + Preview */}
+        {editorOpen && (
+          <div className="space-y-4">
+            <div className="rounded-2xl border border-slate-200 bg-white/85 p-4">
+              <div className="grid gap-3 md:grid-cols-2">
+                <label className="block">
+                  <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.k2fb166ad')}</div>
+                  <input
+                    value={editor.template_type}
+                    onChange={(e) => { setEditor((s) => ({ ...s, template_type: e.target.value })); setI18nSyncStatus('idle'); }}
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    placeholder={t('autofix.k1a7aa84d')}
+                  />
+                </label>
+
+                <label className="block">
+                  <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.k2fc164d2')}</div>
+                  <input
+                    value={editor.name}
+                    onChange={(e) => setEditor((s) => ({ ...s, name: e.target.value }))}
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    placeholder={t('autofix.k32764a91')}
+                  />
+                </label>
+
+                {/* i18n key info + sync status */}
+                {editor.template_type?.trim() && (
+                  <div className="md:col-span-2 rounded-xl border border-sky-200 bg-sky-50/60 px-4 py-3 space-y-1.5">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex items-center gap-1.5 text-xs font-semibold text-sky-700">
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+                        </svg>{t('autofix.k48b366e4')}</div>
+                      {i18nSyncStatus === 'syncing' && (
+                        <span className="text-[11px] text-sky-500 flex items-center gap-1">
+                          <svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/></svg>{t('autofix.ke4326584')}</span>
+                      )}
+                      {i18nSyncStatus === 'synced' && (
+                        <span className="text-[11px] text-emerald-600 font-semibold">{t('autofix.kf5fec72a')}</span>
+                      )}
+                      {i18nSyncStatus === 'error' && (
+                        <span className="text-[11px] text-rose-600 font-semibold">{t('autofix.k5321f8f0')}</span>
+                      )}
+                    </div>
+                    <div className="flex flex-col gap-1 text-[11px] font-mono text-sky-800">
+                      <span className="flex items-center gap-1.5">
+                        <span className="text-sky-400 select-none">{t('autofix.k8aea9103')}</span>
+                        <span className="select-all bg-sky-100 rounded px-1.5 py-0.5">{subjectI18nKey(editor.template_type)}</span>
+                      </span>
+                      <span className="flex items-center gap-1.5">
+                        <span className="text-sky-400 select-none">{t('autofix.k0aa53382')}</span>
+                        <span className="select-all bg-sky-100 rounded px-1.5 py-0.5">{htmlI18nKey(editor.template_type)}</span>
+                      </span>
+                    </div>
+                  </div>
+                )}
+
+                <label className="block md:col-span-2">
+                  <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-600">Subject</div>
+                  <input
+                    value={editor.subject}
+                    onChange={(e) => setEditor((s) => ({ ...s, subject: e.target.value }))}
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    placeholder="Subject with placeholders like {{firstName}}"
+                  />
+                </label>
+
+                <label className="block md:col-span-2">
+                  <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.kb56e3ea8')}</div>
+                  <textarea
+                    value={editor.html_content}
+                    onChange={(e) => setEditor((s) => ({ ...s, html_content: e.target.value }))}
+                    className="min-h-[220px] w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-mono text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    placeholder={t('autofix.k8735e9a4')}
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div className="rounded-2xl border border-slate-200 bg-white/85 p-4">
+              <div className="mb-2 text-sm font-semibold text-slate-900">{t('autofix.kefc3a3f9')}</div>
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
+                <div className="mb-3 text-xs text-slate-500">
+                  {t('autofix.k64efb463')}
+                  <span className="font-medium text-slate-800">{editor.subject || t('autofix.k1b76fc38')}</span>
+                  {selectedTemplate && !isCreating && (
+                    <span className="ml-3">Last update: {new Date(selectedTemplate.updated_at).toLocaleString()}</span>
+                  )}
+                </div>
+                <div
+                  className="prose prose-sm max-w-none text-slate-800"
+                  dangerouslySetInnerHTML={{ __html: editor.html_content || `<p class="text-slate-500">${t('autofix.k5201934d')}</p>` }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/app/admin/contract-management/hooks/useContractManagement.ts

@@ -545,12 +545,8 @@ export default function useContractManagement() {
     company_street?: string
     company_postal_city?: string
     company_country?: string
-    // NEW: QR codes for invoices (base64 or data URL)
-    qr_code_60_base64?: string | null
-    qr_code_120_base64?: string | null
-    // NEW: allow camelCase too (backend supports both)
-    qrCode60Base64?: string | null
-    qrCode120Base64?: string | null
+    company_logo_base64?: string | null
+    company_logo_mime_type?: string | null
   }
 
   const getCompanySettings = useCallback(async () => {
@@ -558,35 +554,6 @@ export default function useContractManagement() {
   }, [authorizedFetch]);
 
   const updateCompanySettings = useCallback(async (data: Partial<CompanySettings>) => {
-    // Debug request body in browser console (redacts base64 values)
-    try {
-      // IMPORTANT: `data` is the real payload object; `redacted` is for logs only.
-      const json = JSON.stringify(data);
-      const redacted = redactJsonForLogs(data);
-      const qr60 = (data as any)?.qr_code_60_base64 ?? (data as any)?.qrCode60Base64;
-      const qr120 = (data as any)?.qr_code_120_base64 ?? (data as any)?.qrCode120Base64;
-      console.info('[CM][company-settings] PUT body', {
-        redacted,
-        jsonLength: json.length,
-        keys: Object.keys(data || {}),
-        qrFieldTypes: {
-          qr_code_60_base64: qr60 ? typeof qr60 : null,
-          qr_code_120_base64: qr120 ? typeof qr120 : null,
-        },
-        qrFieldLengths: {
-          qr_code_60_base64: typeof qr60 === 'string' ? qr60.length : null,
-          qr_code_120_base64: typeof qr120 === 'string' ? qr120.length : null,
-        },
-      });
-
-      if (qr60 && typeof qr60 !== 'string') {
-        console.warn('[CM][company-settings] qr_code_60_base64 is not a string!', qr60);
-      }
-      if (qr120 && typeof qr120 !== 'string') {
-        console.warn('[CM][company-settings] qr_code_120_base64 is not a string!', qr120);
-      }
-    } catch {}
-
     return authorizedFetch<CompanySettings>('/api/admin/company-settings', {
       method: 'PUT',
       body: JSON.stringify(data),

src/app/admin/contract-management/page.tsx

@@ -1,31 +1,38 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState, useSyncExternalStore } from 'react';
 import PageLayout from '../../components/PageLayout';
 import ContractEditor from './components/contractEditor';
 import ContractUploadCompanyStamp from './components/contractUploadCompanyStamp';
 import CompanySettingsPanel from './components/companySettingsPanel';
 import ContractTemplateList from './components/contractTemplateList';
+import MailTemplatesManager from './components/mailTemplatesManager';
 import useAuthStore from '../../store/authStore';
 import { useRouter } from 'next/navigation';
 
+import { useTranslation } from '../../i18n/useTranslation';
+
 const NAV = [
-  { key: 'stamp', label: 'Company Stamp', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg> },
+  { key: 'stamp', label: 'Company Details', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg> },
+  { key: 'mailTemplates', label: 'Mail Templates', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg> },
   { key: 'templates', label: 'Templates', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg> },
   { key: 'editor', label: 'Create Template', icon: <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4 12.5-12.5z"/></svg> },
 ];
 
 export default function ContractManagementPage() {
+  const { t } = useTranslation();
   const [refreshKey, setRefreshKey] = useState(0);
   const user = useAuthStore((s) => s.user);
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false
+  );
   const router = useRouter();
   const [section, setSection] = useState('templates');
   const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
   const [editorKey, setEditorKey] = useState(0);
 
-  useEffect(() => { setMounted(true); }, []);
-
   // Only allow admin
   const isAdmin =
     !!user &&
@@ -49,12 +56,10 @@ export default function ContractManagementPage() {
 
   return (
     <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        {/* tighter horizontal padding on mobile */}
-        <div className="flex flex-col md:flex-row max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8 gap-6 md:gap-8">
-          {/* Sidebar Navigation (mobile = horizontal scroll tabs, desktop = vertical) */}
-          <nav className="md:w-56 w-full md:self-start md:sticky md:top-6">
-            <div className="flex md:flex-col flex-row gap-2 md:gap-3 overflow-x-auto md:overflow-visible -mx-4 px-4 md:mx-0 md:px-0 pb-2 md:pb-0">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.14),transparent_24%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.14),transparent_26%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_52%,#eef2ff_100%)]">
+        <div className="mx-auto flex max-w-420 flex-col gap-6 px-4 py-6 sm:px-6 md:flex-row md:gap-10 md:py-10 lg:px-10">
+          <nav className="w-full md:sticky md:top-6 md:w-64 md:self-start">
+            <div className="flex md:flex-col flex-row gap-2 md:gap-3 overflow-x-auto md:overflow-visible -mx-4 rounded-[28px] border border-white/70 bg-white/80 px-4 py-3 shadow-[0_22px_60px_-34px_rgba(15,23,42,0.38)] backdrop-blur md:mx-0 md:px-3 md:py-3 pb-3 md:pb-3">
               {NAV.map((item) => (
                 <button
                   key={item.key}
@@ -69,10 +74,10 @@ export default function ContractManagementPage() {
                     }
                     setSection(item.key);
                   }}
-                  className={`flex flex-shrink-0 items-center gap-2 px-4 py-2 rounded-lg font-medium transition whitespace-nowrap text-sm md:text-base
+                  className={`flex shrink-0 items-center gap-2 px-4 py-3 rounded-2xl font-medium transition whitespace-nowrap text-sm md:text-base
                     ${section === item.key
-                      ? 'bg-blue-900 text-blue-50 shadow'
-                      : 'bg-white text-blue-900 hover:bg-blue-50 hover:text-blue-900 border border-blue-200'}`}
+                      ? 'bg-slate-900 text-white shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)]'
+                      : 'bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900 border border-transparent hover:border-slate-200'}`}
                 >
                   {item.icon}
                   <span>{item.label}</span>
@@ -82,40 +87,41 @@ export default function ContractManagementPage() {
           </nav>
 
           {/* Main Content */}
-          <main className="flex-1 space-y-6 md:space-y-8">
-            {/* sticky only on md+; smaller padding/title on mobile */}
-            <header className="md:sticky md:top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-5 px-4 md:py-10 md:px-8 rounded-2xl shadow-lg flex flex-col gap-3 md:gap-4 mb-2 md:mb-4">
-              <h1 className="text-2xl md:text-4xl font-extrabold text-blue-900 tracking-tight">Contract Management</h1>
-              <p className="text-sm md:text-lg text-blue-700">
-                Manage contract templates, company stamp, and create new templates.
-              </p>
+          <main className="flex-1 space-y-6 md:space-y-8 xl:space-y-9">
+            <header className="rounded-[30px] border border-white/80 bg-white/85 px-5 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] backdrop-blur md:px-8 md:py-8 xl:px-10">
+              <div className="space-y-4">
+                <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">{t('autofix.k8351e02f')}</div>
+                <div>
+                  <h1 className="text-3xl font-black tracking-tight text-slate-950 md:text-5xl">{t('autofix.k67cb36a4')}</h1>
+                  <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600 md:text-base">
+                    {t('autofix.k39791457')}
+                  </p>
+                </div>
+              </div>
             </header>
 
-            {/* Section Panels (compact padding on mobile) */}
             {section === 'stamp' && (
-              <section className="rounded-2xl bg-white shadow-lg border border-gray-100 p-4 md:p-6">
-                <h2 className="text-xl font-semibold text-blue-900 mb-4 flex items-center gap-2">
+              <section className="rounded-[28px] border border-white/80 bg-white/85 p-4 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] backdrop-blur md:p-6 xl:p-7">
+                <h2 className="mb-4 flex items-center gap-2 text-xl font-semibold text-slate-900">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
-                  Company Stamp
+                  {t('autofix.ka5f38d19')}
                 </h2>
-                <ContractUploadCompanyStamp onUploaded={bumpRefresh} />
+                <CompanySettingsPanel />
 
-                <div className="mt-8 pt-6 border-t border-gray-200">
-                  <h3 className="text-lg font-semibold text-blue-900 mb-3 flex items-center gap-2">
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
-                    Company Information
+                <div className="mt-8 border-t border-slate-200 pt-6">
+                  <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold text-slate-900">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
+                    {t('autofix.k54d7cbef')}
                   </h3>
-                  <p className="text-sm text-gray-500 mb-4">Address details used on invoices.</p>
-                  <CompanySettingsPanel />
+                  <ContractUploadCompanyStamp onUploaded={bumpRefresh} />
                 </div>
               </section>
             )}
+            {section === 'mailTemplates' && (
+              <MailTemplatesManager />
+            )}
             {section === 'templates' && (
-              <section className="rounded-2xl bg-white shadow-lg border border-gray-100 p-4 md:p-6">
-                <h2 className="text-xl font-semibold text-blue-900 mb-4 flex items-center gap-2">
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
-                  Templates
-                </h2>
+              <section className="rounded-[28px] border border-white/80 bg-white/60 p-4 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur md:p-5 xl:p-6">
                 <ContractTemplateList
                   refreshKey={refreshKey}
                   onEdit={(id) => {
@@ -127,10 +133,10 @@ export default function ContractManagementPage() {
               </section>
             )}
             {section === 'editor' && (
-              <section className="rounded-2xl bg-white shadow-lg border border-gray-100 p-4 md:p-6">
-                <h2 className="text-xl font-semibold text-blue-900 mb-4 flex items-center gap-2">
+              <section className="rounded-[28px] border border-white/80 bg-white/85 p-4 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] backdrop-blur md:p-6 xl:p-7">
+                <h2 className="mb-4 flex items-center gap-2 text-xl font-semibold text-slate-900">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
-                  Create Template
+                  {t('autofix.k22c8f7f1')}
                 </h2>
                 <ContractEditor
                   key={`${editorKey}-${editingTemplateId ?? 'new'}`}

src/app/admin/dashboard-management/hooks/useAdminDashboardPlatforms.ts

@@ -12,8 +12,10 @@ import {
 type BackendPlatform = {
   id: string | number
   title: string
+  titleKey?: string | null
   href: string
   description?: string | null
+  descriptionKey?: string | null
   icon?: DashboardPlatformIconName | null
   color?: DashboardPlatformColorClass | null
   state?: boolean
@@ -46,7 +48,9 @@ function toRow(p: BackendPlatform): PlatformRow {
   return {
     id: String(p.id),
     title: typeof p.title === 'string' ? p.title : '',
+    titleKey: typeof p.titleKey === 'string' ? p.titleKey : undefined,
     description: typeof p.description === 'string' ? p.description : '',
+    descriptionKey: typeof p.descriptionKey === 'string' ? p.descriptionKey : undefined,
     href: typeof p.href === 'string' ? p.href : '',
     icon: FIXED_ICON,
     color: (p.color as DashboardPlatformColorClass) || ('bg-blue-500' as DashboardPlatformColorClass),
@@ -59,8 +63,10 @@ function toRow(p: BackendPlatform): PlatformRow {
 function toPayload(p: PlatformRow) {
   return {
     title: p.title,
+    titleKey: p.titleKey ?? '',
     href: p.href,
     description: p.description ?? '',
+    descriptionKey: p.descriptionKey ?? '',
     icon: FIXED_ICON,
     color: p.color,
     state: Boolean(p.isActive),
@@ -72,8 +78,10 @@ function toPayload(p: PlatformRow) {
 function normalizeForCompare(p: PlatformRow) {
   return {
     title: (p.title || '').trim(),
+    titleKey: (p.titleKey || '').trim(),
     href: (p.href || '').trim(),
     description: (p.description || '').trim(),
+    descriptionKey: (p.descriptionKey || '').trim(),
     icon: FIXED_ICON,
     color: p.color,
     isActive: Boolean(p.isActive),
@@ -90,8 +98,10 @@ function isChanged(p: PlatformRow, baselineById: Record<string, PlatformRow>): b
   const b = normalizeForCompare(baseline)
   return (
     a.title !== b.title ||
+    a.titleKey !== b.titleKey ||
     a.href !== b.href ||
     a.description !== b.description ||
+    a.descriptionKey !== b.descriptionKey ||
     a.color !== b.color ||
     a.isActive !== b.isActive ||
     a.disabled !== b.disabled ||
@@ -112,7 +122,10 @@ export function useAdminDashboardPlatforms() {
   const [error, setError] = useState<string | null>(null)
 
   const hasValidationErrors = useMemo(() => {
-    return platforms.some(p => !p.title.trim() || !p.href.trim() || !isValidHref(p.href))
+    return platforms.some(p => {
+      const hasTitle = Boolean(p.title?.trim()) || Boolean(p.titleKey?.trim())
+      return !hasTitle || !p.href.trim() || !isValidHref(p.href)
+    })
   }, [platforms])
 
   const reload = useCallback(async () => {
@@ -152,7 +165,9 @@ export function useAdminDashboardPlatforms() {
       {
         id,
         title: 'New Platform',
+        titleKey: '',
         description: '',
+        descriptionKey: '',
         href: '/dashboard',
         icon: FIXED_ICON,
         color: 'bg-blue-500' as DashboardPlatformColorClass,

src/app/admin/dashboard-management/page.tsx

@@ -1,16 +1,19 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import { useState } from 'react'
 import PageLayout from '../../components/PageLayout'
 import {
   DASHBOARD_PLATFORMS_COLOR_OPTIONS,
-  type DashboardPlatform,
   type DashboardPlatformColorClass
 } from '../../utils/dashboardPlatforms'
 import { PlusIcon, TrashIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
 import { useAdminDashboardPlatforms, type PlatformRow } from './hooks/useAdminDashboardPlatforms'
 
 export default function AdminDashboardManagementPage() {
+  const { t } = useTranslation();
   const {
     platforms,
     loading,
@@ -39,17 +42,24 @@ export default function AdminDashboardManagementPage() {
 
   const isOpen = (p: PlatformRow) => Boolean(openById[p.id] ?? p._isNew)
 
+  const translatePreview = (key: string | undefined, fallback: string) => {
+    const trimmedKey = (key || '').trim()
+    if (!trimmedKey) return fallback
+    const translated = t(trimmedKey)
+    return translated === trimmedKey ? (fallback || trimmedKey) : translated
+  }
+
   return (
     <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-10">
-          <div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
+      <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#f6f8ff] via-[#f3f7ff] to-[#eef4ff]">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_12%_18%,rgba(59,130,246,0.16),transparent_38%),radial-gradient(circle_at_88%_0%,rgba(13,148,136,0.14),transparent_36%),radial-gradient(circle_at_76%_82%,rgba(245,158,11,0.12),transparent_30%)]" />
+        <div className="relative max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-6 md:py-10">
+          <div className="rounded-[30px] border border-white/80 bg-white/85 p-5 shadow-[0_30px_80px_-42px_rgba(15,23,42,0.35)] backdrop-blur-md sm:p-8">
             <header className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
               <div>
-                <h1 className="text-3xl sm:text-4xl font-extrabold text-blue-900 tracking-tight">Dashboard Management</h1>
-                <p className="text-sm sm:text-base text-blue-700 mt-2">
-                  Manage the “Platforms” cards shown on the user dashboard.
-                </p>
+                <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">{t('autofix.k09546aee')}</div>
+                <h1 className="mt-3 text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight break-words">{t('autofix.kc4315932')}</h1>
+                <p className="text-sm sm:text-base text-slate-600 mt-2 break-words">{t('autofix.k098ec0b9')}</p>
               </div>
 
               <div className="flex flex-col sm:flex-row gap-2 sm:items-center">
@@ -57,66 +67,60 @@ export default function AdminDashboardManagementPage() {
                   type="button"
                   onClick={addAndOpen}
                   disabled={loading || saving}
-                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-900 text-white px-4 py-2 text-sm font-semibold hover:bg-blue-800"
+                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-900 text-white px-4 py-2 text-sm font-semibold hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
                 >
-                  <PlusIcon className="h-5 w-5" />
-                  Add Platform
-                </button>
+                  <PlusIcon className="h-5 w-5" />{t('autofix.k39e2c5db')}</button>
                 <button
                   type="button"
                   onClick={save}
                   disabled={hasValidationErrors || loading || saving}
                   className={
                     hasValidationErrors || loading || saving
-                      ? 'inline-flex items-center justify-center gap-2 rounded-lg bg-gray-300 text-gray-600 px-4 py-2 text-sm font-semibold cursor-not-allowed'
-                      : 'inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 text-white px-4 py-2 text-sm font-semibold hover:bg-emerald-500'
+                      ? 'inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-200 text-slate-500 px-4 py-2 text-sm font-semibold cursor-not-allowed'
+                      : 'inline-flex items-center justify-center gap-2 rounded-2xl bg-[#8D6B1D] text-white px-4 py-2 text-sm font-semibold hover:bg-[#7A5E1A]'
                   }
                 >
-                  <CheckIcon className="h-5 w-5" />
-                  {saving ? 'Saving…' : 'Save'}
-                </button>
+                  <CheckIcon className="h-5 w-5" />{saving ? t('autofix.kac6cedc7') : 'Save'}</button>
               </div>
             </header>
 
             {error && (
-              <div className="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+              <div className="mb-6 rounded-2xl border border-red-200 bg-red-50/90 px-4 py-3 text-sm text-red-800 backdrop-blur-sm">
                 {error}
               </div>
             )}
 
             {savedAt && (
-              <div className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
+              <div className="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50/90 px-4 py-3 text-sm text-emerald-800 backdrop-blur-sm">
                 Saved at {new Date(savedAt).toLocaleTimeString('de-DE')}
               </div>
             )}
 
             {hasValidationErrors && (
-              <div className="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
-                Please ensure every platform has a title and a valid link (must start with “/” or “http(s)://”).
+              <div className="mb-6 rounded-2xl border border-amber-200 bg-amber-50/90 px-4 py-3 text-sm text-amber-900 backdrop-blur-sm">
+                Please ensure every platform has a title or title key and a valid link (must start with “/” or “http(s)://”).
               </div>
             )}
 
             <div className="grid grid-cols-1 gap-4">
               {loading && (
-                <div className="rounded-2xl border border-gray-200 bg-white p-6 text-sm text-gray-600">
-                  Loading…
-                </div>
+                <div className="rounded-[24px] border border-white/80 bg-white/85 p-6 text-sm text-slate-600 shadow-[0_20px_50px_-34px_rgba(15,23,42,0.3)]">{t('autofix.k832387c5')}</div>
               )}
 
               {!loading && platforms.map(platform => (
-                <div key={platform.id} className="rounded-2xl bg-white border border-gray-100 shadow p-4 sm:p-5">
+                <div key={platform.id} className="rounded-[24px] border border-white/80 bg-white/85 p-4 shadow-[0_20px_50px_-34px_rgba(15,23,42,0.3)] backdrop-blur-md sm:p-5">
                   <div className="flex flex-col gap-4">
                     <div className="flex items-start justify-between gap-3">
                       <div className="min-w-0">
-                        <div className="text-base font-semibold text-gray-900 truncate">{platform.title}</div>
-                        <div className="text-xs text-gray-500 truncate">{platform.href}</div>
+                        <div className="text-base font-semibold text-slate-900 break-words">{translatePreview(platform.titleKey, platform.title) || t('autofix.k39e2c5db')}</div>
+                        <div className="text-xs text-slate-500 break-all">{platform.href}</div>
                       </div>
                       <div className="flex items-center gap-2">
                         <button
                           type="button"
                           onClick={() => toggleOpen(platform.id)}
                           disabled={saving}
-                          className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white text-gray-800 px-3 py-2 text-xs font-semibold hover:bg-gray-50"
+                          className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white text-slate-800 px-3 py-2 text-xs font-semibold hover:bg-slate-50 disabled:opacity-60"
                         >
                           {isOpen(platform) ? <ChevronUpIcon className="h-4 w-4" /> : <ChevronDownIcon className="h-4 w-4" />}
                           {isOpen(platform) ? 'Close' : 'Edit'}
@@ -132,7 +136,7 @@ export default function AdminDashboardManagementPage() {
                             await setPlatformState(platform, false)
                           }}
                           disabled={saving}
-                          className="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-xs font-semibold hover:bg-red-100"
+                          className="inline-flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-xs font-semibold hover:bg-red-100 disabled:opacity-60"
                         >
                           <TrashIcon className="h-4 w-4" />
                           {platform._isNew ? 'Remove' : 'Deactivate'}
@@ -141,63 +145,87 @@ export default function AdminDashboardManagementPage() {
                     </div>
 
                     {isOpen(platform) && (
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 rounded-2xl border border-white/80 bg-white/80 p-4">
+                      <label className="block md:col-span-2">
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.kd96b6952')}</div>
+                        <input
+                          value={platform.titleKey || ''}
+                          onChange={e => updatePlatform(platform.id, { titleKey: e.target.value })}
+                          disabled={saving}
+                          placeholder="dashboard.platformCards.custom.title"
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+                        />
+                        <div className="mt-1 text-xs text-slate-500 break-words">Preview: {translatePreview(platform.titleKey, platform.title)}</div>
+                      </label>
+
                       <label className="block">
-                        <div className="text-xs font-semibold text-gray-700">Title</div>
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.k339260c9')}</div>
                         <input
                           value={platform.title}
                           onChange={e => updatePlatform(platform.id, { title: e.target.value })}
                           disabled={saving}
-                          className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
-                        />
-                      </label>
-
-                      <label className="block">
-                        <div className="text-xs font-semibold text-gray-700">Description</div>
-                        <input
-                          value={platform.description}
-                          onChange={e => updatePlatform(platform.id, { description: e.target.value })}
-                          disabled={saving}
-                          className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
                         />
                       </label>
 
                       <label className="block md:col-span-2">
-                        <div className="text-xs font-semibold text-gray-700">Link</div>
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.k2c0cfef4')}</div>
+                        <input
+                          value={platform.descriptionKey || ''}
+                          onChange={e => updatePlatform(platform.id, { descriptionKey: e.target.value })}
+                          disabled={saving}
+                          placeholder="dashboard.platformCards.custom.description"
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+                        />
+                        <div className="mt-1 text-xs text-slate-500 break-words">Preview: {translatePreview(platform.descriptionKey, platform.description)}</div>
+                      </label>
+
+                      <label className="block">
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.k4a292bef')}</div>
+                        <input
+                          value={platform.description}
+                          onChange={e => updatePlatform(platform.id, { description: e.target.value })}
+                          disabled={saving}
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
+                        />
+                      </label>
+
+                      <label className="block md:col-span-2">
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">Link</div>
                         <input
                           value={platform.href}
                           onChange={e => updatePlatform(platform.id, { href: e.target.value })}
                           disabled={saving}
-                          placeholder="Example: /shop or https://example.com"
+                          placeholder={t('autofix.k17f65c37')}
                           className={
-                            'mt-1 w-full rounded-lg border px-3 py-2 text-sm ' +
-                            (isValidHref(platform.href) ? 'border-gray-200' : 'border-red-300')
+                            'mt-1 w-full rounded-2xl border bg-white px-3 py-2 text-sm text-slate-900 ' +
+                            (isValidHref(platform.href) ? 'border-slate-200' : 'border-red-300')
                           }
                         />
                         {!isValidHref(platform.href) && (
                           <div className="mt-1 text-xs text-red-600">Must start with “/” or “http(s)://”.</div>
                         )}
-                        <div className="mt-1 text-xs text-gray-500">
+                        <div className="mt-1 text-xs text-slate-500">
                           Use a relative path (starts with “/”) for internal pages, or a full URL for external pages.
                         </div>
                       </label>
 
                       <label className="block">
-                        <div className="text-xs font-semibold text-gray-700">Icon</div>
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">Icon</div>
                         <input
                           value={'Link'}
                           disabled
-                          className="mt-1 w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700"
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700"
                         />
                       </label>
 
                       <label className="block">
-                        <div className="text-xs font-semibold text-gray-700">Color</div>
+                        <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">Color</div>
                         <select
                           value={platform.color}
                           onChange={e => updatePlatform(platform.id, { color: e.target.value as DashboardPlatformColorClass })}
                           disabled={saving}
-                          className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
+                          className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
                         >
                           {DASHBOARD_PLATFORMS_COLOR_OPTIONS.map(opt => (
                             <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -206,7 +234,7 @@ export default function AdminDashboardManagementPage() {
                       </label>
 
                       <div className="flex flex-wrap gap-4 md:col-span-2">
-                        <label className="inline-flex items-center gap-2 text-sm">
+                        <label className="inline-flex items-center gap-2 text-sm text-slate-700">
                           <input
                             type="checkbox"
                             checked={platform.isActive}
@@ -216,7 +244,7 @@ export default function AdminDashboardManagementPage() {
                           Active (visible on dashboard)
                         </label>
 
-                        <label className="inline-flex items-center gap-2 text-sm">
+                        <label className="inline-flex items-center gap-2 text-sm text-slate-700">
                           <input
                             type="checkbox"
                             checked={Boolean(platform.disabled)}
@@ -229,12 +257,12 @@ export default function AdminDashboardManagementPage() {
 
                       {platform.disabled && (
                         <label className="block md:col-span-2">
-                          <div className="text-xs font-semibold text-gray-700">Disabled message</div>
+                          <div className="text-xs font-semibold uppercase tracking-wide text-slate-600">{t('autofix.kab99811e')}</div>
                           <input
                             value={platform.disabledText || ''}
                             onChange={e => updatePlatform(platform.id, { disabledText: e.target.value })}
                             disabled={saving}
-                            className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
+                            className="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900"
                             placeholder="Optional"
                           />
                         </label>
@@ -246,9 +274,7 @@ export default function AdminDashboardManagementPage() {
               ))}
 
               {!loading && platforms.length === 0 && (
-                <div className="rounded-2xl border border-gray-200 bg-white p-8 text-center text-sm text-gray-600">
-                  No platforms configured.
-                </div>
+                <div className="rounded-[24px] border border-white/80 bg-white/85 p-8 text-center text-sm text-slate-600 shadow-[0_20px_50px_-34px_rgba(15,23,42,0.3)]">{t('autofix.kbce9fbea')}</div>
               )}
             </div>
           </div>

src/app/admin/dev-management/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import React from 'react'
 import Header from '../../components/nav/Header'
 import Footer from '../../components/Footer'
@@ -11,6 +14,7 @@ import { importSqlDump, SqlExecutionData, SqlExecutionMeta } from './hooks/execu
 import { createFolderStructure, listFolderStructureIssues, listLooseFiles, listGhostDirectories, moveLooseFilesToContract, FixResult, FolderStructureIssueUser, GhostDirectory, LooseFileUser } from './hooks/exoscaleMaintenance'
 
 export default function DevManagementPage() {
+  const { t } = useTranslation();
   const router = useRouter()
   const user = useAuthStore(s => s.user)
 
@@ -264,18 +268,16 @@ export default function DevManagementPage() {
                   <CommandLineIcon className="h-6 w-6 text-blue-700" />
                 </div>
                 <div className="min-w-0">
-                  <h1 className="text-2xl sm:text-3xl font-extrabold text-blue-900">Dev Management</h1>
-                  <p className="text-sm sm:text-base text-blue-700">
-                    Import SQL dump files to run database migrations.
-                  </p>
+                  <h1 className="text-2xl sm:text-3xl font-extrabold text-blue-900">{t('autofix.k664072a1')}</h1>
+                  <p className="text-sm sm:text-base text-blue-700">{t('autofix.k6e4a6069')}</p>
                 </div>
               </div>
 
               <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 flex items-start gap-2">
                 <ExclamationTriangleIcon className="h-5 w-5 mt-0.5 flex-shrink-0" />
                 <div>
-                  <div className="font-semibold">Use with caution</div>
-                  <div>SQL dumps run immediately and can modify production data.</div>
+                  <div className="font-semibold">{t('autofix.k6c6e5c0f')}</div>
+                  <div>{t('autofix.k8a35cc53')}</div>
                 </div>
               </div>
             </header>
@@ -288,32 +290,28 @@ export default function DevManagementPage() {
                     activeTab === 'sql' ? 'bg-blue-900 text-white' : 'text-blue-800 hover:bg-blue-50'
                   }`}
                 >
-                  <CommandLineIcon className="h-4 w-4" /> SQL Import
-                </button>
+                  <CommandLineIcon className="h-4 w-4" />{t('autofix.k4db68c96')}</button>
                 <button
                   onClick={() => setActiveTab('structure')}
                   className={`flex-1 sm:flex-none inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold transition ${
                     activeTab === 'structure' ? 'bg-blue-900 text-white' : 'text-blue-800 hover:bg-blue-50'
                   }`}
                 >
-                  <WrenchScrewdriverIcon className="h-4 w-4" /> Folder Structure
-                </button>
+                  <WrenchScrewdriverIcon className="h-4 w-4" />{t('autofix.kcb491706')}</button>
                 <button
                   onClick={() => setActiveTab('loose')}
                   className={`flex-1 sm:flex-none inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold transition ${
                     activeTab === 'loose' ? 'bg-blue-900 text-white' : 'text-blue-800 hover:bg-blue-50'
                   }`}
                 >
-                  <FolderOpenIcon className="h-4 w-4" /> Loose Files
-                </button>
+                  <FolderOpenIcon className="h-4 w-4" />{t('autofix.k04b5cbca')}</button>
                 <button
                   onClick={() => setActiveTab('ghost')}
                   className={`flex-1 sm:flex-none inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold transition ${
                     activeTab === 'ghost' ? 'bg-blue-900 text-white' : 'text-blue-800 hover:bg-blue-50'
                   }`}
                 >
-                  <FolderOpenIcon className="h-4 w-4" /> Ghost Directories
-                </button>
+                  <FolderOpenIcon className="h-4 w-4" />{t('autofix.k6838438d')}</button>
               </div>
             </div>
 
@@ -322,7 +320,7 @@ export default function DevManagementPage() {
                 <section className="mt-6 md:mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
                   <div className="lg:col-span-2 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                     <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
-                      <h2 className="text-lg font-semibold text-blue-900">SQL Dump Import</h2>
+                      <h2 className="text-lg font-semibold text-blue-900">{t('autofix.k981b1f1a')}</h2>
 
                       {/* actions: stack on mobile, full width */}
                       <div className="flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-2 sm:gap-3">
@@ -330,8 +328,7 @@ export default function DevManagementPage() {
                           onClick={() => fileInputRef.current?.click()}
                           className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
                         >
-                          <ArrowUpTrayIcon className="h-4 w-4" /> Import SQL
-                        </button>
+                          <ArrowUpTrayIcon className="h-4 w-4" />{t('autofix.k8a59b156')}</button>
                         <button
                           onClick={clearResults}
                           className="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
@@ -349,8 +346,8 @@ export default function DevManagementPage() {
                     </div>
 
                     <div className="rounded-xl border border-dashed border-gray-200 bg-slate-50 px-4 sm:px-6 py-8 sm:py-10 text-center">
-                      <div className="text-sm text-gray-600">Select a .sql dump file using Import SQL.</div>
-                      <div className="mt-2 text-xs text-gray-500">Only SQL dump files are supported.</div>
+                      <div className="text-sm text-gray-600">{t('autofix.kb6eacc9d')}</div>
+                      <div className="mt-2 text-xs text-gray-500">{t('autofix.k3ac8ca10')}</div>
                       {selectedFile && (
                         <div className="mt-4 text-sm text-blue-900 font-semibold break-words">
                           Selected: {selectedFile.name}
@@ -374,10 +371,10 @@ export default function DevManagementPage() {
                   </div>
 
                   <div className="rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
-                    <h3 className="text-lg font-semibold text-blue-900 mb-3">Result Summary</h3>
+                    <h3 className="text-lg font-semibold text-blue-900 mb-3">{t('autofix.kde2b4fa0')}</h3>
                     <div className="space-y-2 text-sm text-gray-700">
                       <div className="flex justify-between">
-                        <span>Result Sets</span>
+                        <span>{t('autofix.k7938d4fd')}</span>
                         <span className="font-semibold text-blue-900">
                           {Array.isArray(result?.result) ? (result?.result as any[]).length : result?.result ? 1 : 0}
                         </span>
@@ -391,19 +388,17 @@ export default function DevManagementPage() {
                         <span className="font-semibold text-blue-900">{meta?.durationMs ? `${meta.durationMs} ms` : '-'}</span>
                       </div>
                     </div>
-                    <div className="mt-6 text-xs text-gray-500">
-                      Multi-statement SQL and dump files are supported. Use with caution.
-                    </div>
+                    <div className="mt-6 text-xs text-gray-500">{t('autofix.k0f0395ca')}</div>
                   </div>
                 </section>
 
                 <section className="mt-6 md:mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                   <div className="flex items-center justify-between mb-4">
-                    <h2 className="text-lg font-semibold text-blue-900">Import Results</h2>
+                    <h2 className="text-lg font-semibold text-blue-900">{t('autofix.kb4675362')}</h2>
                   </div>
 
                   {!result && (
-                    <div className="text-sm text-gray-500">No results yet. Import a SQL dump to see output.</div>
+                    <div className="text-sm text-gray-500">{t('autofix.k23c9f0ff')}</div>
                   )}
 
                   {result?.result && (
@@ -419,10 +414,8 @@ export default function DevManagementPage() {
               <section className="mt-6 md:mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                   <div className="space-y-1">
-                    <h2 className="text-lg font-semibold text-blue-900">Exoscale Folder Structure</h2>
-                    <p className="text-sm text-gray-600">
-                      Ensures both contract and gdpr folders exist for each user.
-                    </p>
+                    <h2 className="text-lg font-semibold text-blue-900">{t('autofix.kd51f320c')}</h2>
+                    <p className="text-sm text-gray-600">{t('autofix.kb1341138')}</p>
                     {structureStatus && (
                       <div className="text-xs text-slate-500">{structureStatus}</div>
                     )}
@@ -440,8 +433,7 @@ export default function DevManagementPage() {
                       disabled={fixingAll || exoscaleLoading || structureUsers.length === 0}
                       className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-900 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800 disabled:opacity-60"
                     >
-                      <WrenchScrewdriverIcon className="h-4 w-4" /> {fixingAll ? 'Creating...' : 'Create All'}
-                    </button>
+                      <WrenchScrewdriverIcon className="h-4 w-4" />{fixingAll ? 'Creating...' : t('autofix.k1db77fc0')}</button>
                   </div>
                 </div>
 
@@ -462,9 +454,9 @@ export default function DevManagementPage() {
                 )}
 
                 {exoscaleLoading ? (
-                  <div className="text-sm text-gray-500">Loading folder issues...</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k8358f1d1')}</div>
                 ) : structureUsers.length === 0 ? (
-                  <div className="text-sm text-gray-500">No missing folders found. Run Refresh to scan again.</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k9e609523')}</div>
                 ) : (
                   <div className="divide-y divide-gray-100 rounded-xl border border-gray-100">
                     {structureUsers.map(user => {
@@ -478,7 +470,7 @@ export default function DevManagementPage() {
                             <div className="text-xs text-gray-500 truncate">
                               #{user.userId} • {user.email} • {user.userType} • {user.contractCategory}
                             </div>
-                            <div className="mt-1 text-xs text-gray-600">Missing: <span className="font-semibold text-blue-900">{missing || 'none'}</span></div>
+                            <div className="mt-1 text-xs text-gray-600">{t('autofix.kd058bb7b')}<span className="font-semibold text-blue-900">{missing || 'none'}</span></div>
                             {fix && (
                               <div className="mt-2 text-xs text-emerald-700">
                                 Created {fix.created || 0}{fix.errors && fix.errors.length > 0 ? `, errors ${fix.errors.length}` : ''}.
@@ -502,7 +494,7 @@ export default function DevManagementPage() {
 
                 {(structureActionMeta || structureActionResults.length > 0) && (
                   <div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4">
-                    <div className="text-sm font-semibold text-blue-900 mb-2">Last Folder Structure Action</div>
+                    <div className="text-sm font-semibold text-blue-900 mb-2">{t('autofix.k941fd092')}</div>
                     <div className="text-xs text-gray-600 flex flex-wrap gap-3">
                       <span>Processed: {structureActionMeta?.processedUsers ?? '-'}</span>
                       <span>Created: {structureActionMeta?.createdTotal ?? '-'}</span>
@@ -533,10 +525,8 @@ export default function DevManagementPage() {
               <section className="mt-6 md:mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                   <div className="space-y-1">
-                    <h2 className="text-lg font-semibold text-blue-900">Loose Files</h2>
-                    <p className="text-sm text-gray-600">
-                      Shows files directly under the user folder that are not in contract or gdpr.
-                    </p>
+                    <h2 className="text-lg font-semibold text-blue-900">{t('autofix.k04b5cbca')}</h2>
+                    <p className="text-sm text-gray-600">{t('autofix.kbff01823')}</p>
                     {looseStatus && (
                       <div className="text-xs text-slate-500">{looseStatus}</div>
                     )}
@@ -554,8 +544,7 @@ export default function DevManagementPage() {
                       disabled={fixingAll || exoscaleLoading || looseUsers.length === 0}
                       className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-900 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800 disabled:opacity-60"
                     >
-                      <WrenchScrewdriverIcon className="h-4 w-4" /> {fixingAll ? 'Moving...' : 'Move All to Contract'}
-                    </button>
+                      <WrenchScrewdriverIcon className="h-4 w-4" />{fixingAll ? 'Moving...' : t('autofix.k0188c7bc')}</button>
                   </div>
                 </div>
 
@@ -576,9 +565,9 @@ export default function DevManagementPage() {
                 )}
 
                 {exoscaleLoading ? (
-                  <div className="text-sm text-gray-500">Loading loose files...</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k8193b7a2')}</div>
                 ) : looseUsers.length === 0 ? (
-                  <div className="text-sm text-gray-500">No loose files found. Run Refresh to scan again.</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k1db0c7cd')}</div>
                 ) : (
                   <div className="divide-y divide-gray-100 rounded-xl border border-gray-100">
                     {looseUsers.map(user => {
@@ -591,8 +580,7 @@ export default function DevManagementPage() {
                             <div className="text-xs text-gray-500 truncate">
                               #{user.userId} • {user.email} • {user.userType} • {user.contractCategory}
                             </div>
-                            <div className="mt-1 text-xs text-gray-600">
-                              Loose files: <span className="font-semibold text-blue-900">{user.looseObjects}</span>
+                            <div className="mt-1 text-xs text-gray-600">{t('autofix.kf340aa10')}<span className="font-semibold text-blue-900">{user.looseObjects}</span>
                             </div>
                             {user.sampleKeys && user.sampleKeys.length > 0 && (
                               <div className="mt-2 text-[11px] text-gray-400 break-all">
@@ -622,7 +610,7 @@ export default function DevManagementPage() {
 
                 {(looseActionMeta || looseActionResults.length > 0) && (
                   <div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4">
-                    <div className="text-sm font-semibold text-blue-900 mb-2">Last Loose Files Action</div>
+                    <div className="text-sm font-semibold text-blue-900 mb-2">{t('autofix.kcf61fc9e')}</div>
                     <div className="text-xs text-gray-600 flex flex-wrap gap-3">
                       <span>Processed: {looseActionMeta?.processedUsers ?? '-'}</span>
                       <span>Moved: {looseActionMeta?.movedTotal ?? '-'}</span>
@@ -654,10 +642,8 @@ export default function DevManagementPage() {
               <section className="mt-6 md:mt-8 rounded-2xl bg-white border border-gray-100 shadow-lg p-4 md:p-6">
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                   <div className="space-y-1">
-                    <h2 className="text-lg font-semibold text-blue-900">Ghost Directories</h2>
-                    <p className="text-sm text-gray-600">
-                      Exoscale directories that do not have a matching user in the database.
-                    </p>
+                    <h2 className="text-lg font-semibold text-blue-900">{t('autofix.k6838438d')}</h2>
+                    <p className="text-sm text-gray-600">{t('autofix.k77444d5b')}</p>
                     {ghostStatus && (
                       <div className="text-xs text-slate-500">{ghostStatus}</div>
                     )}
@@ -682,9 +668,9 @@ export default function DevManagementPage() {
                 )}
 
                 {exoscaleLoading ? (
-                  <div className="text-sm text-gray-500">Loading ghost directories...</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k883ea8c5')}</div>
                 ) : ghostDirs.length === 0 ? (
-                  <div className="text-sm text-gray-500">No ghost directories found. Run Refresh to scan again.</div>
+                  <div className="text-sm text-gray-500">{t('autofix.k12a7170a')}</div>
                 ) : (
                   <div className="divide-y divide-gray-100 rounded-xl border border-gray-100">
                     {ghostDirs.map(dir => (

src/app/admin/finance-management/components/InvoiceDetailModal.tsx

@@ -18,6 +18,7 @@ import {
   ShieldCheckIcon,
 } from '@heroicons/react/24/outline'
 import useAuthStore from '../../../store/authStore'
+import { useTranslation } from '../../../i18n/useTranslation'
 
 /* ---------- types ---------- */
 export type AdminInvoice = {
@@ -85,11 +86,11 @@ const STATUSES = ['draft', 'issued', 'paid', 'overdue', 'canceled'] as const
 type InvoiceStatus = (typeof STATUSES)[number]
 
 const STATUS_CONFIG: Record<InvoiceStatus, { label: string; bg: string; text: string; icon: React.ElementType }> = {
-  draft:    { label: 'Draft',    bg: 'bg-gray-100',   text: 'text-gray-700',   icon: PencilSquareIcon },
-  issued:   { label: 'Issued',   bg: 'bg-indigo-100', text: 'text-indigo-700', icon: DocumentTextIcon },
-  paid:     { label: 'Paid',     bg: 'bg-green-100',  text: 'text-green-700',  icon: CheckCircleIcon },
-  overdue:  { label: 'Overdue',  bg: 'bg-red-100',    text: 'text-red-700',    icon: ExclamationCircleIcon },
-  canceled: { label: 'Canceled', bg: 'bg-yellow-100', text: 'text-yellow-700', icon: NoSymbolIcon },
+  draft:    { label: 'draft',    bg: 'bg-gray-100',   text: 'text-gray-700',   icon: PencilSquareIcon },
+  issued:   { label: 'issued',   bg: 'bg-indigo-100', text: 'text-indigo-700', icon: DocumentTextIcon },
+  paid:     { label: 'paid',     bg: 'bg-green-100',  text: 'text-green-700',  icon: CheckCircleIcon },
+  overdue:  { label: 'overdue',  bg: 'bg-red-100',    text: 'text-red-700',    icon: ExclamationCircleIcon },
+  canceled: { label: 'canceled', bg: 'bg-yellow-100', text: 'text-yellow-700', icon: NoSymbolIcon },
 }
 
 function fmtDate(d?: string | null) {
@@ -116,6 +117,7 @@ export default function InvoiceDetailModal({
   onExport,
 }: InvoiceDetailModalProps) {
   const token = useAuthStore((s) => s.accessToken)
+  const { t } = useTranslation()
 
   // detail data
   const [items, setItems] = useState<InvoiceItem[]>([])
@@ -274,10 +276,10 @@ export default function InvoiceDetailModal({
                     </div>
                     <div>
                       <Dialog.Title className="text-lg font-bold text-white">
-                        Invoice {invoice.invoice_number ?? `#${invoice.id}`}
+                        {t('invoiceDetailModal.invoiceTitle')} {invoice.invoice_number ?? `#${invoice.id}`}
                       </Dialog.Title>
                       <p className="text-sm text-blue-200/80">
-                        Created {fmtDateTime(invoice.created_at)}
+                        {t('invoiceDetailModal.created')} {fmtDateTime(invoice.created_at)}
                       </p>
                     </div>
                   </div>
@@ -297,12 +299,12 @@ export default function InvoiceDetailModal({
                     <div className="flex items-center gap-2">
                       <span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusConf.bg} ${statusConf.text}`}>
                         <StatusIcon className="h-4 w-4" />
-                        {statusConf.label}
+                        {t(`invoiceDetailModal.status${statusConf.label.charAt(0).toUpperCase() + statusConf.label.slice(1)}` as any)}
                       </span>
                     </div>
                     <div className="flex-1" />
                     <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-xs text-gray-500 mr-1">Change status:</span>
+                      <span className="text-xs text-gray-500 mr-1">{t('invoiceDetailModal.changeStatus')}</span>
                       {STATUSES.map((s) => {
                         const sc = STATUS_CONFIG[s]
                         const active = s === currentStatus
@@ -317,7 +319,7 @@ export default function InvoiceDetailModal({
                                 : 'border-gray-200 text-gray-600 hover:bg-gray-50 disabled:opacity-40'
                             }`}
                           >
-                            {sc.label}
+                            {t(`invoiceDetailModal.status${sc.label.charAt(0).toUpperCase() + sc.label.slice(1)}` as any)}
                           </button>
                         )
                       })}
@@ -327,7 +329,7 @@ export default function InvoiceDetailModal({
                   {/* status feedback */}
                   {changingStatus && (
                     <div className="rounded-lg bg-blue-50 border border-blue-100 px-3 py-2 text-sm text-blue-700 flex items-center gap-2">
-                      <ArrowPathIcon className="h-4 w-4 animate-spin" /> Updating status…
+                      <ArrowPathIcon className="h-4 w-4 animate-spin" /> {t('invoiceDetailModal.updatingStatus')}
                     </div>
                   )}
                   {statusMsg && (
@@ -346,46 +348,46 @@ export default function InvoiceDetailModal({
                     {/* Customer info */}
                     <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4 space-y-2">
                       <div className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] mb-1">
-                        <UserIcon className="h-4 w-4" /> Customer
+                        <UserIcon className="h-4 w-4" /> {t('invoiceDetailModal.customer')}
                       </div>
-                      <InfoRow label="Name" value={invoice.buyer_name} />
-                      <InfoRow label="Email" value={invoice.buyer_email} />
-                      <InfoRow label="Street" value={invoice.buyer_street} />
-                      <InfoRow label="City" value={[invoice.buyer_postal_code, invoice.buyer_city].filter(Boolean).join(' ')} />
-                      <InfoRow label="Country" value={invoice.buyer_country} />
-                      <InfoRow label="User ID" value={invoice.user_id != null ? String(invoice.user_id) : null} />
+                      <InfoRow label={t('invoiceDetailModal.name')} value={invoice.buyer_name} />
+                      <InfoRow label={t('invoiceDetailModal.email')} value={invoice.buyer_email} />
+                      <InfoRow label={t('invoiceDetailModal.street')} value={invoice.buyer_street} />
+                      <InfoRow label={t('invoiceDetailModal.city')} value={[invoice.buyer_postal_code, invoice.buyer_city].filter(Boolean).join(' ')} />
+                      <InfoRow label={t('invoiceDetailModal.country')} value={invoice.buyer_country} />
+                      <InfoRow label={t('invoiceDetailModal.userId')} value={invoice.user_id != null ? String(invoice.user_id) : null} />
                     </div>
 
                     {/* Financial info */}
                     <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4 space-y-2">
                       <div className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] mb-1">
-                        <BanknotesIcon className="h-4 w-4" /> Financials
+                        <BanknotesIcon className="h-4 w-4" /> {t('invoiceDetailModal.financials')}
                       </div>
-                      <InfoRow label="Net" value={fmtMoney(invoice.total_net, invoice.currency ?? 'EUR')} />
-                      <InfoRow label="Tax" value={fmtMoney(invoice.total_tax, invoice.currency ?? 'EUR')} />
-                      <InfoRow label="Gross" value={fmtMoney(invoice.total_gross, invoice.currency ?? 'EUR')} highlight />
-                      <InfoRow label="VAT Rate" value={invoice.vat_rate != null ? `${invoice.vat_rate}%` : '—'} />
-                      <InfoRow label="Currency" value={invoice.currency ?? 'EUR'} />
+                      <InfoRow label={t('invoiceDetailModal.net')} value={fmtMoney(invoice.total_net, invoice.currency ?? 'EUR')} />
+                      <InfoRow label={t('invoiceDetailModal.tax')} value={fmtMoney(invoice.total_tax, invoice.currency ?? 'EUR')} />
+                      <InfoRow label={t('invoiceDetailModal.gross')} value={fmtMoney(invoice.total_gross, invoice.currency ?? 'EUR')} highlight />
+                      <InfoRow label={t('invoiceDetailModal.vatRate')} value={invoice.vat_rate != null ? `${invoice.vat_rate}%` : '—'} />
+                      <InfoRow label={t('invoiceDetailModal.currency')} value={invoice.currency ?? 'EUR'} />
                     </div>
                   </div>
 
                   {/* Dates */}
                   <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4">
                     <div className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] mb-2">
-                      <CalendarDaysIcon className="h-4 w-4" /> Dates
+                      <CalendarDaysIcon className="h-4 w-4" /> {t('invoiceDetailModal.dates')}
                     </div>
                     <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
-                      <DateChip label="Issued" value={invoice.issued_at} />
-                      <DateChip label="Due" value={invoice.due_at} />
-                      <DateChip label="Created" value={invoice.created_at} />
-                      <DateChip label="Updated" value={invoice.updated_at} />
+                      <DateChip label={t('invoiceDetailModal.issued')} value={invoice.issued_at} />
+                      <DateChip label={t('invoiceDetailModal.due')} value={invoice.due_at} />
+                      <DateChip label={t('invoiceDetailModal.created')} value={invoice.created_at} />
+                      <DateChip label={t('invoiceDetailModal.updated')} value={invoice.updated_at} />
                     </div>
                   </div>
 
                   {/* Line items */}
                   <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4">
                     <div className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] mb-3">
-                      <DocumentTextIcon className="h-4 w-4" /> Line Items
+                      <DocumentTextIcon className="h-4 w-4" /> {t('invoiceDetailModal.lineItems')}
                     </div>
                     {detailLoading ? (
                       <div className="space-y-2">
@@ -395,17 +397,17 @@ export default function InvoiceDetailModal({
                     ) : detailError ? (
                       <div className="text-sm text-red-600">{detailError}</div>
                     ) : items.length === 0 ? (
-                      <div className="text-sm text-gray-500">No line items found.</div>
+                      <div className="text-sm text-gray-500">{t('invoiceDetailModal.noLineItems')}</div>
                     ) : (
                       <div className="overflow-x-auto">
                         <table className="min-w-full text-sm">
                           <thead>
                             <tr className="text-left text-xs uppercase text-gray-500 border-b border-gray-200">
-                              <th className="pb-2 pr-4 font-medium">Description</th>
-                              <th className="pb-2 pr-4 font-medium">Qty</th>
-                              <th className="pb-2 pr-4 font-medium">Unit Price</th>
-                              <th className="pb-2 pr-4 font-medium">Tax</th>
-                              <th className="pb-2 pr-4 font-medium text-right">Gross</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.description')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.qty')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.unitPrice')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.tax')}</th>
+                              <th className="pb-2 pr-4 font-medium text-right">{t('invoiceDetailModal.gross')}</th>
                             </tr>
                           </thead>
                           <tbody className="divide-y divide-gray-100">
@@ -421,7 +423,7 @@ export default function InvoiceDetailModal({
                           </tbody>
                           <tfoot>
                             <tr className="border-t border-gray-200">
-                              <td colSpan={4} className="pt-2 text-right font-semibold text-gray-700">Total</td>
+                              <td colSpan={4} className="pt-2 text-right font-semibold text-gray-700">{t('invoiceDetailModal.total')}</td>
                               <td className="pt-2 text-right font-bold text-[#1C2B4A]">{fmtMoney(invoice.total_gross)}</td>
                             </tr>
                           </tfoot>
@@ -434,17 +436,17 @@ export default function InvoiceDetailModal({
                   {payments.length > 0 && (
                     <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4">
                       <div className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] mb-3">
-                        <ShieldCheckIcon className="h-4 w-4" /> Payments
+                        <ShieldCheckIcon className="h-4 w-4" /> {t('invoiceDetailModal.payments')}
                       </div>
                       <div className="overflow-x-auto">
                         <table className="min-w-full text-sm">
                           <thead>
                             <tr className="text-left text-xs uppercase text-gray-500 border-b border-gray-200">
-                              <th className="pb-2 pr-4 font-medium">Method</th>
-                              <th className="pb-2 pr-4 font-medium">Transaction</th>
-                              <th className="pb-2 pr-4 font-medium">Amount</th>
-                              <th className="pb-2 pr-4 font-medium">Paid At</th>
-                              <th className="pb-2 pr-4 font-medium">Status</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.method')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.transaction')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.amount')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.paidAt')}</th>
+                              <th className="pb-2 pr-4 font-medium">{t('invoiceDetailModal.status')}</th>
                             </tr>
                           </thead>
                           <tbody className="divide-y divide-gray-100">
@@ -471,8 +473,8 @@ export default function InvoiceDetailModal({
                   {invoice.context && (
                     <details className="rounded-xl border border-gray-100 bg-gray-50/50 p-4 group">
                       <summary className="flex items-center gap-2 text-sm font-semibold text-[#1C2B4A] cursor-pointer select-none">
-                        <ClockIcon className="h-4 w-4" /> Context / Metadata
-                        <span className="text-xs font-normal text-gray-400 ml-1">(click to expand)</span>
+                        <ClockIcon className="h-4 w-4" /> {t('invoiceDetailModal.contextMetadata')}
+                        <span className="text-xs font-normal text-gray-400 ml-1">{t('invoiceDetailModal.clickToExpand')}</span>
                       </summary>
                       <pre className="mt-3 text-xs text-gray-600 overflow-x-auto whitespace-pre-wrap break-all max-h-48">
                         {typeof invoice.context === 'string' ? invoice.context : JSON.stringify(invoice.context, null, 2)}
@@ -488,20 +490,20 @@ export default function InvoiceDetailModal({
                       onClick={() => onExport?.(invoice)}
                       className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition"
                     >
-                      <ArrowDownTrayIcon className="h-4 w-4" /> Export JSON
+                      <ArrowDownTrayIcon className="h-4 w-4" /> {t('invoiceDetailModal.exportJson')}
                     </button>
                     <button
                       onClick={() => onRunPoolCheck?.(invoice.id)}
                       className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition"
                     >
-                      <ArrowPathIcon className="h-4 w-4" /> Pool Check
+                      <ArrowPathIcon className="h-4 w-4" /> {t('invoiceDetailModal.poolCheck')}
                     </button>
                   </div>
                   <button
                     onClick={onClose}
                     className="inline-flex items-center rounded-lg bg-[#1C2B4A] px-4 py-2 text-sm font-semibold text-white hover:bg-[#1C2B4A]/90 transition"
                   >
-                    Close
+                    {t('invoiceDetailModal.close')}
                   </button>
                 </div>
               </Dialog.Panel>

src/app/admin/finance-management/hooks/getInvoices.ts

@@ -27,6 +27,12 @@ export type AdminInvoice = {
   updated_at?: string | null;
 };
 
+export type AdminInvoiceRevenueSummary = {
+  totalPaidAllTime: number;
+  currency?: string | null;
+  paidInvoiceCount?: number;
+};
+
 export function useAdminInvoices(params?: { status?: string; limit?: number; offset?: number }) {
   const accessToken = useAuthStore(s => s.accessToken);
   const [invoices, setInvoices] = useState<AdminInvoice[]>([]);
@@ -91,3 +97,57 @@ export function useAdminInvoices(params?: { status?: string; limit?: number; off
 
   return { invoices, loading, error, reload: fetchInvoices };
 }
+
+export function useAdminInvoiceRevenueSummary() {
+  const accessToken = useAuthStore(s => s.accessToken);
+  const [summary, setSummary] = useState<AdminInvoiceRevenueSummary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+  const inFlight = useRef<AbortController | null>(null);
+
+  const fetchSummary = useCallback(async () => {
+    setError('');
+    inFlight.current?.abort();
+    const controller = new AbortController();
+    inFlight.current = controller;
+
+    try {
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+      const url = `${base}/api/admin/invoices/revenue-summary`;
+
+      setLoading(true);
+      const res = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+        },
+        signal: controller.signal,
+      });
+
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok || body?.success === false) {
+        setSummary(null);
+        setError(body?.message || `Failed to load revenue summary (${res.status})`);
+        return;
+      }
+
+      setSummary(body?.data || { totalPaidAllTime: 0, currency: 'EUR', paidInvoiceCount: 0 });
+    } catch (e: any) {
+      if (e?.name === 'AbortError') return;
+      setError(e?.message || 'Network error');
+      setSummary(null);
+    } finally {
+      setLoading(false);
+      if (inFlight.current === controller) inFlight.current = null;
+    }
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (accessToken) fetchSummary();
+    return () => inFlight.current?.abort();
+  }, [accessToken, fetchSummary]);
+
+  return { summary, loading, error, reload: fetchSummary };
+}

src/app/admin/finance-management/hooks/useFinanceManagementPageState.ts

@@ -0,0 +1,360 @@
+import { useCallback, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useVatRates } from './getTaxes'
+import { useAdminInvoiceRevenueSummary, useAdminInvoices, type AdminInvoice } from './getInvoices'
+import useAuthStore from '../../../store/authStore'
+import { useTranslation } from '../../../i18n/useTranslation'
+
+type BillFilter = {
+  query: string
+  status: string
+  from: string
+  to: string
+}
+
+export function useFinanceManagementPageState() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const accessToken = useAuthStore((state) => state.accessToken)
+
+  const { rates, loading: vatLoading, error: vatError } = useVatRates()
+
+  const [timeframe, setTimeframe] = useState<'7d' | '30d' | '90d' | 'ytd'>('30d')
+  const [billFilter, setBillFilter] = useState<BillFilter>({ query: '', status: 'issued', from: '', to: '' })
+
+  const [diagLoading, setDiagLoading] = useState(false)
+  const [diagError, setDiagError] = useState('')
+  const [diagData, setDiagData] = useState<any | null>(null)
+
+  const [selectedInvoice, setSelectedInvoice] = useState<AdminInvoice | null>(null)
+  const [detailModalOpen, setDetailModalOpen] = useState(false)
+
+  const [emailDialogOpen, setEmailDialogOpen] = useState(false)
+  const [reportEmail, setReportEmail] = useState('')
+  const [sendingReport, setSendingReport] = useState(false)
+
+  const [reportMsg, setReportMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+
+  const [pdfLoading, setPdfLoading] = useState<string | number | null>(null)
+  const [uploadModalOpen, setUploadModalOpen] = useState(false)
+  const [uploadForm, setUploadForm] = useState({
+    buyer_name: '',
+    buyer_email: '',
+    buyer_street: '',
+    buyer_postal_code: '',
+    buyer_city: '',
+    buyer_country: '',
+    currency: 'EUR',
+    total_gross: '',
+    vat_rate: '20',
+    status: 'issued',
+    issued_at: '',
+    due_at: '',
+  })
+  const [uploadFile, setUploadFile] = useState<File | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+
+  const { invoices, loading: invLoading, error: invError, reload } = useAdminInvoices({
+    status: billFilter.status !== 'all' ? billFilter.status : undefined,
+    limit: 200,
+    offset: 0,
+  })
+  const {
+    summary: revenueSummary,
+    loading: revenueLoading,
+    error: revenueError,
+    reload: reloadRevenueSummary,
+  } = useAdminInvoiceRevenueSummary()
+
+  const combinedInvoiceError = invError || (revenueError ? `Revenue summary: ${revenueError}` : '')
+  const reloadFinanceData = useCallback(async () => {
+    await Promise.all([reload(), reloadRevenueSummary()])
+  }, [reload, reloadRevenueSummary])
+
+  const totals = useMemo(() => {
+    const now = new Date()
+
+    const inRange = (d: Date) => {
+      const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
+      if (timeframe === '7d') return diff <= 7
+      if (timeframe === '30d') return diff <= 30
+      if (timeframe === '90d') return diff <= 90
+      return true
+    }
+
+    const range = invoices.filter((invoice) => {
+      const dateValue = invoice.issued_at ?? invoice.created_at
+      if (!dateValue) return false
+      return inRange(new Date(dateValue))
+    })
+
+    return {
+      totalAll: Number(revenueSummary?.totalPaidAllTime ?? 0),
+      totalRange: range.reduce((sum, invoice) => sum + Number(invoice.total_gross ?? 0), 0),
+    }
+  }, [invoices, revenueSummary, timeframe])
+
+  const filteredBills = useMemo(() => {
+    const query = billFilter.query.trim().toLowerCase()
+    const from = billFilter.from ? new Date(billFilter.from) : null
+    const to = billFilter.to ? new Date(billFilter.to) : null
+
+    return invoices.filter((invoice) => {
+      const byQuery =
+        !query ||
+        String(invoice.invoice_number ?? invoice.id).toLowerCase().includes(query) ||
+        String(invoice.buyer_name ?? '').toLowerCase().includes(query)
+
+      const issuedAt = invoice.issued_at ? new Date(invoice.issued_at) : invoice.created_at ? new Date(invoice.created_at) : null
+      const byFrom = from ? (issuedAt ? issuedAt >= from : false) : true
+      const byTo = to ? (issuedAt ? issuedAt <= to : false) : true
+
+      return byQuery && byFrom && byTo
+    })
+  }, [invoices, billFilter])
+
+  const exportBills = (format: 'csv' | 'pdf') => {
+    console.log('[export]', format, { filters: billFilter, invoices: filteredBills })
+    alert(t('autofix.k6430ec9d').replace('{format}', format.toUpperCase()).replace('{count}', String(filteredBills.length)))
+  }
+
+  const runPoolCheck = async (invoiceId: string | number) => {
+    setDiagLoading(true)
+    setDiagError('')
+    setDiagData(null)
+
+    try {
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
+      const url = `${base}/api/admin/pools/inflow-diagnostics?invoiceId=${encodeURIComponent(String(invoiceId))}`
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+        },
+      })
+
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok || body?.success === false) {
+        setDiagError(body?.message || t('autofix.k4d551f20').replace('{status}', String(response.status)))
+        return
+      }
+
+      setDiagData(body?.data || null)
+    } catch (error: any) {
+      setDiagError(error?.message || t('autofix.k84447f0f'))
+    } finally {
+      setDiagLoading(false)
+    }
+  }
+
+  const exportInvoice = (invoice: AdminInvoice) => {
+    const pretty = JSON.stringify(invoice, null, 2)
+    const blob = new Blob([pretty], { type: 'application/json;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `invoice-${invoice.invoice_number || invoice.id}.json`
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const viewInvoicePdf = async (invoice: AdminInvoice) => {
+    setPdfLoading(invoice.id)
+
+    try {
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
+      const response = await fetch(`${base}/api/invoices/${invoice.id}/pdf`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+        },
+      })
+
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}))
+        throw new Error(body?.message || t('autofix.k01a04b9d').replace('{status}', String(response.status)))
+      }
+
+      const blob = await response.blob()
+      const blobUrl = URL.createObjectURL(blob)
+      window.open(blobUrl, '_blank', 'noopener,noreferrer')
+    } catch (error: any) {
+      setReportMsg({ type: 'error', text: error?.message || t('autofix.k6d4dfb53') })
+    } finally {
+      setPdfLoading(null)
+    }
+  }
+
+  const resetUploadForm = () => {
+    setUploadForm({
+      buyer_name: '',
+      buyer_email: '',
+      buyer_street: '',
+      buyer_postal_code: '',
+      buyer_city: '',
+      buyer_country: '',
+      currency: 'EUR',
+      total_gross: '',
+      vat_rate: '20',
+      status: 'issued',
+      issued_at: '',
+      due_at: '',
+    })
+    setUploadFile(null)
+  }
+
+  const submitUploadInvoice = async () => {
+    if (!uploadForm.total_gross || isNaN(Number(uploadForm.total_gross))) {
+      setUploadError(t('autofix.k0f7cd409'))
+      return
+    }
+
+    setUploadError(null)
+    setUploading(true)
+
+    try {
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
+      const gross = parseFloat(uploadForm.total_gross)
+      const rate = parseFloat(uploadForm.vat_rate) || 0
+      const net = rate > 0 ? +(gross / (1 + rate / 100)).toFixed(2) : gross
+      const tax = +(gross - net).toFixed(2)
+
+      const formData = new FormData()
+      const { total_gross, vat_rate, ...rest } = uploadForm
+      Object.entries(rest).forEach(([key, value]) => {
+        if (value !== '') formData.append(key, value)
+      })
+      formData.append('total_gross', gross.toFixed(2))
+      formData.append('total_net', net.toFixed(2))
+      formData.append('total_tax', tax.toFixed(2))
+      formData.append('vat_rate', String(rate))
+      if (uploadFile) formData.append('pdf', uploadFile)
+
+      const response = await fetch(`${base}/api/admin/invoices`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}) },
+        body: formData,
+      })
+
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok || body?.success === false) {
+        throw new Error(body?.message || t('autofix.kecf550b9').replace('{status}', String(response.status)))
+      }
+
+      setUploadModalOpen(false)
+      resetUploadForm()
+      reload()
+      setReportMsg({ type: 'success', text: t('autofix.k28165f23').replace('{invoice}', String(body.data?.invoice_number ?? '')) })
+    } catch (error: any) {
+      setUploadError(error?.message || t('autofix.k1e7317ac'))
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const sendEmailReport = async () => {
+    if (!reportEmail.trim()) return
+
+    setReportMsg(null)
+    setSendingReport(true)
+
+    try {
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
+      const response = await fetch(`${base}/api/admin/invoices/email-report`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+        },
+        body: JSON.stringify({
+          email: reportEmail.trim(),
+          from: billFilter.from || undefined,
+          to: billFilter.to || undefined,
+        }),
+      })
+
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok || body?.success === false) {
+        throw new Error(body?.message || t('autofix.k5a2f88b8').replace('{status}', String(response.status)))
+      }
+
+      setReportMsg({
+        type: 'success',
+        text: t('autofix.k5f4036ad')
+          .replace('{email}', reportEmail.trim())
+          .replace('{count}', String(body.data?.sentCount ?? 0)),
+      })
+      setEmailDialogOpen(false)
+      setReportEmail('')
+    } catch (error: any) {
+      setReportMsg({ type: 'error', text: error?.message || t('autofix.k3c6499f9') })
+    } finally {
+      setSendingReport(false)
+    }
+  }
+
+  const uploadPreview = useMemo(() => {
+    const gross = parseFloat(uploadForm.total_gross) || 0
+    const rate = parseFloat(uploadForm.vat_rate) || 0
+    const net = rate > 0 ? +(gross / (1 + rate / 100)).toFixed(2) : gross
+    const tax = +(gross - net).toFixed(2)
+    return { net, tax }
+  }, [uploadForm.total_gross, uploadForm.vat_rate])
+
+  return {
+    t,
+    router,
+    rates,
+    vatLoading,
+    vatError,
+    timeframe,
+    setTimeframe,
+    billFilter,
+    setBillFilter,
+    diagLoading,
+    diagError,
+    diagData,
+    selectedInvoice,
+    setSelectedInvoice,
+    detailModalOpen,
+    setDetailModalOpen,
+    emailDialogOpen,
+    setEmailDialogOpen,
+    reportEmail,
+    setReportEmail,
+    sendingReport,
+    reportMsg,
+    setReportMsg,
+    invoices,
+    invLoading: invLoading || revenueLoading,
+    invError: combinedInvoiceError,
+    reload: reloadFinanceData,
+    totals,
+    filteredBills,
+    exportBills,
+    runPoolCheck,
+    exportInvoice,
+    pdfLoading,
+    uploadModalOpen,
+    setUploadModalOpen,
+    uploadForm,
+    setUploadForm,
+    uploadFile,
+    setUploadFile,
+    uploading,
+    uploadError,
+    setUploadError,
+    viewInvoicePdf,
+    submitUploadInvoice,
+    sendEmailReport,
+    uploadPreview,
+  }
+}

src/app/admin/finance-management/page.tsx

@@ -1,337 +1,294 @@
 'use client'
-import React, { useMemo, useState } from 'react'
+
+import React from 'react'
 import PageLayout from '../../components/PageLayout'
-import { useRouter } from 'next/navigation'
-import { useVatRates } from './hooks/getTaxes'
-import { useAdminInvoices, type AdminInvoice } from './hooks/getInvoices'
-import useAuthStore from '../../store/authStore'
 import InvoiceDetailModal from './components/InvoiceDetailModal'
+import { type AdminInvoice } from './hooks/getInvoices'
+import { useFinanceManagementPageState } from './hooks/useFinanceManagementPageState'
+
+function getStatusBadgeClass(status?: string) {
+  if (status === 'paid') return 'bg-green-100 text-green-700'
+  if (status === 'issued') return 'bg-indigo-100 text-indigo-700'
+  if (status === 'draft') return 'bg-slate-100 text-slate-700'
+  if (status === 'overdue') return 'bg-red-100 text-red-700'
+  return 'bg-amber-100 text-amber-700'
+}
+
+function getStatusLabel(t: (key: string) => string, status?: string) {
+  if (status === 'draft') return t('autofix.k5f6d9f11')
+  if (status === 'issued') return t('autofix.kdc8f2ab2')
+  if (status === 'paid') return t('autofix.k9d5b2d74')
+  if (status === 'overdue') return t('autofix.k2f44ec11')
+  if (status === 'canceled') return t('autofix.kcf31ed66')
+  return status
+}
+
+function FinanceInvoiceActions({
+  invoice,
+  pdfLoading,
+  onViewPdf,
+  onOpenDetails,
+  t,
+}: {
+  invoice: AdminInvoice
+  pdfLoading: string | number | null
+  onViewPdf: (invoice: AdminInvoice) => void
+  onOpenDetails: (invoice: AdminInvoice) => void
+  t: (key: string) => string
+}) {
+  return (
+    <td className="px-3 py-2 space-x-2">
+      <button
+        onClick={() => onViewPdf(invoice)}
+        disabled={pdfLoading === invoice.id || !invoice.pdf_storage_key}
+        className="text-xs rounded-lg border border-slate-200 px-2.5 py-1.5 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {pdfLoading === invoice.id ? t('autofix.k79d12c2e') : t('autofix.kfbe29d11')}
+      </button>
+      <button
+        onClick={() => onOpenDetails(invoice)}
+        className="text-xs rounded-lg border border-slate-200 px-2.5 py-1.5 hover:bg-slate-50"
+      >
+        {t('autofix.kf67200af')}
+      </button>
+    </td>
+  )
+}
 
 export default function FinanceManagementPage() {
-  const router = useRouter()
-  const accessToken = useAuthStore(s => s.accessToken)
-  const { rates, loading: vatLoading, error: vatError } = useVatRates()
-  const [timeframe, setTimeframe] = useState<'7d' | '30d' | '90d' | 'ytd'>('30d')
-  const [billFilter, setBillFilter] = useState({ query: '', status: 'all', from: '', to: '' })
-  const [diagLoading, setDiagLoading] = useState(false)
-  const [diagError, setDiagError] = useState('')
-  const [diagData, setDiagData] = useState<any | null>(null)
-  const [selectedInvoice, setSelectedInvoice] = useState<AdminInvoice | null>(null)
-  const [detailModalOpen, setDetailModalOpen] = useState(false)
-  const [emailDialogOpen, setEmailDialogOpen] = useState(false)
-  const [reportEmail, setReportEmail] = useState('')
-  const [sendingReport, setSendingReport] = useState(false)
-  const [reportMsg, setReportMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
-
-  // NEW: fetch invoices from backend
   const {
-    invoices,
-    loading: invLoading,
-    error: invError,
+    t,
+    router,
+    rates,
+    vatLoading,
+    vatError,
+    timeframe,
+    setTimeframe,
+    billFilter,
+    setBillFilter,
+    diagLoading,
+    diagError,
+    diagData,
+    selectedInvoice,
+    setSelectedInvoice,
+    detailModalOpen,
+    setDetailModalOpen,
+    emailDialogOpen,
+    setEmailDialogOpen,
+    reportEmail,
+    setReportEmail,
+    sendingReport,
+    reportMsg,
+    setReportMsg,
+    invLoading,
+    invError,
     reload,
-  } = useAdminInvoices({
-    status: billFilter.status !== 'all' ? billFilter.status : undefined,
-    limit: 200,
-    offset: 0,
-  })
-
-  // NEW: totals from backend invoices
-  const totals = useMemo(() => {
-    const now = new Date()
-    const inRange = (d: Date) => {
-      const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
-      if (timeframe === '7d') return diff <= 7
-      if (timeframe === '30d') return diff <= 30
-      if (timeframe === '90d') return diff <= 90
-      return true
-    }
-    const range = invoices.filter(inv => {
-      const dStr = inv.issued_at ?? inv.created_at
-      if (!dStr) return false
-      const d = new Date(dStr)
-      return inRange(d)
-    })
-    const totalAll = invoices.reduce((s, inv) => s + Number(inv.total_gross ?? 0), 0)
-    const totalRange = range.reduce((s, inv) => s + Number(inv.total_gross ?? 0), 0)
-    return { totalAll, totalRange }
-  }, [invoices, timeframe])
-
-  // NEW: filtered rows for table
-  const filteredBills = useMemo(() => {
-    const q = billFilter.query.trim().toLowerCase()
-    const from = billFilter.from ? new Date(billFilter.from) : null
-    const to = billFilter.to ? new Date(billFilter.to) : null
-
-    return invoices.filter(inv => {
-      const byQuery =
-        !q ||
-        String(inv.invoice_number ?? inv.id).toLowerCase().includes(q) ||
-        String(inv.buyer_name ?? '').toLowerCase().includes(q)
-      const issued = inv.issued_at ? new Date(inv.issued_at) : (inv.created_at ? new Date(inv.created_at) : null)
-      const byFrom = from ? (issued ? issued >= from : false) : true
-      const byTo = to ? (issued ? issued <= to : false) : true
-      return byQuery && byFrom && byTo
-    })
-  }, [invoices, billFilter])
-
-  const exportBills = (format: 'csv' | 'pdf') => {
-    console.log('[export]', format, { filters: billFilter, invoices: filteredBills })
-    alert(`Export ${format.toUpperCase()} (dummy) for ${filteredBills.length} invoices`)
-  }
-
-  const runPoolCheck = async (invoiceId: string | number) => {
-    setDiagLoading(true)
-    setDiagError('')
-    setDiagData(null)
-    try {
-      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
-      const url = `${base}/api/admin/pools/inflow-diagnostics?invoiceId=${encodeURIComponent(String(invoiceId))}`
-      const res = await fetch(url, {
-        method: 'GET',
-        credentials: 'include',
-        headers: {
-          Accept: 'application/json',
-          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
-        },
-      })
-      const body = await res.json().catch(() => ({}))
-      if (!res.ok || body?.success === false) {
-        setDiagError(body?.message || `Check failed (${res.status})`)
-        return
-      }
-      setDiagData(body?.data || null)
-    } catch (e: any) {
-      setDiagError(e?.message || 'Network error')
-    } finally {
-      setDiagLoading(false)
-    }
-  }
-
-  const exportInvoice = (inv: AdminInvoice) => {
-    const pretty = JSON.stringify(inv, null, 2)
-    const blob = new Blob([pretty], { type: 'application/json;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `invoice-${inv.invoice_number || inv.id}.json`
-    document.body.appendChild(a)
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  const [pdfLoading, setPdfLoading] = useState<string | number | null>(null)
-
-  const viewInvoicePdf = async (inv: AdminInvoice) => {
-    setPdfLoading(inv.id)
-    try {
-      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
-      const res = await fetch(`${base}/api/invoices/${inv.id}/pdf`, {
-        method: 'GET',
-        credentials: 'include',
-        headers: {
-          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
-        },
-      })
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}))
-        throw new Error(body?.message || `Failed to load PDF (${res.status})`)
-      }
-      const blob = await res.blob()
-      const blobUrl = URL.createObjectURL(blob)
-      window.open(blobUrl, '_blank', 'noopener,noreferrer')
-    } catch (e: any) {
-      setReportMsg({ type: 'error', text: e?.message || 'Failed to load invoice PDF.' })
-    } finally {
-      setPdfLoading(null)
-    }
-  }
-
-  const sendEmailReport = async () => {
-    if (!reportEmail.trim()) return
-    setReportMsg(null)
-    setSendingReport(true)
-    try {
-      const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
-      const res = await fetch(`${base}/api/admin/invoices/email-report`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
-        },
-        body: JSON.stringify({
-          email: reportEmail.trim(),
-          from: billFilter.from || undefined,
-          to: billFilter.to || undefined,
-        }),
-      })
-      const body = await res.json().catch(() => ({}))
-      if (!res.ok || body?.success === false) {
-        throw new Error(body?.message || `Request failed (${res.status})`)
-      }
-      setReportMsg({ type: 'success', text: `Report sent to ${reportEmail.trim()} (${body.data?.sentCount ?? 0} paid invoice(s)).` })
-      setEmailDialogOpen(false)
-      setReportEmail('')
-    } catch (e: any) {
-      setReportMsg({ type: 'error', text: e?.message || 'Failed to send email report.' })
-    } finally {
-      setSendingReport(false)
-    }
-  }
+    totals,
+    filteredBills,
+    exportBills,
+    runPoolCheck,
+    exportInvoice,
+    pdfLoading,
+    uploadModalOpen,
+    setUploadModalOpen,
+    uploadForm,
+    setUploadForm,
+    uploadFile,
+    setUploadFile,
+    uploading,
+    uploadError,
+    setUploadError,
+    viewInvoicePdf,
+    submitUploadInvoice,
+    sendEmailReport,
+    uploadPreview,
+  } = useFinanceManagementPageState()
 
   return (
-    <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
-          <header className="rounded-2xl bg-white border border-blue-100 shadow-lg px-8 py-8 flex flex-col gap-2">
-            <h1 className="text-3xl font-extrabold text-blue-900">Finance Management</h1>
-            <p className="text-sm text-blue-700">Overview of taxes, revenue, and invoices.</p>
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+        <div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+          <header className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+            <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+              {t('autofix.k8070cd52')}
+            </div>
+            <h1 className="mt-3 text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight break-words">{t('autofix.k777299de')}</h1>
+            <p className="text-sm sm:text-base text-slate-600 mt-2 break-words">{t('autofix.k01ad6d49')}</p>
           </header>
 
-          {/* Stats */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="rounded-2xl border border-gray-100 bg-white shadow-lg p-5">
-              <div className="text-xs text-gray-500 mb-1">Total revenue (all time)</div>
-              <div className="text-2xl font-semibold text-[#1C2B4A]">€{totals.totalAll.toFixed(2)}</div>
+          <section className="grid [grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))] gap-4">
+            <div className="rounded-3xl border border-white/80 bg-white/90 p-5 shadow-[0_24px_70px_-44px_rgba(15,23,42,0.3)] backdrop-blur">
+              <div className="text-xs text-slate-500 mb-1">{t('autofix.k73f7184d')}</div>
+              <div className="text-2xl font-semibold text-slate-900">EUR {totals.totalAll.toFixed(2)}</div>
             </div>
-            <div className="rounded-2xl border border-gray-100 bg-white shadow-lg p-5">
-              <div className="text-xs text-gray-500 mb-1">Revenue (range)</div>
-              <div className="text-2xl font-semibold text-[#1C2B4A]">€{totals.totalRange.toFixed(2)}</div>
+            <div className="rounded-3xl border border-white/80 bg-white/90 p-5 shadow-[0_24px_70px_-44px_rgba(15,23,42,0.3)] backdrop-blur">
+              <div className="text-xs text-slate-500 mb-1">{t('autofix.k9b3082af')}</div>
+              <div className="text-2xl font-semibold text-slate-900">EUR {totals.totalRange.toFixed(2)}</div>
             </div>
-            <div className="rounded-2xl border border-gray-100 bg-white shadow-lg p-5">
-              <div className="text-xs text-gray-500 mb-1">Invoices (range)</div>
-              <div className="text-2xl font-semibold text-[#1C2B4A]">{filteredBills.length}</div>
+            <div className="rounded-3xl border border-white/80 bg-white/90 p-5 shadow-[0_24px_70px_-44px_rgba(15,23,42,0.3)] backdrop-blur">
+              <div className="text-xs text-slate-500 mb-1">{t('autofix.k9f4ec5e2')}</div>
+              <div className="text-2xl font-semibold text-slate-900">{filteredBills.length}</div>
             </div>
-            <div className="rounded-2xl border border-gray-100 bg-white shadow-lg p-5">
-              <div className="text-xs text-gray-500 mb-1">Timeframe</div>
+            <div className="rounded-3xl border border-white/80 bg-white/90 p-5 shadow-[0_24px_70px_-44px_rgba(15,23,42,0.3)] backdrop-blur">
+              <div className="text-xs text-slate-500 mb-1">{t('autofix.kafb65833')}</div>
               <select
                 value={timeframe}
-                onChange={e => setTimeframe(e.target.value as any)}
-                className="mt-2 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                onChange={(event) => setTimeframe(event.target.value as '7d' | '30d' | '90d' | 'ytd')}
+                className="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:ring-2 focus:ring-slate-900 focus:border-transparent"
               >
-                <option value="7d">Last 7 days</option>
-                <option value="30d">Last 30 days</option>
-                <option value="90d">Last 90 days</option>
-                <option value="ytd">YTD</option>
+                <option value="7d">{t('autofix.k502a0057')}</option>
+                <option value="30d">{t('autofix.k5f74c123')}</option>
+                <option value="90d">{t('autofix.k915115a9')}</option>
+                <option value="ytd">{t('autofix.k0f5d95a1')}</option>
               </select>
             </div>
-          </div>
+          </section>
 
-          {/* VAT summary */}
-          <section className="rounded-2xl border border-gray-100 bg-white shadow-lg p-6 space-y-3">
-            <div className="flex items-center justify-between">
+          <section className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-3">
+            <div className="flex flex-wrap items-center justify-between gap-3">
               <div>
-                <h2 className="text-lg font-semibold text-[#1C2B4A]">Manage VAT rates</h2>
-                <p className="text-xs text-gray-600">Live data from backend; edit on a separate page.</p>
+                <h2 className="text-lg font-semibold text-slate-900">{t('autofix.kf2180ff6')}</h2>
+                <p className="text-xs text-slate-600">{t('autofix.k5ce7a5b0')}</p>
               </div>
               <button
                 onClick={() => router.push('/admin/finance-management/vat-edit')}
-                className="rounded-lg bg-[#1C2B4A] px-4 py-2 text-sm font-semibold text-white shadow hover:bg-[#1C2B4A]/90"
+                className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-slate-800 transition"
               >
-                Edit VAT
+                {t('autofix.k4191cdba')}
               </button>
             </div>
-            <div className="text-sm text-gray-700">
-              {vatLoading && 'Loading VAT rates...'}
+            <div className="text-sm text-slate-700">
+              {vatLoading && t('autofix.ka5d50257')}
               {vatError && <span className="text-red-600">{vatError}</span>}
               {!vatLoading && !vatError && (
-                <>Active countries: {rates.length} • Examples: {rates.slice(0, 5).map(r => r.country_code).join(', ')}</>
+                <>
+                  {t('autofix.k3e4a95bc').replace('{count}', String(rates.length)).replace('{examples}', rates.slice(0, 5).map((rate) => rate.country_code).join(', '))}
+                </>
               )}
             </div>
           </section>
 
-          {/* Bills list & filters */}
-          <section className="rounded-2xl border border-gray-100 bg-white shadow-lg p-6 space-y-4">
+          <section className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-4">
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <h2 className="text-lg font-semibold text-[#1C2B4A]">Invoices</h2>
+              <h2 className="text-lg font-semibold text-slate-900">{t('autofix.k21f123af')}</h2>
               <div className="flex flex-wrap gap-2 text-sm">
-                <button onClick={() => { setReportMsg(null); setEmailDialogOpen(true) }} className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-blue-900 font-medium hover:bg-blue-100">Send Email Report</button>
-                <button onClick={() => exportBills('csv')} className="rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50">Export CSV</button>
-                <button onClick={() => exportBills('pdf')} className="rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50">Export PDF</button>
-                <button onClick={reload} className="rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50">Reload</button>
+                <button
+                  onClick={() => {
+                    setUploadError(null)
+                    setUploadModalOpen(true)
+                  }}
+                  className="rounded-xl bg-slate-900 px-3 py-2 text-white font-medium hover:bg-slate-800 transition"
+                >
+                  {t('autofix.kec5a5357')}
+                </button>
+                <button
+                  onClick={() => {
+                    setReportMsg(null)
+                    setEmailDialogOpen(true)
+                  }}
+                  className="rounded-xl border border-sky-200 bg-sky-50 px-3 py-2 text-sky-900 font-medium hover:bg-sky-100 transition"
+                >
+                  {t('autofix.kfdcad59b')}
+                </button>
+                <button onClick={() => exportBills('csv')} className="rounded-xl border border-slate-200 px-3 py-2 hover:bg-slate-50 transition">{t('autofix.k4c5e8e87')}</button>
+                <button onClick={() => exportBills('pdf')} className="rounded-xl border border-slate-200 px-3 py-2 hover:bg-slate-50 transition">{t('autofix.k4c5ecd73')}</button>
+                <button onClick={reload} className="rounded-xl border border-slate-200 px-3 py-2 hover:bg-slate-50 transition">{t('autofix.kddf7ca98')}</button>
               </div>
             </div>
 
-            <div className="grid gap-3 md:grid-cols-4 text-sm">
+            <div className="grid gap-3 lg:grid-cols-4 text-sm">
               <input
-                placeholder="Search (invoice no., customer)"
+                placeholder={t('autofix.k8bb2fe26')}
                 value={billFilter.query}
-                onChange={e => setBillFilter(f => ({ ...f, query: e.target.value }))}
-                className="rounded-lg border border-gray-200 px-3 py-2 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                onChange={(event) => setBillFilter((current) => ({ ...current, query: event.target.value }))}
+                className="rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
               />
               <select
                 value={billFilter.status}
-                onChange={e => setBillFilter(f => ({ ...f, status: e.target.value }))}
-                className="rounded-lg border border-gray-200 px-3 py-2 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                onChange={(event) => setBillFilter((current) => ({ ...current, status: event.target.value }))}
+                className="rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
               >
-                <option value="all">Status: All</option>
-                <option value="draft">Draft</option>
-                <option value="issued">Issued</option>
-                <option value="paid">Paid</option>
-                <option value="overdue">Overdue</option>
-                <option value="canceled">Canceled</option>
+                <option value="all">{t('autofix.kec99a6cc')}</option>
+                <option value="draft">{t('autofix.k5f6d9f11')}</option>
+                <option value="issued">{t('autofix.kdc8f2ab2')}</option>
+                <option value="paid">{t('autofix.k9d5b2d74')}</option>
+                <option value="overdue">{t('autofix.k2f44ec11')}</option>
+                <option value="canceled">{t('autofix.kcf31ed66')}</option>
               </select>
               <input
                 type="date"
                 value={billFilter.from}
-                onChange={e => setBillFilter(f => ({ ...f, from: e.target.value }))}
-                className="rounded-lg border border-gray-200 px-3 py-2 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                onChange={(event) => setBillFilter((current) => ({ ...current, from: event.target.value }))}
+                className="rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
               />
               <input
                 type="date"
                 value={billFilter.to}
-                onChange={e => setBillFilter(f => ({ ...f, to: e.target.value }))}
-                className="rounded-lg border border-gray-200 px-3 py-2 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                onChange={(event) => setBillFilter((current) => ({ ...current, to: event.target.value }))}
+                className="rounded-lg border border-slate-200 px-3 py-2 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
               />
             </div>
 
-            <div className="overflow-x-auto">
+            <div className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white/70 p-1">
               {reportMsg && (
-                <div className={`rounded-md border px-3 py-2 text-sm mb-3 ${reportMsg.type === 'success' ? 'border-green-200 bg-green-50 text-green-700' : 'border-red-200 bg-red-50 text-red-700'}`}>
+                <div className={`rounded-xl border px-3 py-2 text-sm mb-3 ${reportMsg.type === 'success' ? 'border-green-200 bg-green-50 text-green-700' : 'border-red-200 bg-red-50 text-red-700'}`}>
                   {reportMsg.text}
                 </div>
               )}
+
               {invError && (
-                <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 mb-3">
+                <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 mb-3">
                   {invError}
                 </div>
               )}
+
               {(diagLoading || diagError || diagData) && (
-                <div className="rounded-md border border-blue-100 bg-blue-50/60 px-3 py-3 text-sm mb-3">
-                  {diagLoading && <div className="text-blue-800">Checking pool inflow...</div>}
+                <div className="rounded-xl border border-sky-200 bg-sky-50/60 px-3 py-3 text-sm mb-3">
+                  {diagLoading && <div className="text-sky-800">{t('autofix.k37d7b9c4')}</div>}
                   {!diagLoading && diagError && <div className="text-red-700">{diagError}</div>}
                   {!diagLoading && !diagError && diagData && (
                     <div className="space-y-2">
-                      <div className="text-blue-900 font-semibold">Pool inflow diagnostic for invoice #{diagData.invoice_id ?? '—'}</div>
-                      <div className="text-gray-700">
-                        Status: <span className="font-medium">{diagData.ok ? 'OK' : 'Blocked'}</span> • Reason: <span className="font-mono">{diagData.reason}</span>
+                      <div className="text-sky-900 font-semibold">
+                        {t('autofix.kf6a5a971').replace('{invoice}', String(diagData.invoice_id ?? '—'))}
                       </div>
+                      <div className="text-slate-700">
+                        {t('autofix.k81c0b74b')}
+                        <span className="font-medium">{diagData.ok ? t('autofix.kaf7e90cc') : t('autofix.k6ba7f5b1')}</span>
+                        {t('autofix.k77049179')}
+                        <span className="font-mono">{diagData.reason}</span>
+                      </div>
+
                       {diagData.ok && (
-                        <div className="text-gray-700">
-                          Abonement: <span className="font-medium">{diagData.abonement_id}</span> • Will book: <span className="font-medium">{diagData.will_book_count}</span> • Already booked: <span className="font-medium">{diagData.already_booked_count}</span>
+                        <div className="text-slate-700">
+                          {t('autofix.k4968eb2a')}
+                          <span className="font-medium">{diagData.abonement_id}</span>
+                          {t('autofix.kfaa8fc4a')}
+                          <span className="font-medium">{diagData.will_book_count}</span>
+                          {t('autofix.kd2e5e813')}
+                          <span className="font-medium">{diagData.already_booked_count}</span>
                         </div>
                       )}
+
                       {Array.isArray(diagData.candidates) && diagData.candidates.length > 0 && (
                         <div className="overflow-x-auto">
                           <table className="min-w-full text-xs">
                             <thead>
-                              <tr className="text-left text-blue-900">
-                                <th className="pr-3 py-1">Pool</th>
-                                <th className="pr-3 py-1">Coffee</th>
-                                <th className="pr-3 py-1">Capsules</th>
-                                <th className="pr-3 py-1">Amount (gross)</th>
-                                <th className="pr-3 py-1">Booked</th>
+                              <tr className="text-left text-sky-900">
+                                <th className="pr-3 py-1">{t('autofix.kf1b73a92')}</th>
+                                <th className="pr-3 py-1">{t('autofix.k2f9cd1e0')}</th>
+                                <th className="pr-3 py-1">{t('autofix.k1ddc3f42')}</th>
+                                <th className="pr-3 py-1">{t('autofix.kdb79aa30')}</th>
+                                <th className="pr-3 py-1">{t('autofix.k93e61ad1')}</th>
                               </tr>
                             </thead>
                             <tbody>
-                              {diagData.candidates.map((c: any) => (
-                                <tr key={`${c.pool_id}-${c.coffee_table_id}`}>
-                                  <td className="pr-3 py-1">{c.pool_name}</td>
-                                  <td className="pr-3 py-1">#{c.coffee_table_id}</td>
-                                  <td className="pr-3 py-1">{c.capsules_count}</td>
-                                  <td className="pr-3 py-1">€{Number(c.amount_gross ?? c.amount_net ?? 0).toFixed(2)}</td>
-                                  <td className="pr-3 py-1">{c.already_booked ? 'yes' : 'no'}</td>
+                              {diagData.candidates.map((candidate: any) => (
+                                <tr key={`${candidate.pool_id}-${candidate.coffee_table_id}`}>
+                                  <td className="pr-3 py-1">{candidate.pool_name}</td>
+                                  <td className="pr-3 py-1">#{candidate.coffee_table_id}</td>
+                                  <td className="pr-3 py-1">{candidate.capsules_count}</td>
+                                  <td className="pr-3 py-1">EUR {Number(candidate.amount_gross ?? candidate.amount_net ?? 0).toFixed(2)}</td>
+                                  <td className="pr-3 py-1">{candidate.already_booked ? t('common.yes') : t('common.no')}</td>
                                 </tr>
                               ))}
                             </tbody>
@@ -342,90 +299,72 @@ export default function FinanceManagementPage() {
                   )}
                 </div>
               )}
-              <table className="min-w-full text-sm">
+
+              <table className="min-w-full text-sm rounded-xl overflow-hidden">
                 <thead>
-                  <tr className="bg-blue-50 text-left text-blue-900">
-                    <th className="px-3 py-2 font-semibold">Invoice</th>
-                    <th className="px-3 py-2 font-semibold">Customer</th>
-                    <th className="px-3 py-2 font-semibold">Issued</th>
-                    <th className="px-3 py-2 font-semibold">Due Date</th>
-                    <th className="px-3 py-2 font-semibold">Amount</th>
-                    <th className="px-3 py-2 font-semibold">Status</th>
-                    <th className="px-3 py-2 font-semibold">Actions</th>
+                  <tr className="bg-slate-50 text-left text-slate-900">
+                    <th className="px-3 py-2 font-semibold">{t('autofix.kf8f0c1f3')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.kf2b5c1a6')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.kd4af6368')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.k867f8265')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.k762eef76')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.k81c0b74b')}</th>
+                    <th className="px-3 py-2 font-semibold">{t('autofix.k0afbbac4')}</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-100">
+                <tbody className="divide-y divide-slate-100">
                   {invLoading ? (
                     <>
-                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-40 bg-gray-200 animate-pulse rounded" /></td></tr>
-                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-3/4 bg-gray-200 animate-pulse rounded" /></td></tr>
+                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-40 bg-slate-200 animate-pulse rounded" /></td></tr>
+                      <tr><td colSpan={7} className="px-3 py-3"><div className="h-4 w-3/4 bg-slate-200 animate-pulse rounded" /></td></tr>
                     </>
                   ) : filteredBills.length === 0 ? (
                     <tr>
-                      <td colSpan={7} className="px-3 py-4 text-center text-gray-500">
-                        Keine Rechnungen gefunden.
-                      </td>
+                      <td colSpan={7} className="px-3 py-4 text-center text-slate-500">{t('autofix.kbdb02e32')}</td>
                     </tr>
                   ) : (
-                    filteredBills.map(inv => (
-                      <tr key={inv.id} className="border-b last:border-0">
-                        <td className="px-3 py-2">{inv.invoice_number ?? inv.id}</td>
-                        <td className="px-3 py-2">{inv.buyer_name ?? '—'}</td>
-                        <td className="px-3 py-2">{inv.issued_at ? new Date(inv.issued_at).toLocaleDateString() : '—'}</td>
+                    filteredBills.map((invoice) => (
+                      <tr key={invoice.id} className="border-b border-slate-100 last:border-0">
+                        <td className="px-3 py-2">{invoice.invoice_number ?? invoice.id}</td>
+                        <td className="px-3 py-2">{invoice.buyer_name ?? '—'}</td>
+                        <td className="px-3 py-2">{invoice.issued_at ? new Date(invoice.issued_at).toLocaleDateString() : '—'}</td>
                         <td className="px-3 py-2">
                           {(() => {
-                            if (!inv.due_at) return <span className="text-gray-400">—</span>
-                            const due = new Date(inv.due_at)
-                            const now = new Date()
-                            const diffDays = Math.ceil((due.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
-                            let cls = 'bg-green-100 text-green-700' // plenty of time
-                            if (inv.status === 'paid') cls = 'bg-green-100 text-green-700'
-                            else if (diffDays < 0) cls = 'bg-red-100 text-red-700'
+                            if (!invoice.due_at) return <span className="text-slate-400">—</span>
+
+                            const due = new Date(invoice.due_at)
+                            const today = new Date()
+                            due.setHours(0, 0, 0, 0)
+                            today.setHours(0, 0, 0, 0)
+                            const diffDays = Math.round((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+
+                            let cls = 'bg-green-100 text-green-700'
+                            if (invoice.status === 'paid') cls = 'bg-green-100 text-green-700'
+                            else if (invoice.status === 'overdue' || diffDays < 0) cls = 'bg-red-100 text-red-700'
                             else if (diffDays <= 3) cls = 'bg-red-100 text-red-700'
                             else if (diffDays <= 7) cls = 'bg-amber-100 text-amber-700'
-                            return (
-                              <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cls}`}>
-                                {due.toLocaleDateString()}
-                              </span>
-                            )
+
+                            return <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cls}`}>{due.toLocaleDateString()}</span>
                           })()}
                         </td>
                         <td className="px-3 py-2">
-                          €{Number(inv.total_gross ?? 0).toFixed(2)}{' '}
-                          <span className="text-xs text-gray-500">{inv.currency ?? 'EUR'}</span>
+                          EUR {Number(invoice.total_gross ?? 0).toFixed(2)} <span className="text-xs text-slate-500">{invoice.currency ?? 'EUR'}</span>
                         </td>
                         <td className="px-3 py-2">
-                          <span
-                            className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
-                              inv.status === 'paid'
-                                ? 'bg-green-100 text-green-700'
-                                : inv.status === 'issued'
-                                ? 'bg-indigo-100 text-indigo-700'
-                                : inv.status === 'draft'
-                                ? 'bg-gray-100 text-gray-700'
-                                : inv.status === 'overdue'
-                                ? 'bg-red-100 text-red-700'
-                                : 'bg-yellow-100 text-yellow-700'
-                            }`}
-                          >
-                            {inv.status}
+                          <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${getStatusBadgeClass(invoice.status ?? '')}`}>
+                            {getStatusLabel(t, invoice.status ?? '')}
                           </span>
                         </td>
-                        <td className="px-3 py-2 space-x-2">
-                          <button
-                            onClick={() => viewInvoicePdf(inv)}
-                            disabled={pdfLoading === inv.id || !inv.pdf_storage_key}
-                            className="text-xs rounded border px-2 py-1 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                          >
-                            {pdfLoading === inv.id ? 'Loading…' : 'View PDF'}
-                          </button>
-                          <button
-                            onClick={() => { setSelectedInvoice(inv); setDetailModalOpen(true) }}
-                            className="text-xs rounded border px-2 py-1 hover:bg-gray-50"
-                          >
-                            Details
-                          </button>
-                        </td>
+                        <FinanceInvoiceActions
+                          invoice={invoice}
+                          pdfLoading={pdfLoading}
+                          onViewPdf={viewInvoicePdf}
+                          onOpenDetails={(value) => {
+                            setSelectedInvoice(value)
+                            setDetailModalOpen(true)
+                          }}
+                          t={t}
+                        />
                       </tr>
                     ))
                   )}
@@ -437,48 +376,145 @@ export default function FinanceManagementPage() {
               <InvoiceDetailModal
                 invoice={selectedInvoice}
                 open={detailModalOpen}
-                onClose={() => { setDetailModalOpen(false); setTimeout(() => setSelectedInvoice(null), 200) }}
+                onClose={() => {
+                  setDetailModalOpen(false)
+                  setTimeout(() => setSelectedInvoice(null), 200)
+                }}
                 onStatusChanged={reload}
-                onRunPoolCheck={(id) => { setDetailModalOpen(false); runPoolCheck(id) }}
-                onExport={(inv) => exportInvoice(inv)}
+                onRunPoolCheck={(id) => {
+                  setDetailModalOpen(false)
+                  runPoolCheck(id)
+                }}
+                onExport={(invoice) => exportInvoice(invoice)}
               />
             )}
 
-            {/* Email Report Dialog */}
+            {uploadModalOpen && (
+              <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/35 backdrop-blur-sm">
+                <div className="w-full max-w-2xl rounded-[28px] border border-white/80 bg-white/95 p-6 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.35)] overflow-y-auto max-h-[90vh]">
+                  <h3 className="text-lg font-semibold text-slate-900 mb-4">{t('autofix.kec5a5357')}</h3>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.kf2b5c1a6')}</label>
+                      <input className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_name} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_name: event.target.value }))} placeholder={t('autofix.k1882bd75')} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k48852b8d')}</label>
+                      <input type="email" className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_email} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_email: event.target.value }))} placeholder={t('autofix.kf8c220d3')} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.kba8ee9b1')}</label>
+                      <input className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_street} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_street: event.target.value }))} placeholder={t('autofix.k81c7c2f2')} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.kc9d9d15d')}</label>
+                      <input className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_postal_code} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_postal_code: event.target.value }))} placeholder="8010" />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k5d52917f')}</label>
+                      <input className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_city} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_city: event.target.value }))} placeholder="Graz" />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k9e39e560')}</label>
+                      <input className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.buyer_country} onChange={(event) => setUploadForm((current) => ({ ...current, buyer_country: event.target.value }))} placeholder="Austria" />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k002455d8')}<span className="text-red-500">*</span></label>
+                      <input type="number" step="0.01" min="0" className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.total_gross} onChange={(event) => setUploadForm((current) => ({ ...current, total_gross: event.target.value }))} placeholder="0.00" />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k57d5f250')}</label>
+                      <input type="number" step="0.01" min="0" max="100" className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.vat_rate} onChange={(event) => setUploadForm((current) => ({ ...current, vat_rate: event.target.value }))} placeholder="20" />
+                    </div>
+
+                    <div className="sm:col-span-2 grid grid-cols-2 gap-3">
+                      <div className="rounded-lg bg-slate-50 border border-slate-100 px-3 py-2">
+                        <div className="text-xs text-slate-500 mb-0.5">{t('autofix.k1f5a403a')}</div>
+                        <div className="font-semibold text-slate-800">{uploadForm.currency} {uploadPreview.net.toFixed(2)}</div>
+                      </div>
+                      <div className="rounded-lg bg-slate-50 border border-slate-100 px-3 py-2">
+                        <div className="text-xs text-slate-500 mb-0.5">{t('autofix.k089e8c08')}</div>
+                        <div className="font-semibold text-slate-800">{uploadForm.currency} {uploadPreview.tax.toFixed(2)}</div>
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k3466b0e0')}</label>
+                      <select className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.currency} onChange={(event) => setUploadForm((current) => ({ ...current, currency: event.target.value }))}>
+                        <option value="EUR">EUR</option>
+                        <option value="CHF">CHF</option>
+                        <option value="USD">USD</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k81c0b74b')}</label>
+                      <select className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.status} onChange={(event) => setUploadForm((current) => ({ ...current, status: event.target.value }))}>
+                        <option value="issued">{t('autofix.kdc8f2ab2')}</option>
+                        <option value="paid">{t('autofix.k9d5b2d74')}</option>
+                        <option value="draft">{t('autofix.k5f6d9f11')}</option>
+                        <option value="overdue">{t('autofix.k2f44ec11')}</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.kd4af6368')}</label>
+                      <input type="date" className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.issued_at} onChange={(event) => setUploadForm((current) => ({ ...current, issued_at: event.target.value }))} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.k867f8265')}</label>
+                      <input type="date" className="w-full rounded-lg border border-slate-200 px-3 py-2" value={uploadForm.due_at} onChange={(event) => setUploadForm((current) => ({ ...current, due_at: event.target.value }))} />
+                    </div>
+                    <div className="sm:col-span-2">
+                      <label className="block text-xs font-medium text-slate-700 mb-1">{t('autofix.kd6024811')}</label>
+                      <input
+                        type="file"
+                        accept="application/pdf"
+                        className="w-full text-sm text-slate-700 file:mr-3 file:rounded-lg file:border-0 file:bg-sky-50 file:px-3 file:py-2 file:text-sky-900 file:font-medium hover:file:bg-sky-100"
+                        onChange={(event) => setUploadFile(event.target.files?.[0] ?? null)}
+                      />
+                      {uploadFile && <p className="mt-1 text-xs text-slate-500">{uploadFile.name}</p>}
+                    </div>
+                  </div>
+
+                  {uploadError && <div className="mt-3 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">{uploadError}</div>}
+
+                  <div className="mt-5 flex items-center justify-end gap-2">
+                    <button onClick={() => { setUploadModalOpen(false); setUploadError(null) }} disabled={uploading} className="rounded-xl border border-slate-200 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-60">{t('common.cancel')}</button>
+                    <button onClick={submitUploadInvoice} disabled={uploading} className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-slate-800 disabled:opacity-60 disabled:cursor-not-allowed">
+                      {uploading ? t('autofix.k3bc9a0f1') : t('autofix.k1139753d')}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {emailDialogOpen && (
-              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-                <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
-                  <h3 className="text-lg font-semibold text-[#1C2B4A] mb-1">Send Email Report</h3>
+              <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/35 backdrop-blur-sm">
+                <div className="w-full max-w-md rounded-[28px] border border-white/80 bg-white/95 p-6 shadow-[0_24px_70px_-30px_rgba(15,23,42,0.35)]">
+                  <h3 className="text-lg font-semibold text-slate-900 mb-1">{t('autofix.kfdcad59b')}</h3>
                   <div className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-4">
-                    Only <strong>paid</strong> invoices will be included in the report, regardless of the status filter.
+                    {t('autofix.k45c3fd51').replace('{paid}', t('autofix.k9d5b2d74').toLowerCase())}
                     {(billFilter.from || billFilter.to) && (
-                      <span> The current date range filter ({billFilter.from || '…'} – {billFilter.to || '…'}) will be applied.</span>
+                      <span> {t('autofix.kdd22a5f2').replace('{from}', billFilter.from || '…').replace('{to}', billFilter.to || '…')}</span>
                     )}
                   </div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Recipient Email</label>
+
+                  <label className="block text-sm font-medium text-slate-700 mb-1">{t('autofix.kd56a13f2')}</label>
                   <input
                     type="email"
                     value={reportEmail}
-                    onChange={e => setReportEmail(e.target.value)}
-                    placeholder="email@example.com"
-                    className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
+                    onChange={(event) => setReportEmail(event.target.value)}
+                    placeholder={t('autofix.k51ee3aae')}
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
                     autoFocus
-                    onKeyDown={e => { if (e.key === 'Enter' && !sendingReport) sendEmailReport() }}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' && !sendingReport) sendEmailReport()
+                    }}
                   />
+
                   <div className="mt-4 flex items-center justify-end gap-2">
-                    <button
-                      onClick={() => { setEmailDialogOpen(false); setReportEmail('') }}
-                      disabled={sendingReport}
-                      className="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-60"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={sendEmailReport}
-                      disabled={sendingReport || !reportEmail.trim()}
-                      className="rounded-lg bg-[#1C2B4A] px-4 py-2 text-sm font-semibold text-white shadow hover:bg-[#1C2B4A]/90 disabled:opacity-60 disabled:cursor-not-allowed"
-                    >
-                      {sendingReport ? 'Sending…' : 'Send Report'}
+                    <button onClick={() => { setEmailDialogOpen(false); setReportEmail('') }} disabled={sendingReport} className="rounded-xl border border-slate-200 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-60">{t('common.cancel')}</button>
+                    <button onClick={sendEmailReport} disabled={sendingReport || !reportEmail.trim()} className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-slate-800 disabled:opacity-60 disabled:cursor-not-allowed">
+                      {sendingReport ? t('autofix.k795911e8') : t('autofix.kf6f9b3c0')}
                     </button>
                   </div>
                 </div>

src/app/admin/finance-management/vat-edit/page.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React, { useState } from 'react'
 import PageLayout from '../../../components/PageLayout'
 import { useRouter } from 'next/navigation'
@@ -7,6 +10,7 @@ import { importVatCsv } from './hooks/TaxImporter'
 import { exportVatCsv, exportVatPdf } from './hooks/TaxExporter'
 
 export default function VatEditPage() {
+  const { t } = useTranslation();
   const router = useRouter()
   const { rates, loading, error, reload } = useVatRates()
   const [filter, setFilter] = useState('')
@@ -42,7 +46,7 @@ export default function VatEditPage() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
           <div className="rounded-2xl bg-white border border-blue-100 shadow-lg px-8 py-8 flex items-center justify-between">
             <div>
-              <h1 className="text-3xl font-extrabold text-blue-900">Edit VAT rates</h1>
+              <h1 className="text-3xl font-extrabold text-blue-900">{t('autofix.k7572cceb')}</h1>
               <p className="text-sm text-blue-700">Import, export, and review (dummy data).</p>
             </div>
             <button
@@ -62,21 +66,15 @@ export default function VatEditPage() {
                   className="hidden"
                   onChange={e => onImport(e.target.files?.[0] || null)}
                   disabled={importing}
-                />
-                {importing ? 'Importing...' : 'Import CSV'}
-              </label>
+                />{importing ? 'Importing...' : t('autofix.k8a59f09e')}</label>
               <button
                 onClick={() => exportVatCsv(rates)}
                 className="rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50"
-              >
-                Export CSV
-              </button>
+              >{t('autofix.k4c5e8e87')}</button>
               <button
                 onClick={() => exportVatPdf(rates)}
                 className="rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50"
-              >
-                Export PDF
-              </button>
+              >{t('autofix.k4c5ecd73')}</button>
               {importResult && <span className="text-xs text-blue-900 break-all">{importResult}</span>}
             </div>
 
@@ -85,7 +83,7 @@ export default function VatEditPage() {
               <input
                 value={filter}
                 onChange={e => { setFilter(e.target.value); setPage(1); }}
-                placeholder="Filter by country or code"
+                placeholder={t('autofix.kc7bb0c06')}
                 className="w-full rounded-lg border border-gray-200 px-3 py-2 mb-3 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
               />
               <div className="overflow-x-auto">
@@ -96,13 +94,13 @@ export default function VatEditPage() {
                       <th className="px-3 py-2 font-semibold">Code</th>
                       <th className="px-3 py-2 font-semibold">Standard</th>
                       <th className="px-3 py-2 font-semibold">Reduced</th>
-                      <th className="px-3 py-2 font-semibold">Super reduced</th>
+                      <th className="px-3 py-2 font-semibold">{t('autofix.k678d2b40')}</th>
                       <th className="px-3 py-2 font-semibold">Parking</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-gray-100">
                     {loading && (
-                      <tr><td colSpan={6} className="px-3 py-4 text-center text-gray-500">Loading VAT rates…</td></tr>
+                      <tr><td colSpan={6} className="px-3 py-4 text-center text-gray-500">{t('autofix.ka5d50257')}</td></tr>
                     )}
                     {!loading && pageData.map(v => (
                       <tr key={v.country_code} className="border-b last:border-0">
@@ -115,14 +113,14 @@ export default function VatEditPage() {
                       </tr>
                     ))}
                     {!loading && !error && pageData.length === 0 && (
-                      <tr><td colSpan={6} className="px-3 py-4 text-center text-gray-500">No entries found.</td></tr>
+                      <tr><td colSpan={6} className="px-3 py-4 text-center text-gray-500">{t('autofix.kb337d94e')}</td></tr>
                     )}
                   </tbody>
                 </table>
               </div>
               <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mt-4 text-sm text-gray-700">
                 <div className="flex items-center gap-2">
-                  <span>Rows per page:</span>
+                  <span>{t('autofix.k2f4ebc32')}</span>
                   <select
                     value={pageSize}
                     onChange={e => { setPageSize(Number(e.target.value)); setPage(1); }}

src/app/admin/language-management/components/AddLanguageModal.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useTranslation } from '../../../i18n/useTranslation';
+import { useModalAnimation } from '../hooks/useModalAnimation';
+
+type Props = {
+  isOpen: boolean;
+  newCode: string;
+  setNewCode: (value: string) => void;
+  newName: string;
+  setNewName: (value: string) => void;
+  addError: string;
+  setAddError: (value: string) => void;
+  onClose: () => void;
+  onAdd: () => void;
+};
+
+export default function AddLanguageModal({
+  isOpen,
+  newCode,
+  setNewCode,
+  newName,
+  setNewName,
+  addError,
+  setAddError,
+  onClose,
+  onAdd,
+}: Props) {
+  const { t } = useTranslation();
+  const { isRendered, isVisible } = useModalAnimation(isOpen);
+
+  if (!isRendered) return null;
+
+  return (
+    <div className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-md transition-opacity duration-200 ${
+      isVisible ? 'opacity-100' : 'opacity-0'
+    }`}>
+      <div className={`mx-4 w-full max-w-sm rounded-[28px] border border-white/80 bg-white/90 backdrop-blur p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] transform transition-all duration-200 ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
+      }`}>
+        <div className="flex items-start justify-between gap-3 mb-5">
+          <div>
+            <span className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500 shadow-sm mb-2">
+              Languages
+            </span>
+            <h2 className="text-xl font-black tracking-tight text-slate-950">{t('autofix.kf4e45236')}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-xl border border-slate-200 bg-white/80 px-2.5 py-1.5 text-slate-400 hover:text-slate-700 hover:bg-white transition shadow-sm text-base leading-none"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">{t('autofix.k92639a9a')}</label>
+            <input
+              value={newCode}
+              onChange={(e) => setNewCode(e.target.value)}
+              placeholder={t('autofix.k03538639')}
+              className="w-full rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/20 focus:border-slate-300 transition"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">{t('autofix.k926966d0')}</label>
+            <input
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder={t('autofix.ka019b3c0')}
+              className="w-full rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/20 focus:border-slate-300 transition"
+            />
+          </div>
+          {addError && (
+            <p className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">{addError}</p>
+          )}
+        </div>
+
+        <div className="mt-5 flex justify-end gap-2">
+          <button
+            onClick={() => {
+              onClose();
+              setAddError('');
+              setNewCode('');
+              setNewName('');
+            }}
+            className="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition shadow-sm"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onAdd}
+            className="rounded-2xl bg-slate-900 text-white px-5 py-2 text-sm font-semibold shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)] hover:bg-slate-800 transition"
+          >
+            Add
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/language-management/components/CategoryManagerModal.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useTranslation } from '../../../i18n/useTranslation';
+import type { NamespaceCategory } from '../hooks/useNamespaceCategories';
+import { useModalAnimation } from '../hooks/useModalAnimation';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  newCategoryLabel: string;
+  setNewCategoryLabel: (value: string) => void;
+  onCreateCategory: () => void;
+  uncategorizedNamespaces: string[];
+  categoriesWithKnownNamespaces: NamespaceCategory[];
+  namespaces: string[];
+  assignNamespaceByCategory: Record<string, string>;
+  setAssignNamespaceByCategory: (next: Record<string, string> | ((prev: Record<string, string>) => Record<string, string>)) => void;
+  expandedCategoryId: string | null;
+  setExpandedCategoryId: (value: string | null | ((prev: string | null) => string | null)) => void;
+  dragNamespace: string | null;
+  setDragNamespace: (value: string | null) => void;
+  addNamespaceToCategory: (categoryId: string, namespace: string) => void;
+  removeNamespaceFromCategory: (categoryId: string, namespace: string) => void;
+  deleteCategory: (categoryId: string) => void;
+};
+
+export default function CategoryManagerModal({
+  isOpen,
+  onClose,
+  newCategoryLabel,
+  setNewCategoryLabel,
+  onCreateCategory,
+  uncategorizedNamespaces,
+  categoriesWithKnownNamespaces,
+  namespaces,
+  assignNamespaceByCategory,
+  setAssignNamespaceByCategory,
+  expandedCategoryId,
+  setExpandedCategoryId,
+  dragNamespace,
+  setDragNamespace,
+  addNamespaceToCategory,
+  removeNamespaceFromCategory,
+  deleteCategory,
+}: Props) {
+  const { t } = useTranslation();
+  const { isRendered, isVisible } = useModalAnimation(isOpen);
+
+  if (!isRendered) return null;
+
+  return (
+    <div className={`fixed inset-0 z-[150] flex items-center justify-center bg-black/30 backdrop-blur-md transition-opacity duration-200 ${
+      isVisible ? 'opacity-100' : 'opacity-0'
+    }`}>
+      <div className={`mx-4 w-full max-w-5xl rounded-[30px] border border-white/80 bg-white/88 backdrop-blur overflow-hidden shadow-[0_32px_80px_-40px_rgba(15,23,42,0.42)] transform transition-all duration-200 ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
+      }`}>
+        {/* Header */}
+        <div className="px-6 py-5 border-b border-white/60 flex items-start justify-between gap-4 bg-white/40">
+          <div>
+            <span className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-500 shadow-sm mb-2">
+              Admin
+            </span>
+            <h2 className="text-xl font-black tracking-tight text-slate-950">{t('autofix.kef9de7f0')}</h2>
+            <p className="text-xs text-slate-500 mt-0.5">{t('autofix.kc4671abe')}</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-xl border border-slate-200 bg-white/80 px-2.5 py-1.5 text-slate-400 hover:text-slate-700 hover:bg-white transition shadow-sm text-base leading-none shrink-0"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-5 max-h-[70vh] overflow-y-auto space-y-4">
+          {/* Create category row */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <input
+              value={newCategoryLabel}
+              onChange={(e) => setNewCategoryLabel(e.target.value)}
+              placeholder={t('autofix.ke52ed6e9')}
+              className="w-56 rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/20 transition"
+            />
+            <button
+              type="button"
+              onClick={onCreateCategory}
+              className="rounded-2xl bg-slate-900 text-white px-4 py-2 text-sm font-semibold shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)] hover:bg-slate-800 transition"
+            >
+              {t('autofix.k1db86f96')}
+            </button>
+          </div>
+
+          <div className="space-y-3">
+            {/* Uncategorized pool */}
+            <div className="rounded-[20px] border border-white/80 bg-white/70 backdrop-blur p-4 shadow-sm">
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-2.5">{t('autofix.k505ebdae')}</p>
+              <div className="flex flex-wrap gap-2 min-h-10">
+                {uncategorizedNamespaces.map((ns) => (
+                  <span
+                    key={ns}
+                    draggable
+                    onDragStart={() => setDragNamespace(ns)}
+                    className="cursor-grab rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 transition"
+                    title={t('autofix.k66edf1eb')}
+                  >
+                    {ns}
+                  </span>
+                ))}
+                {uncategorizedNamespaces.length === 0 && (
+                  <span className="text-xs text-slate-400">{t('autofix.k741a01f7')}</span>
+                )}
+              </div>
+            </div>
+
+            {/* Category list */}
+            <div className="space-y-2">
+              {categoriesWithKnownNamespaces.map((cat) => {
+                const availableToAssign = namespaces.filter((ns) => !cat.namespaces.includes(ns));
+                const selectValue = assignNamespaceByCategory[cat.id] ?? '';
+                const isExpanded = expandedCategoryId === cat.id;
+
+                return (
+                  <div
+                    key={cat.id}
+                    onDragEnter={() => {
+                      if (!dragNamespace) return;
+                      if (expandedCategoryId !== cat.id) setExpandedCategoryId(cat.id);
+                    }}
+                    onDragOver={(e) => e.preventDefault()}
+                    onDrop={() => {
+                      if (dragNamespace) {
+                        addNamespaceToCategory(cat.id, dragNamespace);
+                        setDragNamespace(null);
+                      }
+                    }}
+                    className="rounded-[20px] border border-white/80 bg-white/70 backdrop-blur overflow-hidden shadow-sm"
+                  >
+                    {/* Category header row */}
+                    <div
+                      className="px-4 py-3 flex items-center justify-between gap-2 cursor-pointer hover:bg-white/60 transition"
+                      onClick={() => setExpandedCategoryId((prev) => (prev === cat.id ? null : cat.id))}
+                    >
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-bold text-slate-950">{cat.label}</span>
+                        <span className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-500 shadow-sm">
+                          {cat.namespaces.length}
+                        </span>
+                        <span className="text-xs text-slate-400">{isExpanded ? t('autofix.k5daa1471') : t('autofix.k893106ba')}</span>
+                      </div>
+                      {cat.isCustom && (
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            deleteCategory(cat.id);
+                          }}
+                          className="rounded-2xl border border-red-200 bg-red-50 px-3 py-1 text-xs font-medium text-red-600 hover:bg-red-100 transition"
+                        >
+                          Delete
+                        </button>
+                      )}
+                    </div>
+
+                    {isExpanded && (
+                      <div className="border-t border-white/60 p-4 space-y-3 bg-white/40">
+                        <div className="flex flex-col lg:flex-row items-stretch gap-2">
+                          <select
+                            value={selectValue}
+                            onChange={(e) => setAssignNamespaceByCategory((prev) => ({ ...prev, [cat.id]: e.target.value }))}
+                            className="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-slate-900/20 transition"
+                          >
+                            <option value="">{t('autofix.k0cdc3ee9')}</option>
+                            {availableToAssign.map((ns) => (
+                              <option key={ns} value={ns}>{ns}</option>
+                            ))}
+                          </select>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              if (!selectValue) return;
+                              addNamespaceToCategory(cat.id, selectValue);
+                              setAssignNamespaceByCategory((prev) => ({ ...prev, [cat.id]: '' }));
+                            }}
+                            className="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition"
+                          >
+                            Add
+                          </button>
+                        </div>
+
+                        <div className="flex flex-wrap gap-2 min-h-10 rounded-2xl border border-dashed border-slate-200 bg-white/60 p-3">
+                          {cat.namespaces.map((ns) => (
+                            <span
+                              key={ns}
+                              draggable
+                              onDragStart={() => setDragNamespace(ns)}
+                              className="group cursor-grab inline-flex items-center rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-700 hover:border-indigo-300 transition"
+                            >
+                              {ns}
+                              <button
+                                type="button"
+                                onClick={() => removeNamespaceFromCategory(cat.id, ns)}
+                                className="ml-1.5 text-indigo-400 group-hover:text-red-500 transition leading-none"
+                                title={t('autofix.ka6791a02')}
+                              >
+                                ×
+                              </button>
+                            </span>
+                          ))}
+                          {cat.namespaces.length === 0 && (
+                            <span className="text-xs text-slate-400">{t('autofix.kf3c3223a')}</span>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-white/60 bg-white/40 flex justify-end">
+          <button
+            onClick={onClose}
+            className="rounded-2xl bg-slate-900 text-white px-5 py-2 text-sm font-semibold shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)] hover:bg-slate-800 transition"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/language-management/components/DeleteLanguageModal.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { LanguageEntry } from '../hooks/useLanguageManagementTranslations';
+import { useTranslation } from '../../../i18n/useTranslation';
+import { useModalAnimation } from '../hooks/useModalAnimation';
+
+type Props = {
+  deleteTarget: string | null;
+  allLanguages: LanguageEntry[];
+  onClose: () => void;
+  onDelete: (code: string) => void;
+};
+
+export default function DeleteLanguageModal({ deleteTarget, allLanguages, onClose, onDelete }: Props) {
+  const { t } = useTranslation();
+  const [displayTarget, setDisplayTarget] = useState<string | null>(deleteTarget);
+  const isOpen = Boolean(deleteTarget);
+  const { isRendered, isVisible } = useModalAnimation(isOpen);
+
+  useEffect(() => {
+    if (deleteTarget) setDisplayTarget(deleteTarget);
+  }, [deleteTarget]);
+
+  if (!isRendered || !displayTarget) return null;
+
+  const languageName = allLanguages.find((l) => l.code === displayTarget)?.name ?? displayTarget;
+
+  return (
+    <div className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-md transition-opacity duration-200 ${
+      isVisible ? 'opacity-100' : 'opacity-0'
+    }`}>
+      <div className={`mx-4 w-full max-w-sm rounded-[28px] border border-white/80 bg-white/90 backdrop-blur p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] transform transition-all duration-200 ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
+      }`}>
+        <div className="flex items-start justify-between gap-3 mb-5">
+          <div>
+            <span className="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-red-600 shadow-sm mb-2">
+              Destructive
+            </span>
+            <h2 className="text-xl font-black tracking-tight text-slate-950">{t('autofix.kda5f982e')}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-xl border border-slate-200 bg-white/80 px-2.5 py-1.5 text-slate-400 hover:text-slate-700 hover:bg-white transition shadow-sm text-base leading-none"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="rounded-2xl border border-red-100 bg-red-50/60 px-4 py-3 mb-5">
+          <p className="text-sm text-slate-700">
+            Delete <strong className="text-slate-950">{languageName}</strong>?{' '}
+            All translations for this language will be permanently removed.
+          </p>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition shadow-sm"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={() => onDelete(displayTarget)}
+            className="rounded-2xl bg-red-600 text-white px-5 py-2 text-sm font-semibold shadow-[0_18px_40px_-24px_rgba(220,38,38,0.7)] hover:bg-red-700 transition"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/language-management/components/LanguageManagementTopSection.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from '../../../i18n/useTranslation';
+
+type LanguageEntry = {
+  code: string;
+  name: string;
+};
+
+type Props = {
+  headerRef: RefObject<HTMLDivElement | null>;
+  totalKeys: number;
+  onScan: () => void;
+  isScanning: boolean;
+  isAutoFixing: boolean;
+  onBackToAdmin: () => void;
+  isDirty: boolean;
+  onSave: () => void;
+  saved: boolean;
+  saveError: string;
+  allLanguages: LanguageEntry[];
+  activeLang: string;
+  setActiveLang: (code: string) => void;
+  isBuiltin: (code: string) => boolean;
+  onDeleteLanguageRequest: (code: string) => void;
+  onOpenAddLanguage: () => void;
+  allTabStats: { total: number; translated: number; missing: number };
+  translationProgressPercent: number;
+  wizardMissingKeysCount: number;
+  onOpenTranslationWizard: () => void;
+};
+
+export default function LanguageManagementTopSection({
+  headerRef,
+  totalKeys,
+  onScan,
+  isScanning,
+  isAutoFixing,
+  onBackToAdmin,
+  isDirty,
+  onSave,
+  saved,
+  saveError,
+  allLanguages,
+  activeLang,
+  setActiveLang,
+  isBuiltin,
+  onDeleteLanguageRequest,
+  onOpenAddLanguage,
+  allTabStats,
+  translationProgressPercent,
+  wizardMissingKeysCount,
+  onOpenTranslationWizard,
+}: Props) {
+  const { t } = useTranslation();
+
+  const prioritizedLanguages = useMemo(() => {
+    const byCode = new Map(allLanguages.map((lang) => [lang.code, lang]));
+    const english = byCode.get('en');
+    const german = byCode.get('de');
+    const rest = allLanguages
+      .filter((lang) => lang.code !== 'en' && lang.code !== 'de')
+      .sort((a, b) => a.name.localeCompare(b.name));
+    return [english, german, ...rest].filter((lang): lang is LanguageEntry => Boolean(lang));
+  }, [allLanguages]);
+
+  const englishLanguage = prioritizedLanguages.find((lang) => lang.code === 'en');
+  const germanLanguage = prioritizedLanguages.find((lang) => lang.code === 'de');
+  const otherLanguages = prioritizedLanguages.filter((lang) => lang.code !== 'en' && lang.code !== 'de');
+
+  const renderLanguageButton = (lang: LanguageEntry) => (
+    <button
+      key={lang.code}
+      onClick={() => setActiveLang(lang.code)}
+      className={`flex shrink-0 items-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-medium transition whitespace-nowrap ${
+        activeLang === lang.code
+          ? 'bg-slate-900 text-white shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)]'
+          : 'bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900 border border-transparent hover:border-slate-200'
+      }`}
+    >
+      {lang.name}
+      <span className={`text-xs ${activeLang === lang.code ? 'opacity-50' : 'opacity-40'}`}>
+        {lang.code}
+      </span>
+      {!isBuiltin(lang.code) && (
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDeleteLanguageRequest(lang.code);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              e.stopPropagation();
+              onDeleteLanguageRequest(lang.code);
+            }
+          }}
+          title={t('autofix.k5fcc9b0e')}
+          className={`ml-0.5 inline-flex items-center justify-center rounded-full w-4 h-4 text-xs leading-none cursor-pointer transition ${
+            activeLang === lang.code
+              ? 'bg-white/20 hover:bg-white/40 text-white'
+              : 'bg-slate-200 hover:bg-red-100 text-slate-500 hover:text-red-600'
+          }`}
+        >
+          ×
+        </span>
+      )}
+    </button>
+  );
+
+  return (
+    <>
+      {/* ── Hero header card ─────────────────────────────────── */}
+      <div
+        ref={headerRef}
+        className="rounded-[30px] border border-white/80 bg-white/85 px-5 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.38)] backdrop-blur md:px-8 md:py-8"
+      >
+        <div className="space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+            {t('autofix.ka8c928ac')}
+          </div>
+          <div className="flex items-start justify-between gap-4 flex-wrap">
+            <div>
+              <h1 className="text-3xl font-black tracking-tight text-slate-950 md:text-4xl">
+                {t('autofix.k346a2c64')}
+              </h1>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-600">
+                {t('autofix.k7227f13d')} {totalKeys} {t('autofix.k511d7fab')}
+              </p>
+            </div>
+            <div className="flex items-center gap-2 flex-wrap shrink-0">
+              <button
+                onClick={onScan}
+                disabled={isScanning || isAutoFixing}
+                className="flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 transition disabled:opacity-50"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+                </svg>
+                {isScanning ? t('autofix.kf191f6df5') : t('autofix.k9863fa5')}
+              </button>
+              <button
+                onClick={onBackToAdmin}
+                className="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 transition"
+              >
+                {t('autofix.kea7cde7a')}
+              </button>
+              {saved && !isDirty && (
+                <span className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">{t('autofix.kac6aab53')}</span>
+              )}
+            </div>
+          </div>
+
+          {/* stat pills */}
+          <div className="flex flex-wrap gap-2 text-xs text-slate-600">
+            <span className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1.5 font-medium text-slate-700 shadow-sm">
+              {allLanguages.length} {allLanguages.length === 1 ? t('autofix.k20eb1f87') : t('autofix.ka6cf3286')}
+            </span>
+            <span className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1.5 font-medium text-slate-700 shadow-sm">
+              {totalKeys} {t('autofix.k3931709b')}
+            </span>
+            {activeLang !== 'en' && (
+              <span className={`inline-flex items-center rounded-full border px-3 py-1.5 font-medium shadow-sm ${
+                allTabStats.missing > 0
+                  ? 'border-red-200 bg-red-50 text-red-700'
+                  : 'border-emerald-200 bg-emerald-50 text-emerald-700'
+              }`}>
+                {allTabStats.missing > 0 ? `${allTabStats.missing} ${t('autofix.k571ffd91')}` : t('autofix.kdcc78d97')}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Save error banner ────────────────────────────────── */}
+      {saveError && (
+        <div className="rounded-2xl border border-red-200 bg-red-50/80 backdrop-blur px-5 py-3 text-sm text-red-700 shadow-sm">
+          {saveError}
+        </div>
+      )}
+
+      {/* ── Language tabs card ───────────────────────────────── */}
+      <div className="rounded-[28px] border border-white/80 bg-white/85 px-4 py-3 shadow-[0_22px_60px_-34px_rgba(15,23,42,0.28)] backdrop-blur md:px-5">
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {englishLanguage && renderLanguageButton(englishLanguage)}
+          {germanLanguage && renderLanguageButton(germanLanguage)}
+          {otherLanguages.map((lang) => renderLanguageButton(lang))}
+          <button
+            onClick={onOpenAddLanguage}
+            className="flex shrink-0 items-center gap-1.5 px-4 py-2.5 rounded-2xl text-sm font-medium text-slate-400 border border-dashed border-slate-300 hover:border-slate-400 hover:text-slate-600 transition whitespace-nowrap"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>{t('autofix.k7a515516')}</button>
+        </div>
+      </div>
+
+      {/* ── Translation progress card ────────────────────────── */}
+      {activeLang !== 'en' && (
+        <div className="rounded-[28px] border border-white/80 bg-white/85 px-5 py-4 shadow-[0_22px_60px_-34px_rgba(15,23,42,0.28)] backdrop-blur flex items-center gap-5">
+          <div className="flex-1 space-y-1.5">
+            <div className="flex justify-between text-xs text-slate-500">
+              <span>{t('autofix.kb8f33873')}</span>
+              <span className="font-medium text-slate-700">{allTabStats.translated} / {allTabStats.total} {t('autofix.k33f55455')}</span>
+            </div>
+            <div className="h-2 rounded-full bg-slate-100 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-slate-900 transition-all duration-500"
+                style={{ width: `${translationProgressPercent}%` }}
+              />
+            </div>
+          </div>
+          <span className="text-2xl font-black tracking-tight text-slate-950 tabular-nums">
+            {translationProgressPercent}%
+          </span>
+        </div>
+      )}
+
+      {/* ── Wizard nudge card ────────────────────────────────── */}
+      {activeLang !== 'en' && allTabStats.missing > 0 && wizardMissingKeysCount > 0 && (
+        <div className="rounded-[28px] border border-indigo-200/80 bg-indigo-50/80 backdrop-blur px-5 py-4 shadow-[0_22px_60px_-34px_rgba(99,102,241,0.3)] flex items-start justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold text-indigo-950">{t('autofix.k5e5e8744')}</p>
+            <p className="text-xs text-indigo-800/80 mt-1">
+              {allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang} still has{' '}
+              <span className="font-semibold">{wizardMissingKeysCount}</span>{t('autofix.k0a50d234')}</p>
+          </div>
+          <button
+            type="button"
+            onClick={onOpenTranslationWizard}
+            className="shrink-0 rounded-2xl bg-slate-900 text-white px-4 py-2 text-xs font-semibold shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)] hover:bg-slate-800 transition"
+          >
+            {t('autofix.k725dd1d6')}
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

src/app/admin/language-management/components/ScanFixPanel.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
+type Props = {
+  fixableFiles: string[]
+  selectedFiles: string[]
+  isAutoFixing: boolean
+  forceConvertToClient: boolean
+  onToggleFile: (file: string) => void
+  onSelectAll: () => void
+  onClear: () => void
+  onToggleForceConvertToClient: () => void
+  onRunFixSelected: () => void
+}
+
+export default function ScanFixPanel({
+  fixableFiles,
+  selectedFiles,
+  isAutoFixing,
+  forceConvertToClient,
+  onToggleFile,
+  onSelectAll,
+  onClear,
+  onToggleForceConvertToClient,
+  onRunFixSelected,
+}: Props) {
+  const { t } = useTranslation();
+  return (
+    <div className="mb-5 rounded-xl border border-indigo-200 bg-indigo-50/40 p-4">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
+        <div>
+          <h3 className="text-sm font-semibold text-indigo-800">{t('autofix.k43218db0')}</h3>
+          <p className="text-xs text-indigo-700/90 mt-1">{t('autofix.k34a0a2e4')}</p>
+          <label className="mt-2 inline-flex items-center gap-2 text-xs text-indigo-800">
+            <input
+              type="checkbox"
+              checked={forceConvertToClient}
+              onChange={onToggleForceConvertToClient}
+              className="h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />{t('autofix.k68c88f41')}</label>
+          <p className="text-[11px] text-indigo-700/80 mt-1">{t('autofix.k6569783c')}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onSelectAll}
+            className="rounded-md border border-indigo-200 bg-white px-2.5 py-1.5 text-xs font-medium text-indigo-700 hover:bg-indigo-50"
+          >{t('autofix.k4c6eb72c')}</button>
+          <button
+            type="button"
+            onClick={onClear}
+            className="rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {fixableFiles.length === 0 ? (
+        <div className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">{t('autofix.ke3480838')}</div>
+      ) : (
+        <div className="mt-3 space-y-2 max-h-44 overflow-y-auto pr-1">
+          {fixableFiles.map((file) => {
+            const checked = selectedFiles.includes(file)
+            return (
+              <label
+                key={file}
+                className="flex items-center gap-2 rounded-md border border-indigo-100 bg-white px-3 py-2 text-xs text-indigo-900"
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={() => onToggleFile(file)}
+                  className="h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+                <span className="font-mono break-all">{file}</span>
+              </label>
+            )
+          })}
+        </div>
+      )}
+
+      <div className="mt-3 flex items-center justify-between gap-3 flex-wrap">
+        <p className="text-xs text-indigo-700">
+          Selected: {selectedFiles.length} / {fixableFiles.length}
+        </p>
+        <button
+          type="button"
+          disabled={isAutoFixing || selectedFiles.length === 0}
+          onClick={onRunFixSelected}
+          className="rounded-md bg-indigo-700 text-white px-3 py-1.5 text-xs font-semibold hover:bg-indigo-600 disabled:opacity-50"
+        >
+          {isAutoFixing ? 'Applying fix...' : `Fix selected files (${selectedFiles.length})`}
+        </button>
+      </div>
+    </div>
+  )
+}

src/app/admin/language-management/components/ScanResultsModal.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+import ScanFixPanel from './ScanFixPanel';
+import { useTranslation } from '../../../i18n/useTranslation';
+import type { WorkspaceScanResult } from '../hooks/useI18nScanWorkflow';
+import { useModalAnimation } from '../hooks/useModalAnimation';
+
+type LanguageEntry = {
+  code: string;
+  name: string;
+};
+
+type NamespaceScanResult = {
+  ns: string;
+  total: number;
+  translated: number;
+  missing: number;
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  lastScanTime: Date | null;
+  workspaceScan: WorkspaceScanResult | null;
+  totalKeys: number;
+  namespacesCount: number;
+  allLanguages: LanguageEntry[];
+  activeLang: string;
+  scanResults: NamespaceScanResult[];
+  scanError: string | null;
+  isScanning: boolean;
+  isAutoFixing: boolean;
+  isAddingMissingKeys: boolean;
+  fixableFiles: string[];
+  selectedFiles: string[];
+  forceConvertToClient: boolean;
+  onToggleFile: (file: string) => void;
+  onSelectAll: () => void;
+  onClear: () => void;
+  onToggleForceConvertToClient: () => void;
+  onRunFixSelected: () => void;
+  onAddMissingKeys: () => void;
+};
+
+export default function ScanResultsModal({
+  isOpen,
+  onClose,
+  lastScanTime,
+  workspaceScan,
+  totalKeys,
+  namespacesCount,
+  allLanguages,
+  activeLang,
+  scanResults,
+  scanError,
+  isScanning,
+  isAutoFixing,
+  isAddingMissingKeys,
+  fixableFiles,
+  selectedFiles,
+  forceConvertToClient,
+  onToggleFile,
+  onSelectAll,
+  onClear,
+  onToggleForceConvertToClient,
+  onRunFixSelected,
+  onAddMissingKeys,
+}: Props) {
+  const { t } = useTranslation();
+  const { isRendered, isVisible } = useModalAnimation(isOpen);
+
+  if (!isRendered) return null;
+
+  const totalTranslated = scanResults.reduce((sum, row) => sum + row.translated, 0);
+  const coveragePercent = totalKeys === 0
+    ? 100
+    : Math.round((totalTranslated / totalKeys) * 100);
+
+  return (
+    <div className={`fixed inset-0 z-[9999] flex items-start justify-center pt-14 pb-6 bg-black/50 backdrop-blur-sm transition-opacity duration-200 ${
+      isVisible ? 'opacity-100' : 'opacity-0'
+    }`}>
+      <div className={`mx-3 w-full max-w-[1400px] rounded-3xl border border-slate-200 bg-white shadow-2xl flex flex-col max-h-[calc(100vh-5rem)] overflow-hidden transform transition-all duration-200 ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
+      }`}>
+        <div className="px-8 pt-6 pb-5 border-b border-slate-200 bg-gradient-to-b from-slate-50 to-white">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h2 className="text-2xl font-bold text-[#1C2B4A]">{t('autofix.kb2217bdf')}</h2>
+              <p className="text-sm text-slate-600 mt-1">
+                {workspaceScan
+                  ? `${workspaceScan.scannedFiles} files across ${workspaceScan.scannedDirectories} directories scanned`
+                  : `${totalKeys} keys across ${namespacesCount} namespaces`}
+                {lastScanTime && (
+                  <span className="ml-2 text-xs text-slate-500">
+                    · Scanned {lastScanTime.toLocaleTimeString()}
+                  </span>
+                )}
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-slate-400 hover:text-slate-700 ml-4 text-xl leading-none"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div className="mt-4">
+            <div className="flex justify-between text-xs text-slate-500 mb-1">
+              <span className="font-medium">Overall coverage ({allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang})</span>
+              <span>
+                {activeLang === 'en'
+                  ? `${totalKeys} / ${totalKeys}`
+                  : `${totalTranslated} / ${totalKeys}`
+                }
+              </span>
+            </div>
+            <div className="h-2.5 rounded-full bg-slate-100 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-[#1C2B4A] transition-all"
+                style={{ width: activeLang === 'en' ? '100%' : `${coveragePercent}%` }}
+              />
+            </div>
+          </div>
+
+          {workspaceScan && (
+            <div className="mt-5 grid grid-cols-2 lg:grid-cols-6 gap-2.5">
+              <div className="rounded-xl border border-slate-200 bg-white px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-slate-500">{t('autofix.k91052e3f')}</p>
+                <p className="text-sm font-semibold text-[#1C2B4A]">{workspaceScan.translationCallCount}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-slate-500">{t('autofix.k90a6e795')}</p>
+                <p className="text-sm font-semibold text-[#1C2B4A]">{workspaceScan.uniqueKeyCount}</p>
+              </div>
+              <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-red-600">{t('autofix.k8cf40180')}</p>
+                <p className="text-sm font-semibold text-red-600">{workspaceScan.missingKeys.length}</p>
+              </div>
+              <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-amber-700">{t('autofix.k1bf4ffa4')}</p>
+                <p className="text-sm font-semibold text-amber-700">{workspaceScan.untranslatedLiterals.length}</p>
+              </div>
+              <div className="rounded-xl border border-green-200 bg-green-50 px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-green-700">{t('autofix.k9b173204')}</p>
+                <p className="text-sm font-semibold text-green-700">{workspaceScan.changedFileCount ?? 0}</p>
+              </div>
+              <div className="rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5">
+                <p className="text-[11px] uppercase tracking-wide text-indigo-700">{t('autofix.k60874ea3')}</p>
+                <p className="text-sm font-semibold text-indigo-700">{workspaceScan.createdKeyCount ?? 0}</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="overflow-y-auto flex-1 px-8 py-5">
+          {scanError && (
+            <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+              {scanError}
+            </div>
+          )}
+
+          {isScanning && (
+            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">{t('autofix.k0d9c63c5')}</div>
+          )}
+
+          {isAutoFixing && (
+            <div className="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm text-indigo-700">{t('autofix.ka802064d')}</div>
+          )}
+
+          {isAddingMissingKeys && (
+            <div className="mb-4 rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-2 text-sm text-cyan-700">{t('autofix.k68e73120')}</div>
+          )}
+
+          <div className="grid grid-cols-1 xl:grid-cols-12 gap-5 items-start">
+            <div className="xl:col-span-5 space-y-4">
+              <ScanFixPanel
+                fixableFiles={fixableFiles}
+                selectedFiles={selectedFiles}
+                isAutoFixing={isAutoFixing}
+                forceConvertToClient={forceConvertToClient}
+                onToggleFile={onToggleFile}
+                onSelectAll={onSelectAll}
+                onClear={onClear}
+                onToggleForceConvertToClient={onToggleForceConvertToClient}
+                onRunFixSelected={onRunFixSelected}
+              />
+
+              {workspaceScan && (workspaceScan.changedFileCount ?? 0) > 0 && (
+                <div className="rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
+                  Auto-fix updated {(workspaceScan.changedFileCount ?? 0)} files and created {(workspaceScan.createdKeyCount ?? 0)} translation keys.
+                </div>
+              )}
+
+              {workspaceScan && Array.isArray(workspaceScan.changedFiles) && workspaceScan.changedFiles.length > 0 && (
+                <div className="rounded-xl border border-green-200 bg-green-50/50 p-4">
+                  <h3 className="text-sm font-semibold text-green-700 mb-2">{t('autofix.k5ad4d864')}</h3>
+                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                    {workspaceScan.changedFiles.map((entry) => (
+                      <div key={entry.file} className="rounded-md border border-green-100 bg-white px-3 py-2">
+                        <p className="font-mono text-xs text-green-800">{entry.file}</p>
+                        <p className="text-[11px] text-gray-600 mt-1">
+                          {entry.replacements} replacements
+                          {entry.addedImport ? ' · import added' : ''}
+                          {entry.addedHook ? ' · hook added' : ''}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {workspaceScan && Array.isArray(workspaceScan.skippedFiles) && workspaceScan.skippedFiles.length > 0 && (
+                <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
+                  <h3 className="text-sm font-semibold text-gray-700 mb-2">{t('autofix.k56a52520')}</h3>
+                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                    {workspaceScan.skippedFiles.map((entry) => (
+                      <div key={entry.file} className="rounded-md border border-gray-100 bg-white px-3 py-2">
+                        <p className="font-mono text-xs text-gray-700">{entry.file}</p>
+                        <p className="text-[11px] text-gray-500 mt-1">{entry.reason}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {workspaceScan && Array.isArray(workspaceScan.autoFixDebug) && workspaceScan.autoFixDebug.length > 0 && (
+                <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
+                  <h3 className="text-sm font-semibold text-slate-700 mb-2">{t('autofix.kc8034db6')}</h3>
+                  <p className="text-xs text-slate-600 mb-3">{t('autofix.k9bd0812b')}</p>
+                  <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
+                    {workspaceScan.autoFixDebug.slice(0, 200).map((entry) => (
+                      <div key={`${entry.file}-${entry.status}-${entry.beforeLiteralCount}-${entry.afterLiteralCount}`} className="rounded-md border border-slate-200 bg-white px-3 py-2">
+                        <div className="flex items-center justify-between gap-2">
+                          <p className="font-mono text-xs text-slate-800 break-all">{entry.file}</p>
+                          <span className={`text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full ${
+                            entry.status === 'changed'
+                              ? 'bg-green-100 text-green-700'
+                              : entry.status === 'skipped'
+                                ? 'bg-amber-100 text-amber-700'
+                                : 'bg-slate-100 text-slate-700'
+                          }`}>
+                            {entry.status}
+                          </span>
+                        </div>
+                        <p className="text-[11px] text-slate-600 mt-1">
+                          before: {entry.beforeLiteralCount} · text: {entry.textReplacements} · attr: {entry.attrReplacements} · after: {entry.afterLiteralCount}
+                        </p>
+                        {entry.reason && <p className="text-[11px] text-slate-500 mt-1">{entry.reason}</p>}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="xl:col-span-7 space-y-4">
+              <div className="rounded-xl border border-slate-200 bg-slate-50/40 p-4">
+                <h3 className="text-sm font-semibold text-[#1C2B4A] mb-3">{t('autofix.kbe30c353')}</h3>
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-gray-100">
+                      <th className="pb-2 text-left font-medium text-gray-500">Namespace</th>
+                      <th className="pb-2 text-right font-medium text-gray-500">Keys</th>
+                      <th className="pb-2 text-right font-medium text-gray-500">Translated</th>
+                      <th className="pb-2 text-right font-medium text-gray-500">Missing</th>
+                      <th className="pb-2 text-left pl-4 font-medium text-gray-500">Coverage</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-50">
+                    {scanResults.map(({ ns, total, translated, missing }) => {
+                      const pct = total === 0 ? 100 : Math.round((translated / total) * 100);
+                      return (
+                        <tr key={ns} className="hover:bg-gray-50">
+                          <td className="py-2 font-mono text-xs text-[#1C2B4A]">{ns}</td>
+                          <td className="py-2 text-right text-gray-500">{total}</td>
+                          <td className="py-2 text-right text-green-600 font-medium">{translated}</td>
+                          <td className={`py-2 text-right font-medium ${missing > 0 ? 'text-red-500' : 'text-gray-400'}`}>
+                            {missing}
+                          </td>
+                          <td className="py-2 pl-4">
+                            <div className="flex items-center gap-2">
+                              <div className="w-24 h-1.5 rounded-full bg-gray-100 overflow-hidden">
+                                <div
+                                  className={`h-full rounded-full ${
+                                    pct === 100 ? 'bg-green-500' : pct >= 50 ? 'bg-yellow-400' : 'bg-red-400'
+                                  }`}
+                                  style={{ width: `${pct}%` }}
+                                />
+                              </div>
+                              <span className="text-xs text-gray-500">{pct}%</span>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+
+              {workspaceScan && workspaceScan.missingKeys.length > 0 && (
+                <div className="rounded-xl border border-red-200 bg-red-50/50 p-4">
+                  <div className="mb-2 flex items-center justify-between gap-3">
+                    <h3 className="text-sm font-semibold text-red-700">{t('autofix.kae63e46a')}</h3>
+                    <button
+                      type="button"
+                      onClick={onAddMissingKeys}
+                      disabled={isAddingMissingKeys || isAutoFixing || isScanning}
+                      className="rounded-md bg-red-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-60"
+                    >{t('autofix.kbd3f0f44')}</button>
+                  </div>
+                  <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                    {workspaceScan.missingKeys.map((entry) => (
+                      <div key={entry.key} className="rounded-md border border-red-100 bg-white px-3 py-2">
+                        <p className="font-mono text-xs text-red-700">{entry.key}</p>
+                        <p className="text-[11px] text-gray-500 mt-1">
+                          {entry.files.slice(0, 3).join(', ')}
+                          {entry.files.length > 3 ? ` (+${entry.files.length - 3} more)` : ''}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {workspaceScan && workspaceScan.untranslatedLiterals.length > 0 && (
+                <div className="rounded-xl border border-amber-200 bg-amber-50/50 p-4">
+                  <h3 className="text-sm font-semibold text-amber-700 mb-2">{t('autofix.k14eb468b')}</h3>
+                  <p className="text-xs text-amber-700/80 mb-3">
+                    These literals appear directly in JSX. Replace them with t('...') to make the page translatable.
+                  </p>
+                  <div className="space-y-2 max-h-56 overflow-y-auto pr-1">
+                    {workspaceScan.untranslatedLiterals.slice(0, 80).map((entry) => (
+                      <div key={entry.text} className="rounded-md border border-amber-100 bg-white px-3 py-2">
+                        <p className="text-xs font-medium text-amber-800">{entry.text}</p>
+                        <p className="text-[11px] text-gray-500 mt-1">
+                          {entry.files.slice(0, 3).join(', ')}
+                          {entry.files.length > 3 ? ` (+${entry.files.length - 3} more)` : ''}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="px-8 py-4 border-t border-slate-200 flex justify-between items-center bg-white">
+          <p className="text-xs text-slate-500">
+            Scan now checks workspace files (pages, components, hooks, utils) and compares used keys against en.ts.
+          </p>
+          <button
+            onClick={onClose}
+            className="rounded-md bg-[#1C2B4A] text-white px-4 py-2 text-sm font-semibold hover:bg-[#1C2B4A]/90"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/language-management/components/TranslationCoverageEditor.tsx

@@ -0,0 +1,527 @@
+'use client';
+
+import type { MutableRefObject, RefObject } from 'react';
+import { getEnglishValue, useTranslation } from '../../../i18n/useTranslation';
+import type { NamespaceCategory } from '../hooks/useNamespaceCategories';
+
+type LanguageEntry = {
+  code: string;
+  name: string;
+};
+
+type Props = {
+  activeCategory: string;
+  setActiveCategory: (category: string) => void;
+  categoriesWithKnownNamespaces: NamespaceCategory[];
+  allTabStats: { total: number; translated: number; missing: number };
+  categoryTabStats: Record<string, { total: number; translated: number; missing: number }>;
+  globalTabStats: { total: number; translated: number; missing: number };
+  activeLang: string;
+  allLanguages: LanguageEntry[];
+  search: string;
+  setSearch: (value: string) => void;
+  autoScrollOnPanelOpen: boolean;
+  setAutoScrollOnPanelOpen: (value: boolean) => void;
+  autoScrollOnSave: boolean;
+  setAutoScrollOnSave: (value: boolean) => void;
+  newGlobalKeySelection: string;
+  setNewGlobalKeySelection: (value: string) => void;
+  availableGlobalKeyOptions: string[];
+  addGlobalKey: (key: string) => void;
+  globalFilteredKeys: string[];
+  removeGlobalKey: (key: string) => void;
+  getDisplayValue: (key: string) => string;
+  translations: Record<string, Record<string, string>>;
+  handleChange: (key: string, value: string) => void;
+  globalKeySet: Set<string>;
+  englishReferenceKeySet: Set<string>;
+  setEnglishReferenceForKey: (key: string, enabled: boolean) => void;
+  filteredNs: string[];
+  filteredGroups: Record<string, string[]>;
+  activeNamespacePanel: string | null;
+  setActiveNamespacePanel: (next: string | null | ((prev: string | null) => string | null)) => void;
+  namespaceTranslationStats: Record<string, { total: number; translated: number; missing: number }>;
+  openedNamespacePanelRef: RefObject<HTMLDivElement | null>;
+  openFromPanelClickRef: MutableRefObject<boolean>;
+  onBackToPanels: () => void;
+  onOpenCategoryManager: () => void;
+};
+
+export default function TranslationCoverageEditor({
+  activeCategory,
+  setActiveCategory,
+  categoriesWithKnownNamespaces,
+  allTabStats,
+  categoryTabStats,
+  globalTabStats,
+  activeLang,
+  allLanguages,
+  search,
+  setSearch,
+  autoScrollOnPanelOpen,
+  setAutoScrollOnPanelOpen,
+  autoScrollOnSave,
+  setAutoScrollOnSave,
+  newGlobalKeySelection,
+  setNewGlobalKeySelection,
+  availableGlobalKeyOptions,
+  addGlobalKey,
+  globalFilteredKeys,
+  removeGlobalKey,
+  getDisplayValue,
+  translations,
+  handleChange,
+  globalKeySet,
+  englishReferenceKeySet,
+  setEnglishReferenceForKey,
+  filteredNs,
+  filteredGroups,
+  activeNamespacePanel,
+  setActiveNamespacePanel,
+  namespaceTranslationStats,
+  openedNamespacePanelRef,
+  openFromPanelClickRef,
+  onBackToPanels,
+  onOpenCategoryManager,
+}: Props) {
+  const { t } = useTranslation();
+
+  // Shared tab button renderer
+  const renderCategoryTab = (
+    key: string,
+    label: string,
+    stats: { total: number; translated: number; missing: number }
+  ) => {
+    const isActive = activeCategory === key;
+    const hasMissing = activeLang !== 'en' && stats.missing > 0;
+    return (
+      <button
+        key={key}
+        onClick={() => setActiveCategory(key)}
+        className={`flex shrink-0 items-center gap-2 px-4 py-2.5 rounded-2xl text-sm font-medium transition whitespace-nowrap ${
+          isActive
+            ? hasMissing
+              ? 'bg-red-600 text-white shadow-[0_18px_40px_-24px_rgba(220,38,38,0.7)]'
+              : 'bg-slate-900 text-white shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)]'
+            : hasMissing
+              ? 'border border-red-200 bg-red-50/80 text-red-700 hover:bg-red-100'
+              : 'bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 border border-transparent hover:border-slate-200'
+        }`}
+      >
+        <span>{label}</span>
+        {hasMissing ? (
+          <span className={`rounded-full px-2 py-0.5 text-[10px] leading-none font-semibold tabular-nums ${
+            isActive ? 'bg-white/20 text-white' : 'bg-red-100 text-red-600'
+          }`}>
+            {stats.missing}
+          </span>
+        ) : (
+          <span className={`rounded-full px-2 py-0.5 text-[10px] leading-none font-medium tabular-nums ${
+            isActive ? 'bg-white/15 text-white/80' : 'bg-slate-100 text-slate-400'
+          }`}>
+            {stats.total}
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <>
+      {/* ── Category tabs card ───────────────────────────────── */}
+      <div className="rounded-[28px] border border-white/80 bg-white/85 px-5 py-4 shadow-[0_22px_60px_-34px_rgba(15,23,42,0.28)] backdrop-blur">
+        <div className="flex items-center justify-between gap-3 flex-wrap mb-3">
+          <div>
+            <h2 className="text-sm font-semibold text-slate-950">{t('autofix.k5f978731')}</h2>
+            <p className="text-xs text-slate-500 mt-0.5">{t('autofix.kb7a30760')}</p>
+          </div>
+          <button
+            type="button"
+            onClick={onOpenCategoryManager}
+            className="rounded-2xl border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 transition"
+          >
+            {t('autofix.kd6e42900')}
+          </button>
+        </div>
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {renderCategoryTab('all', 'All', allTabStats)}
+          {renderCategoryTab('global', 'Global', globalTabStats)}
+          {categoriesWithKnownNamespaces.map((cat) =>
+            renderCategoryTab(cat.id, cat.label, categoryTabStats[cat.id] ?? { total: 0, translated: 0, missing: 0 })
+          )}
+        </div>
+      </div>
+
+      {/* ── Search + options row ─────────────────────────────── */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative flex-1 min-w-[14rem] max-w-sm">
+          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+          </svg>
+          <input
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('autofix.kbf49d59b')}
+            className="w-full rounded-2xl border border-slate-200 bg-white/90 pl-9 pr-3 py-2 text-sm shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900/20 focus:border-slate-300 transition"
+          />
+        </div>
+        <div className="flex items-center gap-4 flex-wrap">
+          <label className="inline-flex items-center gap-2 text-sm text-slate-600 select-none">
+            <input
+              type="checkbox"
+              checked={autoScrollOnPanelOpen}
+              onChange={(e) => setAutoScrollOnPanelOpen(e.target.checked)}
+              className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900/20"
+            />
+            {t('autofix.kfd1e0089')}
+          </label>
+          <label className="inline-flex items-center gap-2 text-sm text-slate-600 select-none">
+            <input
+              type="checkbox"
+              checked={autoScrollOnSave}
+              onChange={(e) => setAutoScrollOnSave(e.target.checked)}
+              className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900/20"
+            />
+            {t('autofix.k23e95df1')}
+          </label>
+        </div>
+      </div>
+
+      {/* ── Content area ────────────────────────────────────── */}
+      <div className="space-y-3">
+
+        {/* Global keys table */}
+        {activeCategory === 'global' && (
+          <div className="rounded-[28px] border border-white/80 bg-white/85 overflow-hidden shadow-[0_22px_60px_-34px_rgba(15,23,42,0.28)] backdrop-blur">
+            <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between gap-3 flex-wrap">
+              <div>
+                <span className="font-semibold text-slate-950">{t('autofix.k6cfeedd3')}</span>
+                <p className="text-xs text-slate-500 mt-0.5">{t('autofix.kad7d8c49')}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <select
+                  value={newGlobalKeySelection}
+                  onChange={(e) => setNewGlobalKeySelection(e.target.value)}
+                  className="w-72 max-w-full rounded-2xl border border-slate-200 bg-white px-3 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-slate-900/20"
+                >
+                  <option value="">{t('autofix.k47bce570')}</option>
+                  {availableGlobalKeyOptions.map((key) => (
+                    <option key={key} value={key}>{key}</option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (!newGlobalKeySelection) return;
+                    addGlobalKey(newGlobalKeySelection);
+                    setNewGlobalKeySelection('');
+                  }}
+                  className="rounded-2xl border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition"
+                >
+                  Add
+                </button>
+              </div>
+            </div>
+
+            {globalFilteredKeys.length > 0 ? (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-slate-100 bg-slate-50/60">
+                    <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 w-1/3">Key</th>
+                    {activeLang !== 'en' && (
+                      <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 w-1/3">English</th>
+                    )}
+                    <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+                      {allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {globalFilteredKeys.map((key) => {
+                    const enVal = getEnglishValue(key);
+                    const currentVal = getDisplayValue(key);
+                    const hasOverride = (translations[activeLang]?.[key] ?? '') !== '';
+
+                    return (
+                      <tr key={key} className="border-b border-slate-50 last:border-0 hover:bg-slate-50/60 transition-colors">
+                        <td className="px-5 py-2.5 font-mono text-xs text-slate-500 align-top pt-3">
+                          <div className="flex items-start justify-between gap-2">
+                            <span>{key}</span>
+                            <button
+                              type="button"
+                              title={t('autofix.kc02b17c3')}
+                              onClick={() => removeGlobalKey(key)}
+                              className="shrink-0 rounded-xl border border-red-200 px-1.5 py-0.5 text-[10px] text-red-500 hover:bg-red-50 transition"
+                            >
+                              Remove
+                            </button>
+                          </div>
+                        </td>
+                        {activeLang !== 'en' && (
+                          <td className="px-5 py-2.5 text-slate-500 align-top pt-3 text-xs">{enVal}</td>
+                        )}
+                        <td className="px-5 py-2.5">
+                          <div className="relative">
+                            <textarea
+                              rows={1}
+                              value={activeLang === 'en' ? currentVal : (translations[activeLang]?.[key] ?? '')}
+                              onChange={(e) => handleChange(key, e.target.value)}
+                              placeholder={activeLang === 'en' ? '' : enVal}
+                              className={`w-full rounded-xl border px-3 py-1.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-slate-900/20 transition ${
+                                hasOverride && activeLang !== 'en'
+                                  ? 'border-emerald-300 bg-emerald-50/60'
+                                  : 'border-slate-200 bg-white'
+                              }`}
+                              style={{ minHeight: '2.25rem', fieldSizing: 'content' } as React.CSSProperties}
+                              onInput={(e) => {
+                                const target = e.currentTarget;
+                                target.style.height = 'auto';
+                                target.style.height = `${target.scrollHeight}px`;
+                              }}
+                            />
+                            {hasOverride && activeLang !== 'en' && (
+                              <button
+                                type="button"
+                                title={t('autofix.k644d9ea8')}
+                                onClick={() => handleChange(key, '')}
+                                className="absolute top-1.5 right-2 text-xs text-slate-400 hover:text-red-500 transition"
+                              >
+                                ×
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            ) : (
+              <div className="p-10 text-center text-sm text-slate-400">{t('autofix.k0700b1f2')}</div>
+            )}
+          </div>
+        )}
+
+        {/* Namespace grid + open panel */}
+        {activeCategory !== 'global' && filteredNs.length > 0 && (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+              {filteredNs.map((ns, idx) => {
+                const keys = filteredGroups[ns] ?? [];
+                const nsStats = namespaceTranslationStats[ns] ?? {
+                  total: keys.length,
+                  translated: keys.length,
+                  missing: 0,
+                };
+                const hasMissing = activeLang !== 'en' && nsStats.missing > 0;
+                const isActive = activeNamespacePanel === ns;
+                const activeIdx = activeNamespacePanel ? filteredNs.indexOf(activeNamespacePanel) : -1;
+                const shiftClass = !activeNamespacePanel || isActive
+                  ? 'translate-x-0'
+                  : idx < activeIdx ? '-translate-x-1' : 'translate-x-1';
+
+                return (
+                  <button
+                    key={ns}
+                    type="button"
+                    onClick={() => {
+                      openFromPanelClickRef.current = true;
+                      setActiveNamespacePanel((prev) => (prev === ns ? null : ns));
+                    }}
+                    className={`w-full rounded-[20px] border px-4 py-3 text-left transition-all duration-300 backdrop-blur ${shiftClass} ${
+                      isActive
+                        ? hasMissing
+                          ? 'border-red-300 bg-red-50/90 shadow-[0_12px_30px_-18px_rgba(220,38,38,0.5)]'
+                          : 'border-slate-300 bg-white/95 shadow-[0_12px_30px_-18px_rgba(15,23,42,0.4)]'
+                        : hasMissing
+                          ? 'border-red-200 bg-red-50/60 hover:bg-red-50/90'
+                          : 'border-white/80 bg-white/80 hover:bg-white/95 hover:border-slate-200'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className={`text-sm font-semibold capitalize ${isActive ? 'text-slate-950' : 'text-slate-800'}`}>
+                        {ns}
+                      </span>
+                      <div className="flex items-center gap-1">
+                        <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-semibold ${
+                          isActive
+                            ? hasMissing ? 'bg-red-500 text-white' : 'bg-slate-900 text-white'
+                            : hasMissing ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-600'
+                        }`}>
+                          {nsStats.translated}/{nsStats.total}
+                        </span>
+                        {hasMissing && (
+                          <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-semibold ${
+                            isActive ? 'bg-red-200 text-red-800' : 'bg-red-100 text-red-700'
+                          }`}>
+                            {nsStats.missing}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <p className="mt-1 text-[11px] text-slate-400">
+                      {isActive ? t('autofix.k77d01d6a') : t('autofix.kcfb5fb54')}
+                    </p>
+                  </button>
+                );
+              })}
+            </div>
+
+            {activeNamespacePanel && filteredGroups[activeNamespacePanel] && (
+              <div
+                ref={openedNamespacePanelRef}
+                className="rounded-[28px] border border-white/80 bg-white/90 overflow-hidden shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur transition-all duration-300"
+              >
+                {/* Panel header */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50/60">
+                  <span className="font-bold text-slate-950 capitalize text-base">{activeNamespacePanel}</span>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-xs rounded-full border border-slate-200 bg-white px-2 py-0.5 text-slate-600 font-medium">
+                      {(namespaceTranslationStats[activeNamespacePanel]?.translated ?? 0)}/{(namespaceTranslationStats[activeNamespacePanel]?.total ?? 0)}
+                    </span>
+                    {activeLang !== 'en' && (namespaceTranslationStats[activeNamespacePanel]?.missing ?? 0) > 0 && (
+                      <span className="text-xs rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-red-700 font-medium">
+                        {namespaceTranslationStats[activeNamespacePanel]?.missing} missing
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-slate-100 bg-slate-50/40">
+                      <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 w-1/3">Key</th>
+                      {activeLang !== 'en' && (
+                        <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500 w-1/3">English</th>
+                      )}
+                      <th className="px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+                        {allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filteredGroups[activeNamespacePanel].map((key) => {
+                      const enVal = getEnglishValue(key);
+                      const currentVal = getDisplayValue(key);
+                      const isGlobal = globalKeySet.has(key);
+                      const isEnglishReference = englishReferenceKeySet.has(key);
+                      const visibleValue = activeLang === 'en'
+                        ? currentVal
+                        : (translations[activeLang]?.[key] ?? '');
+                      const hasOverride = (translations[activeLang]?.[key] ?? '') !== '';
+                      const isMissingInOpenedPanel =
+                        activeLang !== 'en' &&
+                        !isGlobal &&
+                        !isEnglishReference && (
+                          visibleValue.trim() === '' ||
+                          visibleValue.trim() === enVal.trim()
+                        );
+
+                      return (
+                        <tr key={key} className={`border-b border-slate-50 last:border-0 transition-colors ${
+                          isMissingInOpenedPanel ? 'bg-red-50/50 hover:bg-red-50/80' : 'hover:bg-slate-50/60'
+                        }`}>
+                          <td className={`px-5 py-2.5 font-mono text-xs align-top pt-3 ${
+                            isMissingInOpenedPanel ? 'text-red-700' : 'text-slate-500'
+                          }`}>
+                            <div className="space-y-2.5">
+                              <div className="flex items-center gap-1.5">
+                                <span className="block">{key}</span>
+                                {isGlobal && (
+                                  <span className="rounded-full border border-indigo-200 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-700">
+                                    Global
+                                  </span>
+                                )}
+                                {isEnglishReference && activeLang !== 'en' && (
+                                  <span className="rounded-full border border-sky-200 bg-sky-50 px-1.5 py-0.5 text-[10px] font-semibold text-sky-700">{t('autofix.k8de6d3df')}</span>
+                                )}
+                              </div>
+                              <label className="flex items-center gap-1.5 text-[11px] font-sans text-slate-500 select-none">
+                                <input
+                                  type="checkbox"
+                                  checked={isGlobal}
+                                  onChange={(e) => {
+                                    if (e.target.checked) { addGlobalKey(key); return; }
+                                    removeGlobalKey(key);
+                                  }}
+                                  className="h-3.5 w-3.5 rounded border-slate-300 text-slate-900 focus:ring-slate-900/20"
+                                />
+                                {t('autofix.kb1cf599b')}
+                              </label>
+                              {activeLang !== 'en' && (
+                                <label className="flex items-center gap-1.5 text-[11px] font-sans text-slate-500 select-none">
+                                  <input
+                                    type="checkbox"
+                                    checked={isEnglishReference}
+                                    onChange={(e) => setEnglishReferenceForKey(key, e.target.checked)}
+                                    className="h-3.5 w-3.5 rounded border-slate-300 text-slate-900 focus:ring-slate-900/20"
+                                  />{t('autofix.k6d79b1df')}</label>
+                              )}
+                            </div>
+                          </td>
+                          {activeLang !== 'en' && (
+                            <td className="px-5 py-2.5 text-slate-400 align-top pt-3 text-xs">{enVal}</td>
+                          )}
+                          <td className="px-5 py-2.5">
+                            <div className="relative">
+                              <textarea
+                                rows={1}
+                                value={visibleValue}
+                                onChange={(e) => handleChange(key, e.target.value)}
+                                placeholder={activeLang === 'en' ? '' : enVal}
+                                className={`w-full rounded-xl border px-3 py-1.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-slate-900/20 transition ${
+                                  isMissingInOpenedPanel
+                                    ? 'border-red-300 bg-red-50/60'
+                                    : hasOverride && activeLang !== 'en'
+                                      ? 'border-emerald-300 bg-emerald-50/60'
+                                      : 'border-slate-200 bg-white'
+                                }`}
+                                style={{ minHeight: '2.25rem', fieldSizing: 'content' } as React.CSSProperties}
+                                onInput={(e) => {
+                                  const target = e.currentTarget;
+                                  target.style.height = 'auto';
+                                  target.style.height = `${target.scrollHeight}px`;
+                                }}
+                              />
+                              {hasOverride && activeLang !== 'en' && (
+                                <button
+                                  type="button"
+                                  title={t('autofix.k644d9ea8')}
+                                  onClick={() => handleChange(key, '')}
+                                  className="absolute top-1.5 right-2 text-xs text-slate-400 hover:text-red-500 transition"
+                                >
+                                  ×
+                                </button>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+
+                <div className="border-t border-slate-100 px-5 py-3 bg-slate-50/40 flex justify-end">
+                  <button
+                    type="button"
+                    onClick={onBackToPanels}
+                    className="rounded-2xl border border-slate-200 bg-white px-4 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition"
+                  >
+                    {t('autofix.k6aba2cb0')}
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {activeCategory !== 'global' && filteredNs.length === 0 && (
+          <div className="rounded-[28px] border border-white/80 bg-white/85 p-10 text-center text-sm text-slate-400 shadow-[0_22px_60px_-34px_rgba(15,23,42,0.18)] backdrop-blur">
+            {t('autofix.k6a892262')}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

src/app/admin/language-management/components/TranslationWizardModal.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useTranslation } from '../../../i18n/useTranslation';
+import type { LanguageEntry } from '../hooks/useLanguageManagementTranslations';
+import { useModalAnimation } from '../hooks/useModalAnimation';
+
+type Props = {
+  isOpen: boolean;
+  currentWizardKey: string | null;
+  wizardIndex: number;
+  wizardMissingCount: number;
+  activeLang: string;
+  allLanguages: LanguageEntry[];
+  wizardInput: string;
+  setWizardInput: (value: string) => void;
+  wizardMarkGlobal: boolean;
+  setWizardMarkGlobal: (value: boolean) => void;
+  wizardUseEnglishReference: boolean;
+  setWizardUseEnglishReference: (value: boolean) => void;
+  englishValue: string;
+  addGlobalKey: (key: string) => void;
+  removeGlobalKey: (key: string) => void;
+  onClose: () => void;
+  onPrevious: () => void;
+  onSkip: () => void;
+  onNext: () => void | Promise<void>;
+  isSavingStep?: boolean;
+};
+
+export default function TranslationWizardModal({
+  isOpen,
+  currentWizardKey,
+  wizardIndex,
+  wizardMissingCount,
+  activeLang,
+  allLanguages,
+  wizardInput,
+  setWizardInput,
+  wizardMarkGlobal,
+  setWizardMarkGlobal,
+  wizardUseEnglishReference,
+  setWizardUseEnglishReference,
+  englishValue,
+  addGlobalKey,
+  removeGlobalKey,
+  onClose,
+  onPrevious,
+  onSkip,
+  onNext,
+  isSavingStep = false,
+}: Props) {
+  const { t } = useTranslation();
+  const { isRendered, isVisible } = useModalAnimation(isOpen && Boolean(currentWizardKey));
+
+  if (!isRendered || !currentWizardKey) return null;
+
+  return (
+    <div className={`fixed inset-0 z-[120] flex items-center justify-center bg-black/45 backdrop-blur-sm transition-opacity duration-200 ${
+      isVisible ? 'opacity-100' : 'opacity-0'
+    }`}>
+      <div className={`mx-4 w-full max-w-2xl rounded-2xl border border-slate-200 bg-white shadow-2xl overflow-hidden transform transition-all duration-200 ${
+        isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-2 scale-[0.98]'
+      }`}>
+        <div className="px-6 py-4 border-b border-slate-200 bg-slate-50 flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-bold text-[#1C2B4A]">{t('autofix.kcd190bdd')}</h2>
+            <p className="text-xs text-slate-600 mt-1">
+              Step {wizardIndex + 1} of {wizardMissingCount} for {allLanguages.find((l) => l.code === activeLang)?.name ?? activeLang}
+            </p>
+          </div>
+          <button onClick={onClose} className="text-slate-400 hover:text-slate-700 text-xl leading-none">
+            ✕
+          </button>
+        </div>
+
+        <div className="px-6 py-5 space-y-4">
+          <div className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
+            <p className="text-[11px] uppercase tracking-wide text-slate-500">Key</p>
+            <p className="font-mono text-xs text-slate-700 mt-1 break-all">{currentWizardKey}</p>
+          </div>
+
+          <div className="rounded-lg border border-slate-200 bg-white px-3 py-2">
+            <p className="text-[11px] uppercase tracking-wide text-slate-500">{t('autofix.kc518ff5c')}</p>
+            <p className="text-sm text-slate-700 mt-1">{englishValue}</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Translation</label>
+            <textarea
+              value={wizardInput}
+              onChange={(e) => setWizardInput(e.target.value)}
+              placeholder={t('languageManagement.wizardInputPlaceholder')}
+              rows={4}
+              className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1C2B4A]"
+            />
+          </div>
+
+          <label className="inline-flex items-center gap-2 text-sm text-slate-700">
+            <input
+              type="checkbox"
+              checked={wizardMarkGlobal}
+              onChange={(e) => {
+                const checked = e.target.checked;
+                setWizardMarkGlobal(checked);
+                if (!currentWizardKey) return;
+                if (checked) {
+                  addGlobalKey(currentWizardKey);
+                  return;
+                }
+                removeGlobalKey(currentWizardKey);
+              }}
+              className="h-4 w-4 rounded border-slate-300 text-[#1C2B4A] focus:ring-[#1C2B4A]"
+            />
+            Counts as global key (same value as English)
+          </label>
+
+          {activeLang !== 'en' && (
+            <label className="inline-flex items-center gap-2 text-sm text-slate-700">
+              <input
+                type="checkbox"
+                checked={wizardUseEnglishReference}
+                onChange={(e) => {
+                  const checked = e.target.checked;
+                  setWizardUseEnglishReference(checked);
+                  if (checked) {
+                    setWizardInput(englishValue);
+                  }
+                }}
+                className="h-4 w-4 rounded border-slate-300 text-[#1C2B4A] focus:ring-[#1C2B4A]"
+              />
+              Use English value (this language only, not global)
+            </label>
+          )}
+        </div>
+
+        <div className="px-6 py-4 border-t border-slate-200 bg-white flex items-center justify-between gap-3">
+          <button
+            type="button"
+            onClick={onPrevious}
+            disabled={wizardIndex === 0 || isSavingStep}
+            className="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50"
+          >
+            Back
+          </button>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onSkip}
+              disabled={isSavingStep}
+              className="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
+            >
+              Skip
+            </button>
+            <button
+              type="button"
+              onClick={onNext}
+              disabled={isSavingStep || (wizardInput.trim() === '' && !wizardMarkGlobal && !wizardUseEnglishReference)}
+              className="rounded-md bg-[#1C2B4A] text-white px-4 py-2 text-sm font-semibold hover:bg-[#1C2B4A]/90 disabled:opacity-50"
+            >{isSavingStep
+                ? t('common.saving')
+                : (wizardIndex >= wizardMissingCount - 1 ? t('autofix.k230e2c3c') : t('autofix.kb270a988'))}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/language-management/hooks/useI18nScanWorkflow.ts

@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { authFetch } from '../../../utils/authFetch'
+
+const SCAN_EXCLUDED_FILE_MARKERS = ['src/app/components/toast/toastComponent.tsx'] as const
+
+function normalizeScanPath(path: string): string {
+  return path.replace(/\\/g, '/').toLowerCase()
+}
+
+function isExcludedScanFile(path: string): boolean {
+  const normalized = normalizeScanPath(path)
+  return SCAN_EXCLUDED_FILE_MARKERS.some((marker) => normalized.endsWith(marker.toLowerCase()))
+}
+
+function filterScanFiles(files: unknown): string[] {
+  if (!Array.isArray(files)) return []
+  return files
+    .filter((file): file is string => typeof file === 'string')
+    .filter((file) => !isExcludedScanFile(file))
+}
+
+type UseI18nScanWorkflowOptions = {
+  onUnauthorized?: () => void
+}
+
+export type WorkspaceScanResult = {
+  scannedFiles: number
+  scannedDirectories: number
+  translationCallCount: number
+  uniqueKeyCount: number
+  missingKeys: Array<{ key: string; files: string[] }>
+  untranslatedLiterals: Array<{ text: string; files: string[] }>
+  autoFixEligibleFiles?: string[]
+  autoFixForceConvertibleFiles?: string[]
+  changedFileCount?: number
+  createdKeyCount?: number
+  changedFiles?: Array<{ file: string; replacements: number; addedImport: boolean; addedHook: boolean }>
+  skippedFiles?: Array<{ file: string; reason: string }>
+  autoFixDebug?: Array<{
+    file: string
+    status: 'changed' | 'skipped' | 'no-op'
+    beforeLiteralCount: number
+    textReplacements: number
+    attrReplacements: number
+    afterLiteralCount: number
+    reason?: string
+  }>
+}
+
+function normalizeScanResult(result: any): WorkspaceScanResult {
+  const missingKeys = Array.isArray(result?.missingKeys)
+    ? result.missingKeys
+        .filter((entry: any) => entry && typeof entry === 'object' && typeof entry.key === 'string')
+        .map((entry: any) => ({ key: entry.key, files: filterScanFiles(entry.files) }))
+        .filter((entry: { key: string; files: string[] }) => entry.files.length > 0)
+    : []
+
+  const untranslatedLiterals = Array.isArray(result?.untranslatedLiterals)
+    ? result.untranslatedLiterals
+        .filter((entry: any) => entry && typeof entry === 'object' && typeof entry.text === 'string')
+        .map((entry: any) => ({ text: entry.text, files: filterScanFiles(entry.files) }))
+        .filter((entry: { text: string; files: string[] }) => entry.files.length > 0)
+    : []
+
+  return {
+    scannedFiles: Number(result?.scannedFiles ?? 0),
+    scannedDirectories: Number(result?.scannedDirectories ?? 0),
+    translationCallCount: Number(result?.translationCallCount ?? 0),
+    uniqueKeyCount: Number(result?.uniqueKeyCount ?? 0),
+    missingKeys,
+    untranslatedLiterals,
+    autoFixEligibleFiles: Array.isArray(result?.autoFixEligibleFiles) ? filterScanFiles(result.autoFixEligibleFiles) : undefined,
+    autoFixForceConvertibleFiles: Array.isArray(result?.autoFixForceConvertibleFiles) ? filterScanFiles(result.autoFixForceConvertibleFiles) : undefined,
+    changedFileCount: Number(result?.changedFileCount ?? 0),
+    createdKeyCount: Number(result?.createdKeyCount ?? 0),
+    changedFiles: Array.isArray(result?.changedFiles)
+      ? result.changedFiles.filter((entry: any) => entry && typeof entry.file === 'string' && !isExcludedScanFile(entry.file))
+      : [],
+    skippedFiles: Array.isArray(result?.skippedFiles)
+      ? result.skippedFiles.filter((entry: any) => entry && typeof entry.file === 'string' && !isExcludedScanFile(entry.file))
+      : [],
+    autoFixDebug: Array.isArray(result?.autoFixDebug) ? result.autoFixDebug : [],
+  }
+}
+
+function getFixableFiles(scan: WorkspaceScanResult | null, forceConvertToClient: boolean): string[] {
+  if (!scan) return []
+
+  if (forceConvertToClient && Array.isArray(scan.autoFixForceConvertibleFiles)) {
+    return [...scan.autoFixForceConvertibleFiles].sort((a, b) => a.localeCompare(b))
+  }
+
+  // Prefer backend-provided eligibility, including the intentional empty list.
+  if (Array.isArray(scan.autoFixEligibleFiles)) {
+    return [...scan.autoFixEligibleFiles].sort((a, b) => a.localeCompare(b))
+  }
+
+  const fileSet = new Set<string>()
+  for (const entry of scan.untranslatedLiterals) {
+    for (const file of entry.files) {
+      fileSet.add(file)
+    }
+  }
+
+  return Array.from(fileSet).sort((a, b) => a.localeCompare(b))
+}
+
+export function useI18nScanWorkflow({ onUnauthorized }: UseI18nScanWorkflowOptions = {}) {
+  const onUnauthorizedRef = useRef(onUnauthorized)
+
+  useEffect(() => {
+    onUnauthorizedRef.current = onUnauthorized
+  }, [onUnauthorized])
+
+  const [showScanModal, setShowScanModal] = useState(false)
+  const [lastScanTime, setLastScanTime] = useState<Date | null>(null)
+  const [isScanning, setIsScanning] = useState(false)
+  const [isAutoFixing, setIsAutoFixing] = useState(false)
+  const [isAddingMissingKeys, setIsAddingMissingKeys] = useState(false)
+  const [scanError, setScanError] = useState<string | null>(null)
+  const [workspaceScan, setWorkspaceScan] = useState<WorkspaceScanResult | null>(null)
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([])
+  const [forceConvertToClient, setForceConvertToClient] = useState(false)
+
+  const fixableFiles = useMemo(
+    () => getFixableFiles(workspaceScan, forceConvertToClient),
+    [workspaceScan, forceConvertToClient]
+  )
+
+  useEffect(() => {
+    setSelectedFiles(fixableFiles)
+  }, [fixableFiles])
+
+  const applyScanResult = (result: any) => {
+    const normalized = normalizeScanResult(result)
+    const files = getFixableFiles(normalized, forceConvertToClient)
+
+    setWorkspaceScan(normalized)
+    setSelectedFiles(files)
+    setLastScanTime(new Date())
+  }
+
+  const scan = async () => {
+    setShowScanModal(true)
+    setIsScanning(true)
+    setScanError(null)
+
+    try {
+      const response = await authFetch('/api/i18n/scan', { method: 'GET' })
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.()
+        throw new Error('Session expired. Redirecting to login.')
+      }
+      const result = await response.json()
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Scan failed.')
+      }
+
+      applyScanResult(result)
+    } catch (error) {
+      setScanError(error instanceof Error ? error.message : 'Scan failed.')
+    } finally {
+      setIsScanning(false)
+    }
+  }
+
+  const runFixSelected = async () => {
+    const selectedEligible = selectedFiles.filter((file) => fixableFiles.includes(file) && !isExcludedScanFile(file))
+
+    if (selectedEligible.length === 0) {
+      setScanError('Select at least one file before running auto-fix.')
+      return
+    }
+
+    setShowScanModal(true)
+    setIsAutoFixing(true)
+    setScanError(null)
+
+    try {
+      const response = await authFetch('/api/i18n/scan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          targetFiles: selectedEligible,
+          forceConvertToClient,
+          excludedFiles: [...SCAN_EXCLUDED_FILE_MARKERS],
+        }),
+      })
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.()
+        throw new Error('Session expired. Redirecting to login.')
+      }
+      const result = await response.json()
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Auto-fix failed.')
+      }
+
+      applyScanResult(result)
+    } catch (error) {
+      setScanError(error instanceof Error ? error.message : 'Auto-fix failed.')
+    } finally {
+      setIsAutoFixing(false)
+    }
+  }
+
+  const addMissingKeys = async () => {
+    setShowScanModal(true)
+    setIsAddingMissingKeys(true)
+    setScanError(null)
+
+    try {
+      const response = await authFetch('/api/i18n/scan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mode: 'add-missing-keys' }),
+      })
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.()
+        throw new Error('Session expired. Redirecting to login.')
+      }
+      const result = await response.json()
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Adding missing keys failed.')
+      }
+
+      applyScanResult(result)
+    } catch (error) {
+      setScanError(error instanceof Error ? error.message : 'Adding missing keys failed.')
+    } finally {
+      setIsAddingMissingKeys(false)
+    }
+  }
+
+  const toggleFileSelection = (file: string) => {
+    setSelectedFiles((prev) => {
+      if (prev.includes(file)) return prev.filter((f) => f !== file)
+      return [...prev, file]
+    })
+  }
+
+  const selectAllFiles = () => {
+    setSelectedFiles(fixableFiles)
+  }
+
+  const clearSelectedFiles = () => {
+    setSelectedFiles([])
+  }
+
+  return {
+    showScanModal,
+    setShowScanModal,
+    lastScanTime,
+    isScanning,
+    isAutoFixing,
+    isAddingMissingKeys,
+    scanError,
+    workspaceScan,
+    selectedFiles,
+    fixableFiles,
+    forceConvertToClient,
+    setForceConvertToClient,
+    scan,
+    runFixSelected,
+    addMissingKeys,
+    toggleFileSelection,
+    selectAllFiles,
+    clearSelectedFiles,
+  }
+}

src/app/admin/language-management/hooks/useLanguageManagementTranslations.ts

@@ -0,0 +1,503 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { authFetch } from '../../../utils/authFetch';
+import useAuthStore from '../../../store/authStore';
+
+export type LanguageEntry = {
+  code: string;
+  name: string;
+};
+
+export type FileBackedI18nData = {
+  languages: LanguageEntry[];
+  translations: Record<string, Record<string, string>>;
+};
+
+type UseLanguageManagementTranslationsOptions = {
+  coreLanguages: Set<string>;
+  onAction?: (notice: { variant: 'success' | 'error' | 'info' | 'warning'; message: string }) => void;
+  onUnauthorized?: () => void;
+};
+
+const ACTIVE_LANG_STORAGE_KEY = 'language-management-active-lang';
+
+export function useLanguageManagementTranslations({ coreLanguages, onAction, onUnauthorized }: UseLanguageManagementTranslationsOptions) {
+  const onActionRef = useRef(onAction);
+  const onUnauthorizedRef = useRef(onUnauthorized);
+
+  useEffect(() => {
+    onUnauthorizedRef.current = onUnauthorized;
+  }, [onUnauthorized]);
+
+  const emitAction = useCallback((notice: { variant: 'success' | 'error' | 'info' | 'warning'; message: string }) => {
+    try {
+      onActionRef.current?.(notice);
+    } catch {
+      // Keep persistence flow running even if notification UI crashes.
+    }
+  }, []);
+
+  useEffect(() => {
+    onActionRef.current = onAction;
+  }, [onAction]);
+
+  const [data, setData] = useState<FileBackedI18nData>({ languages: [], translations: {} });
+  const dataRef = useRef<FileBackedI18nData>({ languages: [], translations: {} });
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingPhase, setLoadingPhase] = useState('idle');
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [loadingLogs, setLoadingLogs] = useState<string[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [saveError, setSaveError] = useState('');
+
+  // Base translations from en.ts — used to detect which keys are genuine overrides (delta).
+  const enBaseRef = useRef<Record<string, string>>({});
+  // Overrides currently stored in DB per custom language — used to track what needs deletion on revert.
+  const dbOverridesRef = useRef<Record<string, Record<string, string>>>({});
+
+  const [activeLang, setActiveLang] = useState(() => {
+    if (typeof window === 'undefined') return 'en';
+    const stored = window.localStorage.getItem(ACTIVE_LANG_STORAGE_KEY);
+    return stored && stored.trim() !== '' ? stored : 'en';
+  });
+
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [newCode, setNewCode] = useState('');
+  const [newName, setNewName] = useState('');
+  const [addError, setAddError] = useState('');
+
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+  const hasFetchedOnceRef = useRef(false);
+
+  const appendLoadingLog = useCallback((message: string) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLoadingLogs((prev) => [...prev, `[${timestamp}] ${message}`].slice(-30));
+  }, []);
+
+  const fetchTranslationFiles = useCallback(async () => {
+    setLoadingPhase('refresh-auth');
+    setLoadingProgress(15);
+    appendLoadingLog('Refreshing auth session before translation bootstrap');
+
+    // Preflight refresh avoids immediate 401/refresh/retry loops during initial mount.
+    await useAuthStore.getState().refreshAuthToken(true).catch(() => null);
+
+    setLoadingPhase('fetch-translations');
+    setLoadingProgress(35);
+    appendLoadingLog('Fetching translation files from /api/i18n/translations');
+
+    const response = await authFetch('/api/i18n/translations', { cache: 'no-store' });
+
+    if (response.status === 401) {
+      onUnauthorizedRef.current?.();
+      throw new Error('Session expired. Redirecting to login.');
+    }
+
+    const result = await response.json();
+
+    if (!response.ok || !result?.ok) {
+      throw new Error(result?.message || 'Failed to load translation files.');
+    }
+
+    const languages = Array.isArray(result.languages)
+      ? result.languages.filter((lang: unknown): lang is LanguageEntry => {
+          if (!lang || typeof lang !== 'object') return false;
+          const entry = lang as LanguageEntry;
+          return typeof entry.code === 'string' && typeof entry.name === 'string';
+        })
+      : [];
+
+    const translations = result.translations && typeof result.translations === 'object'
+      ? result.translations as Record<string, Record<string, string>>
+      : {};
+
+    // Store en.ts as the immutable base for delta calculation.
+    enBaseRef.current = translations['en'] ?? {};
+    setLoadingProgress(60);
+
+    // Fetch DB overrides and merge them on top of .ts file values for custom languages.
+    // This ensures admin edits from previous sessions are restored on load.
+    try {
+      setLoadingPhase('fetch-preferences');
+      setLoadingProgress(75);
+      appendLoadingLog('Fetching DB overrides from /api/i18n/preferences');
+
+      const prefResponse = await authFetch('/api/i18n/preferences', { cache: 'no-store' });
+      if (prefResponse.ok) {
+        const prefResult = await prefResponse.json().catch(() => null);
+        const payload = prefResult?.preferences && typeof prefResult.preferences === 'object'
+          ? prefResult.preferences
+          : prefResult;
+        const overridesArray: unknown[] = Array.isArray(payload?.translations) ? payload.translations : [];
+
+        const dbOverrides: Record<string, Record<string, string>> = {};
+        for (const entry of overridesArray) {
+          if (!entry || typeof entry !== 'object') continue;
+          const e = entry as Record<string, unknown>;
+          if (typeof e.languageCode !== 'string' || typeof e.namespace !== 'string' ||
+              typeof e.key !== 'string' || typeof e.value !== 'string') continue;
+          const flatKey = `${e.namespace}.${e.key}`;
+          if (!dbOverrides[e.languageCode]) dbOverrides[e.languageCode] = {};
+          dbOverrides[e.languageCode][flatKey] = e.value;
+        }
+
+        dbOverridesRef.current = dbOverrides;
+
+        // Deep-merge: DB overrides win on conflict, for custom languages only.
+        const mergedTranslations = { ...translations };
+        for (const [langCode, overrides] of Object.entries(dbOverrides)) {
+          if (coreLanguages.has(langCode)) continue;
+          mergedTranslations[langCode] = { ...(translations[langCode] ?? {}), ...overrides };
+        }
+
+        setData({ languages, translations: mergedTranslations });
+        setLoadingProgress(95);
+        appendLoadingLog('Translations + DB overrides merged successfully');
+        return;
+      }
+    } catch {
+      // DB overrides unavailable — fall through to file-only data.
+      appendLoadingLog('DB override fetch failed, continuing with file-only translations');
+    }
+
+    setData({ languages, translations });
+    setLoadingProgress(95);
+    appendLoadingLog('Loaded file-backed translations without DB overrides');
+  }, [appendLoadingLog, coreLanguages]);
+
+  useEffect(() => {
+    if (hasFetchedOnceRef.current) return;
+    hasFetchedOnceRef.current = true;
+
+    setIsLoading(true);
+    setLoadingPhase('initializing');
+    setLoadingProgress(5);
+    appendLoadingLog('Starting language management bootstrap');
+
+    void fetchTranslationFiles()
+      .catch((error) => {
+        setLoadingPhase('error');
+        appendLoadingLog(`Bootstrap error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        emitAction({
+          variant: 'warning',
+          message: error instanceof Error ? error.message : 'Failed to load translation files.',
+        });
+      })
+      .finally(() => {
+        setLoadingPhase('ready');
+        setLoadingProgress(100);
+        appendLoadingLog('Translation bootstrap complete');
+        setIsLoading(false);
+      });
+  }, [appendLoadingLog, emitAction, fetchTranslationFiles]);
+
+  const allLanguages: LanguageEntry[] = useMemo(() => data.languages, [data.languages]);
+
+  useEffect(() => {
+    if (allLanguages.length === 0) return;
+    if (allLanguages.some((lang) => lang.code === activeLang)) return;
+
+    const fallback = allLanguages.find((lang) => lang.code === 'en')?.code ?? allLanguages[0].code;
+    setActiveLang(fallback);
+  }, [allLanguages, activeLang]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(ACTIVE_LANG_STORAGE_KEY, activeLang);
+  }, [activeLang]);
+
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
+  const getDisplayValue = useCallback(
+    (key: string): string => data.translations[activeLang]?.[key] ?? '',
+    [activeLang, data.translations]
+  );
+
+  const handleChange = useCallback((key: string, value: string) => {
+    setData((prev) => {
+      const langTranslations = { ...(prev.translations[activeLang] ?? {}) };
+      langTranslations[key] = value;
+      const next = {
+        ...prev,
+        translations: { ...prev.translations, [activeLang]: langTranslations },
+      };
+      dataRef.current = next;
+      return next;
+    });
+    setIsDirty(true);
+    setSaved(false);
+  }, [activeLang]);
+
+  const handleSave = useCallback(async (translationsOverride?: Record<string, Record<string, string>>) => {
+    try {
+      setSaveError('');
+      const effectiveTranslations = translationsOverride ?? dataRef.current.translations;
+      const response = await authFetch('/api/i18n/translations', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ translations: effectiveTranslations }),
+      });
+
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.();
+        throw new Error('Session expired. Redirecting to login.');
+      }
+
+      const result = await response.json();
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Failed to save translation files.');
+      }
+
+      const languages = Array.isArray(result.languages) ? result.languages as LanguageEntry[] : [];
+      const translations = result.translations && typeof result.translations === 'object'
+        ? result.translations as Record<string, Record<string, string>>
+        : {};
+
+      setData({ languages, translations });
+      setIsDirty(false);
+      setSaved(true);
+      emitAction({ variant: 'success', message: 'Translations saved successfully.' });
+      setTimeout(() => setSaved(false), 2500);
+
+      // Best-effort: sync ONLY delta overrides for custom languages to DB.
+      // Delta = keys whose value differs from the en.ts base. Core languages are .ts-only.
+      const enBase = enBaseRef.current;
+      const customLangCodes = Object.keys(translations).filter((c) => !coreLanguages.has(c));
+      if (customLangCodes.length > 0) {
+        const overrides: Array<{ languageCode: string; namespace: string; key: string; value: string; isCustom: boolean }> = [];
+        const nextDbOverrides: Record<string, Record<string, string>> = { ...dbOverridesRef.current };
+
+        for (const langCode of customLangCodes) {
+          const flat = translations[langCode] ?? {};
+          const prevDbLang = dbOverridesRef.current[langCode] ?? {};
+          const nextDbLang: Record<string, string> = {};
+
+          for (const [flatKey, value] of Object.entries(flat)) {
+            const baseValue = enBase[flatKey] ?? '';
+            if (!value || value === baseValue) {
+              // Key matches base or is empty — not a genuine override; omit from DB.
+              // If it was previously stored, it will be absent from the next PUT batch
+              // (backends using full-replace semantics will remove it automatically).
+              continue;
+            }
+            const dotIdx = flatKey.indexOf('.');
+            const namespace = dotIdx !== -1 ? flatKey.slice(0, dotIdx) : flatKey;
+            const key = dotIdx !== -1 ? flatKey.slice(dotIdx + 1) : flatKey;
+            overrides.push({ languageCode: langCode, namespace, key, value, isCustom: true });
+            nextDbLang[flatKey] = value;
+          }
+
+          // Carry forward any DB overrides for keys not present in flat (shouldn't happen normally).
+          for (const [flatKey, value] of Object.entries(prevDbLang)) {
+            if (!(flatKey in nextDbLang)) {
+              // Key was reverted to base; drop from our local cache.
+            } else {
+              nextDbLang[flatKey] = value;
+            }
+          }
+
+          nextDbOverrides[langCode] = nextDbLang;
+        }
+
+        // Update local DB overrides cache regardless of whether the PUT succeeds.
+        dbOverridesRef.current = nextDbOverrides;
+
+        if (overrides.length > 0) {
+          authFetch('/api/i18n/preferences', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ translations: overrides }),
+          }).catch(() => {
+            // Non-fatal: .ts files are already saved successfully.
+          });
+        }
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to save translation files.';
+      setSaveError(message);
+      emitAction({ variant: 'error', message });
+      setSaved(false);
+    }
+  }, [emitAction]);
+
+  const handleAddLanguage = useCallback(async () => {
+    const code = newCode.trim().toLowerCase();
+    const name = newName.trim();
+    if (!code) { setAddError('Language code is required.'); return; }
+    if (!name) { setAddError('Language name is required.'); return; }
+    if (!/^[a-z]{2,5}(-[a-zA-Z]{2,4})?$/.test(code)) {
+      setAddError('Use a valid BCP-47 code, e.g. fr, es, zh-TW.');
+      return;
+    }
+    if (allLanguages.some((l) => l.code === code)) {
+      setAddError(`Language "${code}" already exists.`);
+      return;
+    }
+
+    try {
+      const response = await authFetch('/api/i18n/translations', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, name }),
+      });
+
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.();
+        throw new Error('Session expired. Redirecting to login.');
+      }
+
+      const result = await response.json();
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Failed to create language file.');
+      }
+
+      const languages = Array.isArray(result.languages) ? result.languages as LanguageEntry[] : [];
+      const translations = result.translations && typeof result.translations === 'object'
+        ? result.translations as Record<string, Record<string, string>>
+        : {};
+
+      setData({ languages, translations });
+      setShowAddModal(false);
+      setNewCode('');
+      setNewName('');
+      setAddError('');
+      setActiveLang(code);
+      setIsDirty(false);
+      setSaved(false);
+      emitAction({ variant: 'success', message: `Language ${name} (${code}) added successfully.` });
+
+      // Best-effort: register the new language in the DB.
+      authFetch('/api/i18n/preferences', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          language: { languageCode: code, label: name, isEnabled: true, isCustom: true },
+        }),
+      }).catch(() => {
+        // Non-fatal: .ts file was created successfully.
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to create language file.';
+      setAddError(message);
+      emitAction({ variant: 'error', message });
+    }
+  }, [allLanguages, emitAction, newCode, newName]);
+
+  const handleDeleteLanguage = useCallback(async (code: string) => {
+    if (coreLanguages.has(code)) return;
+
+    try {
+      // 1. Delete the .ts translation file
+      const response = await authFetch('/api/i18n/translations', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code }),
+      });
+
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.();
+        throw new Error('Session expired. Redirecting to login.');
+      }
+
+      const result = await response.json();
+
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Failed to delete language file.');
+      }
+
+      const languages = Array.isArray(result.languages) ? result.languages as LanguageEntry[] : [];
+      const translations = result.translations && typeof result.translations === 'object'
+        ? result.translations as Record<string, Record<string, string>>
+        : {};
+
+      setData({ languages, translations });
+      setIsDirty(false);
+      setSaved(false);
+      setDeleteTarget(null);
+      if (activeLang === code) setActiveLang('en');
+
+      // 2. Best-effort: remove language-specific records from the DB
+      try {
+        await authFetch(
+          `/api/i18n/preferences?languageCode=${encodeURIComponent(code)}`,
+          { method: 'DELETE' }
+        );
+      } catch {
+        // DB cleanup failure is non-fatal; file is already deleted.
+        emitAction({ variant: 'warning', message: `Language "${code}" file deleted, but DB cleanup failed. You may need to remove DB records manually.` });
+      }
+
+      emitAction({ variant: 'success', message: `Language ${code} deleted successfully.` });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to delete language file.';
+      setAddError(message);
+      emitAction({ variant: 'error', message });
+    }
+  }, [activeLang, coreLanguages, emitAction]);
+
+  const isBuiltin = useCallback((code: string) => coreLanguages.has(code), [coreLanguages]);
+
+  /**
+   * Returns true if the given flat key for the currently active language (or a specified language)
+   * is a genuine DB override — i.e. its value differs from the en.ts base.
+   */
+  const isOverridden = useCallback(
+    (flatKey: string, langCode?: string): boolean => {
+      const lang = langCode ?? activeLang;
+      if (coreLanguages.has(lang)) return false;
+      const currentValue = data.translations[lang]?.[flatKey] ?? '';
+      const baseValue = enBaseRef.current[flatKey] ?? '';
+      return currentValue !== '' && currentValue !== baseValue;
+    },
+    [activeLang, coreLanguages, data.translations]
+  );
+
+  /**
+   * Reverts a key to its en.ts base value (removes the override from the working state).
+   * The override will be excluded from the next DB sync automatically.
+   */
+  const handleRevertKey = useCallback(
+    (flatKey: string) => {
+      if (coreLanguages.has(activeLang)) return;
+      const baseValue = enBaseRef.current[flatKey] ?? '';
+      handleChange(flatKey, baseValue);
+    },
+    [activeLang, coreLanguages, handleChange]
+  );
+
+  return {
+    data,
+    isLoading,
+    loadingPhase,
+    loadingProgress,
+    loadingLogs,
+    allLanguages,
+    activeLang,
+    setActiveLang,
+    getDisplayValue,
+    isDirty,
+    saved,
+    saveError,
+    handleChange,
+    handleSave,
+    showAddModal,
+    setShowAddModal,
+    newCode,
+    setNewCode,
+    newName,
+    setNewName,
+    addError,
+    setAddError,
+    handleAddLanguage,
+    deleteTarget,
+    setDeleteTarget,
+    handleDeleteLanguage,
+    isBuiltin,
+    isOverridden,
+    handleRevertKey,
+  };
+}

src/app/admin/language-management/hooks/useModalAnimation.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+type UseModalAnimationResult = {
+  isRendered: boolean;
+  isVisible: boolean;
+};
+
+export function useModalAnimation(isOpen: boolean, durationMs = 220): UseModalAnimationResult {
+  const [isRendered, setIsRendered] = useState(isOpen);
+  const [isVisible, setIsVisible] = useState(isOpen);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    if (isOpen) {
+      setIsRendered(true);
+      const frameId = requestAnimationFrame(() => setIsVisible(true));
+      return () => cancelAnimationFrame(frameId);
+    }
+
+    if (isRendered) {
+      setIsVisible(false);
+      timeoutId = setTimeout(() => {
+        setIsRendered(false);
+      }, durationMs);
+    }
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isOpen, isRendered, durationMs]);
+
+  return { isRendered, isVisible };
+}

src/app/admin/language-management/hooks/useNamespaceCategories.ts

@@ -0,0 +1,497 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { authFetch } from '../../../utils/authFetch';
+import useAuthStore from '../../../store/authStore';
+
+type NamespaceCategorySeed = { label: string; namespaces: string[] };
+
+export type NamespaceCategory = {
+  id: string;
+  label: string;
+  namespaces: string[];
+  isCustom: boolean;
+};
+
+function sanitizeCategoryId(label: string): string {
+  return `custom-${label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')}`;
+}
+
+function createDefaultCategories(seeds: NamespaceCategorySeed[]): NamespaceCategory[] {
+  return seeds.map((cat) => ({
+    id: `default-${sanitizeCategoryId(cat.label)}`,
+    label: cat.label,
+    namespaces: [...cat.namespaces],
+    isCustom: false,
+  }));
+}
+
+type UseNamespaceCategoriesOptions = {
+  namespaces: string[];
+  allKeys: string[];
+  defaultCategories: NamespaceCategorySeed[];
+  onAction?: (notice: { variant: 'success' | 'error' | 'info' | 'warning'; message: string }) => void;
+  onUnauthorized?: () => void;
+};
+
+type PreferencesSaveSnapshot = {
+  categories?: NamespaceCategory[];
+  globalKeys?: string[];
+  englishReferenceKeysByLanguage?: Record<string, string[]>;
+};
+
+function normalizeCategories(value: unknown): NamespaceCategory[] {
+  if (!Array.isArray(value)) return [];
+
+  return value
+    .filter((c): c is { id: string; label: string; namespaces: string[]; isCustom: boolean } => {
+      return Boolean(c) && typeof c === 'object' && typeof c.id === 'string' && typeof c.label === 'string';
+    })
+    .map((c) => ({
+      id: c.id,
+      label: c.label,
+      namespaces: Array.isArray(c.namespaces) ? c.namespaces.filter((ns): ns is string => typeof ns === 'string') : [],
+      isCustom: Boolean(c.isCustom),
+    }));
+}
+
+function normalizeGlobalKeys(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((k): k is string => typeof k === 'string');
+}
+
+function normalizeEnglishReferenceKeysByLanguage(value: unknown): Record<string, string[]> {
+  if (!value || typeof value !== 'object') return {};
+  const result: Record<string, string[]> = {};
+  for (const [languageCode, keys] of Object.entries(value as Record<string, unknown>)) {
+    if (!Array.isArray(keys)) continue;
+    const normalizedKeys = keys.filter((k): k is string => typeof k === 'string');
+    if (normalizedKeys.length > 0) {
+      result[languageCode] = Array.from(new Set(normalizedKeys)).sort((a, b) => a.localeCompare(b));
+    }
+  }
+  return result;
+}
+
+export function useNamespaceCategories({ namespaces, allKeys, defaultCategories, onAction, onUnauthorized }: UseNamespaceCategoriesOptions) {
+  const fallbackCategories = useMemo(() => createDefaultCategories(defaultCategories), [defaultCategories]);
+  const onActionRef = useRef(onAction);
+  const onUnauthorizedRef = useRef(onUnauthorized);
+  const lastSavedPreferencesRef = useRef('');
+  const hasLoadedPreferencesOnceRef = useRef(false);
+
+  useEffect(() => {
+    onUnauthorizedRef.current = onUnauthorized;
+  }, [onUnauthorized]);
+
+  const emitAction = (notice: { variant: 'success' | 'error' | 'info' | 'warning'; message: string }) => {
+    try {
+      onActionRef.current?.(notice);
+    } catch {
+      // Never block DB persistence because of notification rendering failures.
+    }
+  };
+
+  useEffect(() => {
+    onActionRef.current = onAction;
+  }, [onAction]);
+
+  const [activeCategory, setActiveCategory] = useState<string>('all');
+  const [showCategoryManagerModal, setShowCategoryManagerModal] = useState(false);
+  const [categories, setCategories] = useState<NamespaceCategory[]>(fallbackCategories);
+
+  const [globalKeys, setGlobalKeys] = useState<string[]>([]);
+  const [englishReferenceKeysByLanguage, setEnglishReferenceKeysByLanguage] = useState<Record<string, string[]>>({});
+  const [preferencesHydrated, setPreferencesHydrated] = useState(false);
+  const [preferencesLoadingPhase, setPreferencesLoadingPhase] = useState('idle');
+  const [preferencesLoadingProgress, setPreferencesLoadingProgress] = useState(0);
+  const [preferencesLoadingLogs, setPreferencesLoadingLogs] = useState<string[]>([]);
+  const [isPreferencesDirty, setIsPreferencesDirty] = useState(false);
+  const [isSavingPreferences, setIsSavingPreferences] = useState(false);
+
+  const [newCategoryLabel, setNewCategoryLabel] = useState('');
+  const [assignNamespaceByCategory, setAssignNamespaceByCategory] = useState<Record<string, string>>({});
+  const [expandedCategoryId, setExpandedCategoryId] = useState<string | null>(null);
+  const [dragNamespace, setDragNamespace] = useState<string | null>(null);
+
+  const appendPreferencesLoadingLog = (message: string) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setPreferencesLoadingLogs((prev) => [...prev, `[${timestamp}] ${message}`].slice(-30));
+  };
+
+  const serializePreferences = (
+    nextCategories: NamespaceCategory[],
+    nextGlobalKeys: string[],
+    nextEnglishReferenceKeysByLanguage: Record<string, string[]>
+  ) =>
+    JSON.stringify({
+      categories: nextCategories,
+      globalKeys: nextGlobalKeys,
+      englishReferenceKeysByLanguage: nextEnglishReferenceKeysByLanguage,
+    });
+
+  useEffect(() => {
+    if (hasLoadedPreferencesOnceRef.current) return;
+    hasLoadedPreferencesOnceRef.current = true;
+
+    setPreferencesLoadingPhase('initializing');
+    setPreferencesLoadingProgress(5);
+    appendPreferencesLoadingLog('Starting preferences bootstrap');
+
+    const loadPreferences = async () => {
+      console.debug('[LanguageManagement][Preferences] load:start');
+      try {
+        setPreferencesLoadingPhase('refresh-auth');
+        setPreferencesLoadingProgress(15);
+        appendPreferencesLoadingLog('Refreshing auth session before preferences fetch');
+
+        // Preflight refresh avoids immediate 401/refresh/retry loops during initial mount.
+        await useAuthStore.getState().refreshAuthToken(true).catch(() => null);
+
+        setPreferencesLoadingPhase('fetch-preferences');
+        setPreferencesLoadingProgress(35);
+        appendPreferencesLoadingLog('Fetching language preferences from /api/i18n/preferences');
+
+        const response = await authFetch('/api/i18n/preferences', { cache: 'no-store' });
+        console.debug('[LanguageManagement][Preferences] load:response', {
+          status: response.status,
+          ok: response.ok,
+        });
+
+        if (response.status === 401) {
+          onUnauthorizedRef.current?.();
+          throw new Error('Session expired. Redirecting to login.');
+        }
+
+        const result = await response.json().catch(() => null);
+
+        if (!response.ok || !result?.ok) {
+          throw new Error(result?.message || 'Failed to load language preferences.');
+        }
+
+        const payload = result.preferences && typeof result.preferences === 'object'
+          ? result.preferences
+          : result;
+
+        const loadedCategories = normalizeCategories(payload?.categories);
+        const loadedGlobalKeys = normalizeGlobalKeys(payload?.globalKeys);
+        const loadedEnglishReferenceKeysByLanguage =
+          normalizeEnglishReferenceKeysByLanguage(payload?.englishReferenceKeysByLanguage);
+
+        const effectiveCategories = loadedCategories.length > 0 ? loadedCategories : fallbackCategories;
+        const effectiveGlobalKeys = loadedGlobalKeys;
+        const effectiveEnglishReferenceKeysByLanguage = loadedEnglishReferenceKeysByLanguage;
+
+        lastSavedPreferencesRef.current = serializePreferences(
+          effectiveCategories,
+          effectiveGlobalKeys,
+          effectiveEnglishReferenceKeysByLanguage
+        );
+
+        console.debug('[LanguageManagement][Preferences] load:applied', {
+          categoriesCount: effectiveCategories.length,
+          globalKeysCount: effectiveGlobalKeys.length,
+          englishReferenceLanguagesCount: Object.keys(effectiveEnglishReferenceKeysByLanguage).length,
+        });
+
+        setCategories(effectiveCategories);
+        setGlobalKeys(effectiveGlobalKeys);
+        setEnglishReferenceKeysByLanguage(effectiveEnglishReferenceKeysByLanguage);
+        setIsPreferencesDirty(false);
+        setPreferencesLoadingProgress(90);
+        appendPreferencesLoadingLog('Preferences loaded and applied');
+      } catch (error) {
+        console.debug('[LanguageManagement][Preferences] load:error', {
+          message: error instanceof Error ? error.message : String(error),
+        });
+        setPreferencesLoadingPhase('error');
+        appendPreferencesLoadingLog(`Preferences bootstrap error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        setCategories(fallbackCategories);
+        setGlobalKeys([]);
+        setEnglishReferenceKeysByLanguage({});
+        lastSavedPreferencesRef.current = serializePreferences(fallbackCategories, [], {});
+        setIsPreferencesDirty(false);
+        emitAction({
+          variant: 'warning',
+          message: error instanceof Error
+            ? error.message
+            : 'Failed to load language preferences from backend.',
+        });
+      } finally {
+        setPreferencesHydrated(true);
+        setPreferencesLoadingPhase('ready');
+        setPreferencesLoadingProgress(100);
+        appendPreferencesLoadingLog('Preferences bootstrap complete');
+        console.debug('[LanguageManagement][Preferences] load:hydrated');
+      }
+    };
+
+    void loadPreferences();
+  }, [fallbackCategories]);
+
+  useEffect(() => {
+    if (!preferencesHydrated) return;
+    const currentSerialized = serializePreferences(categories, globalKeys, englishReferenceKeysByLanguage);
+    const nextDirty = currentSerialized !== lastSavedPreferencesRef.current;
+    setIsPreferencesDirty(nextDirty);
+    console.debug('[LanguageManagement][Preferences] dirty:recompute', {
+      preferencesHydrated,
+      categoriesCount: categories.length,
+      globalKeysCount: globalKeys.length,
+      englishReferenceLanguagesCount: Object.keys(englishReferenceKeysByLanguage).length,
+      isDirty: nextDirty,
+    });
+  }, [categories, globalKeys, englishReferenceKeysByLanguage, preferencesHydrated]);
+
+  const savePreferences = async (snapshot?: PreferencesSaveSnapshot) => {
+    const effectiveCategories = snapshot?.categories ?? categories;
+    const effectiveGlobalKeys = snapshot?.globalKeys ?? globalKeys;
+    const effectiveEnglishReferenceKeysByLanguage =
+      snapshot?.englishReferenceKeysByLanguage ?? englishReferenceKeysByLanguage;
+
+    if (!preferencesHydrated) {
+      console.debug('[LanguageManagement][Preferences] save:skipped:notHydrated');
+      return false;
+    }
+
+    const currentSerialized = serializePreferences(
+      effectiveCategories,
+      effectiveGlobalKeys,
+      effectiveEnglishReferenceKeysByLanguage
+    );
+    if (currentSerialized === lastSavedPreferencesRef.current) {
+      console.debug('[LanguageManagement][Preferences] save:skipped:notDirty', {
+        categoriesCount: effectiveCategories.length,
+        globalKeysCount: effectiveGlobalKeys.length,
+        englishReferenceLanguagesCount: Object.keys(effectiveEnglishReferenceKeysByLanguage).length,
+      });
+      return true;
+    }
+
+    console.debug('[LanguageManagement][Preferences] save:start', {
+      categoriesCount: effectiveCategories.length,
+      globalKeysCount: effectiveGlobalKeys.length,
+      globalKeysPreview: effectiveGlobalKeys.slice(0, 8),
+      englishReferenceLanguagesCount: Object.keys(effectiveEnglishReferenceKeysByLanguage).length,
+    });
+
+    setIsSavingPreferences(true);
+    try {
+      const response = await authFetch('/api/i18n/preferences', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          categories: effectiveCategories,
+          globalKeys: effectiveGlobalKeys,
+          englishReferenceKeysByLanguage: effectiveEnglishReferenceKeysByLanguage,
+        }),
+      });
+
+      console.debug('[LanguageManagement][Preferences] save:response', {
+        status: response.status,
+        ok: response.ok,
+      });
+
+      if (response.status === 401) {
+        onUnauthorizedRef.current?.();
+        throw new Error('Session expired. Redirecting to login.');
+      }
+
+      const result = await response.json().catch(() => null);
+      if (!response.ok || !result?.ok) {
+        throw new Error(result?.message || 'Failed to save language preferences.');
+      }
+
+      lastSavedPreferencesRef.current = currentSerialized;
+      setIsPreferencesDirty(false);
+      console.debug('[LanguageManagement][Preferences] save:success');
+      return true;
+    } catch (error) {
+      console.debug('[LanguageManagement][Preferences] save:error', {
+        message: error instanceof Error ? error.message : String(error),
+      });
+      emitAction({
+        variant: 'error',
+        message: error instanceof Error
+          ? error.message
+          : 'Failed to save language preferences.',
+      });
+      return false;
+    } finally {
+      setIsSavingPreferences(false);
+    }
+  };
+
+  const categoriesWithKnownNamespaces = useMemo(() => {
+    const namespaceSet = new Set(namespaces);
+    return categories.map((cat) => ({
+      ...cat,
+      namespaces: cat.namespaces.filter((ns) => namespaceSet.has(ns)),
+    }));
+  }, [categories, namespaces]);
+
+  const categorizedNamespaceSet = useMemo(() => {
+    const set = new Set<string>();
+    for (const cat of categoriesWithKnownNamespaces) {
+      for (const ns of cat.namespaces) set.add(ns);
+    }
+    return set;
+  }, [categoriesWithKnownNamespaces]);
+
+  const uncategorizedNamespaces = useMemo(
+    () => namespaces.filter((ns) => !categorizedNamespaceSet.has(ns)),
+    [namespaces, categorizedNamespaceSet]
+  );
+
+  const addNamespaceToCategory = (categoryId: string, namespace: string) => {
+    if (!namespace) return;
+    setCategories((prev) =>
+      prev.map((cat) => {
+        if (cat.id === categoryId) {
+          if (cat.namespaces.includes(namespace)) return cat;
+          return { ...cat, namespaces: [...cat.namespaces, namespace].sort((a, b) => a.localeCompare(b)) };
+        }
+        return { ...cat, namespaces: cat.namespaces.filter((ns) => ns !== namespace) };
+      })
+    );
+  };
+
+  const removeNamespaceFromCategory = (categoryId: string, namespace: string) => {
+    setCategories((prev) =>
+      prev.map((cat) => (cat.id === categoryId ? { ...cat, namespaces: cat.namespaces.filter((ns) => ns !== namespace) } : cat))
+    );
+  };
+
+  const handleCreateCategory = () => {
+    const label = newCategoryLabel.trim();
+    if (!label) return;
+
+    const duplicate = categories.some((cat) => cat.label.toLowerCase() === label.toLowerCase());
+    if (duplicate) return;
+
+    const baseId = sanitizeCategoryId(label);
+    let id = baseId;
+    let i = 2;
+    while (categories.some((cat) => cat.id === id)) {
+      id = `${baseId}-${i}`;
+      i += 1;
+    }
+
+    setCategories((prev) => [...prev, { id, label, namespaces: [], isCustom: true }]);
+    setNewCategoryLabel('');
+  };
+
+  const deleteCategory = (categoryId: string) => {
+    setCategories((prev) => prev.filter((cat) => cat.id !== categoryId));
+    if (activeCategory === categoryId) setActiveCategory('all');
+  };
+
+  const globalKnownKeys = useMemo(() => {
+    const allKeySet = new Set(allKeys);
+    return globalKeys.filter((key, index, arr) => allKeySet.has(key) && arr.indexOf(key) === index);
+  }, [allKeys, globalKeys]);
+
+  const globalKeySet = useMemo(() => new Set(globalKnownKeys), [globalKnownKeys]);
+
+  const addGlobalKey = (key: string) => {
+    if (!key) return;
+    setGlobalKeys((prev) => {
+      const next = prev.includes(key) ? prev : [...prev, key];
+      console.debug('[LanguageManagement][Preferences] global:add', {
+        key,
+        previousCount: prev.length,
+        nextCount: next.length,
+        changed: next !== prev,
+      });
+      return next;
+    });
+  };
+
+  const removeGlobalKey = (key: string) => {
+    setGlobalKeys((prev) => {
+      const next = prev.filter((k) => k !== key);
+      console.debug('[LanguageManagement][Preferences] global:remove', {
+        key,
+        previousCount: prev.length,
+        nextCount: next.length,
+        changed: next.length !== prev.length,
+      });
+      return next;
+    });
+  };
+
+  const englishReferenceKeySetByLanguage = useMemo(() => {
+    const result: Record<string, Set<string>> = {};
+    for (const [languageCode, keys] of Object.entries(englishReferenceKeysByLanguage)) {
+      result[languageCode] = new Set(keys);
+    }
+    return result;
+  }, [englishReferenceKeysByLanguage]);
+
+  const setEnglishReferenceKey = (languageCode: string, key: string, enabled: boolean) => {
+    if (!languageCode || languageCode === 'en' || !key) return;
+    setEnglishReferenceKeysByLanguage((prev) => {
+      const prevKeys = prev[languageCode] ?? [];
+      const prevSet = new Set(prevKeys);
+      if (enabled) {
+        prevSet.add(key);
+      } else {
+        prevSet.delete(key);
+      }
+
+      const nextKeys = Array.from(prevSet).sort((a, b) => a.localeCompare(b));
+      const next = { ...prev };
+      if (nextKeys.length === 0) {
+        delete next[languageCode];
+      } else {
+        next[languageCode] = nextKeys;
+      }
+
+      console.debug('[LanguageManagement][Preferences] english-reference:set', {
+        languageCode,
+        key,
+        enabled,
+        previousCount: prevKeys.length,
+        nextCount: nextKeys.length,
+      });
+
+      return next;
+    });
+  };
+
+  return {
+    activeCategory,
+    setActiveCategory,
+    showCategoryManagerModal,
+    setShowCategoryManagerModal,
+    isPreferencesDirty,
+    preferencesHydrated,
+    preferencesLoadingPhase,
+    preferencesLoadingProgress,
+    preferencesLoadingLogs,
+    isSavingPreferences,
+    savePreferences,
+    categoriesWithKnownNamespaces,
+    uncategorizedNamespaces,
+    addNamespaceToCategory,
+    removeNamespaceFromCategory,
+    newCategoryLabel,
+    setNewCategoryLabel,
+    assignNamespaceByCategory,
+    setAssignNamespaceByCategory,
+    expandedCategoryId,
+    setExpandedCategoryId,
+    dragNamespace,
+    setDragNamespace,
+    handleCreateCategory,
+    deleteCategory,
+    globalKnownKeys,
+    globalKeySet,
+    addGlobalKey,
+    removeGlobalKey,
+    englishReferenceKeysByLanguage,
+    englishReferenceKeySetByLanguage,
+    setEnglishReferenceKey,
+  };
+}

src/app/admin/language-management/page.tsx

@@ -0,0 +1,965 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import PageLayout from '../../components/PageLayout';
+import TranslationWizardModal from './components/TranslationWizardModal';
+import AddLanguageModal from './components/AddLanguageModal';
+import DeleteLanguageModal from './components/DeleteLanguageModal';
+import CategoryManagerModal from './components/CategoryManagerModal';
+import ScanResultsModal from './components/ScanResultsModal';
+import TranslationCoverageEditor from './components/TranslationCoverageEditor';
+import LanguageManagementTopSection from './components/LanguageManagementTopSection';
+import { useI18nScanWorkflow } from './hooks/useI18nScanWorkflow';
+import { useLanguageManagementTranslations } from './hooks/useLanguageManagementTranslations';
+import { useNamespaceCategories } from './hooks/useNamespaceCategories';
+import { useModalAnimation } from './hooks/useModalAnimation';
+import { useToast } from '../../components/toast/toastComponent';
+import { isPageTransitioning } from '../../components/animation/pageTransitionEffect';
+import {
+  getAllTranslationKeys,
+  getEnglishValue,
+  useTranslation,
+} from '../../i18n/useTranslation';
+
+const CORE_LANGUAGES = new Set(['en', 'de']);
+const AUTO_SCROLL_ON_SAVE_STORAGE_KEY = 'language-management-auto-scroll-on-save';
+
+// ── namespace categories
+const NAMESPACE_CATEGORIES: { label: string; namespaces: string[] }[] = [
+  { label: 'General', namespaces: ['common', 'nav', 'footer', 'home'] },
+  { label: 'Auth', namespaces: ['login', 'register', 'passwordReset'] },
+  { label: 'Pages', namespaces: ['dashboard', 'profile', 'community', 'shop', 'memberships', 'affiliateLinks', 'aboutUs', 'news'] },
+  { label: 'Coffee ABO', namespaces: ['coffeeSelection', 'coffeeSummary'] },
+  { label: 'Account', namespaces: ['personalMatrix', 'referralManagement', 'quickactionDashboard', 'suspended'] },
+  { label: 'Admin', namespaces: ['adminDashboard', 'userManagement', 'languageManagement', 'contractManagement'] },
+  { label: 'Notifications', namespaces: ['toasts'] },
+];
+
+function groupKeys(keys: string[]): Record<string, string[]> {
+  const groups: Record<string, string[]> = {};
+  for (const key of keys) {
+    const ns = key.split('.')[0];
+    if (!groups[ns]) groups[ns] = [];
+    groups[ns].push(key);
+  }
+  return groups;
+}
+
+export default function LanguageManagementPage() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { showToast } = useToast();
+
+  const notifyAction = useCallback((notice: { variant: 'success' | 'error' | 'info' | 'warning'; message: string }) => {
+    showToast({
+      variant: notice.variant,
+      message: notice.message,
+      duration: notice.variant === 'error' ? 6000 : 3500,
+    });
+  }, [showToast]);
+
+  const handleUnauthorized = useCallback(() => {
+    router.push('/login');
+  }, [router]);
+
+  const {
+    showScanModal,
+    setShowScanModal,
+    lastScanTime,
+    isScanning,
+    isAutoFixing,
+    isAddingMissingKeys,
+    scanError,
+    workspaceScan,
+    selectedFiles,
+    fixableFiles,
+    forceConvertToClient,
+    setForceConvertToClient,
+    scan,
+    runFixSelected,
+    addMissingKeys,
+    toggleFileSelection,
+    selectAllFiles,
+    clearSelectedFiles,
+  } = useI18nScanWorkflow({ onUnauthorized: handleUnauthorized });
+
+  // ── all flat keys from the English source-of-truth
+  const allKeys = useMemo(() => getAllTranslationKeys(), []);
+  const keyGroups = useMemo(() => groupKeys(allKeys), [allKeys]);
+  const namespaces = useMemo(() => Object.keys(keyGroups).sort(), [keyGroups]);
+
+  const {
+    data,
+    isLoading: isTranslationsLoading,
+    loadingPhase: translationsLoadingPhase,
+    loadingProgress: translationsLoadingProgress,
+    loadingLogs: translationsLoadingLogs,
+    allLanguages,
+    activeLang,
+    setActiveLang,
+    getDisplayValue,
+    isDirty,
+    saved,
+    saveError,
+    handleChange,
+    handleSave,
+    showAddModal,
+    setShowAddModal,
+    newCode,
+    setNewCode,
+    newName,
+    setNewName,
+    addError,
+    setAddError,
+    handleAddLanguage,
+    deleteTarget,
+    setDeleteTarget,
+    handleDeleteLanguage,
+    isBuiltin,
+  } = useLanguageManagementTranslations({
+    coreLanguages: CORE_LANGUAGES,
+    onAction: notifyAction,
+    onUnauthorized: handleUnauthorized,
+  });
+
+  const [showTranslationWizard, setShowTranslationWizard] = useState(false);
+  const [wizardIndex, setWizardIndex] = useState(0);
+  const [wizardInput, setWizardInput] = useState('');
+  const [wizardMarkGlobal, setWizardMarkGlobal] = useState(false);
+  const [wizardUseEnglishReference, setWizardUseEnglishReference] = useState(false);
+  const [isWizardSavingStep, setIsWizardSavingStep] = useState(false);
+
+  const [newGlobalKeySelection, setNewGlobalKeySelection] = useState('');
+  const [reloadAfterScanClose, setReloadAfterScanClose] = useState(false);
+  const [pendingAutoFixResult, setPendingAutoFixResult] = useState(false);
+
+  const {
+    activeCategory,
+    setActiveCategory,
+    showCategoryManagerModal,
+    setShowCategoryManagerModal,
+    isPreferencesDirty,
+    preferencesHydrated,
+    preferencesLoadingPhase,
+    preferencesLoadingProgress,
+    preferencesLoadingLogs,
+    isSavingPreferences,
+    savePreferences,
+    categoriesWithKnownNamespaces,
+    uncategorizedNamespaces,
+    addNamespaceToCategory,
+    removeNamespaceFromCategory,
+    newCategoryLabel,
+    setNewCategoryLabel,
+    assignNamespaceByCategory,
+    setAssignNamespaceByCategory,
+    expandedCategoryId,
+    setExpandedCategoryId,
+    dragNamespace,
+    setDragNamespace,
+    handleCreateCategory,
+    deleteCategory,
+    globalKnownKeys,
+    globalKeySet,
+    addGlobalKey,
+    removeGlobalKey,
+    englishReferenceKeysByLanguage,
+    englishReferenceKeySetByLanguage,
+    setEnglishReferenceKey,
+  } = useNamespaceCategories({
+    namespaces,
+    allKeys,
+    defaultCategories: NAMESPACE_CATEGORIES,
+    onAction: notifyAction,
+    onUnauthorized: handleUnauthorized,
+  });
+
+  const hasUnsavedChanges = isDirty || isPreferencesDirty;
+  const isInitialDataLoading = isTranslationsLoading || !preferencesHydrated;
+  const initialLoadingProgress = Math.round((translationsLoadingProgress + preferencesLoadingProgress) / 2);
+  const [isPageTransitionDone, setIsPageTransitionDone] = useState(() => !isPageTransitioning);
+  const [showDelayedFetchingScreen, setShowDelayedFetchingScreen] = useState(false);
+  const [showDelayedFetchLogs, setShowDelayedFetchLogs] = useState(false);
+  const combinedLoadingLogs = useMemo(() => {
+    const preferenceLines = preferencesLoadingLogs.map((line) => `[PREF] ${line}`);
+    const translationLines = translationsLoadingLogs.map((line) => `[I18N] ${line}`);
+    return [...preferenceLines, ...translationLines].slice(-18);
+  }, [preferencesLoadingLogs, translationsLoadingLogs]);
+  const { isRendered: isSaveBarRendered, isVisible: isSaveBarVisible } = useModalAnimation(hasUnsavedChanges);
+
+  useEffect(() => {
+    if (isPageTransitionDone) return;
+    let rafId: number | null = null;
+
+    const pollTransition = () => {
+      if (!isPageTransitioning) {
+        setIsPageTransitionDone(true);
+        return;
+      }
+      rafId = window.requestAnimationFrame(pollTransition);
+    };
+
+    rafId = window.requestAnimationFrame(pollTransition);
+    return () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+    };
+  }, [isPageTransitionDone]);
+
+  useEffect(() => {
+    if (!isInitialDataLoading || !isPageTransitionDone) {
+      setShowDelayedFetchingScreen(false);
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => setShowDelayedFetchingScreen(true), 350);
+    return () => window.clearTimeout(timeoutId);
+  }, [isInitialDataLoading, isPageTransitionDone]);
+
+  useEffect(() => {
+    if (!showDelayedFetchingScreen) {
+      setShowDelayedFetchLogs(false);
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => setShowDelayedFetchLogs(true), 1400);
+    return () => window.clearTimeout(timeoutId);
+  }, [showDelayedFetchingScreen]);
+
+  const showFetchingScreen = isInitialDataLoading && isPageTransitionDone && showDelayedFetchingScreen;
+  const showWarmGap = isInitialDataLoading && isPageTransitionDone && !showDelayedFetchingScreen;
+
+  // ── search / filter
+  const [search, setSearch] = useState('');
+  const [autoScrollOnPanelOpen, setAutoScrollOnPanelOpen] = useState(true);
+  const [autoScrollOnSave, setAutoScrollOnSave] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem(AUTO_SCROLL_ON_SAVE_STORAGE_KEY) === '1';
+  });
+  const [activeNamespacePanel, setActiveNamespacePanel] = useState<string | null>(null);
+
+  const languageManagementHeaderRef = useRef<HTMLDivElement | null>(null);
+  const openedNamespacePanelRef = useRef<HTMLDivElement | null>(null);
+  const openFromPanelClickRef = useRef(false);
+  const saveBarRef = useRef<HTMLDivElement | null>(null);
+
+  const [showScrollHint, setShowScrollHint] = useState(false);
+  const scrollHintTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { isRendered: isHintRendered, isVisible: isHintVisible } = useModalAnimation(showScrollHint);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(AUTO_SCROLL_ON_SAVE_STORAGE_KEY, autoScrollOnSave ? '1' : '0');
+  }, [autoScrollOnSave]);
+
+  const filteredGroups = useMemo(() => {
+    const q = search.toLowerCase();
+    if (!q) return keyGroups;
+    const result: Record<string, string[]> = {};
+    for (const [ns, keys] of Object.entries(keyGroups)) {
+      const filtered = keys.filter(
+        (k) =>
+          k.toLowerCase().includes(q) ||
+          getEnglishValue(k).toLowerCase().includes(q)
+      );
+      if (filtered.length > 0) result[ns] = filtered;
+    }
+    return result;
+  }, [keyGroups, search]);
+
+  // ── scan results: coverage per namespace
+  const scanResults = useMemo(() => {
+    return namespaces.map((ns) => {
+      const keys = keyGroups[ns] ?? [];
+      let translated = 0;
+      if (activeLang === 'en') {
+        translated = keys.length; // English is the source
+      } else {
+        translated = keys.filter((k) => getDisplayValue(k) !== '').length;
+      }
+      return { ns, total: keys.length, translated, missing: keys.length - translated };
+    });
+  }, [namespaces, keyGroups, activeLang, getDisplayValue]);
+
+
+  const categoryNamespaces = useMemo(() => {
+    if (activeCategory === 'all') return null; // null = no filter
+    if (activeCategory === 'global') return [];
+    return categoriesWithKnownNamespaces.find((c) => c.id === activeCategory)?.namespaces ?? [];
+  }, [activeCategory, categoriesWithKnownNamespaces]);
+
+  const filteredNs = useMemo(() => {
+    if (activeCategory === 'global') return [];
+    const base = Object.keys(filteredGroups).sort();
+    if (!categoryNamespaces) return base;
+    return base.filter((ns) => categoryNamespaces.includes(ns));
+  }, [activeCategory, filteredGroups, categoryNamespaces]);
+
+  // Keep active panel in sync with currently visible namespaces
+  useEffect(() => {
+    if (activeCategory === 'global') {
+      setActiveNamespacePanel(null);
+      return;
+    }
+
+    if (filteredNs.length === 0) {
+      setActiveNamespacePanel(null);
+      return;
+    }
+
+    if (!activeNamespacePanel || !filteredNs.includes(activeNamespacePanel)) {
+      setActiveNamespacePanel(filteredNs[0]);
+    }
+  }, [activeCategory, filteredNs, activeNamespacePanel]);
+
+  const totalKeys = allKeys.length;
+
+  const isMissingForLanguage = (key: string, languageCode: string) => {
+    if (languageCode === 'en') return false;
+    if (globalKeySet.has(key)) return false;
+    if (englishReferenceKeySetByLanguage[languageCode]?.has(key)) return false;
+
+    const value = (data.translations[languageCode]?.[key] ?? '').trim();
+    const englishValue = getEnglishValue(key).trim();
+    return value === '' || value === englishValue;
+  };
+
+  const namespaceTranslationStats = useMemo(() => {
+    const stats: Record<string, { total: number; translated: number; missing: number }> = {};
+
+    for (const ns of namespaces) {
+      const keys = keyGroups[ns] ?? [];
+      const total = keys.length;
+      let translated = 0;
+
+      if (activeLang === 'en') {
+        translated = total;
+      } else {
+        translated = keys.filter((k) => !isMissingForLanguage(k, activeLang)).length;
+      }
+
+      stats[ns] = { total, translated, missing: Math.max(total - translated, 0) };
+    }
+
+    return stats;
+  }, [namespaces, keyGroups, activeLang, data.translations, globalKeySet]);
+
+  const allTabStats = useMemo(() => {
+    return Object.values(namespaceTranslationStats).reduce(
+      (acc, cur) => ({
+        total: acc.total + cur.total,
+        translated: acc.translated + cur.translated,
+        missing: acc.missing + cur.missing,
+      }),
+      { total: 0, translated: 0, missing: 0 }
+    );
+  }, [namespaceTranslationStats]);
+
+  const categoryTabStats = useMemo(() => {
+    const result: Record<string, { total: number; translated: number; missing: number }> = {};
+    for (const cat of categoriesWithKnownNamespaces) {
+      result[cat.id] = cat.namespaces.reduce(
+        (acc, ns) => {
+          const st = namespaceTranslationStats[ns] ?? { total: 0, translated: 0, missing: 0 };
+          return {
+            total: acc.total + st.total,
+            translated: acc.translated + st.translated,
+            missing: acc.missing + st.missing,
+          };
+        },
+        { total: 0, translated: 0, missing: 0 }
+      );
+    }
+    return result;
+  }, [categoriesWithKnownNamespaces, namespaceTranslationStats]);
+
+  const translationProgressPercent = useMemo(() => {
+    if (allTabStats.total === 0) return 100;
+    return Math.round((allTabStats.translated / allTabStats.total) * 100);
+  }, [allTabStats]);
+
+  const wizardMissingKeys = useMemo(() => {
+    if (activeLang === 'en') return [] as string[];
+    return allKeys.filter((k) => isMissingForLanguage(k, activeLang));
+  }, [activeLang, allKeys, data.translations, globalKeySet]);
+
+  const currentWizardKey = showTranslationWizard ? wizardMissingKeys[wizardIndex] ?? null : null;
+
+  const globalFilteredKeys = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return [...globalKnownKeys].sort();
+    return globalKnownKeys
+      .filter((key) => key.toLowerCase().includes(q) || getEnglishValue(key).toLowerCase().includes(q))
+      .sort();
+  }, [globalKnownKeys, search]);
+
+  const availableGlobalKeyOptions = useMemo(() => {
+    const globalSet = new Set(globalKnownKeys);
+    return allKeys.filter((key) => !globalSet.has(key)).sort();
+  }, [allKeys, globalKnownKeys]);
+
+  const globalTabStats = useMemo(() => {
+    const total = globalKnownKeys.length;
+    // Global keys are intentionally the same across languages — never count as missing
+    return { total, translated: total, missing: 0 };
+  }, [globalKnownKeys]);
+
+  useEffect(() => {
+    if (!showTranslationWizard) return;
+    if (wizardMissingKeys.length === 0) {
+      setShowTranslationWizard(false);
+      return;
+    }
+    if (wizardIndex > wizardMissingKeys.length - 1) {
+      setWizardIndex(0);
+      return;
+    }
+
+    const key = wizardMissingKeys[wizardIndex];
+    setWizardInput(data.translations[activeLang]?.[key] ?? '');
+    setWizardMarkGlobal(globalKnownKeys.includes(key));
+    setWizardUseEnglishReference(Boolean(englishReferenceKeySetByLanguage[activeLang]?.has(key)));
+  }, [showTranslationWizard, wizardIndex, wizardMissingKeys, data.translations, activeLang, globalKnownKeys, englishReferenceKeySetByLanguage]);
+
+  const saveCurrentWizardValue = () => {
+    if (!currentWizardKey) return;
+
+    const trimmedWizardInput = wizardInput.trim();
+    const englishValue = getEnglishValue(currentWizardKey).trim();
+    const nextTranslations: Record<string, Record<string, string>> = {
+      ...data.translations,
+      [activeLang]: {
+        ...(data.translations[activeLang] ?? {}),
+      },
+    };
+
+    const nextGlobalKeysSet = new Set(globalKnownKeys);
+    const nextEnglishReferenceKeysByLanguage = {
+      ...englishReferenceKeysByLanguage,
+      [activeLang]: [...(englishReferenceKeysByLanguage[activeLang] ?? [])],
+    };
+    const nextEnglishReferenceSet = new Set(nextEnglishReferenceKeysByLanguage[activeLang] ?? []);
+
+    if (wizardUseEnglishReference) {
+      nextTranslations[activeLang][currentWizardKey] = englishValue;
+      handleChange(currentWizardKey, englishValue);
+
+      setEnglishReferenceKey(activeLang, currentWizardKey, true);
+      nextEnglishReferenceSet.add(currentWizardKey);
+
+      if (wizardMarkGlobal) {
+        addGlobalKey(currentWizardKey);
+        nextGlobalKeysSet.add(currentWizardKey);
+      } else {
+        removeGlobalKey(currentWizardKey);
+        nextGlobalKeysSet.delete(currentWizardKey);
+      }
+
+      nextEnglishReferenceKeysByLanguage[activeLang] = [...nextEnglishReferenceSet].sort((a, b) => a.localeCompare(b));
+      return {
+        nextTranslations,
+        preferencesSnapshot: {
+          globalKeys: [...nextGlobalKeysSet].sort((a, b) => a.localeCompare(b)),
+          englishReferenceKeysByLanguage: nextEnglishReferenceKeysByLanguage,
+        },
+      };
+    }
+
+    // Global keys intentionally reuse the source term and don't require a local override.
+    const nextValue = wizardMarkGlobal && trimmedWizardInput === englishValue
+      ? ''
+      : trimmedWizardInput;
+
+    nextTranslations[activeLang][currentWizardKey] = nextValue;
+    handleChange(currentWizardKey, nextValue);
+
+    setEnglishReferenceKey(activeLang, currentWizardKey, false);
+    nextEnglishReferenceSet.delete(currentWizardKey);
+
+    if (wizardMarkGlobal) {
+      addGlobalKey(currentWizardKey);
+      nextGlobalKeysSet.add(currentWizardKey);
+    } else {
+      removeGlobalKey(currentWizardKey);
+      nextGlobalKeysSet.delete(currentWizardKey);
+    }
+
+    const normalizedEnglishReferenceKeysByLanguage = { ...nextEnglishReferenceKeysByLanguage };
+    const normalizedKeys = [...nextEnglishReferenceSet].sort((a, b) => a.localeCompare(b));
+    if (normalizedKeys.length === 0) {
+      delete normalizedEnglishReferenceKeysByLanguage[activeLang];
+    } else {
+      normalizedEnglishReferenceKeysByLanguage[activeLang] = normalizedKeys;
+    }
+
+    return {
+      nextTranslations,
+      preferencesSnapshot: {
+        globalKeys: [...nextGlobalKeysSet].sort((a, b) => a.localeCompare(b)),
+        englishReferenceKeysByLanguage: normalizedEnglishReferenceKeysByLanguage,
+      },
+    };
+  };
+
+  const openTranslationWizard = () => {
+    if (wizardMissingKeys.length === 0) return;
+    setWizardIndex(0);
+    setShowTranslationWizard(true);
+  };
+
+  const goToNextWizardStep = async () => {
+    if (isWizardSavingStep) return;
+
+    setIsWizardSavingStep(true);
+    const saveSnapshot = saveCurrentWizardValue();
+    try {
+      if (saveSnapshot) {
+        // Persist both translation content and preferences on every wizard step.
+        await handleSave(saveSnapshot.nextTranslations);
+        await savePreferences(saveSnapshot.preferencesSnapshot);
+      }
+      if (wizardIndex >= wizardMissingKeys.length - 1) {
+        setShowTranslationWizard(false);
+        return;
+      }
+      setWizardIndex((prev) => prev + 1);
+    } finally {
+      setIsWizardSavingStep(false);
+    }
+  };
+
+  const skipWizardStep = () => {
+    if (wizardIndex >= wizardMissingKeys.length - 1) {
+      setShowTranslationWizard(false);
+      return;
+    }
+    setWizardIndex((prev) => prev + 1);
+  };
+
+  const goToPreviousWizardStep = () => {
+    if (wizardIndex <= 0) return;
+    setWizardIndex((prev) => prev - 1);
+  };
+
+  useEffect(() => {
+    if (!activeNamespacePanel) return;
+    if (!openFromPanelClickRef.current) return;
+    if (!autoScrollOnPanelOpen || !openedNamespacePanelRef.current) {
+      openFromPanelClickRef.current = false;
+      return;
+    }
+
+    openedNamespacePanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    openFromPanelClickRef.current = false;
+  }, [activeNamespacePanel, autoScrollOnPanelOpen]);
+
+  const scrollToLanguageManagementHeader = () => {
+    if (!languageManagementHeaderRef.current) return;
+    languageManagementHeaderRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  // Show scroll-to-save hint whenever a namespace panel is opened and there are unsaved changes
+  // It stays visible until explicitly dismissed (button click) or save bar disappears
+  useEffect(() => {
+    if (!activeNamespacePanel || !isSaveBarRendered) {
+      setShowScrollHint(false);
+      return;
+    }
+    if (scrollHintTimerRef.current) clearTimeout(scrollHintTimerRef.current);
+    setShowScrollHint(true);
+  }, [activeNamespacePanel, isSaveBarRendered]);
+
+  // Hide scroll hint when the save bar scrolls into view
+  useEffect(() => {
+    const el = saveBarRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => { if (entry.isIntersecting) setShowScrollHint(false); },
+      { threshold: 0.5 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isSaveBarRendered]);
+
+  useEffect(() => {
+    if (!pendingAutoFixResult || !workspaceScan) return;
+
+    const changedFiles = workspaceScan.changedFileCount ?? 0;
+    const createdKeys = workspaceScan.createdKeyCount ?? 0;
+    if (changedFiles > 0 || createdKeys > 0) {
+      setReloadAfterScanClose(true);
+      showToast({
+        variant: 'success',
+        message: `Auto-fix finished: ${changedFiles} files updated, ${createdKeys} keys created.`,
+        duration: 4200,
+      });
+    }
+
+    setPendingAutoFixResult(false);
+  }, [pendingAutoFixResult, workspaceScan, showToast]);
+
+  const handleRunFixSelected = async () => {
+    setPendingAutoFixResult(true);
+    await runFixSelected();
+  };
+
+  const closeScanModal = () => {
+    setShowScanModal(false);
+    if (!reloadAfterScanClose) return;
+
+    showToast({
+      variant: 'info',
+      message: t('autofix.k3871d88e'),
+      duration: 1800,
+    });
+
+    setTimeout(() => {
+      if (typeof window !== 'undefined') {
+        window.location.reload();
+      }
+    }, 260);
+
+    setReloadAfterScanClose(false);
+  };
+
+  const handleSaveAll = async () => {
+    const hadChangesToSave = isDirty || isPreferencesDirty;
+    console.debug('[LanguageManagement][SaveAll] start', {
+      isDirty,
+      isPreferencesDirty,
+      hasUnsavedChanges,
+      autoScrollOnSave,
+    });
+
+    if (isDirty) {
+      console.debug('[LanguageManagement][SaveAll] saving:translations');
+      await handleSave();
+      console.debug('[LanguageManagement][SaveAll] saved:translations');
+    }
+
+    if (isPreferencesDirty) {
+      console.debug('[LanguageManagement][SaveAll] saving:preferences');
+      const savedPreferences = await savePreferences();
+      console.debug('[LanguageManagement][SaveAll] saved:preferences', { savedPreferences });
+    }
+
+    if (autoScrollOnSave && hadChangesToSave) {
+      scrollToLanguageManagementHeader();
+    }
+
+    console.debug('[LanguageManagement][SaveAll] done');
+  };
+
+  return (
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+        <div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+        {showFetchingScreen ? (
+          <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+            <div className="flex items-center gap-4">
+              <div className="relative h-10 w-10">
+                <span className="absolute inset-0 rounded-full border-2 border-slate-200" />
+                <span className="absolute inset-0 animate-spin rounded-full border-2 border-transparent border-t-slate-700" />
+              </div>
+              <div className="space-y-1">
+                <p className="text-sm font-semibold text-slate-900">{t('autofix.k78e1bf35')}</p>
+                <p className="text-xs text-slate-500">
+                  I18N: {translationsLoadingPhase} | PREF: {preferencesLoadingPhase}
+                </p>
+              </div>
+              <div className="ml-auto text-sm font-semibold text-slate-700">{initialLoadingProgress}%</div>
+            </div>
+            <div className="mt-5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
+              <div
+                className="h-full rounded-full bg-slate-600 transition-[width] duration-300"
+                style={{ width: `${Math.max(6, initialLoadingProgress)}%` }}
+              />
+            </div>
+
+            {showDelayedFetchLogs && (
+              <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-950/95 p-3 text-slate-100 shadow-inner">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold tracking-wide text-slate-200">{t('autofix.k1c7ec4f2')}</p>
+                  <p className="text-[11px] text-slate-400">{t('autofix.k057b3dbd')}</p>
+                </div>
+                <div className="mt-2 h-40 overflow-y-auto rounded-lg bg-black/30 p-2 font-mono text-[11px] leading-5">
+                  {combinedLoadingLogs.length === 0 ? (
+                    <p className="text-slate-400">{t('autofix.k835d3cbf')}</p>
+                  ) : (
+                    combinedLoadingLogs.map((line, idx) => (
+                      <p key={`${line}-${idx}`} className="text-slate-200">{line}</p>
+                    ))
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : showWarmGap ? (
+          <div className="h-24" />
+        ) : (
+          <>
+        <LanguageManagementTopSection
+          headerRef={languageManagementHeaderRef}
+          totalKeys={totalKeys}
+          onScan={scan}
+          isScanning={isScanning}
+          isAutoFixing={isAutoFixing}
+          onBackToAdmin={() => router.push('/admin')}
+          isDirty={hasUnsavedChanges}
+          onSave={handleSaveAll}
+          saved={saved}
+          saveError={saveError}
+          allLanguages={allLanguages}
+          activeLang={activeLang}
+          setActiveLang={setActiveLang}
+          isBuiltin={isBuiltin}
+          onDeleteLanguageRequest={setDeleteTarget}
+          onOpenAddLanguage={() => setShowAddModal(true)}
+          allTabStats={allTabStats}
+          translationProgressPercent={translationProgressPercent}
+          wizardMissingKeysCount={wizardMissingKeys.length}
+          onOpenTranslationWizard={openTranslationWizard}
+        />
+
+        <TranslationCoverageEditor
+          activeCategory={activeCategory}
+          setActiveCategory={setActiveCategory}
+          categoriesWithKnownNamespaces={categoriesWithKnownNamespaces}
+          allTabStats={allTabStats}
+          categoryTabStats={categoryTabStats}
+          globalTabStats={globalTabStats}
+          activeLang={activeLang}
+          allLanguages={allLanguages}
+          search={search}
+          setSearch={setSearch}
+          autoScrollOnPanelOpen={autoScrollOnPanelOpen}
+          setAutoScrollOnPanelOpen={setAutoScrollOnPanelOpen}
+          autoScrollOnSave={autoScrollOnSave}
+          setAutoScrollOnSave={setAutoScrollOnSave}
+          newGlobalKeySelection={newGlobalKeySelection}
+          setNewGlobalKeySelection={setNewGlobalKeySelection}
+          availableGlobalKeyOptions={availableGlobalKeyOptions}
+          addGlobalKey={addGlobalKey}
+          globalFilteredKeys={globalFilteredKeys}
+          removeGlobalKey={removeGlobalKey}
+          getDisplayValue={getDisplayValue}
+          translations={data.translations}
+          handleChange={handleChange}
+          globalKeySet={globalKeySet}
+          englishReferenceKeySet={englishReferenceKeySetByLanguage[activeLang] ?? new Set<string>()}
+          setEnglishReferenceForKey={(key, enabled) => {
+            setEnglishReferenceKey(activeLang, key, enabled);
+            if (enabled) {
+              handleChange(key, getEnglishValue(key));
+            }
+          }}
+          filteredNs={filteredNs}
+          filteredGroups={filteredGroups}
+          activeNamespacePanel={activeNamespacePanel}
+          setActiveNamespacePanel={setActiveNamespacePanel}
+          namespaceTranslationStats={namespaceTranslationStats}
+          openedNamespacePanelRef={openedNamespacePanelRef}
+          openFromPanelClickRef={openFromPanelClickRef}
+          onBackToPanels={scrollToLanguageManagementHeader}
+          onOpenCategoryManager={() => setShowCategoryManagerModal(true)}
+        />
+          </>
+        )}
+
+        </div>
+      </div>
+
+      {/* Scroll-to-top floating button */}
+      <button
+        type="button"
+        aria-label={t('autofix.kb494ddd8')}
+        onClick={scrollToLanguageManagementHeader}
+        className="group fixed bottom-36 right-5 z-50 flex h-10 w-10 items-center justify-center rounded-full border border-white/70 bg-white/80 shadow-[0_8px_24px_-8px_rgba(15,23,42,0.28)] backdrop-blur-md transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 hover:bg-white hover:shadow-[0_12px_32px_-10px_rgba(15,23,42,0.36)]"
+      >
+        <svg className="h-4 w-4 text-slate-700 transition-transform duration-300 ease-out group-hover:-translate-y-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 15l7-7 7 7" />
+        </svg>
+      </button>
+
+      {/* Scroll-to-save floating button */}
+      <button
+        type="button"
+        aria-label={t('autofix.k889cc3e3')}
+        onClick={() => {
+          if (saveBarRef.current) {
+            saveBarRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+          } else {
+            const roots = [
+              document.scrollingElement,
+              document.documentElement,
+              document.body,
+            ].filter(Boolean) as HTMLElement[];
+
+            const maxScrollTop = Math.max(
+              0,
+              ...roots.map((root) => root.scrollHeight - window.innerHeight)
+            );
+
+            // Trigger scroll on all possible roots so it works regardless of which element owns scrolling.
+            roots.forEach((root) => {
+              root.scrollTo({ top: maxScrollTop, behavior: 'smooth' });
+            });
+            window.scrollTo({ top: maxScrollTop, behavior: 'smooth' });
+          }
+          setShowScrollHint(false);
+        }}
+        className="group fixed bottom-24 right-5 z-50 flex h-10 w-10 items-center justify-center rounded-full border border-white/70 bg-white/80 shadow-[0_8px_24px_-8px_rgba(15,23,42,0.28)] backdrop-blur-md transition-all duration-300 ease-out hover:translate-y-0.5 hover:scale-105 hover:bg-white hover:shadow-[0_12px_32px_-10px_rgba(15,23,42,0.36)]"
+      >
+        <svg className="h-4 w-4 text-slate-700 transition-transform duration-300 ease-out group-hover:translate-y-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Scroll-to-save hint tooltip */}
+      {isHintRendered && (
+        <button
+          type="button"
+          aria-label={t('autofix.k0b27fdf8')}
+          onClick={() => {
+            saveBarRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            setShowScrollHint(false);
+          }}
+          className={`fixed bottom-[5.25rem] right-[4rem] z-50 transition-all duration-500 ${
+            isHintVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-3 pointer-events-none'
+          }`}
+        >
+          {/* outer pulsing ring */}
+          <span className="absolute inset-0 rounded-2xl animate-pulse bg-gradient-to-br from-sky-400/20 via-blue-300/15 to-indigo-400/20" />
+          <div className="relative flex items-center gap-2.5 rounded-2xl border border-blue-300/80 bg-gradient-to-br from-sky-50 via-blue-50 to-indigo-50 px-3.5 py-2.5 shadow-[0_8px_28px_-8px_rgba(37,99,235,0.35)] backdrop-blur-md">
+            {/* logo */}
+            <img
+              src="/images/logos/PP_Logo_BW_round.png"
+              alt={t('autofix.k788633d1')}
+              className="h-7 w-7 rounded-full border border-blue-200/70 shadow-sm shrink-0 object-cover"
+            />
+            <div className="flex flex-col leading-tight">
+              <span className="text-[11px] font-bold text-blue-950 whitespace-nowrap">{t('autofix.k5188f06f')}</span>
+              <span className="text-[10px] font-medium text-blue-700 whitespace-nowrap">Click to scroll &amp; save ↓</span>
+            </div>
+            {/* pulsing dot */}
+            <span className="relative flex h-2 w-2 shrink-0">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-75" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500" />
+            </span>
+            {/* caret pointing right toward the chevron button */}
+            <span className="absolute -right-[5px] top-1/2 -translate-y-1/2 h-2.5 w-2.5 rotate-45 border-r border-t border-blue-300/80 bg-indigo-50" />
+          </div>
+        </button>
+      )}
+
+      {/* Glassy save bar */}
+      {isSaveBarRendered && (
+        <div
+          ref={saveBarRef}
+          className={`w-full border-t border-white/60 bg-white/70 backdrop-blur-md px-4 py-4 transition-opacity duration-300 ${
+            isSaveBarVisible ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <div className="max-w-[1820px] mx-auto flex items-center justify-between gap-4">
+            <span className="text-sm font-medium text-slate-700">{t('autofix.kd63c8219')}</span>
+            <button
+              onClick={handleSaveAll}
+              disabled={isSavingPreferences}
+              className="rounded-2xl bg-slate-900 text-white px-5 py-2 text-sm font-semibold shadow-[0_18px_40px_-24px_rgba(15,23,42,0.85)] hover:bg-slate-800 transition disabled:opacity-50"
+            >{isSavingPreferences ? t('autofix.kac6cedc7') : 'Save'}</button>
+          </div>
+        </div>
+      )}
+
+      <TranslationWizardModal
+        isOpen={showTranslationWizard}
+        currentWizardKey={currentWizardKey}
+        wizardIndex={wizardIndex}
+        wizardMissingCount={wizardMissingKeys.length}
+        activeLang={activeLang}
+        allLanguages={allLanguages}
+        wizardInput={wizardInput}
+        setWizardInput={setWizardInput}
+        wizardMarkGlobal={wizardMarkGlobal}
+        setWizardMarkGlobal={setWizardMarkGlobal}
+        wizardUseEnglishReference={wizardUseEnglishReference}
+        setWizardUseEnglishReference={setWizardUseEnglishReference}
+        englishValue={currentWizardKey ? getEnglishValue(currentWizardKey) : ''}
+        addGlobalKey={addGlobalKey}
+        removeGlobalKey={removeGlobalKey}
+        onClose={() => setShowTranslationWizard(false)}
+        onPrevious={goToPreviousWizardStep}
+        onSkip={skipWizardStep}
+        onNext={goToNextWizardStep}
+        isSavingStep={isWizardSavingStep}
+      />
+
+      <AddLanguageModal
+        isOpen={showAddModal}
+        newCode={newCode}
+        setNewCode={setNewCode}
+        newName={newName}
+        setNewName={setNewName}
+        addError={addError}
+        setAddError={setAddError}
+        onClose={() => setShowAddModal(false)}
+        onAdd={handleAddLanguage}
+      />
+
+      <DeleteLanguageModal
+        deleteTarget={deleteTarget}
+        allLanguages={allLanguages}
+        onClose={() => setDeleteTarget(null)}
+        onDelete={handleDeleteLanguage}
+      />
+
+      <CategoryManagerModal
+        isOpen={showCategoryManagerModal}
+        onClose={() => {
+          setShowCategoryManagerModal(false);
+          if (isPreferencesDirty) void savePreferences();
+        }}
+        newCategoryLabel={newCategoryLabel}
+        setNewCategoryLabel={setNewCategoryLabel}
+        onCreateCategory={handleCreateCategory}
+        uncategorizedNamespaces={uncategorizedNamespaces}
+        categoriesWithKnownNamespaces={categoriesWithKnownNamespaces}
+        namespaces={namespaces}
+        assignNamespaceByCategory={assignNamespaceByCategory}
+        setAssignNamespaceByCategory={setAssignNamespaceByCategory}
+        expandedCategoryId={expandedCategoryId}
+        setExpandedCategoryId={setExpandedCategoryId}
+        dragNamespace={dragNamespace}
+        setDragNamespace={setDragNamespace}
+        addNamespaceToCategory={addNamespaceToCategory}
+        removeNamespaceFromCategory={removeNamespaceFromCategory}
+        deleteCategory={deleteCategory}
+      />
+
+      <ScanResultsModal
+        isOpen={showScanModal}
+        onClose={closeScanModal}
+        lastScanTime={lastScanTime}
+        workspaceScan={workspaceScan}
+        totalKeys={totalKeys}
+        namespacesCount={namespaces.length}
+        allLanguages={allLanguages}
+        activeLang={activeLang}
+        scanResults={scanResults}
+        scanError={scanError}
+        isScanning={isScanning}
+        isAutoFixing={isAutoFixing}
+        isAddingMissingKeys={isAddingMissingKeys}
+        fixableFiles={fixableFiles}
+        selectedFiles={selectedFiles}
+        forceConvertToClient={forceConvertToClient}
+        onToggleFile={toggleFileSelection}
+        onSelectAll={selectAllFiles}
+        onClear={clearSelectedFiles}
+        onToggleForceConvertToClient={() => setForceConvertToClient((prev) => !prev)}
+        onRunFixSelected={handleRunFixSelected}
+        onAddMissingKeys={addMissingKeys}
+      />
+    </PageLayout>
+  );
+}

src/app/admin/layout.tsx

@@ -49,8 +49,17 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
         } catch {}
       }
 
-      const currentUser = useAuthStore.getState().user
-      const ok = isUserAdmin(currentUser)
+      let currentUser = useAuthStore.getState().user
+      let ok = isUserAdmin(currentUser)
+
+      if (currentUser && !ok) {
+        try {
+          console.log('🔐 AdminLayout: user present but not admin, revalidating via refresh')
+          await refreshAuthToken?.()
+        } catch {}
+        currentUser = useAuthStore.getState().user
+        ok = isUserAdmin(currentUser)
+      }
 
       console.log('🔐 AdminLayout guard:resolved', {
         hasUser: !!currentUser,

src/app/admin/matrix-management/detail/components/searchModal.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+
+import { useTranslation } from '../../../../i18n/useTranslation';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { MagnifyingGlassIcon, XMarkIcon, BuildingOffice2Icon, UserIcon } from '@heroicons/react/24/outline'
@@ -29,6 +32,7 @@ export default function SearchModal({
   onAdd,
   policyMaxDepth // NEW
 }: Props) {
+  const { t } = useTranslation();
   const [query, setQuery] = useState('')
   const [typeFilter, setTypeFilter] = useState<'all' | UserType>('all')
   const [loading, setLoading] = useState(false)
@@ -277,9 +281,7 @@ export default function SearchModal({
                 <XMarkIcon className="h-5 w-5" />
               </button>
             </div>
-            <p className="mt-1 text-xs text-blue-200">
-              Search by name or email. Minimum 3 characters. Existing matrix members are hidden.
-            </p>
+            <p className="mt-1 text-xs text-blue-200">{t('autofix.kd642e230')}</p>
           </div>
 
           {/* Form */}
@@ -298,7 +300,7 @@ export default function SearchModal({
                 <input
                   value={query}
                   onChange={e => setQuery(e.target.value)}
-                  placeholder="Search name or email…"
+                  placeholder={t('autofix.kb35549bb')}
                   className="w-full rounded-md bg-[#173456] border border-blue-800 text-sm text-blue-100 placeholder-blue-300 pl-8 pr-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                 />
               </div>
@@ -310,7 +312,7 @@ export default function SearchModal({
                 onChange={e => setTypeFilter(e.target.value as any)}
                 className="w-full rounded-md bg-[#173456] border border-blue-800 text-sm text-blue-100 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
               >
-                <option value="all">All Types</option>
+                <option value="all">{t('autofix.k10e2568f')}</option>
                 <option value="personal">Personal</option>
                 <option value="company">Company</option>
               </select>
@@ -321,9 +323,7 @@ export default function SearchModal({
                 type="submit"
                 disabled={loading || query.trim().length < 3}
                 className="flex-1 rounded-md bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white px-3 py-2 text-sm font-medium shadow-sm transition"
-              >
-                {loading ? 'Searching…' : 'Search'}
-              </button>
+              >{loading ? t('autofix.kdff3e58d') : 'Search'}</button>
               <button
                 type="button"
                 onClick={() => { setQuery(''); setItems([]); setTotal(0); setError(''); setHasSearched(false); }}
@@ -333,8 +333,7 @@ export default function SearchModal({
               </button>
             </div>
             {/* Total */}
-            <div className="text-sm text-blue-200 self-center">
-              Total: <span className="font-semibold text-white">{total}</span>
+            <div className="text-sm text-blue-200 self-center">{t('autofix.kc0e3b03d')}<span className="font-semibold text-white">{total}</span>
             </div>
           </form>
 
@@ -346,14 +345,10 @@ export default function SearchModal({
                 <div className="text-sm text-red-400 mb-4">{error}</div>
               )}
               {!error && query.trim().length < 3 && (
-                <div className="py-12 text-sm text-blue-300 text-center">
-                  Enter at least 3 characters and click Search.
-                </div>
+                <div className="py-12 text-sm text-blue-300 text-center">{t('autofix.kb87eb38b')}</div>
               )}
               {!error && query.trim().length >= 3 && !hasSearched && !loading && (
-                <div className="py-12 text-sm text-blue-300 text-center">
-                  Ready to search. Click the Search button to fetch candidates.
-                </div>
+                <div className="py-12 text-sm text-blue-300 text-center">{t('autofix.k7c740cd5')}</div>
               )}
               {/* Skeleton only for first-time load (when no items yet) */}
               {!error && query.trim().length >= 3 && loading && items.length === 0 && (
@@ -367,9 +362,7 @@ export default function SearchModal({
                 </ul>
               )}
               {!error && hasSearched && !loading && query.trim().length >= 3 && items.length === 0 && (
-                <div className="py-12 text-sm text-blue-300 text-center">
-                  No users match your filters.
-                </div>
+                <div className="py-12 text-sm text-blue-300 text-center">{t('autofix.k1e5d5139')}</div>
               )}
               {!error && hasSearched && items.length > 0 && (
                 <ul className="divide-y divide-blue-900/40 border border-blue-900/40 rounded-lg bg-[#132c4e]">
@@ -427,9 +420,7 @@ export default function SearchModal({
                   <button
                     onClick={() => { setSelected(null); setParentId(undefined); }}
                     className="text-xs text-blue-300 hover:text-white transition"
-                  >
-                    Clear selection
-                  </button>
+                  >{t('autofix.kadd80fbc')}</button>
                 </div>
 
                 <label className="flex items-center gap-2 text-xs text-blue-200">
@@ -438,9 +429,7 @@ export default function SearchModal({
                     checked={advanced}
                     onChange={e => setAdvanced(e.target.checked)}
                     className="h-3 w-3 rounded border-blue-700 bg-blue-900 text-indigo-500 focus:ring-indigo-400"
-                  />
-                  Advanced: choose parent manually
-                </label>
+                  />{t('autofix.k11974e0f')}</label>
 
                 {advanced && (
                   <div className="space-y-2">
@@ -481,9 +470,7 @@ export default function SearchModal({
                     checked={forceFallback}
                     onChange={e => setForceFallback(e.target.checked)}
                     className="h-3 w-3 rounded border-blue-700 bg-blue-900 text-indigo-500 focus:ring-indigo-400"
-                  />
-                  Fallback to root if referral parent not in matrix
-                </label>
+                  />{t('autofix.kf823daf7')}</label>
                 <p className="text-[11px] text-blue-300">
                   If the referrer is outside the matrix, the user is placed under root; enabling fallback may mark the user as rogue.
                 </p>
@@ -497,9 +484,7 @@ export default function SearchModal({
                     disabled={adding || (!!addDisabledReason && !!advanced)} // NEW
                     title={addDisabledReason || undefined} // NEW
                     className="inline-flex items-center rounded-md bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white px-4 py-2 text-xs font-medium shadow-sm transition"
-                  >
-                    {adding ? 'Adding…' : 'Add to Matrix'}
-                  </button>
+                  >{adding ? t('autofix.k12f2d162') : t('autofix.k59b7a324')}</button>
                 </div>
               </div>
             )}

src/app/admin/matrix-management/detail/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React, { useEffect, useMemo, useState, Suspense } from 'react' // CHANGED: add Suspense
 import { useSearchParams, useRouter } from 'next/navigation'
 import PageLayout from '../../../components/PageLayout'
@@ -13,6 +16,7 @@ const DEFAULT_FETCH_DEPTH = 50 // provisional large depth to approximate unlimit
 const LEVEL_CAP = (level: number) => Math.pow(5, level) // L1=5, L2=25, ...
 
 function MatrixDetailPageInner() {
+  const { t } = useTranslation()
   const sp = useSearchParams()
   const router = useRouter()
 
@@ -378,7 +382,7 @@ function MatrixDetailPageInner() {
         <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/50 backdrop-blur-sm transition-opacity">
           <div className="flex items-center gap-3 rounded-lg bg-white shadow-md border border-gray-200 px-4 py-3">
             <span className="h-5 w-5 rounded-full border-2 border-blue-900 border-b-transparent animate-spin" />
-            <span className="text-sm text-gray-700">Refreshing…</span>
+            <span className="text-sm text-gray-700">{t('autofix.k14a4b43e')}</span>
           </div>
         </div>
       )}
@@ -393,12 +397,9 @@ function MatrixDetailPageInner() {
                   onClick={() => router.push('/admin/matrix-management')}
                   className="inline-flex items-center gap-2 text-sm text-blue-900 hover:text-blue-700"
                 >
-                  <ArrowLeftIcon className="h-4 w-4" />
-                  Back to matrices
-                </button>
+                  <ArrowLeftIcon className="h-4 w-4" />{t('autofix.k65b67dc3')}</button>
                 <h1 className="text-3xl font-extrabold text-blue-900">{matrixName}</h1>
-                <p className="text-base text-blue-700">
-                  Top node: <span className="font-semibold text-blue-900">{topNodeEmail}</span>
+                <p className="text-base text-blue-700">{t('autofix.k31d46514')}<span className="font-semibold text-blue-900">{topNodeEmail}</span>
                 </p>
                 <div className="mt-2 flex flex-wrap items-center gap-2">
                   <span className="inline-flex items-center rounded-full bg-gray-100 border border-gray-200 px-3 py-1 text-xs text-gray-800">
@@ -431,9 +432,7 @@ function MatrixDetailPageInner() {
                   onClick={() => { setOpen(true) }}
                   className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
                 >
-                  <PlusIcon className="h-5 w-5" />
-                  Add users to matrix
-                </button>
+                  <PlusIcon className="h-5 w-5" />{t('autofix.kc7c429a6')}</button>
               </div>
             </div>
           </header>
@@ -452,7 +451,7 @@ function MatrixDetailPageInner() {
               <input
                 value={globalSearch}
                 onChange={e => setGlobalSearch(e.target.value)}
-                placeholder="Global search..."
+                placeholder={t('autofix.kd304af2e')}
                 className="pl-8 pr-2 py-2 rounded-lg border border-gray-200 text-xs focus:ring-1 focus:ring-blue-900 focus:border-transparent w-full"
               />
             </div>
@@ -470,27 +469,27 @@ function MatrixDetailPageInner() {
           {/* Small stats (CHANGED wording) */}
           <div className="mb-8 grid grid-cols-1 sm:grid-cols-4 gap-6">
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
-              <div className="text-xs text-gray-500 mb-1">Total users fetched</div>
+              <div className="text-xs text-gray-500 mb-1">{t('autofix.k65e33378')}</div>
               <div className="text-xl font-semibold text-blue-900">{users.length}</div>
             </div>
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
-              <div className="text-xs text-gray-500 mb-1">Rogue users</div>
+              <div className="text-xs text-gray-500 mb-1">{t('autofix.kb343460d')}</div>
               <div className="text-xl font-semibold text-blue-900">{rogueCount}</div>
             </div>
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
               <div className="text-xs text-gray-500 mb-1">Structure</div>
-              <div className="text-xl font-semibold text-blue-900">5‑ary Tree</div>
+              <div className="text-xl font-semibold text-blue-900">{t('autofix.kf3557acd')}</div>
             </div>
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
-              <div className="text-xs text-gray-500 mb-1">Policy Max Depth</div>
+              <div className="text-xs text-gray-500 mb-1">{t('autofix.k776b751c')}</div>
               <div className="text-xl font-semibold text-blue-900">{isUnlimited ? 'Unlimited' : policyMaxDepth}</div>
             </div>
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
-              <div className="text-xs text-gray-500 mb-1">Fill %</div>
+              <div className="text-xs text-gray-500 mb-1">{t('autofix.k9683262f')}</div>
               <div className="text-xl font-semibold text-blue-900">{fillMetrics.label}</div>
             </div>
             <div className="rounded-xl border border-gray-100 bg-white p-5 shadow">
-              <div className="text-xs text-gray-500 mb-1">Highest full level</div>
+              <div className="text-xs text-gray-500 mb-1">{t('autofix.k7f9568ec')}</div>
               <div className="text-xl font-semibold text-blue-900">{fillMetrics.highestFull}</div>
             </div>
           </div>
@@ -499,11 +498,11 @@ function MatrixDetailPageInner() {
           <div className="rounded-2xl bg-white border border-gray-100 shadow-lg overflow-hidden mb-8">
             <div className="px-8 py-6 border-b border-gray-100">
               <h2 className="text-xl font-semibold text-blue-900">Matrix Tree (Unlimited Depth)</h2>
-              <p className="text-xs text-blue-700">Each node can hold up to 5 direct children. Depth unbounded.</p>
+              <p className="text-xs text-blue-700">{t('autofix.kab4f5159')}</p>
             </div>
             <div className="px-8 py-6">
               {!rootNode && (
-                <div className="text-xs text-gray-500 italic">Root not yet loaded.</div>
+                <div className="text-xs text-gray-500 italic">{t('autofix.k4e61bc77')}</div>
               )}
               {rootNode && (
                 <ul className="flex flex-col gap-1">
@@ -516,9 +515,7 @@ function MatrixDetailPageInner() {
           {/* Vacancies placeholder */}
           <div className="rounded-2xl bg-white border border-dashed border-blue-200 shadow-sm p-6 mb-8">
             <h3 className="text-lg font-semibold text-blue-900 mb-2">Vacancies</h3>
-            <p className="text-sm text-blue-700">
-              Pending backend wiring to MatrixController.listVacancies. This section will surface empty slots and allow reassignment.
-            </p>
+            <p className="text-sm text-blue-700">{t('autofix.k9b3266b5')}</p>
           </div>
 
           {/* Add Users Modal */}

src/app/admin/matrix-management/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import React, { useMemo, useState, useEffect } from 'react'
 import {
   ChartBarIcon,
@@ -28,6 +31,7 @@ type Matrix = {
 }
 
 export default function MatrixManagementPage() {
+  const { t } = useTranslation();
   const router = useRouter()
   const user = useAuthStore(s => s.user)
   const token = useAuthStore(s => s.accessToken)
@@ -289,37 +293,35 @@ export default function MatrixManagementPage() {
           <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
             <div className="flex items-center justify-between">
               <div>
-                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Matrix Management</h1>
-                <p className="text-lg text-blue-700 mt-2">Manage matrices, see stats, and create new ones.</p>
+                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">{t('autofix.kd09be3cd')}</h1>
+                <p className="text-lg text-blue-700 mt-2">{t('autofix.kdc22ad8a')}</p>
               </div>
               <button
                 onClick={() => setCreateOpen(true)}
                 className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
               >
-                <PlusIcon className="h-5 w-5" />
-                Create Matrix
-              </button>
+                <PlusIcon className="h-5 w-5" />{t('autofix.kb7849a5a')}</button>
             </div>
           </header>
 
           {/* Filters */}
           <div className="flex flex-wrap items-center gap-3 mb-6">
             <div className="flex items-center gap-2 text-xs text-blue-900">
-              <span className="font-semibold">Policy filter:</span>
+              <span className="font-semibold">{t('autofix.ka72e833f')}</span>
               <button onClick={() => setPolicyFilter('all')} className={`px-3 py-1 rounded-full border text-xs ${policyFilter==='all'?'bg-blue-900 text-white':'border-blue-200 text-blue-800'}`}>All</button>
               <button onClick={() => setPolicyFilter('unlimited')} className={`px-3 py-1 rounded-full border text-xs ${policyFilter==='unlimited'?'bg-blue-900 text-white':'border-blue-200 text-blue-800'}`}>Unlimited</button>
-              <button onClick={() => setPolicyFilter('five')} className={`px-3 py-1 rounded-full border text-xs ${policyFilter==='five'?'bg-blue-900 text-white':'border-blue-200 text-blue-800'}`}>Depth 5</button>
+              <button onClick={() => setPolicyFilter('five')} className={`px-3 py-1 rounded-full border text-xs ${policyFilter==='five'?'bg-blue-900 text-white':'border-blue-200 text-blue-800'}`}>{t('autofix.kefd5231d')}</button>
             </div>
             <div className="flex items-center gap-2 text-xs text-blue-900">
-              <span className="font-semibold">Sort:</span>
+              <span className="font-semibold">{t('autofix.k0dca1445')}</span>
               <select value={sortByPolicy} onChange={e => setSortByPolicy(e.target.value as any)} className="border rounded px-2 py-1">
                 <option value="none">None</option>
-                <option value="asc">Policy ↑</option>
-                <option value="desc">Policy ↓</option>
+                <option value="asc">{t('autofix.kf7a91674')}</option>
+                <option value="desc">{t('autofix.kf7a91676')}</option>
               </select>
               <select value={sortByUsers} onChange={e => setSortByUsers(e.target.value as any)} className="border rounded px-2 py-1">
-                <option value="desc">Users ↓</option>
-                <option value="asc">Users ↑</option>
+                <option value="desc">{t('autofix.k8c3085f4')}</option>
+                <option value="asc">{t('autofix.k8c3085f6')}</option>
               </select>
             </div>
           </div>
@@ -352,7 +354,7 @@ export default function MatrixManagementPage() {
                 </div>
               ))
             ) : matricesView.length === 0 ? (
-              <div className="text-sm text-gray-600">No matrices found.</div>
+              <div className="text-sm text-gray-600">{t('autofix.k0dcb69ea')}</div>
             ) : (
               matricesView.map(m => (
                 <article key={m.id} className="rounded-2xl bg-white border border-gray-100 shadow-lg overflow-hidden flex flex-col">
@@ -370,7 +372,7 @@ export default function MatrixManagementPage() {
                       </span>
                     </div>
                     <div className="mt-4 grid grid-cols-1 gap-3 text-sm text-gray-700">
-                      <div className="flex items-center gap-2" title="Users count respects each matrix’s max depth policy.">
+                      <div className="flex items-center gap-2" title={t('autofix.k111c49d8')}>
                         <UsersIcon className="h-5 w-5 text-gray-500" />
                         <span className="font-medium">{m.usersCount}</span>
                         <span className="text-gray-500">users</span>
@@ -394,14 +396,10 @@ export default function MatrixManagementPage() {
                           ${m.status === 'active'
                             ? 'border-red-300 text-red-700 hover:bg-red-50 disabled:opacity-60'
                             : 'border-green-300 text-green-700 hover:bg-green-50 disabled:opacity-60'}`}
-                      >
-                        {mutatingId === m.id
-                          ? (m.status === 'active' ? 'Deactivating…' : 'Activating…')
-                          : (m.status === 'active' ? 'Deactivate' : 'Activate')}
-                      </button>
-                      <span className="text-[11px] text-gray-500">
-                        State change will affect add/remove operations.
-                      </span>
+                      >{mutatingId === m.id
+                          ? (m.status === 'active' ? t('autofix.k871d457e') : t('autofix.k5bcb3e1f'))
+                          : (m.status === 'active' ? 'Deactivate' : 'Activate')}</button>
+                      <span className="text-[11px] text-gray-500">{t('autofix.k27f56959')}</span>
                       <button
                         className="text-sm font-medium text-blue-900 hover:text-blue-700"
                         onClick={() => {
@@ -417,9 +415,7 @@ export default function MatrixManagementPage() {
                           })
                           router.push(`/admin/matrix-management/detail?${params.toString()}`)
                         }}
-                      >
-                        View details →
-                      </button>
+                      >{t('autofix.ka3c41ff8')}</button>
                     </div>
                   </div>
                 </article>
@@ -435,7 +431,7 @@ export default function MatrixManagementPage() {
             <div className="absolute inset-0 flex items-center justify-center p-4">
               <div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
                 <div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
-                  <h4 className="text-lg font-semibold text-blue-900">Create Matrix</h4>
+                  <h4 className="text-lg font-semibold text-blue-900">{t('autofix.kb7849a5a')}</h4>
                   <button
                     onClick={() => { setCreateOpen(false); resetForm() }}
                     className="text-sm text-gray-500 hover:text-gray-700"
@@ -446,20 +442,16 @@ export default function MatrixManagementPage() {
                 <form onSubmit={handleCreate} className="p-6 space-y-5">
                   {/* Success banner */}
                   {createSuccess && (
-                    <div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
-                      Matrix created successfully.
-                      <div className="mt-1 text-green-800">
-                        <span className="font-semibold">Name:</span> {createSuccess.name}{' '}
-                        <span className="font-semibold ml-3">Top node:</span> {createSuccess.email}
+                    <div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">{t('autofix.k5738c039')}<div className="mt-1 text-green-800">
+                        <span className="font-semibold">{t('autofix.k0cdde8f8')}</span> {createSuccess.name}{' '}
+                        <span className="font-semibold ml-3">{t('autofix.k31d46514')}</span> {createSuccess.email}
                       </div>
                     </div>
                   )}
 
                   {/* 409 force prompt */}
                   {forcePrompt && (
-                    <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
-                      A matrix configuration already exists for this selection.
-                      <div className="mt-2 flex items-center gap-2">
+                    <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">{t('autofix.k815ca9ba')}<div className="mt-2 flex items-center gap-2">
                         <button
                           type="button"
                           onClick={confirmForce}
@@ -482,29 +474,29 @@ export default function MatrixManagementPage() {
 
                   {/* Form fields */}
                   <div>
-                    <label className="block text-sm font-medium text-blue-900 mb-1">Matrix Name</label>
+                    <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.kd04a7c59')}</label>
                     <input
                       type="text"
                       value={createName}
                       onChange={e => setCreateName(e.target.value)}
                       disabled={createLoading}
                       className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent disabled:bg-gray-100"
-                      placeholder="e.g., Platinum Matrix"
+                      placeholder={t('autofix.k3f833ce6')}
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-blue-900 mb-1">Top-node Email</label>
+                    <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.k3ee27b4f')}</label>
                     <input
                       type="email"
                       value={createEmail}
                       onChange={e => setCreateEmail(e.target.value)}
                       disabled={createLoading}
                       className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent disabled:bg-gray-100"
-                      placeholder="owner@example.com"
+                      placeholder={t('autofix.k383672e3')}
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-blue-900 mb-1">Matrix Depth</label>
+                    <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.kda96f5b3')}</label>
                     <input
                       type="number"
                       min={1}
@@ -513,7 +505,7 @@ export default function MatrixManagementPage() {
                       onChange={e => setCreateDepth(Number(e.target.value))}
                       disabled={createLoading}
                       className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent disabled:bg-gray-100"
-                      placeholder="e.g., 5"
+                      placeholder={t('autofix.k8f46c81e')}
                     />
                   </div>
 

src/app/admin/news-management/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import React from 'react'
 import Header from '../../components/nav/Header'
 import Footer from '../../components/Footer'
@@ -12,6 +15,7 @@ import { updateNews } from './hooks/updateNews'
 import { deleteNews } from './hooks/deleteNews'
 
 export default function NewsManagementPage() {
+  const { t } = useTranslation();
   const { items, loading, error, refresh } = useAdminNews()
   const [showCreate, setShowCreate] = React.useState(false)
   const [selected, setSelected] = React.useState<any | null>(null)
@@ -25,10 +29,9 @@ export default function NewsManagementPage() {
       <main className="bg-white min-h-screen pb-20">
         <div className="mx-auto max-w-7xl px-6 pt-8 pb-12">
           <div className="flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-blue-900">News Manager</h1>
+            <h1 className="text-2xl font-bold text-blue-900">{t('autofix.k471ba099')}</h1>
             <button onClick={() => setShowCreate(true)} className="flex items-center gap-2 px-4 py-2 bg-blue-900 text-white rounded-lg hover:bg-blue-800">
-              <PlusIcon className="h-5 w-5" /> Add News
-            </button>
+              <PlusIcon className="h-5 w-5" />{t('autofix.k75078d0b')}</button>
           </div>
 
           {error && <div className="mt-4 text-red-600">{error}</div>}
@@ -101,7 +104,7 @@ export default function NewsManagementPage() {
           <div className="absolute inset-0 flex items-center justify-center p-4">
             <div className="w-full max-w-md rounded-2xl bg-white shadow-xl ring-1 ring-gray-200">
               <div className="px-6 pt-6">
-                <h3 className="text-lg font-semibold text-blue-900">Delete news?</h3>
+                <h3 className="text-lg font-semibold text-blue-900">{t('autofix.k088d8f6c')}</h3>
                 <p className="mt-2 text-sm text-gray-700">You are about to delete "{deleteTarget.title}". This action cannot be undone.</p>
               </div>
               <div className="px-6 pb-6 pt-4 flex justify-end gap-3">
@@ -137,6 +140,7 @@ function CreateNewsModal({
   creating: boolean
   error: string | null
 }) {
+  const { t } = useTranslation();
   const [title, setTitle] = React.useState('')
   const [summary, setSummary] = React.useState('')
   const [content, setContent] = React.useState('')
@@ -199,7 +203,7 @@ function CreateNewsModal({
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
         <div className="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl mx-4 max-h-[90vh] overflow-y-auto">
           <div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
-            <h2 className="text-2xl font-bold text-blue-900">Add News</h2>
+            <h2 className="text-2xl font-bold text-blue-900">{t('autofix.k75078d0b')}</h2>
             <button onClick={onClose} className="text-gray-500 hover:text-gray-700"><XMarkIcon className="h-6 w-6"/></button>
           </div>
           <form onSubmit={submit} className="p-6 space-y-4">
@@ -217,7 +221,7 @@ function CreateNewsModal({
                 onChange={e=>{ setSlugTouched(true); setSlug(e.target.value) }}
                 required
               />
-              <p className="mt-1 text-xs text-gray-500">Used in the URL. Auto-generated from title unless edited.</p>
+              <p className="mt-1 text-xs text-gray-500">{t('autofix.kf3b81ba3')}</p>
             </div>
             <input className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Category" value={category} onChange={e=>setCategory(e.target.value)} />
             <textarea className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Summary" value={summary} onChange={e=>setSummary(e.target.value)} rows={3} />
@@ -228,8 +232,8 @@ function CreateNewsModal({
                 {!previewUrl ? (
                   <div className="text-center w-full px-6 py-10">
                     <PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
-                    <div className="mt-4 text-sm font-medium text-gray-700">Click to upload</div>
-                    <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP up to 5MB</p>
+                    <div className="mt-4 text-sm font-medium text-gray-700">{t('autofix.kf4868273')}</div>
+                    <p className="text-xs text-gray-500 mt-2">{t('autofix.kcd9890e5')}</p>
                   </div>
                 ) : (
                   <div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
@@ -251,9 +255,7 @@ function CreateNewsModal({
                 type="submit"
                 disabled={creating || !title.trim()}
                 className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg disabled:opacity-60 disabled:cursor-not-allowed"
-              >
-                {creating ? 'Creating…' : 'Add News'}
-              </button>
+              >{creating ? t('autofix.k27b5b842') : t('autofix.k75078d0b')}</button>
             </div>
           </form>
         </div>
@@ -263,6 +265,7 @@ function CreateNewsModal({
 }
 
 function EditNewsModal({ item, onClose, onUpdate }: { item: any; onClose: () => void; onUpdate: (id: number, payload: { title?: string; summary?: string; content?: string; slug?: string; category?: string; isActive?: boolean; publishedAt?: string | null; imageFile?: File; removeImage?: boolean }) => void }) {
+  const { t } = useTranslation();
   const [title, setTitle] = React.useState(item.title)
   const [summary, setSummary] = React.useState(item.summary || '')
   const [content, setContent] = React.useState(item.content || '')
@@ -314,7 +317,7 @@ function EditNewsModal({ item, onClose, onUpdate }: { item: any; onClose: () =>
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
         <div className="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl mx-4 max-h-[90vh] overflow-y-auto">
           <div className="sticky top-0 bg-white border-b px-6 py-4 flex items-center justify-between">
-            <h2 className="text-2xl font-bold text-blue-900">Edit News</h2>
+            <h2 className="text-2xl font-bold text-blue-900">{t('autofix.k73cf4fb6')}</h2>
             <button onClick={onClose} className="text-gray-500 hover:text-gray-700"><XMarkIcon className="h-6 w-6"/></button>
           </div>
           <form onSubmit={submit} className="p-6 space-y-4">
@@ -329,8 +332,8 @@ function EditNewsModal({ item, onClose, onUpdate }: { item: any; onClose: () =>
                 {!displayUrl ? (
                   <div className="text-center w-full px-6 py-10">
                     <PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
-                    <div className="mt-4 text-sm font-medium text-gray-700">Click to upload</div>
-                    <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP up to 5MB</p>
+                    <div className="mt-4 text-sm font-medium text-gray-700">{t('autofix.kf4868273')}</div>
+                    <p className="text-xs text-gray-500 mt-2">{t('autofix.kcd9890e5')}</p>
                   </div>
                 ) : (
                   <div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
@@ -348,7 +351,7 @@ function EditNewsModal({ item, onClose, onUpdate }: { item: any; onClose: () =>
             </div>
             <div className="flex items-center justify-end gap-2 pt-4 border-t">
               <button type="button" onClick={onClose} className="px-5 py-2.5 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100">Cancel</button>
-              <button type="submit" className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg">Save Changes</button>
+              <button type="submit" className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg">{t('autofix.k5a489751')}</button>
             </div>
           </form>
         </div>

src/app/admin/page.tsx

@@ -12,12 +12,14 @@ import {
   Squares2X2Icon,
   BanknotesIcon,
   ClipboardDocumentListIcon,
-  CommandLineIcon
+  CommandLineIcon,
+  LanguageIcon
 } from '@heroicons/react/24/outline'
 import { useMemo, useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useAdminUsers } from '../hooks/useAdminUsers'
 import useAuthStore from '../store/authStore'
+import { useTranslation } from '../i18n/useTranslation'
 
 // env-based feature flags
 const DISPLAY_MATRIX = process.env.NEXT_PUBLIC_DISPLAY_MATRIX !== 'false'
@@ -27,6 +29,7 @@ const DISPLAY_DEV_MANAGEMENT = process.env.NEXT_PUBLIC_DISPLAY_DEV_MANAGEMENT !=
 
 export default function AdminDashboardPage() {
   const router = useRouter()
+  const { t } = useTranslation()
   const { userStats, isAdmin } = useAdminUsers()
   const user = useAuthStore(s => s.user)
   const isAdminOrSuper =
@@ -90,7 +93,7 @@ export default function AdminDashboardPage() {
         <div className="min-h-screen flex items-center justify-center bg-blue-50">
           <div className="text-center">
             <div className="h-12 w-12 rounded-full border-2 border-blue-900 border-b-transparent animate-spin mx-auto mb-4" />
-            <p className="text-blue-900">Loading...</p>
+            <p className="text-blue-900">{t('adminDashboard.loading')}</p>
           </div>
         </div>
       </PageLayout>
@@ -104,8 +107,8 @@ export default function AdminDashboardPage() {
         <div className="min-h-screen flex items-center justify-center bg-blue-50">
           <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
             <div className="text-center">
-              <h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
-              <p className="text-gray-600">You need admin privileges to access this page.</p>
+              <h1 className="text-2xl font-bold text-red-600 mb-2">{t('adminDashboard.accessDenied')}</h1>
+              <p className="text-gray-600">{t('adminDashboard.accessDeniedMessage')}</p>
             </div>
           </div>
         </div>
@@ -120,9 +123,9 @@ export default function AdminDashboardPage() {
           {/* Header */}
           <header className="flex flex-col gap-4 mb-8">
             <div>
-              <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Admin Dashboard</h1>
+              <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">{t('adminDashboard.title')}</h1>
               <p className="text-lg text-blue-700 mt-2">
-                Manage all administrative features, user management, permissions, and global settings.
+                {t('adminDashboard.subtitle')}
               </p>
             </div>
           </header>
@@ -132,10 +135,10 @@ export default function AdminDashboardPage() {
             <ExclamationTriangleIcon className="h-6 w-6 flex-shrink-0 text-red-500 mt-0.5" />
             <div className="leading-relaxed">
               <p className="font-semibold mb-0.5">
-                Warning: Settings and actions below this point can have consequences for the entire system!
+                {t('adminDashboard.warningTitle')}
               </p>
               <p className="text-red-600/80 hidden sm:block">
-                Manage all administrative features, user management, permissions, and global settings.
+                {t('adminDashboard.warningMessage')}
               </p>
             </div>
           </div>
@@ -143,27 +146,27 @@ export default function AdminDashboardPage() {
           {/* Stats Card */}
           <div className="mb-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Total Users</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.totalUsers')}</div>
               <div className="text-xl font-semibold text-blue-900">{displayStats.totalUsers}</div>
             </div>
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Admins</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.admins')}</div>
               <div className="text-xl font-semibold text-indigo-700">{displayStats.adminUsers}</div>
             </div>
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Active</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.active')}</div>
               <div className="text-xl font-semibold text-green-700">{displayStats.activeUsers}</div>
             </div>
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Pending Verification</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.pendingVerification')}</div>
               <div className="text-xl font-semibold text-amber-700">{displayStats.verificationPending}</div>
             </div>
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Personal</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.personal')}</div>
               <div className="text-xl font-semibold text-blue-700">{displayStats.personalUsers}</div>
             </div>
             <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-              <div className="text-xs text-gray-500">Company</div>
+              <div className="text-xs text-gray-500">{t('adminDashboard.company')}</div>
               <div className="text-xl font-semibold text-purple-700">{displayStats.companyUsers}</div>
             </div>
           </div>
@@ -176,9 +179,9 @@ export default function AdminDashboardPage() {
                   <Squares2X2Icon className="h-7 w-7 text-blue-600" />
                 </div>
                 <div>
-                  <h2 className="text-lg font-semibold text-blue-900">Management Shortcuts</h2>
+                  <h2 className="text-lg font-semibold text-blue-900">{t('adminDashboard.managementShortcuts')}</h2>
                   <p className="text-sm text-blue-700 mt-0.5">
-                    Quick access to common admin modules.
+                    {t('adminDashboard.managementShortcutsSubtitle')}
                   </p>
                 </div>
               </div>
@@ -205,11 +208,11 @@ export default function AdminDashboardPage() {
                       <Squares2X2Icon className={`h-6 w-6 ${DISPLAY_MATRIX ? 'text-blue-600' : 'text-gray-400'}`} />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-blue-900">Matrix Management</div>
-                      <div className="text-xs text-blue-700">Configure matrices and users</div>
+                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.matrixManagement')}</div>
+                      <div className="text-xs text-blue-700">{t('adminDashboard.matrixManagementDesc')}</div>
                       {!DISPLAY_MATRIX && (
                         <p className="mt-1 text-xs text-gray-500 italic">
-                          This module is currently disabled in the system configuration.
+                          {t('adminDashboard.moduleDisabled')}
                         </p>
                       )}
                     </div>
@@ -243,11 +246,11 @@ export default function AdminDashboardPage() {
                       <BanknotesIcon className={`h-6 w-6 ${DISPLAY_ABONEMENTS ? 'text-amber-600' : 'text-gray-400'}`} />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-amber-900">Coffee Subscription Management</div>
-                      <div className="text-xs text-amber-700">Plans, billing and renewals</div>
+                      <div className="text-base font-semibold text-amber-900">{t('adminDashboard.coffeeSubscriptions')}</div>
+                      <div className="text-xs text-amber-700">{t('adminDashboard.coffeeSubscriptionsDesc')}</div>
                       {!DISPLAY_ABONEMENTS && (
                         <p className="mt-1 text-xs text-gray-500 italic">
-                          This module is currently disabled in the system configuration.
+                          {t('adminDashboard.moduleDisabled')}
                         </p>
                       )}
                     </div>
@@ -272,8 +275,8 @@ export default function AdminDashboardPage() {
                       <ClipboardDocumentListIcon className="h-6 w-6 text-indigo-600" />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-indigo-900">Contract Management</div>
-                      <div className="text-xs text-indigo-700">Templates, approvals, status</div>
+                      <div className="text-base font-semibold text-indigo-900">{t('adminDashboard.contractManagement')}</div>
+                      <div className="text-xs text-indigo-700">{t('adminDashboard.contractManagementDesc')}</div>
                     </div>
                   </div>
                   <ArrowRightIcon className="h-5 w-5 text-indigo-600 opacity-70 group-hover:opacity-100" />
@@ -290,8 +293,8 @@ export default function AdminDashboardPage() {
                       <Squares2X2Icon className="h-6 w-6 text-blue-600" />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-blue-900">Dashboard Management</div>
-                      <div className="text-xs text-blue-700">Configure dashboard platforms</div>
+                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.dashboardManagement')}</div>
+                      <div className="text-xs text-blue-700">{t('adminDashboard.dashboardManagementDesc')}</div>
                     </div>
                   </div>
                   <ArrowRightIcon className="h-5 w-5 text-blue-600 opacity-70 group-hover:opacity-100" />
@@ -308,13 +311,85 @@ export default function AdminDashboardPage() {
                       <UsersIcon className="h-6 w-6 text-blue-600" />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-blue-900">User Management</div>
-                      <div className="text-xs text-blue-700">Browse, search, and manage all users</div>
+                      <div className="text-base font-semibold text-blue-900">{t('adminDashboard.userManagement')}</div>
+                      <div className="text-xs text-blue-700">{t('adminDashboard.userManagementDesc')}</div>
                     </div>
                   </div>
                   <ArrowRightIcon className="h-5 w-5 text-blue-600 opacity-70 group-hover:opacity-100" />
                 </button>
 
+                {/* User Verify */}
+                <button
+                  type="button"
+                  onClick={() => router.push('/admin/user-verify')}
+                  className="group w-full flex items-center justify-between rounded-lg border border-rose-200 bg-rose-50 hover:bg-rose-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-rose-100 border border-rose-200 group-hover:animate-pulse">
+                      <ExclamationTriangleIcon className="h-6 w-6 text-rose-600" />
+                    </span>
+                    <div className="text-left">
+                      <div className="text-base font-semibold text-rose-900">{t('adminDashboard.userVerify')}</div>
+                      <div className="text-xs text-rose-700">{t('adminDashboard.userVerifyDesc')}</div>
+                    </div>
+                  </div>
+                  <ArrowRightIcon className="h-5 w-5 text-rose-600 opacity-70 group-hover:opacity-100" />
+                </button>
+
+                {/* Finance Management */}
+                <button
+                  type="button"
+                  onClick={() => router.push('/admin/finance-management')}
+                  className="group w-full flex items-center justify-between rounded-lg border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-emerald-100 border border-emerald-200 group-hover:animate-pulse">
+                      <BanknotesIcon className="h-6 w-6 text-emerald-600" />
+                    </span>
+                    <div className="text-left">
+                      <div className="text-base font-semibold text-emerald-900">{t('adminDashboard.financeManagement')}</div>
+                      <div className="text-xs text-emerald-700">{t('adminDashboard.financeManagementDesc')}</div>
+                    </div>
+                  </div>
+                  <ArrowRightIcon className="h-5 w-5 text-emerald-600 opacity-70 group-hover:opacity-100" />
+                </button>
+
+                {/* Pool Management */}
+                <button
+                  type="button"
+                  onClick={() => router.push('/admin/pool-management')}
+                  className="group w-full flex items-center justify-between rounded-lg border border-cyan-200 bg-cyan-50 hover:bg-cyan-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-cyan-100 border border-cyan-200 group-hover:animate-pulse">
+                      <ServerStackIcon className="h-6 w-6 text-cyan-600" />
+                    </span>
+                    <div className="text-left">
+                      <div className="text-base font-semibold text-cyan-900">{t('adminDashboard.poolManagement')}</div>
+                      <div className="text-xs text-cyan-700">{t('adminDashboard.poolManagementDesc')}</div>
+                    </div>
+                  </div>
+                  <ArrowRightIcon className="h-5 w-5 text-cyan-600 opacity-70 group-hover:opacity-100" />
+                </button>
+
+                {/* Affiliate Management */}
+                <button
+                  type="button"
+                  onClick={() => router.push('/admin/affiliate-management')}
+                  className="group w-full flex items-center justify-between rounded-lg border border-violet-200 bg-violet-50 hover:bg-violet-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-violet-100 border border-violet-200 group-hover:animate-pulse">
+                      <UsersIcon className="h-6 w-6 text-violet-600" />
+                    </span>
+                    <div className="text-left">
+                      <div className="text-base font-semibold text-violet-900">{t('adminDashboard.affiliateManagement')}</div>
+                      <div className="text-xs text-violet-700">{t('adminDashboard.affiliateManagementDesc')}</div>
+                    </div>
+                  </div>
+                  <ArrowRightIcon className="h-5 w-5 text-violet-600 opacity-70 group-hover:opacity-100" />
+                </button>
+
                 {/* News Management */}
                 <button
                   type="button"
@@ -337,11 +412,11 @@ export default function AdminDashboardPage() {
                       <ClipboardDocumentListIcon className={`h-6 w-6 ${DISPLAY_NEWS ? 'text-green-600' : 'text-gray-400'}`} />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-green-900">News Management</div>
-                      <div className="text-xs text-green-700">Create and manage news articles</div>
+                      <div className="text-base font-semibold text-green-900">{t('adminDashboard.newsManagement')}</div>
+                      <div className="text-xs text-green-700">{t('adminDashboard.newsManagementDesc')}</div>
                       {!DISPLAY_NEWS && (
                         <p className="mt-1 text-xs text-gray-500 italic">
-                          This module is currently disabled in the system configuration.
+                          {t('adminDashboard.moduleDisabled')}
                         </p>
                       )}
                     </div>
@@ -375,16 +450,16 @@ export default function AdminDashboardPage() {
                       <CommandLineIcon className={`h-6 w-6 ${DISPLAY_DEV_MANAGEMENT && isAdminOrSuper ? 'text-slate-600' : 'text-gray-400'}`} />
                     </span>
                     <div className="text-left">
-                      <div className="text-base font-semibold text-slate-900">Dev Management</div>
-                      <div className="text-xs text-slate-700">Run SQL queries and dev tools</div>
+                      <div className="text-base font-semibold text-slate-900">{t('adminDashboard.devManagement')}</div>
+                      <div className="text-xs text-slate-700">{t('adminDashboard.devManagementDesc')}</div>
                       {!DISPLAY_DEV_MANAGEMENT && (
                         <p className="mt-1 text-xs text-gray-500 italic">
-                          This module is currently disabled in the system configuration.
+                          {t('adminDashboard.moduleDisabled')}
                         </p>
                       )}
                       {DISPLAY_DEV_MANAGEMENT && !isAdminOrSuper && (
                         <p className="mt-1 text-xs text-gray-500 italic">
-                          Admin access required.
+                          {t('adminDashboard.adminAccessRequired')}
                         </p>
                       )}
                     </div>
@@ -395,6 +470,24 @@ export default function AdminDashboardPage() {
                     }`}
                   />
                 </button>
+
+                {/* Language Management */}
+                <button
+                  type="button"
+                  onClick={() => router.push('/admin/language-management')}
+                  className="group w-full flex items-center justify-between rounded-lg border border-teal-200 bg-teal-50 hover:bg-teal-100 px-4 py-4 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-md"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-md bg-teal-100 border border-teal-200 group-hover:animate-pulse">
+                      <LanguageIcon className="h-6 w-6 text-teal-600" />
+                    </span>
+                    <div className="text-left">
+                      <div className="text-base font-semibold text-teal-900">{t('adminDashboard.languageManagement')}</div>
+                      <div className="text-xs text-teal-700">{t('adminDashboard.languageManagementDesc')}</div>
+                    </div>
+                  </div>
+                  <ArrowRightIcon className="h-5 w-5 text-teal-600 opacity-70 group-hover:opacity-100" />
+                </button>
               </div>
             </div>
           </div>
@@ -407,10 +500,10 @@ export default function AdminDashboardPage() {
               </div>
               <div>
                 <h2 className="text-lg font-semibold text-gray-900">
-                  Server Status & Logs
+                  {t('adminDashboard.serverStatusLogs')}
                 </h2>
                 <p className="text-sm text-gray-500 mt-0.5">
-                  System health, resource usage & recent error insights.
+                  {t('adminDashboard.serverStatusLogsSubtitle')}
                 </p>
               </div>
             </div>
@@ -421,20 +514,20 @@ export default function AdminDashboardPage() {
                 <div className="flex items-center gap-3">
                   <span className={`h-2.5 w-2.5 rounded-full ${serverStats.status === 'Online' ? 'bg-emerald-500' : 'bg-red-500'}`} />
                   <p className="text-base">
-                    <span className="font-semibold">Server Status:</span>{' '}
+                    <span className="font-semibold">{t('adminDashboard.serverStatusLabel')}</span>{' '}
                     <span className={serverStats.status === 'Online' ? 'text-emerald-600 font-medium' : 'text-red-600 font-medium'}>
-                      {serverStats.status === 'Online' ? 'Server Online' : 'Offline'}
+                      {serverStats.status === 'Online' ? t('adminDashboard.serverOnline') : t('adminDashboard.serverOffline')}
                     </span>
                   </p>
                 </div>
                 <div className="text-sm space-y-1 text-gray-600">
-                  <p><span className="font-medium text-gray-700">Uptime:</span> {serverStats.uptime}</p>
-                  <p><span className="font-medium text-gray-700">CPU Usage:</span> {serverStats.cpu}</p>
-                  <p><span className="font-medium text-gray-700">Memory Usage:</span> {serverStats.memory} GB</p>
+                  <p><span className="font-medium text-gray-700">{t('adminDashboard.uptime')}</span> {serverStats.uptime}</p>
+                  <p><span className="font-medium text-gray-700">{t('adminDashboard.cpuUsage')}</span> {serverStats.cpu}</p>
+                  <p><span className="font-medium text-gray-700">{t('adminDashboard.memoryUsage')}</span> {serverStats.memory} GB</p>
                 </div>
                 <div className="flex items-center gap-2 text-sm text-gray-500">
                   <CpuChipIcon className="h-4 w-4" />
-                  <span>Autoscaled environment (mock)</span>
+                  <span>{t('adminDashboard.autoscaledEnvironment')}</span>
                 </div>
               </div>
 
@@ -444,11 +537,11 @@ export default function AdminDashboardPage() {
               {/* Logs */}
               <div className="lg:col-span-2">
                 <h3 className="text-base font-semibold text-gray-800 mb-3">
-                  Recent Error Logs
+                  {t('adminDashboard.recentErrorLogs')}
                 </h3>
                 {serverStats.recentErrors.length === 0 && (
                   <p className="text-sm text-gray-500 italic">
-                    No recent logs.
+                    {t('adminDashboard.noRecentLogs')}
                   </p>
                 )}
                 {/* Placeholder for future logs list */}
@@ -460,7 +553,7 @@ export default function AdminDashboardPage() {
                     // TODO: navigate to logs / monitoring page
                     onClick={() => {}}
                   >
-                    View Full Logs
+                    {t('adminDashboard.viewFullLogs')}
                     <ArrowRightIcon className="h-5 w-5" />
                   </button>
                 </div>

src/app/admin/pool-management/components/PoolManagementGrid.tsx

@@ -0,0 +1,160 @@
+import { UsersIcon } from '@heroicons/react/24/outline'
+import type { AdminPool } from '../hooks/getlist'
+import { translateMaybeKey } from '../utils/translateMaybeKey'
+
+type Translator = (key: string, params?: Record<string, string | number>) => string
+
+type Props = {
+  t: Translator
+  pools: AdminPool[]
+  filteredPools: AdminPool[]
+  loading: boolean
+  error: string
+  archiveError: string
+  showInactive: boolean
+  onManage: (pool: AdminPool) => void
+  onArchive: (poolId: string) => void
+  onActivate: (poolId: string) => void
+}
+
+export default function PoolManagementGrid({
+  t,
+  pools,
+  filteredPools,
+  loading,
+  error,
+  archiveError,
+  showInactive,
+  onManage,
+  onArchive,
+  onActivate,
+}: Props) {
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/85 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] p-6 sm:p-7 backdrop-blur-md">
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-5">
+        <h2 className="text-lg font-semibold text-slate-900 break-words">{t('autofix.k5857ef79')}</h2>
+        <span className="text-sm text-slate-600">{t('autofix.k5f4d2c11').replace('{count}', String(pools.length))}</span>
+      </div>
+
+      {archiveError && (
+        <div className="mb-4 rounded-xl border border-red-200 bg-red-50/90 px-4 py-3 text-sm text-red-700">
+          {archiveError}
+        </div>
+      )}
+
+      {error && (
+        <div className="mb-4 rounded-xl border border-red-200 bg-red-50/90 px-4 py-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="grid [grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))] gap-6">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div key={index} className="rounded-2xl bg-white border border-slate-100 shadow-sm p-5">
+              <div className="animate-pulse space-y-3">
+                <div className="h-5 w-1/2 bg-slate-200 rounded" />
+                <div className="h-4 w-3/4 bg-slate-200 rounded" />
+                <div className="h-4 w-2/3 bg-slate-100 rounded" />
+                <div className="h-8 w-full bg-slate-100 rounded" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid [grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))] gap-6">
+          {filteredPools.map((pool) => {
+            const isCore = pool.pool_name === 'Core'
+            const poolDescription = translateMaybeKey(t, pool.description, '-')
+
+            return (
+              <article
+                key={pool.id}
+                className={`rounded-2xl border shadow-sm p-5 flex flex-col ${
+                  isCore
+                    ? 'bg-gradient-to-br from-amber-50 via-white to-amber-50 border-amber-300 ring-1 ring-amber-200'
+                    : 'bg-white border-slate-100'
+                }`}
+              >
+                {isCore && (
+                  <div className="self-start inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-0.5 text-[10px] font-bold text-white uppercase tracking-wider shadow-sm mb-3">
+                    <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.784.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.063 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" /></svg>
+                    {t('autofix.k87e4b9a2')}
+                  </div>
+                )}
+
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className={`h-9 w-9 rounded-lg border flex items-center justify-center shrink-0 ${
+                      isCore ? 'bg-amber-100 border-amber-300' : 'bg-slate-50 border-slate-200'
+                    }`}>
+                      <UsersIcon className={`h-5 w-5 ${isCore ? 'text-amber-700' : 'text-slate-900'}`} />
+                    </div>
+                    <h3 className={`text-lg font-semibold break-words ${isCore ? 'text-amber-900' : 'text-slate-900'}`}>
+                      {pool.pool_name}
+                    </h3>
+                  </div>
+
+                  <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+                    !pool.is_active ? 'bg-slate-100 text-slate-700' : 'bg-green-100 text-green-800'
+                  }`}>
+                    <span className={`mr-1.5 h-1.5 w-1.5 rounded-full ${!pool.is_active ? 'bg-slate-400' : 'bg-green-500'}`} />
+                    {!pool.is_active ? t('autofix.ke2a1b003') : t('autofix.k3bc84f12')}
+                  </span>
+                </div>
+
+                <p className="mt-2 text-sm text-slate-700 break-words">{poolDescription}</p>
+
+                <div className="mt-4 grid grid-cols-2 gap-3 text-sm text-slate-600">
+                  <div>
+                    <span className="text-slate-500">{t('autofix.kfd227aa9')}</span>
+                    <div className="font-medium text-slate-900">{pool.membersCount}</div>
+                  </div>
+                  <div>
+                    <span className="text-slate-500">{t('autofix.k91c8d444')}</span>
+                    <div className="font-medium text-slate-900 break-words">
+                      {new Date(pool.createdAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-5 flex items-center justify-between gap-2">
+                  <button
+                    className="px-4 py-2 text-xs font-medium rounded-xl bg-slate-200 text-slate-700 hover:bg-slate-300 transition"
+                    onClick={() => onManage(pool)}
+                  >
+                    {t('autofix.k7d2a1190')}
+                  </button>
+
+                  {!pool.is_active ? (
+                    <button
+                      className="px-4 py-2 text-xs font-medium rounded-xl bg-green-100 text-green-800 hover:bg-green-200 transition"
+                      onClick={() => onActivate(pool.id)}
+                      title={t('autofix.kd40c4f86')}
+                    >
+                      {t('autofix.ke697b8cb')}
+                    </button>
+                  ) : (
+                    <button
+                      className="px-4 py-2 text-xs font-medium rounded-xl bg-amber-100 text-amber-800 hover:bg-amber-200 transition"
+                      onClick={() => onArchive(pool.id)}
+                      title={t('autofix.ke19afb3d')}
+                    >
+                      {t('autofix.kf3b0c221')}
+                    </button>
+                  )}
+                </div>
+              </article>
+            )
+          })}
+
+          {filteredPools.length === 0 && !loading && !error && (
+            <div className="col-span-full text-center text-slate-500 italic py-6">
+              {showInactive ? t('autofix.k1e2f3a44') : t('autofix.ka8b3c104')}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}

src/app/admin/pool-management/components/PoolManagementHeader.tsx

@@ -0,0 +1,37 @@
+type Translator = (key: string, params?: Record<string, string | number>) => string
+
+type Props = {
+  t: Translator
+  showInactive: boolean
+  onShowActive: () => void
+  onShowInactive: () => void
+}
+
+export default function PoolManagementHeader({ t, showInactive, onShowActive, onShowInactive }: Props) {
+  return (
+    <header className="rounded-[28px] border border-white/80 bg-white/85 py-8 px-6 sm:px-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] backdrop-blur-md mb-8">
+      <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+        {t('autofix.k6f7f26a1')}
+      </div>
+
+      <h1 className="mt-3 text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight break-words">{t('autofix.k21440f8a')}</h1>
+      <p className="text-base sm:text-lg text-slate-600 mt-2 break-words">{t('autofix.k67391c88')}</p>
+
+      <div className="mt-6 flex flex-wrap items-center gap-2">
+        <span className="text-sm text-slate-600">{t('autofix.k0dd01c1c')}</span>
+        <button
+          onClick={onShowActive}
+          className={`px-4 py-2 text-sm font-medium rounded-xl transition ${!showInactive ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50'}`}
+        >
+          {t('autofix.k15843a06')}
+        </button>
+        <button
+          onClick={onShowInactive}
+          className={`px-4 py-2 text-sm font-medium rounded-xl transition ${showInactive ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50'}`}
+        >
+          {t('autofix.kb5e0b861')}
+        </button>
+      </div>
+    </header>
+  )
+}

src/app/admin/pool-management/components/createNewPoolModal.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React from 'react'
 
 interface Props {
@@ -22,6 +25,7 @@ export default function CreateNewPoolModal({
   success,
   clearMessages
 }: Props) {
+  const { t } = useTranslation();
   const [poolName, setPoolName] = React.useState('')
   const [description, setDescription] = React.useState('')
   const [price, setPrice] = React.useState('0.00')
@@ -52,11 +56,11 @@ export default function CreateNewPoolModal({
       {/* Modal */}
       <div className="relative w-full max-w-lg mx-4 rounded-2xl bg-white shadow-xl border border-blue-100 p-6">
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-xl font-semibold text-blue-900">Create New Pool</h2>
+          <h2 className="text-xl font-semibold text-blue-900">{t('autofix.k209ba561')}</h2>
           <button
             onClick={() => { clearMessages(); onClose(); }}
             className="text-gray-500 hover:text-gray-700 transition text-sm"
-            aria-label="Close"
+            aria-label={t('common.close')}
           >
             ✕
           </button>
@@ -88,10 +92,10 @@ export default function CreateNewPoolModal({
           className="space-y-4"
         >
           <div>
-            <label className="block text-sm font-medium text-blue-900 mb-1">Pool Name</label>
+            <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.kd4a0fd1e')}</label>
             <input
               className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-              placeholder="e.g., VIP Members"
+              placeholder={t('autofix.k0925e287')}
               value={poolName}
               onChange={e => setPoolName(e.target.value)}
               disabled={isDisabled}
@@ -99,18 +103,18 @@ export default function CreateNewPoolModal({
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-blue-900 mb-1">Description</label>
+            <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.k40b5c1d2')}</label>
             <textarea
               className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
               rows={3}
-              placeholder="Short description of the pool"
+              placeholder={t('autofix.kb573897d')}
               value={description}
               onChange={e => setDescription(e.target.value)}
               disabled={isDisabled}
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-blue-900 mb-1">Price per capsule (net)</label>
+            <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.k8ef02c19')}</label>
             <input
               type="number"
               step="0.01"
@@ -122,29 +126,29 @@ export default function CreateNewPoolModal({
               disabled={isDisabled}
               required
             />
-            <p className="mt-1 text-xs text-gray-500">This value is stored as net price.</p>
+            <p className="mt-1 text-xs text-gray-500">{t('autofix.k75cb45a7')}</p>
           </div>
           <div>
-            <label className="block text-sm font-medium text-blue-900 mb-1">Pool Type</label>
+            <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.kd49dc1e1')}</label>
             <select
               className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
               value={poolType}
               onChange={e => setPoolType(e.target.value as 'coffee' | 'other')}
               disabled={isDisabled}
             >
-              <option value="other">Other</option>
-              <option value="coffee">Coffee</option>
+              <option value="other">{t('autofix.ka320df81')}</option>
+              <option value="coffee">{t('autofix.k2f9cd1e0')}</option>
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-blue-900 mb-1">Linked Subscription</label>
+            <label className="block text-sm font-medium text-blue-900 mb-1">{t('autofix.k59422f07')}</label>
             <select
               className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
               value={subscriptionCoffeeId}
               onChange={e => setSubscriptionCoffeeId(e.target.value)}
               disabled={isDisabled}
             >
-              <option value="">No subscription selected (set later)</option>
+              <option value="">{t('autofix.kb8d70f41')}</option>
               {subscriptions.map((s) => (
                 <option key={s.id} value={String(s.id)}>{s.title}</option>
               ))}
@@ -157,7 +161,7 @@ export default function CreateNewPoolModal({
               className="px-5 py-3 text-sm font-semibold text-blue-50 rounded-lg bg-blue-900 hover:bg-blue-800 shadow inline-flex items-center gap-2 disabled:opacity-60"
             >
               {creating && <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />}
-              {creating ? 'Creating...' : 'Create Pool'}
+              {creating ? t('autofix.k241a2d77') : t('autofix.kf9d2e4a0')}
             </button>
             <button
               type="button"
@@ -165,7 +169,7 @@ export default function CreateNewPoolModal({
               onClick={() => { setPoolName(''); setDescription(''); setPrice('0.00'); setPoolType('other'); setSubscriptionCoffeeId(''); clearMessages(); }}
               disabled={isDisabled}
             >
-              Reset
+              {t('autofix.k612fc0a4')}
             </button>
             <button
               type="button"

src/app/admin/pool-management/hooks/getlist.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { authFetch } from '../../../utils/authFetch';
 import { log } from '../../../utils/logger';
+import { resolvePoolDescriptionKey } from '../utils/poolDescriptionKey';
 
 export type AdminPool = {
   id: string;
@@ -63,7 +64,11 @@ export function useAdminPools() {
         const mapped: AdminPool[] = apiItems.map(item => ({
           id: String(item.id),
           pool_name: String(item.pool_name ?? 'Unnamed Pool'),
-          description: String(item.description ?? ''),
+          description: resolvePoolDescriptionKey(
+            String(item.pool_name ?? 'Unnamed Pool'),
+            item.pool_type === 'coffee' ? 'coffee' : 'other',
+            String(item.description ?? '')
+          ),
           price: Number(item.price_net ?? item.price ?? 0),
           subscription_coffee_id: item.subscription_coffee_id != null ? Number(item.subscription_coffee_id) : null,
           subscription_title: item.subscription_title ?? null,
@@ -103,7 +108,11 @@ export function useAdminPools() {
       setPools(apiItems.map(item => ({
         id: String(item.id),
         pool_name: String(item.pool_name ?? 'Unnamed Pool'),
-        description: String(item.description ?? ''),
+        description: resolvePoolDescriptionKey(
+          String(item.pool_name ?? 'Unnamed Pool'),
+          item.pool_type === 'coffee' ? 'coffee' : 'other',
+          String(item.description ?? '')
+        ),
         price: Number(item.price_net ?? item.price ?? 0),
         subscription_coffee_id: item.subscription_coffee_id != null ? Number(item.subscription_coffee_id) : null,
         subscription_title: item.subscription_title ?? null,

src/app/admin/pool-management/hooks/usePoolManagementPage.ts

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import useAuthStore from '../../../store/authStore'
+import { setPoolActive, setPoolInactive } from './poolStatus'
+import type { AdminPool } from './getlist'
+import { useTranslation } from '../../../i18n/useTranslation'
+
+export type PoolAction = 'archive' | 'activate'
+
+export function usePoolManagementPage({
+  initialPools,
+  loading,
+  error,
+  refresh,
+}: {
+  initialPools: AdminPool[]
+  loading: boolean
+  error: string
+  refresh?: () => Promise<boolean>
+}) {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const user = useAuthStore((state) => state.user)
+
+  const isAdmin =
+    !!user &&
+    ((user as any)?.role === 'admin' ||
+      (user as any)?.userType === 'admin' ||
+      (user as any)?.isAdmin === true ||
+      (user as any)?.roles?.includes?.('admin'))
+
+  const [authChecked, setAuthChecked] = useState(false)
+  const [archiveError, setArchiveError] = useState('')
+  const [poolStatusConfirm, setPoolStatusConfirm] = useState<{ poolId: string; action: PoolAction } | null>(null)
+  const [poolStatusPending, setPoolStatusPending] = useState(false)
+  const [pools, setPools] = useState<AdminPool[]>([])
+  const [showInactive, setShowInactive] = useState(false)
+
+  useEffect(() => {
+    if (!loading && !error) {
+      setPools(initialPools)
+    }
+  }, [initialPools, loading, error])
+
+  useEffect(() => {
+    if (user === null) {
+      router.replace('/login')
+      return
+    }
+    if (user && !isAdmin) {
+      router.replace('/')
+      return
+    }
+    setAuthChecked(true)
+  }, [user, isAdmin, router])
+
+  const filteredPools = useMemo(
+    () => pools.filter((pool) => (showInactive ? !pool.is_active : pool.is_active)),
+    [pools, showInactive]
+  )
+
+  const requestArchive = (poolId: string) => {
+    setPoolStatusConfirm({ poolId, action: 'archive' })
+  }
+
+  const requestActivate = (poolId: string) => {
+    setPoolStatusConfirm({ poolId, action: 'activate' })
+  }
+
+  const closePoolStatusConfirm = () => {
+    if (!poolStatusPending) {
+      setPoolStatusConfirm(null)
+    }
+  }
+
+  const confirmPoolStatusChange = async () => {
+    if (!poolStatusConfirm) return
+
+    const { poolId, action } = poolStatusConfirm
+    setPoolStatusPending(true)
+    setArchiveError('')
+
+    try {
+      const response = action === 'archive' ? await setPoolInactive(poolId) : await setPoolActive(poolId)
+
+      if (response.ok) {
+        await refresh?.()
+      } else {
+        setArchiveError(response.message || (action === 'archive' ? t('autofix.k1a0d4f73') : t('autofix.k54a977c3')))
+      }
+    } finally {
+      setPoolStatusPending(false)
+      setPoolStatusConfirm(null)
+    }
+  }
+
+  return {
+    router,
+    authChecked,
+    archiveError,
+    poolStatusConfirm,
+    poolStatusPending,
+    pools,
+    showInactive,
+    setShowInactive,
+    filteredPools,
+    requestArchive,
+    requestActivate,
+    closePoolStatusConfirm,
+    confirmPoolStatusChange,
+  }
+}

src/app/admin/pool-management/manage/components/PoolManageHeader.tsx

@@ -0,0 +1,86 @@
+import { UsersIcon } from '@heroicons/react/24/outline'
+import { translateMaybeKey } from '../../utils/translateMaybeKey'
+
+type Translator = (key: string, params?: Record<string, string | number>) => string
+
+type Props = {
+  t: Translator
+  poolId: string
+  poolName: string
+  poolDescription: string
+  poolPrice: number
+  poolIsActive: boolean
+  poolCreatedAt: string
+  isCore: boolean
+  onBack: () => void
+}
+
+export default function PoolManageHeader({
+  t,
+  poolId,
+  poolName,
+  poolDescription,
+  poolPrice,
+  poolIsActive,
+  poolCreatedAt,
+  isCore,
+  onBack,
+}: Props) {
+  const resolvedDescription = translateMaybeKey(t, poolDescription, t('autofix.kf0c9a38d'))
+
+  return (
+    <header
+      className={`rounded-[28px] border py-8 px-6 sm:px-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] backdrop-blur-md mb-8 ${
+        isCore ? 'bg-gradient-to-r from-amber-50/90 to-white/90 border-amber-200' : 'bg-white/85 border-white/80'
+      }`}
+    >
+      {isCore && (
+        <div className="inline-flex items-center gap-1.5 rounded-full bg-amber-500 px-3 py-1 text-xs font-bold text-white uppercase tracking-wider shadow-sm mb-3">
+          <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.784.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.063 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" /></svg>
+          {t('autofix.k39437388')}
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start gap-3">
+            <div
+              className={`h-10 w-10 rounded-lg border flex items-center justify-center shrink-0 ${
+                isCore ? 'bg-amber-100 border-amber-300' : 'bg-slate-50 border-slate-200'
+              }`}
+            >
+              <UsersIcon className={`h-5 w-5 ${isCore ? 'text-amber-700' : 'text-slate-900'}`} />
+            </div>
+            <div className="min-w-0">
+              <h1 className={`text-3xl font-extrabold tracking-tight break-words ${isCore ? 'text-amber-900' : 'text-slate-900'}`}>{poolName}</h1>
+              <p className={`text-sm mt-1 break-words ${isCore ? 'text-amber-700' : 'text-slate-600'}`}>
+                {resolvedDescription}
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-600">
+            <span className={`inline-flex items-center rounded-full px-2 py-0.5 font-medium ${!poolIsActive ? 'bg-slate-100 text-slate-700' : 'bg-green-100 text-green-800'}`}>
+              <span className={`mr-1.5 h-1.5 w-1.5 rounded-full ${!poolIsActive ? 'bg-slate-400' : 'bg-green-500'}`} />
+              {!poolIsActive ? t('autofix.ke2a1b003') : t('autofix.k3bc84f12')}
+            </span>
+            <span>•</span>
+            <span className="break-words">{t('autofix.k0a7d2d1e')} EUR {Number(poolPrice || 0).toFixed(2)}{isCore ? ` ${t('autofix.k9fb4721a')}` : ''}</span>
+            <span>•</span>
+            <span>{t('autofix.k91c8d444')} {new Date(poolCreatedAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}</span>
+            <span>•</span>
+            <span className="text-slate-500 break-all">{t('autofix.k65ad80b0')} {poolId}</span>
+          </div>
+        </div>
+
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-2 rounded-xl bg-white text-slate-900 border border-slate-200 px-4 py-2 text-sm font-medium hover:bg-slate-50 transition"
+          title={t('autofix.k6285753a')}
+        >
+          {t('autofix.k0ac84efe')}
+        </button>
+      </div>
+    </header>
+  )
+}

src/app/admin/pool-management/manage/components/PoolManageStats.tsx

@@ -0,0 +1,63 @@
+import { BanknotesIcon, CalendarDaysIcon } from '@heroicons/react/24/outline'
+
+type Translator = (key: string) => string
+
+type Props = {
+  t: Translator
+  totalAmount: number
+  amountThisYear: number
+  amountThisMonth: number
+}
+
+function StatCard({ title, value, iconClassName, chipClassName }: { title: string; value: string; iconClassName: string; chipClassName: string }) {
+  return (
+    <div className="relative overflow-hidden rounded-2xl bg-white/90 px-6 py-5 shadow-[0_20px_55px_-38px_rgba(15,23,42,0.35)] border border-white/80">
+      <div className="flex items-center gap-3 min-w-0">
+        <div className={`rounded-md p-2 shrink-0 ${chipClassName}`}>
+          <BanknotesIcon className={`h-5 w-5 ${iconClassName}`} />
+        </div>
+        <div className="min-w-0">
+          <p className="text-sm text-slate-600 break-words">{title}</p>
+          <p className="text-2xl font-semibold text-slate-900 break-words">{value}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function PoolManageStats({ t, totalAmount, amountThisYear, amountThisMonth }: Props) {
+  return (
+    <section className="grid [grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))] gap-6 mb-8">
+      <StatCard
+        title={t('autofix.ke8b9f33c')}
+        value={`EUR ${totalAmount.toLocaleString()}`}
+        chipClassName="bg-slate-900"
+        iconClassName="text-white"
+      />
+
+      <div className="relative overflow-hidden rounded-2xl bg-white/90 px-6 py-5 shadow-[0_20px_55px_-38px_rgba(15,23,42,0.35)] border border-white/80">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className="rounded-md bg-amber-600 p-2 shrink-0">
+            <CalendarDaysIcon className="h-5 w-5 text-white" />
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm text-slate-600 break-words">{t('autofix.kaa8231ec')}</p>
+            <p className="text-2xl font-semibold text-slate-900 break-words">EUR {amountThisYear.toLocaleString()}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative overflow-hidden rounded-2xl bg-white/90 px-6 py-5 shadow-[0_20px_55px_-38px_rgba(15,23,42,0.35)] border border-white/80">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className="rounded-md bg-green-600 p-2 shrink-0">
+            <CalendarDaysIcon className="h-5 w-5 text-white" />
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm text-slate-600 break-words">{t('autofix.k86aa4f9c')}</p>
+            <p className="text-2xl font-semibold text-slate-900 break-words">EUR {amountThisMonth.toLocaleString()}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/app/admin/pool-management/manage/components/PoolMembersSection.tsx

@@ -0,0 +1,117 @@
+import { PlusIcon } from '@heroicons/react/24/outline'
+import type { PoolUser } from '../hooks/usePoolManageState'
+
+type Translator = (key: string, params?: Record<string, string | number>) => string
+
+type Props = {
+  t: Translator
+  users: PoolUser[]
+  membersLoading: boolean
+  membersError: string
+  removeError: string
+  removingMemberId: string | null
+  isCore: boolean
+  onOpenSearch: () => void
+  onRemove: (userId: string) => void
+}
+
+export default function PoolMembersSection({
+  t,
+  users,
+  membersLoading,
+  membersError,
+  removeError,
+  removingMemberId,
+  isCore,
+  onOpenSearch,
+  onRemove,
+}: Props) {
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/85 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] p-6 sm:p-7 backdrop-blur-md">
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <h2 className="text-lg font-semibold text-slate-900 break-words">{t('autofix.kfd227aa9')}</h2>
+          <span className="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700">
+            {users.length}
+          </span>
+        </div>
+
+        <button
+          onClick={onOpenSearch}
+          className="inline-flex items-center gap-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-50 px-5 py-3 text-sm font-semibold shadow transition"
+        >
+          <PlusIcon className="h-5 w-5" />
+          {t('autofix.k750c1eb5')}
+        </button>
+      </div>
+
+      {removeError && (
+        <div className="mb-4 rounded-xl border border-red-200 bg-red-50/90 px-4 py-3 text-sm text-red-700">
+          {removeError}
+        </div>
+      )}
+
+      {membersLoading && <div className="text-center text-slate-500 italic py-8">{t('autofix.k5d4d494e')}</div>}
+
+      {membersError && !membersLoading && <div className="text-center text-red-600 py-8 break-words">{membersError}</div>}
+
+      {users.length === 0 && !membersLoading && !membersError && (
+        <div className="text-center text-slate-500 italic py-8">{t('autofix.kcbc17bbd')}</div>
+      )}
+
+      {users.length > 0 && !membersLoading && (
+        <div className="overflow-x-auto rounded-xl border border-slate-200">
+          <table className="min-w-[760px] w-full divide-y divide-slate-200 text-sm">
+            <thead className="bg-slate-50">
+              <tr>
+                <th className="px-4 py-3 text-left font-semibold text-slate-700">{t('autofix.k5b2c4431')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-slate-700">{t('autofix.kb1438ed0')}</th>
+                <th className="px-4 py-3 text-left font-semibold text-slate-700">{t('autofix.k7bed84a7')}</th>
+                <th className="px-4 py-3 text-right font-semibold text-slate-700">{isCore ? t('autofix.k22a3f7c1') : t('autofix.k69adf332')}</th>
+                <th className="px-4 py-3 text-right font-semibold text-slate-700" />
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 bg-white">
+              {users.map((poolUser) => (
+                <tr key={poolUser.id} className="hover:bg-slate-50 transition">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <div className="h-7 w-7 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-xs font-bold text-slate-800 shrink-0">
+                        {(poolUser.name?.[0] || '?').toUpperCase()}
+                      </div>
+                      <span className="font-medium text-slate-900 break-words">{poolUser.name}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-slate-600 break-all">{poolUser.email}</td>
+                  <td className="px-4 py-3 text-slate-600 whitespace-nowrap">
+                    {new Date(poolUser.joinedAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}
+                  </td>
+                  <td className="px-4 py-3 text-right whitespace-nowrap">
+                    <span
+                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${
+                        poolUser.share > 0
+                          ? 'bg-green-50 text-green-700 border border-green-200'
+                          : 'bg-slate-50 text-slate-500 border border-slate-200'
+                      }`}
+                    >
+                      EUR {poolUser.share.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-right whitespace-nowrap">
+                    <button
+                      onClick={() => onRemove(poolUser.id)}
+                      disabled={removingMemberId === poolUser.id}
+                      className="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition disabled:opacity-60 disabled:cursor-not-allowed"
+                    >
+                      {removingMemberId === poolUser.id ? t('autofix.k18fd92a1') : t('autofix.k2ee90f41')}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  )
+}

src/app/admin/pool-management/manage/components/PoolSearchModal.tsx

@@ -0,0 +1,189 @@
+import { MagnifyingGlassIcon, UsersIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import type { UserCandidate } from '../hooks/usePoolManageState'
+
+type Translator = (key: string, params?: Record<string, string | number>) => string
+
+type Props = {
+  t: Translator
+  searchOpen: boolean
+  query: string
+  setQuery: (value: string) => void
+  loading: boolean
+  error: string
+  hasSearched: boolean
+  candidates: UserCandidate[]
+  selectedCandidates: Set<string>
+  savingMembers: boolean
+  onClose: () => void
+  onSearch: () => Promise<void>
+  onClear: () => void
+  onToggleCandidate: (id: string) => void
+  onAddSingle: (candidate: UserCandidate) => Promise<void>
+  onAddSelected: () => Promise<void>
+}
+
+export default function PoolSearchModal({
+  t,
+  searchOpen,
+  query,
+  setQuery,
+  loading,
+  error,
+  hasSearched,
+  candidates,
+  selectedCandidates,
+  savingMembers,
+  onClose,
+  onSearch,
+  onClear,
+  onToggleCandidate,
+  onAddSingle,
+  onAddSelected,
+}: Props) {
+  if (!searchOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="absolute inset-0 flex items-center justify-center p-4 sm:p-6">
+        <div className="w-full max-w-3xl max-h-[90vh] rounded-2xl overflow-hidden bg-white shadow-2xl ring-1 ring-black/10 flex flex-col">
+          <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between gap-3">
+            <h4 className="text-lg font-semibold text-slate-900 break-words">{t('autofix.ka6be28d2')}</h4>
+            <button
+              onClick={onClose}
+              className="p-1.5 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition"
+              aria-label={t('common.close')}
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </div>
+
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              void onSearch()
+            }}
+            className="px-6 py-4 grid grid-cols-1 md:grid-cols-5 gap-3 border-b border-slate-100"
+          >
+            <div className="md:col-span-3">
+              <div className="relative">
+                <MagnifyingGlassIcon className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                <input
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder={t('autofix.kb35549bb')}
+                  className="w-full rounded-md bg-slate-50 border border-slate-300 text-sm text-slate-900 placeholder-slate-400 pl-8 pr-3 py-2 focus:ring-2 focus:ring-slate-900 focus:border-transparent transition"
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2 md:col-span-2">
+              <button
+                type="submit"
+                disabled={loading || query.trim().length < 3}
+                className="flex-1 rounded-md bg-slate-900 hover:bg-slate-800 disabled:opacity-50 text-white px-3 py-2 text-sm font-medium shadow-sm transition"
+              >
+                {loading ? t('autofix.kf5d7b213') : t('common.search')}
+              </button>
+              <button
+                type="button"
+                onClick={onClear}
+                className="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 transition"
+              >
+                {t('autofix.k76f12c8a')}
+              </button>
+            </div>
+          </form>
+
+          <div className="px-6 pt-1 pb-3 text-right text-xs text-slate-500">{t('autofix.ke4c4a858')}</div>
+
+          <div className="px-6 py-4 overflow-y-auto min-h-0 flex-1">
+            {error && <div className="text-sm text-red-600 mb-3 break-words">{error}</div>}
+
+            {!error && query.trim().length < 3 && (
+              <div className="py-8 text-sm text-slate-500 text-center">{t('autofix.kb87eb38b')}</div>
+            )}
+
+            {!error && hasSearched && loading && candidates.length === 0 && (
+              <ul className="space-y-0 divide-y divide-slate-200 border border-slate-200 rounded-md bg-slate-50">
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <li key={index} className="animate-pulse px-4 py-3">
+                    <div className="h-3.5 w-36 bg-slate-200 rounded" />
+                    <div className="mt-2 h-3 w-56 bg-slate-100 rounded" />
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {!error && hasSearched && !loading && candidates.length === 0 && (
+              <div className="py-8 text-sm text-slate-500 text-center">{t('autofix.k54f49724')}</div>
+            )}
+
+            {!error && candidates.length > 0 && (
+              <ul className="divide-y divide-slate-200 border border-slate-200 rounded-lg bg-white">
+                {candidates.map((candidate) => (
+                  <li key={candidate.id} className="px-4 py-3 flex flex-wrap items-center justify-between gap-3 hover:bg-slate-50 transition">
+                    <label className="min-w-0 flex items-start gap-3 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        className="mt-1 h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900"
+                        checked={selectedCandidates.has(candidate.id)}
+                        onChange={() => onToggleCandidate(candidate.id)}
+                      />
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                          <UsersIcon className="h-4 w-4 text-slate-900" />
+                          <span className="text-sm font-medium text-slate-900 break-words">{candidate.name}</span>
+                        </div>
+                        <div className="mt-0.5 text-[11px] text-slate-600 break-all">{candidate.email}</div>
+                      </div>
+                    </label>
+
+                    <button
+                      onClick={() => void onAddSingle(candidate)}
+                      className="shrink-0 inline-flex items-center rounded-md bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 text-xs font-medium shadow-sm transition"
+                    >
+                      {t('autofix.k8c011ed3')}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {loading && candidates.length > 0 && (
+              <div className="pointer-events-none relative">
+                <div className="absolute inset-0 flex items-center justify-center bg-white/60">
+                  <span className="h-5 w-5 rounded-full border-2 border-slate-900 border-b-transparent animate-spin" />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="px-6 py-3 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3 bg-slate-50">
+            <div className="text-xs text-slate-600">
+              {selectedCandidates.size > 0
+                ? t('autofix.k3ab09ef0').replace('{count}', String(selectedCandidates.size))
+                : t('autofix.k2042d9f2')}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onClose}
+                className="text-sm rounded-md px-4 py-2 font-medium bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 transition"
+              >
+                {t('autofix.k0f13bc22')}
+              </button>
+              <button
+                onClick={() => void onAddSelected()}
+                disabled={selectedCandidates.size === 0 || savingMembers}
+                className="text-sm rounded-md px-4 py-2 font-medium bg-slate-900 text-white hover:bg-slate-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {savingMembers ? t('autofix.k89bc3412') : t('autofix.k7e44aa19')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/pool-management/manage/hooks/usePoolManageState.ts

@@ -0,0 +1,343 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import useAuthStore from '../../../../store/authStore'
+import { AdminAPI } from '../../../../utils/api'
+import { useTranslation } from '../../../../i18n/useTranslation'
+
+export type PoolUser = {
+  id: string
+  name: string
+  email: string
+  share: number
+  joinedAt: string
+}
+
+export type UserCandidate = {
+  id: string
+  name: string
+  email: string
+}
+
+export function usePoolManageState() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const user = useAuthStore((state) => state.user)
+  const token = useAuthStore((state) => state.accessToken)
+
+  const isAdmin =
+    !!user &&
+    ((user as any)?.role === 'admin' ||
+      (user as any)?.userType === 'admin' ||
+      (user as any)?.isAdmin === true ||
+      (user as any)?.roles?.includes?.('admin'))
+
+  const [authChecked, setAuthChecked] = useState(false)
+
+  useEffect(() => {
+    if (user === null) {
+      router.replace('/login')
+      return
+    }
+    if (user && !isAdmin) {
+      router.replace('/')
+      return
+    }
+    setAuthChecked(true)
+  }, [user, isAdmin, router])
+
+  const poolId = searchParams.get('id') ?? 'pool-unknown'
+  const poolName = searchParams.get('pool_name') ?? t('autofix.k78dc5a11')
+  const poolDescription = searchParams.get('description') ?? ''
+  const poolPrice = parseFloat(searchParams.get('price') ?? '0')
+  const poolType = (searchParams.get('pool_type') as 'coffee' | 'other') || 'other'
+  const poolIsActive = searchParams.get('is_active') === 'true'
+  const poolCreatedAt = searchParams.get('createdAt') ?? new Date().toISOString()
+
+  const [users, setUsers] = useState<PoolUser[]>([])
+  const [membersLoading, setMembersLoading] = useState(false)
+  const [membersError, setMembersError] = useState('')
+
+  const [totalAmount, setTotalAmount] = useState(0)
+  const [amountThisYear, setAmountThisYear] = useState(0)
+  const [amountThisMonth, setAmountThisMonth] = useState(0)
+
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [candidates, setCandidates] = useState<UserCandidate[]>([])
+  const [hasSearched, setHasSearched] = useState(false)
+  const [selectedCandidates, setSelectedCandidates] = useState<Set<string>>(new Set())
+  const [savingMembers, setSavingMembers] = useState(false)
+
+  const [removingMemberId, setRemovingMemberId] = useState<string | null>(null)
+  const [removeError, setRemoveError] = useState('')
+  const [removeConfirm, setRemoveConfirm] = useState<{ userId: string; label: string } | null>(null)
+
+  const isCore = useMemo(() => poolName === 'Core', [poolName])
+
+  const fetchMembers = useCallback(async () => {
+    if (!token || !poolId || poolId === 'pool-unknown') return
+
+    setMembersError('')
+    setMembersLoading(true)
+
+    try {
+      const response = await AdminAPI.getPoolMembers(token, poolId)
+      const rows = Array.isArray(response?.members) ? response.members : []
+
+      const mapped: PoolUser[] = rows.map((row: any) => {
+        const name = row.company_name
+          ? String(row.company_name)
+          : [row.first_name, row.last_name].filter(Boolean).join(' ').trim()
+
+        return {
+          id: String(row.id),
+          name: name || String(row.email || '').trim() || t('autofix.k8dca3321'),
+          email: String(row.email || '').trim(),
+          share: Number(row.share ?? 0),
+          joinedAt: row.joined_at || new Date().toISOString(),
+        }
+      })
+
+      setUsers(mapped)
+    } catch (requestError: any) {
+      setMembersError(requestError?.message || t('autofix.k7021ad54'))
+    } finally {
+      setMembersLoading(false)
+    }
+  }, [token, poolId])
+
+  useEffect(() => {
+    void fetchMembers()
+  }, [fetchMembers])
+
+  useEffect(() => {
+    if (!token || !poolId || poolId === 'pool-unknown') return
+
+    let cancelled = false
+
+    async function loadStats() {
+      try {
+        const base = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
+        const response = await fetch(`${base}/api/admin/pools/${encodeURIComponent(poolId)}/stats`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+          },
+        })
+
+        const body = await response.json().catch(() => ({}))
+
+        if (!cancelled && response.ok && body?.success) {
+          setTotalAmount(Number(body.data?.total_amount ?? 0))
+          setAmountThisYear(Number(body.data?.amount_this_year ?? 0))
+          setAmountThisMonth(Number(body.data?.amount_this_month ?? 0))
+        }
+      } catch {
+        // Stats are non-critical for page interaction.
+      }
+    }
+
+    void loadStats()
+
+    return () => {
+      cancelled = true
+    }
+  }, [token, poolId])
+
+  const doSearch = useCallback(async () => {
+    setError('')
+
+    const normalizedQuery = query.trim().toLowerCase()
+
+    if (normalizedQuery.length < 3) {
+      setHasSearched(false)
+      setCandidates([])
+      return
+    }
+
+    if (!token) {
+      setError(t('autofix.k53f7e9a1'))
+      setHasSearched(true)
+      setCandidates([])
+      return
+    }
+
+    setHasSearched(true)
+    setLoading(true)
+
+    try {
+      const response = await AdminAPI.getUserList(token)
+      const list = Array.isArray(response?.users) ? response.users : []
+      const existingIds = new Set(users.map((poolUser) => String(poolUser.id)))
+
+      const mapped: UserCandidate[] = list
+        .filter((apiUser: any) => apiUser && apiUser.role !== 'admin' && apiUser.role !== 'super_admin')
+        .map((apiUser: any) => {
+          const name = apiUser.company_name
+            ? String(apiUser.company_name)
+            : [apiUser.first_name, apiUser.last_name].filter(Boolean).join(' ').trim()
+
+          return {
+            id: String(apiUser.id),
+            name: name || String(apiUser.email || '').trim() || t('autofix.k8dca3321'),
+            email: String(apiUser.email || '').trim(),
+          }
+        })
+        .filter((candidate: UserCandidate) => !existingIds.has(candidate.id))
+        .filter((candidate: UserCandidate) => `${candidate.name} ${candidate.email}`.toLowerCase().includes(normalizedQuery))
+
+      setCandidates(mapped)
+    } catch (requestError: any) {
+      setError(requestError?.message || t('autofix.k9c4d2ab3'))
+      setCandidates([])
+    } finally {
+      setLoading(false)
+    }
+  }, [query, token, users])
+
+  const openSearch = () => {
+    setSearchOpen(true)
+    setQuery('')
+    setCandidates([])
+    setHasSearched(false)
+    setError('')
+    setSelectedCandidates(new Set())
+  }
+
+  const closeSearch = () => {
+    setSearchOpen(false)
+  }
+
+  const clearSearchQuery = () => {
+    setQuery('')
+    setError('')
+  }
+
+  const toggleCandidate = (id: string) => {
+    setSelectedCandidates((current) => {
+      const next = new Set(current)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const addUserFromModal = async (candidate: UserCandidate) => {
+    if (!token || !poolId || poolId === 'pool-unknown') return
+
+    setSavingMembers(true)
+    setError('')
+
+    try {
+      await AdminAPI.addPoolMembers(token, poolId, [candidate.id])
+      await fetchMembers()
+      closeSearch()
+      clearSearchQuery()
+      setCandidates([])
+      setHasSearched(false)
+      setSelectedCandidates(new Set())
+    } catch (requestError: any) {
+      setError(requestError?.message || t('autofix.k3f7ca220'))
+    } finally {
+      setLoading(false)
+      setSavingMembers(false)
+    }
+  }
+
+  const addSelectedUsers = async () => {
+    if (selectedCandidates.size === 0) return
+
+    const selectedList = candidates.filter((candidate) => selectedCandidates.has(candidate.id))
+
+    if (selectedList.length === 0 || !token || !poolId || poolId === 'pool-unknown') return
+
+    setSavingMembers(true)
+    setError('')
+
+    try {
+      const userIds = selectedList.map((candidate) => candidate.id)
+      await AdminAPI.addPoolMembers(token, poolId, userIds)
+      await fetchMembers()
+      closeSearch()
+      clearSearchQuery()
+      setCandidates([])
+      setHasSearched(false)
+      setSelectedCandidates(new Set())
+    } catch (requestError: any) {
+      setError(requestError?.message || t('autofix.k90b5f8d1'))
+    } finally {
+      setLoading(false)
+      setSavingMembers(false)
+    }
+  }
+
+  const askRemoveMember = (userId: string) => {
+    const poolUser = users.find((entry) => entry.id === userId)
+    const label = poolUser?.name || poolUser?.email || 'this user'
+    setRemoveConfirm({ userId, label })
+  }
+
+  const confirmRemoveMember = async () => {
+    if (!token || !poolId || poolId === 'pool-unknown' || !removeConfirm) return
+
+    const userId = removeConfirm.userId
+    setRemoveError('')
+    setRemovingMemberId(userId)
+
+    try {
+      await AdminAPI.removePoolMembers(token, poolId, [userId])
+      await fetchMembers()
+    } catch (requestError: any) {
+      setRemoveError(requestError?.message || t('autofix.k296db6a0'))
+    } finally {
+      setRemovingMemberId(null)
+      setRemoveConfirm(null)
+    }
+  }
+
+  return {
+    router,
+    authChecked,
+    poolId,
+    poolName,
+    poolDescription,
+    poolPrice,
+    poolType,
+    poolIsActive,
+    poolCreatedAt,
+    isCore,
+    users,
+    membersLoading,
+    membersError,
+    totalAmount,
+    amountThisYear,
+    amountThisMonth,
+    searchOpen,
+    query,
+    setQuery,
+    loading,
+    error,
+    candidates,
+    hasSearched,
+    selectedCandidates,
+    savingMembers,
+    removingMemberId,
+    removeError,
+    removeConfirm,
+    setRemoveConfirm,
+    openSearch,
+    closeSearch,
+    clearSearchQuery,
+    doSearch,
+    toggleCandidate,
+    addUserFromModal,
+    addSelectedUsers,
+    askRemoveMember,
+    confirmRemoveMember,
+  }
+}

src/app/admin/pool-management/manage/page.tsx

@@ -1,602 +1,129 @@
 'use client'
 
-import React, { Suspense } from 'react' // CHANGED: add Suspense
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
+import React, { Suspense } from 'react'
 import Header from '../../../components/nav/Header'
 import Footer from '../../../components/Footer'
-import { UsersIcon, PlusIcon, BanknotesIcon, CalendarDaysIcon, MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { useRouter, useSearchParams } from 'next/navigation'
-import useAuthStore from '../../../store/authStore'
 import PageTransitionEffect from '../../../components/animation/pageTransitionEffect'
-import { AdminAPI } from '../../../utils/api'
 import ConfirmActionModal from '../../../components/modals/ConfirmActionModal'
-
-type PoolUser = {
-  id: string
-  name: string
-  email: string
-  share: number
-  joinedAt: string
-}
+import { usePoolManageState } from './hooks/usePoolManageState'
+import PoolManageHeader from './components/PoolManageHeader'
+import PoolManageStats from './components/PoolManageStats'
+import PoolMembersSection from './components/PoolMembersSection'
+import PoolSearchModal from './components/PoolSearchModal'
 
 function PoolManagePageInner() {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const user = useAuthStore(s => s.user)
-  const token = useAuthStore(s => s.accessToken)
-  const isAdmin =
-    !!user &&
-    (
-      (user as any)?.role === 'admin' ||
-      (user as any)?.userType === 'admin' ||
-      (user as any)?.isAdmin === true ||
-      ((user as any)?.roles?.includes?.('admin'))
-    )
+  const { t } = useTranslation()
+  const {
+    router,
+    authChecked,
+    poolId,
+    poolName,
+    poolDescription,
+    poolPrice,
+    poolIsActive,
+    poolCreatedAt,
+    isCore,
+    users,
+    membersLoading,
+    membersError,
+    totalAmount,
+    amountThisYear,
+    amountThisMonth,
+    searchOpen,
+    query,
+    setQuery,
+    loading,
+    error,
+    candidates,
+    hasSearched,
+    selectedCandidates,
+    savingMembers,
+    removingMemberId,
+    removeError,
+    removeConfirm,
+    setRemoveConfirm,
+    openSearch,
+    closeSearch,
+    clearSearchQuery,
+    doSearch,
+    toggleCandidate,
+    addUserFromModal,
+    addSelectedUsers,
+    askRemoveMember,
+    confirmRemoveMember,
+  } = usePoolManageState()
 
-  // Auth gate
-  const [authChecked, setAuthChecked] = React.useState(false)
-  React.useEffect(() => {
-    if (user === null) {
-      router.replace('/login')
-      return
-    }
-    if (user && !isAdmin) {
-      router.replace('/')
-      return
-    }
-    setAuthChecked(true)
-  }, [user, isAdmin, router])
-
-  // Read pool data from query params with fallbacks (hooks must be before any return)
-  const poolId = searchParams.get('id') ?? 'pool-unknown'
-  const poolName = searchParams.get('pool_name') ?? 'Unnamed Pool'
-  const poolDescription = searchParams.get('description') ?? ''
-  const poolPrice = parseFloat(searchParams.get('price') ?? '0')
-  const poolType = searchParams.get('pool_type') as 'coffee' | 'other' || 'other'
-  const poolIsActive = searchParams.get('is_active') === 'true'
-  const poolCreatedAt = searchParams.get('createdAt') ?? new Date().toISOString()
-
-  // Members (no dummy data)
-  const [users, setUsers] = React.useState<PoolUser[]>([])
-  const [membersLoading, setMembersLoading] = React.useState(false)
-  const [membersError, setMembersError] = React.useState<string>('')
-
-  // Stats (no dummy data)
-  const [totalAmount, setTotalAmount] = React.useState<number>(0)
-  const [amountThisYear, setAmountThisYear] = React.useState<number>(0)
-  const [amountThisMonth, setAmountThisMonth] = React.useState<number>(0)
-
-  // Search modal state
-  const [searchOpen, setSearchOpen] = React.useState(false)
-  const [query, setQuery] = React.useState('')
-  const [loading, setLoading] = React.useState(false)
-  const [error, setError] = React.useState<string>('')
-  const [candidates, setCandidates] = React.useState<Array<{ id: string; name: string; email: string }>>([])
-  const [hasSearched, setHasSearched] = React.useState(false)
-  const [selectedCandidates, setSelectedCandidates] = React.useState<Set<string>>(new Set())
-  const [savingMembers, setSavingMembers] = React.useState(false)
-  const [removingMemberId, setRemovingMemberId] = React.useState<string | null>(null)
-  const [removeError, setRemoveError] = React.useState<string>('')
-  const [removeConfirm, setRemoveConfirm] = React.useState<{ userId: string; label: string } | null>(null)
-
-  async function fetchMembers() {
-    if (!token || !poolId || poolId === 'pool-unknown') return
-    setMembersError('')
-    setMembersLoading(true)
-    try {
-      const resp = await AdminAPI.getPoolMembers(token, poolId)
-      const rows = Array.isArray(resp?.members) ? resp.members : []
-      const mapped: PoolUser[] = rows.map((row: any) => {
-        const name = row.company_name
-          ? String(row.company_name)
-          : [row.first_name, row.last_name].filter(Boolean).join(' ').trim()
-        return {
-          id: String(row.id),
-          name: name || String(row.email || '').trim() || 'Unnamed user',
-          email: String(row.email || '').trim(),
-          share: Number(row.share ?? 0),
-          joinedAt: row.joined_at || new Date().toISOString()
-        }
-      })
-      setUsers(mapped)
-    } catch (e: any) {
-      setMembersError(e?.message || 'Failed to load pool members.')
-    } finally {
-      setMembersLoading(false)
-    }
-  }
-
-  React.useEffect(() => {
-    void fetchMembers()
-  }, [token, poolId])
-
-  // Fetch pool inflow stats
-  React.useEffect(() => {
-    if (!token || !poolId || poolId === 'pool-unknown') return
-    let cancelled = false
-    async function loadStats() {
-      try {
-        const base = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
-        const res = await fetch(`${base}/api/admin/pools/${encodeURIComponent(poolId)}/stats`, {
-          method: 'GET',
-          credentials: 'include',
-          headers: {
-            Accept: 'application/json',
-            ...(token ? { Authorization: `Bearer ${token}` } : {}),
-          },
-        })
-        const body = await res.json().catch(() => ({}))
-        if (!cancelled && res.ok && body?.success) {
-          setTotalAmount(Number(body.data?.total_amount ?? 0))
-          setAmountThisYear(Number(body.data?.amount_this_year ?? 0))
-          setAmountThisMonth(Number(body.data?.amount_this_month ?? 0))
-        }
-      } catch {
-        // ignore — stats are non-critical
-      }
-    }
-    void loadStats()
-    return () => { cancelled = true }
-  }, [token, poolId])
-
-  // Early return AFTER all hooks are declared to keep consistent order
   if (!authChecked) return null
 
-  async function doSearch() {
-    setError('')
-    const q = query.trim().toLowerCase()
-    if (q.length < 3) {
-      setHasSearched(false)
-      setCandidates([])
-      return
-    }
-    if (!token) {
-      setError('Authentication required.')
-      setHasSearched(true)
-      setCandidates([])
-      return
-    }
-
-    setHasSearched(true)
-    setLoading(true)
-    try {
-      const resp = await AdminAPI.getUserList(token)
-      const list = Array.isArray(resp?.users) ? resp.users : []
-
-      const existingIds = new Set(users.map(u => String(u.id)))
-
-      const mapped: Array<{ id: string; name: string; email: string }> = list
-        .filter((u: any) => u && u.role !== 'admin' && u.role !== 'super_admin')
-        .map((u: any) => {
-          const name = u.company_name
-            ? String(u.company_name)
-            : [u.first_name, u.last_name].filter(Boolean).join(' ').trim()
-          return {
-            id: String(u.id),
-            name: name || String(u.email || '').trim() || 'Unnamed user',
-            email: String(u.email || '').trim()
-          }
-        })
-        .filter((u: { id: string; name: string; email: string }) => !existingIds.has(u.id))
-        .filter((u: { id: string; name: string; email: string }) => {
-          const hay = `${u.name} ${u.email}`.toLowerCase()
-          return hay.includes(q)
-        })
-
-      setCandidates(mapped)
-    } catch (e: any) {
-      setError(e?.message || 'Failed to search users.')
-      setCandidates([])
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  async function addUserFromModal(u: { id: string; name: string; email: string }) {
-    if (!token || !poolId || poolId === 'pool-unknown') return
-    setSavingMembers(true)
-    setError('')
-    try {
-      await AdminAPI.addPoolMembers(token, poolId, [u.id])
-      await fetchMembers()
-      setSearchOpen(false)
-      setQuery('')
-      setCandidates([])
-      setHasSearched(false)
-      setSelectedCandidates(new Set())
-    } catch (e: any) {
-      setError(e?.message || 'Failed to add user.')
-    } finally {
-      setLoading(false)
-      setSavingMembers(false)
-    }
-  }
-
-  function toggleCandidate(id: string) {
-    setSelectedCandidates(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
-  async function addSelectedUsers() {
-    if (selectedCandidates.size === 0) return
-    const selectedList = candidates.filter(c => selectedCandidates.has(c.id))
-    if (selectedList.length === 0) return
-    if (!token || !poolId || poolId === 'pool-unknown') return
-    setSavingMembers(true)
-    setError('')
-    try {
-      const userIds = selectedList.map(u => u.id)
-      await AdminAPI.addPoolMembers(token, poolId, userIds)
-      await fetchMembers()
-      setSearchOpen(false)
-      setQuery('')
-      setCandidates([])
-      setHasSearched(false)
-      setSelectedCandidates(new Set())
-    } catch (e: any) {
-      setError(e?.message || 'Failed to add users.')
-    } finally {
-      setLoading(false)
-      setSavingMembers(false)
-    }
-  }
-
-  async function removeMember(userId: string) {
-    const user = users.find(u => u.id === userId)
-    const label = user?.name || user?.email || 'this user'
-    setRemoveConfirm({ userId, label })
-  }
-
-  async function confirmRemoveMember() {
-    if (!token || !poolId || poolId === 'pool-unknown' || !removeConfirm) return
-    const userId = removeConfirm.userId
-    setRemoveError('')
-    setRemovingMemberId(userId)
-    try {
-      await AdminAPI.removePoolMembers(token, poolId, [userId])
-      await fetchMembers()
-    } catch (e: any) {
-      setRemoveError(e?.message || 'Failed to remove user from pool.')
-    } finally {
-      setRemovingMemberId(null)
-      setRemoveConfirm(null)
-    }
-  }
-
-  const isCore = poolName === 'Core'
-
   return (
     <PageTransitionEffect>
-      <div className={`min-h-screen flex flex-col ${isCore ? 'bg-gradient-to-tr from-amber-50 via-white to-amber-100' : 'bg-gradient-to-tr from-blue-50 via-white to-blue-100'}`}>
+      <div className={`min-h-screen flex flex-col ${isCore ? 'bg-gradient-to-tr from-amber-50 via-white to-amber-100' : 'bg-[radial-gradient(circle_at_top_left,_rgba(59,130,246,0.14),transparent_42%),radial-gradient(circle_at_bottom_right,_rgba(14,165,233,0.12),transparent_36%),linear-gradient(135deg,#eff6ff_0%,#ffffff_44%,#dbeafe_100%)]'}`}>
         <Header />
-        {/* main wrapper: avoid high z-index stacking */}
-        <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8 relative z-0">
-          <div className="max-w-7xl mx-auto relative z-0">
-            {/* Header (remove sticky/z-10) */}
-            <header className={`backdrop-blur border-b py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-3 mb-8 relative z-0 ${
-              isCore ? 'bg-gradient-to-r from-amber-50/90 to-white/90 border-amber-200' : 'bg-white/90 border-blue-100'
-            }`}>
-              {isCore && (
-                <div className="inline-flex items-center gap-1.5 self-start rounded-full bg-amber-500 px-3 py-1 text-xs font-bold text-white uppercase tracking-wider shadow-sm mb-2">
-                  <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.784.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.063 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" /></svg>
-                  Core Pool — 1¢ per capsule per member
-                </div>
-              )}
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className={`h-10 w-10 rounded-lg border flex items-center justify-center ${
-                    isCore ? 'bg-amber-100 border-amber-300' : 'bg-blue-50 border-blue-200'
-                  }`}>
-                    <UsersIcon className={`h-5 w-5 ${isCore ? 'text-amber-700' : 'text-blue-900'}`} />
-                  </div>
-                  <div>
-                    <h1 className={`text-3xl font-extrabold tracking-tight ${isCore ? 'text-amber-900' : 'text-blue-900'}`}>{poolName}</h1>
-                    <p className={`text-sm ${isCore ? 'text-amber-700' : 'text-blue-700'}`}>
-                      {poolDescription ? poolDescription : 'Manage users and track pool funds'}
-                    </p>
-                    <div className="mt-1 flex items-center gap-2 text-xs text-gray-600 flex-wrap">
-                      <span className={`inline-flex items-center rounded-full px-2 py-0.5 font-medium ${!poolIsActive ? 'bg-gray-100 text-gray-700' : 'bg-green-100 text-green-800'}`}>
-                        <span className={`mr-1.5 h-1.5 w-1.5 rounded-full ${!poolIsActive ? 'bg-gray-400' : 'bg-green-500'}`} />
-                        {!poolIsActive ? 'Inactive' : 'Active'}
-                      </span>
-                      <span>•</span>
-                      <span>Price/capsule (gross): € {Number(poolPrice || 0).toFixed(2)}{isCore ? ' × each member' : ''}</span>
-                      <span>•</span>
-                      <span>Created {new Date(poolCreatedAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}</span>
-                      <span>•</span>
-                      <span className="text-gray-500">ID: {poolId}</span>
-                    </div>
-                  </div>
-                </div>
-                {/* Back to Pool Management */}
-                <button
-                  onClick={() => router.push('/admin/pool-management')}
-                  className="inline-flex items-center gap-2 rounded-lg bg-white text-blue-900 border border-blue-200 px-4 py-2 text-sm font-medium hover:bg-blue-50 transition"
-                  title="Back to Pool Management"
-                >
-                  ← Back
-                </button>
-              </div>
-            </header>
+        <main className="flex-1 py-8 px-4 sm:px-6 xl:px-10 relative z-0">
+          <div className="max-w-[1820px] mx-auto relative z-0">
+            <PoolManageHeader
+              t={t}
+              poolId={poolId}
+              poolName={poolName}
+              poolDescription={poolDescription}
+              poolPrice={poolPrice}
+              poolIsActive={poolIsActive}
+              poolCreatedAt={poolCreatedAt}
+              isCore={isCore}
+              onBack={() => router.push('/admin/pool-management')}
+            />
 
-            {/* Stats (now zero until backend wired) */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8 relative z-0">
-              <div className="relative overflow-hidden rounded-2xl bg-white px-6 py-5 shadow-lg border border-gray-100">
-                <div className="flex items-center gap-3">
-                  <div className="rounded-md bg-blue-900 p-2">
-                    <BanknotesIcon className="h-5 w-5 text-white" />
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-600">Total in Pool</p>
-                    <p className="text-2xl font-semibold text-gray-900">€ {totalAmount.toLocaleString()}</p>
-                  </div>
-                </div>
-              </div>
-              <div className="relative overflow-hidden rounded-2xl bg-white px-6 py-5 shadow-lg border border-gray-100">
-                <div className="flex items-center gap-3">
-                  <div className="rounded-md bg-amber-600 p-2">
-                    <CalendarDaysIcon className="h-5 w-5 text-white" />
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-600">This Year</p>
-                    <p className="text-2xl font-semibold text-gray-900">€ {amountThisYear.toLocaleString()}</p>
-                  </div>
-                </div>
-              </div>
-              <div className="relative overflow-hidden rounded-2xl bg-white px-6 py-5 shadow-lg border border-gray-100">
-                <div className="flex items-center gap-3">
-                  <div className="rounded-md bg-green-600 p-2">
-                    <CalendarDaysIcon className="h-5 w-5 text-white" />
-                  </div>
-                  <div>
-                    <p className="text-sm text-gray-600">Current Month</p>
-                    <p className="text-2xl font-semibold text-gray-900">€ {amountThisMonth.toLocaleString()}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <PoolManageStats
+              t={t}
+              totalAmount={totalAmount}
+              amountThisYear={amountThisYear}
+              amountThisMonth={amountThisMonth}
+            />
 
-            {/* Unified Members card: add button + list */}
-            <div className="rounded-2xl bg-white border border-gray-100 shadow-lg p-6 relative z-0">
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-3">
-                  <h2 className="text-lg font-semibold text-blue-900">Members</h2>
-                  <span className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
-                    {users.length}
-                  </span>
-                </div>
-                <button
-                  onClick={() => { setSearchOpen(true); setQuery(''); setCandidates([]); setHasSearched(false); setError(''); }}
-                  className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-sm font-semibold shadow transition"
-                >
-                  <PlusIcon className="h-5 w-5" />
-                  Add User
-                </button>
-              </div>
-              {removeError && (
-                <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-                  {removeError}
-                </div>
-              )}
-
-              {membersLoading && (
-                <div className="text-center text-gray-500 italic py-8">Loading members...</div>
-              )}
-              {membersError && !membersLoading && (
-                <div className="text-center text-red-600 py-8">{membersError}</div>
-              )}
-              {users.length === 0 && !membersLoading && !membersError && (
-                <div className="text-center text-gray-500 italic py-8">No users in this pool yet.</div>
-              )}
-
-              {users.length > 0 && !membersLoading && (
-                <div className="overflow-x-auto rounded-lg border border-gray-200">
-                  <table className="min-w-full divide-y divide-gray-200 text-sm">
-                    <thead className="bg-gray-50">
-                      <tr>
-                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Name</th>
-                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Email</th>
-                        <th className="px-4 py-3 text-left font-semibold text-gray-700">Member Since</th>
-                        <th className="px-4 py-3 text-right font-semibold text-gray-700">{isCore ? 'Total Earned' : 'Share'}</th>
-                        <th className="px-4 py-3 text-right font-semibold text-gray-700" />
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100 bg-white">
-                      {users.map(u => (
-                        <tr key={u.id} className="hover:bg-gray-50 transition">
-                          <td className="px-4 py-3 whitespace-nowrap">
-                            <div className="flex items-center gap-2">
-                              <div className="h-7 w-7 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-xs font-bold text-blue-800">
-                                {(u.name?.[0] || '?').toUpperCase()}
-                              </div>
-                              <span className="font-medium text-gray-900">{u.name}</span>
-                            </div>
-                          </td>
-                          <td className="px-4 py-3 whitespace-nowrap text-gray-600">{u.email}</td>
-                          <td className="px-4 py-3 whitespace-nowrap text-gray-600">
-                            {new Date(u.joinedAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}
-                          </td>
-                          <td className="px-4 py-3 whitespace-nowrap text-right">
-                            <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${
-                              u.share > 0
-                                ? 'bg-green-50 text-green-700 border border-green-200'
-                                : 'bg-gray-50 text-gray-500 border border-gray-200'
-                            }`}>
-                              € {u.share.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                            </span>
-                          </td>
-                          <td className="px-4 py-3 whitespace-nowrap text-right">
-                            <button
-                              onClick={() => removeMember(u.id)}
-                              disabled={removingMemberId === u.id}
-                              className="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition disabled:opacity-60 disabled:cursor-not-allowed"
-                            >
-                              {removingMemberId === u.id ? 'Removing…' : 'Remove'}
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
+            <PoolMembersSection
+              t={t}
+              users={users}
+              membersLoading={membersLoading}
+              membersError={membersError}
+              removeError={removeError}
+              removingMemberId={removingMemberId}
+              isCore={isCore}
+              onOpenSearch={openSearch}
+              onRemove={askRemoveMember}
+            />
           </div>
         </main>
         <Footer />
 
-        {/* Search Modal (keep above with high z) */}
-        {searchOpen && (
-          <div className="fixed inset-0 z-50">
-            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => setSearchOpen(false)} />
-            <div className="absolute inset-0 flex items-center justify-center p-4 sm:p-6">
-              <div className="w-full max-w-2xl max-h-[90vh] rounded-2xl overflow-hidden bg-white shadow-2xl ring-1 ring-black/10 flex flex-col">
-                {/* Header */}
-                <div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
-                  <h4 className="text-lg font-semibold text-blue-900">Add user to pool</h4>
-                  <button
-                    onClick={() => setSearchOpen(false)}
-                    className="p-1.5 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition"
-                    aria-label="Close"
-                  >
-                    <XMarkIcon className="h-5 w-5" />
-                  </button>
-                </div>
-
-                {/* Form */}
-                <form
-                  onSubmit={e => { e.preventDefault(); void doSearch(); }}
-                  className="px-6 py-4 grid grid-cols-1 md:grid-cols-5 gap-3 border-b border-gray-100"
-                >
-                  <div className="md:col-span-3">
-                    <div className="relative">
-                      <MagnifyingGlassIcon className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-                      <input
-                        value={query}
-                        onChange={e => setQuery(e.target.value)}
-                        placeholder="Search name or email…"
-                        className="w-full rounded-md bg-gray-50 border border-gray-300 text-sm text-gray-900 placeholder-gray-400 pl-8 pr-3 py-2 focus:ring-2 focus:ring-blue-900 focus:border-transparent transition"
-                      />
-                    </div>
-                  </div>
-                  <div className="flex gap-2 md:col-span-2">
-                    <button
-                      type="submit"
-                      disabled={loading || query.trim().length < 3}
-                      className="flex-1 rounded-md bg-blue-900 hover:bg-blue-800 disabled:opacity-50 text-white px-3 py-2 text-sm font-medium shadow-sm transition"
-                    >
-                      {loading ? 'Searching…' : 'Search'}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => { setQuery(''); setError(''); }}
-                      className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 transition"
-                    >
-                      Clear
-                    </button>
-                  </div>
-                </form>
-                <div className="px-6 pt-1 pb-3 text-right text-xs text-gray-500">
-                  Min. 3 characters
-                </div>
-
-                {/* Results */}
-                <div className="px-6 py-4 overflow-y-auto min-h-0 flex-1">
-                  {error && <div className="text-sm text-red-600 mb-3">{error}</div>}
-                  {!error && query.trim().length < 3 && (
-                    <div className="py-8 text-sm text-gray-500 text-center">
-                      Enter at least 3 characters and click Search.
-                    </div>
-                  )}
-                  {!error && hasSearched && loading && candidates.length === 0 && (
-                    <ul className="space-y-0 divide-y divide-gray-200 border border-gray-200 rounded-md bg-gray-50">
-                      {Array.from({ length: 5 }).map((_, i) => (
-                        <li key={i} className="animate-pulse px-4 py-3">
-                          <div className="h-3.5 w-36 bg-gray-200 rounded" />
-                          <div className="mt-2 h-3 w-56 bg-gray-100 rounded" />
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                  {!error && hasSearched && !loading && candidates.length === 0 && (
-                    <div className="py-8 text-sm text-gray-500 text-center">
-                      No users match your search.
-                    </div>
-                  )}
-                  {!error && candidates.length > 0 && (
-                    <ul className="divide-y divide-gray-200 border border-gray-200 rounded-lg bg-white">
-                      {candidates.map(u => (
-                            <li key={u.id} className="px-4 py-3 flex items-center justify-between gap-3 hover:bg-gray-50 transition">
-                              <label className="min-w-0 flex items-start gap-3 cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900"
-                                  checked={selectedCandidates.has(u.id)}
-                                  onChange={() => toggleCandidate(u.id)}
-                                />
-                                <div className="min-w-0">
-                                  <div className="flex items-center gap-2">
-                                    <UsersIcon className="h-4 w-4 text-blue-900" />
-                                    <span className="text-sm font-medium text-gray-900 truncate max-w-[200px]">{u.name}</span>
-                                  </div>
-                                  <div className="mt-0.5 text-[11px] text-gray-600 break-all">{u.email}</div>
-                                </div>
-                              </label>
-                              <button
-                                onClick={() => addUserFromModal(u)}
-                                className="shrink-0 inline-flex items-center rounded-md bg-blue-900 hover:bg-blue-800 text-white px-3 py-1.5 text-xs font-medium shadow-sm transition"
-                              >
-                                Add
-                              </button>
-                            </li>
-                          ))}
-                    </ul>
-                  )}
-                  {loading && candidates.length > 0 && (
-                    <div className="pointer-events-none relative">
-                      <div className="absolute inset-0 flex items-center justify-center bg-white/60">
-                        <span className="h-5 w-5 rounded-full border-2 border-blue-900 border-b-transparent animate-spin" />
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                {/* Footer */}
-                <div className="px-6 py-3 border-t border-gray-100 flex items-center justify-between bg-gray-50">
-                  <div className="text-xs text-gray-600">
-                    {selectedCandidates.size > 0 ? `${selectedCandidates.size} selected` : 'No users selected'}
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => setSearchOpen(false)}
-                      className="text-sm rounded-md px-4 py-2 font-medium bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 transition"
-                    >
-                      Done
-                    </button>
-                    <button
-                      onClick={addSelectedUsers}
-                      disabled={selectedCandidates.size === 0 || savingMembers}
-                      className="text-sm rounded-md px-4 py-2 font-medium bg-blue-900 text-white hover:bg-blue-800 transition disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      {savingMembers ? 'Adding…' : 'Add Selected'}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
+        <PoolSearchModal
+          t={t}
+          searchOpen={searchOpen}
+          query={query}
+          setQuery={setQuery}
+          loading={loading}
+          error={error}
+          hasSearched={hasSearched}
+          candidates={candidates}
+          selectedCandidates={selectedCandidates}
+          savingMembers={savingMembers}
+          onClose={closeSearch}
+          onSearch={doSearch}
+          onClear={clearSearchQuery}
+          onToggleCandidate={toggleCandidate}
+          onAddSingle={addUserFromModal}
+          onAddSelected={addSelectedUsers}
+        />
 
         <ConfirmActionModal
           open={Boolean(removeConfirm)}
           pending={Boolean(removingMemberId)}
           intent="danger"
-          title="Remove member from pool?"
-          description={`This will remove ${removeConfirm?.label || 'this user'} from the pool.`}
-          confirmText="Remove"
+          title={t('autofix.k959fb1a6')}
+          description={t('autofix.k7c40d832').replace('{label}', removeConfirm?.label || t('autofix.k74122df0'))}
+          confirmText={t('autofix.k2ee90f41')}
           onClose={() => { if (!removingMemberId) setRemoveConfirm(null) }}
           onConfirm={confirmRemoveMember}
         />
@@ -605,19 +132,22 @@ function PoolManagePageInner() {
   )
 }
 
-// CHANGED: Suspense wrapper required for useSearchParams() during prerender
+function PoolManagePageFallback() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#0F172A] mx-auto mb-3" />
+        <p className="text-[#4A4A4A]">{t('autofix.k79d12c2e')}</p>
+      </div>
+    </div>
+  )
+}
+
 export default function PoolManagePage() {
   return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#0F172A] mx-auto mb-3" />
-            <p className="text-[#4A4A4A]">Loading...</p>
-          </div>
-        </div>
-      }
-    >
+    <Suspense fallback={<PoolManagePageFallback />}>
       <PoolManagePageInner />
     </Suspense>
   )

src/app/admin/pool-management/page.tsx

@@ -1,98 +1,41 @@
 'use client'
 
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import React from 'react'
 import Header from '../../components/nav/Header'
 import Footer from '../../components/Footer'
-import { UsersIcon } from '@heroicons/react/24/outline'
 import { useAdminPools } from './hooks/getlist'
-import useAuthStore from '../../store/authStore'
-import { useRouter } from 'next/navigation'
-import { setPoolInactive, setPoolActive } from './hooks/poolStatus'
 import PageTransitionEffect from '../../components/animation/pageTransitionEffect'
 import ConfirmActionModal from '../../components/modals/ConfirmActionModal'
-
-type Pool = {
-  id: string
-  pool_name: string
-  description?: string
-  price?: number
-  pool_type?: 'coffee' | 'other'
-  is_active?: boolean
-  membersCount: number
-  createdAt: string
-}
+import { usePoolManagementPage } from './hooks/usePoolManagementPage'
+import PoolManagementHeader from './components/PoolManagementHeader'
+import PoolManagementGrid from './components/PoolManagementGrid'
 
 export default function PoolManagementPage() {
-  const router = useRouter()
-
-  const [archiveError, setArchiveError] = React.useState<string>('')
-  const [poolStatusConfirm, setPoolStatusConfirm] = React.useState<{ poolId: string; action: 'archive' | 'activate' } | null>(null)
-  const [poolStatusPending, setPoolStatusPending] = React.useState(false)
-
-  // Replace local fetch with hook
+  const { t } = useTranslation();
   const { pools: initialPools, loading, error, refresh } = useAdminPools()
-  const [pools, setPools] = React.useState<Pool[]>([])
-  const [showInactive, setShowInactive] = React.useState(false)
-
-  React.useEffect(() => {
-    if (!loading && !error) {
-      setPools(initialPools)
-    }
-  }, [initialPools, loading, error])
-
-  const filteredPools = pools.filter(p => showInactive ? !p.is_active : p.is_active)
-
-  async function handleArchive(poolId: string) {
-    setPoolStatusConfirm({ poolId, action: 'archive' })
-  }
-
-  async function handleSetActive(poolId: string) {
-    setPoolStatusConfirm({ poolId, action: 'activate' })
-  }
-
-  async function confirmPoolStatusChange() {
-    if (!poolStatusConfirm) return
-    const { poolId, action } = poolStatusConfirm
-    setPoolStatusPending(true)
-    setArchiveError('')
-    try {
-      const res = action === 'archive' ? await setPoolInactive(poolId) : await setPoolActive(poolId)
-      if (res.ok) {
-        await refresh?.()
-      } else {
-        setArchiveError(res.message || (action === 'archive' ? 'Failed to deactivate pool.' : 'Failed to activate pool.'))
-      }
-    } finally {
-      setPoolStatusPending(false)
-      setPoolStatusConfirm(null)
-    }
-  }
-
-  const user = useAuthStore(s => s.user)
-  const isAdmin =
-    !!user &&
-    (
-      (user as any)?.role === 'admin' ||
-      (user as any)?.userType === 'admin' ||
-      (user as any)?.isAdmin === true ||
-      ((user as any)?.roles?.includes?.('admin'))
-    )
-
-  // NEW: block rendering until we decide access
-  const [authChecked, setAuthChecked] = React.useState(false)
-  React.useEffect(() => {
-    // When user is null -> unauthenticated; undefined means not loaded yet (store default may be null in this app).
-    if (user === null) {
-      router.replace('/login')
-      return
-    }
-    if (user && !isAdmin) {
-      router.replace('/')
-      return
-    }
-    // user exists and is admin
-    setAuthChecked(true)
-  }, [user, isAdmin, router])
+  const {
+    router,
+    authChecked,
+    archiveError,
+    poolStatusConfirm,
+    poolStatusPending,
+    pools,
+    showInactive,
+    setShowInactive,
+    filteredPools,
+    requestArchive,
+    requestActivate,
+    closePoolStatusConfirm,
+    confirmPoolStatusChange,
+  } = usePoolManagementPage({
+    initialPools,
+    loading,
+    error,
+    refresh,
+  })
 
   // Early return: render nothing until authorized, prevents any flash
   if (!authChecked) return null
@@ -100,156 +43,40 @@ export default function PoolManagementPage() {
   // Remove Access Denied overlay; render normal content
   return (
     <PageTransitionEffect>
-      <div className="min-h-screen flex flex-col bg-gradient-to-tr from-blue-50 via-white to-blue-100">
+      <div className="min-h-screen flex flex-col bg-[radial-gradient(circle_at_top_left,_rgba(59,130,246,0.14),transparent_42%),radial-gradient(circle_at_bottom_right,_rgba(14,165,233,0.12),transparent_36%),linear-gradient(135deg,#eff6ff_0%,#ffffff_44%,#dbeafe_100%)]">
         <Header />
-        <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8 relative z-0">
-          <div className="max-w-7xl mx-auto relative z-0">
-            <header className="bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8 relative z-0">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Pool Management</h1>
-                  <p className="text-lg text-blue-700 mt-2">Manage system pools and members.</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-600">Show:</span>
-                <button
-                  onClick={() => setShowInactive(false)}
-                  className={`px-4 py-2 text-sm font-medium rounded-lg transition ${!showInactive ? 'bg-blue-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
-                >
-                  Active Pools
-                </button>
-                <button
-                  onClick={() => setShowInactive(true)}
-                  className={`px-4 py-2 text-sm font-medium rounded-lg transition ${showInactive ? 'bg-blue-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
-                >
-                  Inactive Pools
-                </button>
-              </div>
-            </header>
+        <main className="flex-1 py-8 px-4 sm:px-6 xl:px-10 relative z-0">
+          <div className="max-w-[1820px] mx-auto relative z-0">
+            <PoolManagementHeader
+              t={t}
+              showInactive={showInactive}
+              onShowActive={() => setShowInactive(false)}
+              onShowInactive={() => setShowInactive(true)}
+            />
 
-            {/* Pools List card */}
-            <div className="rounded-2xl bg-white border border-gray-100 shadow-lg p-6 relative z-0">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold text-blue-900">Existing Pools</h2>
-                <span className="text-sm text-gray-600">{pools.length} total</span>
-              </div>
-
-              {/* Show archive errors */}
-              {archiveError && (
-                <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-                  {archiveError}
-                </div>
-              )}
-
-              {error && (
-                <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-                  {error}
-                </div>
-              )}
-              {loading ? (
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {Array.from({ length: 6 }).map((_, i) => (
-                    <div key={i} className="rounded-2xl bg-white border border-gray-100 shadow p-5">
-                      <div className="animate-pulse space-y-3">
-                        <div className="h-5 w-1/2 bg-gray-200 rounded" />
-                        <div className="h-4 w-3/4 bg-gray-200 rounded" />
-                        <div className="h-4 w-2/3 bg-gray-100 rounded" />
-                        <div className="h-8 w-full bg-gray-100 rounded" />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                  {filteredPools.map(pool => {
-                    const isCore = pool.pool_name === 'Core'
-                    return (
-                    <article key={pool.id} className={`rounded-2xl border shadow p-5 flex flex-col relative z-0 ${
-                      isCore
-                        ? 'bg-gradient-to-br from-amber-50 via-white to-amber-50 border-amber-300 ring-1 ring-amber-200'
-                        : 'bg-white border-gray-100'
-                    }`}>
-                      {isCore && (
-                        <div className="absolute -top-2.5 left-4 inline-flex items-center gap-1 rounded-full bg-amber-500 px-2.5 py-0.5 text-[10px] font-bold text-white uppercase tracking-wider shadow-sm">
-                          <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.784.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.063 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" /></svg>
-                          Core Pool
-                        </div>
-                      )}
-                      <div className="flex items-start justify-between">
-                        <div className="flex items-center gap-3">
-                          <div className={`h-9 w-9 rounded-lg border flex items-center justify-center ${
-                            isCore ? 'bg-amber-100 border-amber-300' : 'bg-blue-50 border-blue-200'
-                          }`}>
-                            <UsersIcon className={`h-5 w-5 ${isCore ? 'text-amber-700' : 'text-blue-900'}`} />
-                          </div>
-                          <h3 className={`text-lg font-semibold ${isCore ? 'text-amber-900' : 'text-blue-900'}`}>{pool.pool_name}</h3>
-                        </div>
-                        <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${!pool.is_active ? 'bg-gray-100 text-gray-700' : 'bg-green-100 text-green-800'}`}>
-                          <span className={`mr-1.5 h-1.5 w-1.5 rounded-full ${!pool.is_active ? 'bg-gray-400' : 'bg-green-500'}`} />
-                          {!pool.is_active ? 'Inactive' : 'Active'}
-                        </span>
-                      </div>
-                      <p className="mt-2 text-sm text-gray-700">{pool.description || '-'}</p>
-                      <div className="mt-4 grid grid-cols-2 gap-3 text-sm text-gray-600">
-                        <div>
-                          <span className="text-gray-500">Members</span>
-                          <div className="font-medium text-gray-900">{pool.membersCount}</div>
-                        </div>
-                        <div>
-                          <span className="text-gray-500">Created</span>
-                          <div className="font-medium text-gray-900">
-                            {new Date(pool.createdAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="mt-5 flex items-center justify-between">
-                        <button
-                          className="px-4 py-2 text-xs font-medium rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition"
-                          onClick={() => {
-                            const params = new URLSearchParams({
-                              id: String(pool.id),
-                              pool_name: pool.pool_name ?? '',
-                              description: pool.description ?? '',
-                              price: String(pool.price ?? 0),
-                              pool_type: pool.pool_type ?? 'other',
-                              is_active: pool.is_active ? 'true' : 'false',
-                              createdAt: pool.createdAt ?? '',
-                            })
-                            router.push(`/admin/pool-management/manage?${params.toString()}`)
-                          }}
-                        >
-                          Manage
-                        </button>
-                        {!pool.is_active ? (
-                          <button
-                            className="px-4 py-2 text-xs font-medium rounded-lg bg-green-100 text-green-800 hover:bg-green-200 transition"
-                            onClick={() => handleSetActive(pool.id)}
-                            title="Activate this pool"
-                          >
-                            Set Active
-                          </button>
-                        ) : (
-                          <button
-                            className="px-4 py-2 text-xs font-medium rounded-lg bg-amber-100 text-amber-800 hover:bg-amber-200 transition"
-                            onClick={() => handleArchive(pool.id)}
-                            title="Archive this pool"
-                          >
-                            Archive
-                          </button>
-                        )}
-                      </div>
-                    </article>
-                    )
-                  })}
-                  {filteredPools.length === 0 && !loading && !error && (
-                    <div className="col-span-full text-center text-gray-500 italic py-6">
-                      {showInactive ? 'No inactive pools found.' : 'No active pools found.'}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
+            <PoolManagementGrid
+              t={t}
+              pools={pools}
+              filteredPools={filteredPools}
+              loading={loading}
+              error={error}
+              archiveError={archiveError}
+              showInactive={showInactive}
+              onManage={(pool) => {
+                const params = new URLSearchParams({
+                  id: String(pool.id),
+                  pool_name: pool.pool_name ?? '',
+                  description: pool.description ?? '',
+                  price: String(pool.price ?? 0),
+                  pool_type: pool.pool_type ?? 'other',
+                  is_active: pool.is_active ? 'true' : 'false',
+                  createdAt: pool.createdAt ?? '',
+                })
+                router.push(`/admin/pool-management/manage?${params.toString()}`)
+              }}
+              onArchive={requestArchive}
+              onActivate={requestActivate}
+            />
           </div>
         </main>
 
@@ -257,14 +84,14 @@ export default function PoolManagementPage() {
           open={Boolean(poolStatusConfirm)}
           pending={poolStatusPending}
           intent={poolStatusConfirm?.action === 'archive' ? 'danger' : 'default'}
-          title={poolStatusConfirm?.action === 'archive' ? 'Archive pool?' : 'Activate pool?'}
+          title={poolStatusConfirm?.action === 'archive' ? t('autofix.k0b84e6aa') : t('autofix.k9ad214be')}
           description={
             poolStatusConfirm?.action === 'archive'
-              ? 'Users will no longer be able to join or use this pool while archived.'
-              : 'This pool will be active again and available for use.'
+              ? t('autofix.k3fe81c2a')
+              : t('autofix.k1d6c33f1')
           }
-          confirmText={poolStatusConfirm?.action === 'archive' ? 'Archive' : 'Set Active'}
-          onClose={() => { if (!poolStatusPending) setPoolStatusConfirm(null) }}
+          confirmText={poolStatusConfirm?.action === 'archive' ? t('autofix.kf3b0c221') : t('autofix.k8fa13d9b')}
+          onClose={closePoolStatusConfirm}
           onConfirm={confirmPoolStatusChange}
         />
 

src/app/admin/pool-management/utils/poolDescriptionKey.ts

@@ -0,0 +1,27 @@
+export function resolvePoolDescriptionKey(
+  poolName?: string,
+  poolType?: 'coffee' | 'other',
+  rawDescription?: string
+): string {
+  const raw = (rawDescription || '').trim()
+
+  // Keep existing translation keys untouched.
+  if (raw.includes('.') && /^[A-Za-z0-9_.-]+$/.test(raw)) {
+    return raw
+  }
+
+  const normalizedName = (poolName || '').trim().toLowerCase()
+  if (normalizedName === 'core') {
+    return 'autofix.kcf73e90d'
+  }
+
+  if (poolType === 'coffee') {
+    return 'autofix.k20f6ac90'
+  }
+
+  if (poolType === 'other') {
+    return 'autofix.k4bc91d55'
+  }
+
+  return 'autofix.kf0c9a38d'
+}

src/app/admin/pool-management/utils/translateMaybeKey.ts

@@ -0,0 +1,14 @@
+type Translator = (key: string) => string
+
+export function translateMaybeKey(t: Translator, value?: string, fallback = ''): string {
+  if (!value) return fallback
+
+  const candidate = value.trim()
+  if (!candidate) return fallback
+
+  const looksLikeKey = candidate.includes('.') && /^[A-Za-z0-9_.-]+$/.test(candidate)
+  if (!looksLikeKey) return value
+
+  const translated = t(candidate)
+  return translated && translated !== candidate ? translated : value
+}

src/app/admin/subscriptions/components/ImageCropModal.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React, { useState, useCallback } from 'react'
 import Cropper from 'react-easy-crop'
 import { Point, Area } from 'react-easy-crop'
@@ -11,6 +14,7 @@ interface ImageCropModalProps {
 }
 
 export default function ImageCropModal({ isOpen, imageSrc, onClose, onCropComplete }: ImageCropModalProps) {
+  const { t } = useTranslation();
   const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
   const [zoom, setZoom] = useState(1)
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
@@ -70,7 +74,7 @@ export default function ImageCropModal({ isOpen, imageSrc, onClose, onCropComple
       <div className="relative w-full max-w-4xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden">
         {/* Header */}
         <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-50 to-white">
-          <h2 className="text-xl font-semibold text-blue-900">Crop & Adjust Image</h2>
+          <h2 className="text-xl font-semibold text-blue-900">{t('autofix.k8f528877')}</h2>
           <button
             onClick={onClose}
             className="text-gray-500 hover:text-gray-700 transition"
@@ -120,9 +124,7 @@ export default function ImageCropModal({ isOpen, imageSrc, onClose, onCropComple
               <button
                 onClick={handleSave}
                 className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
-              >
-                Apply Crop
-              </button>
+              >{t('autofix.kef1656df')}</button>
             </div>
           </div>
         </div>

src/app/admin/subscriptions/createSubscription/page.tsx

@@ -7,7 +7,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import ImageCropModal from '../components/ImageCropModal';
 
+import { useTranslation } from '../../../i18n/useTranslation';
+
 export default function CreateSubscriptionPage() {
+  const { t } = useTranslation();
   const { createProduct } = useCoffeeManagement();
   const router = useRouter();
 
@@ -24,6 +27,9 @@ export default function CreateSubscriptionPage() {
   const [showCropModal, setShowCropModal] = useState(false);
   const [currency, setCurrency] = useState('EUR');
   const [isFeatured, setIsFeatured] = useState(false);
+  // Gallery images (multi-upload, no crop)
+  const [galleryFiles, setGalleryFiles] = useState<File[]>([]);
+  const [galleryPreviews, setGalleryPreviews] = useState<string[]>([]);
   // Fixed billing defaults (locked: month / 1)
   const billingInterval: 'month' = 'month';
   const intervalCount: number = 1;
@@ -39,7 +45,8 @@ export default function CreateSubscriptionPage() {
         currency,
         is_featured: isFeatured,
         state: state === 'available',
-        pictureFile
+        pictureFile,
+        pictureFiles: galleryFiles.length ? galleryFiles : undefined,
       });
       router.push('/admin/subscriptions');
     } catch (e: any) {
@@ -52,8 +59,9 @@ export default function CreateSubscriptionPage() {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
       if (originalImageSrc) URL.revokeObjectURL(originalImageSrc);
+      galleryPreviews.forEach(u => URL.revokeObjectURL(u));
     };
-  }, []);
+  }, [previewUrl, originalImageSrc, galleryPreviews]);
 
   function handleSelectFile(file?: File) {
     if (!file) return;
@@ -68,6 +76,7 @@ export default function CreateSubscriptionPage() {
     }
     setError(null);
     
+    if (originalImageSrc) URL.revokeObjectURL(originalImageSrc);
     // Create object URL for cropping
     const url = URL.createObjectURL(file);
     setOriginalImageSrc(url);
@@ -80,199 +89,315 @@ export default function CreateSubscriptionPage() {
     setPictureFile(croppedFile);
     
     // Create preview URL
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
     const url = URL.createObjectURL(croppedBlob);
     setPreviewUrl(url);
   }
 
+  function handleAddGalleryFiles(files: FileList | null) {
+    if (!files || files.length === 0) return;
+    const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+    const newFiles: File[] = [];
+    const newPreviews: string[] = [];
+    for (const file of Array.from(files)) {
+      if (!allowed.includes(file.type)) {
+        setError(`"${file.name}" is not a valid image type (JPG, PNG, WebP only).`);
+        continue;
+      }
+      if (file.size > 10 * 1024 * 1024) {
+        setError(`"${file.name}" exceeds the 10MB limit.`);
+        continue;
+      }
+      newFiles.push(file);
+      newPreviews.push(URL.createObjectURL(file));
+    }
+    setGalleryFiles(prev => [...prev, ...newFiles]);
+    setGalleryPreviews(prev => [...prev, ...newPreviews]);
+  }
+
+  function handleRemoveGalleryImage(index: number) {
+    setGalleryPreviews(prev => {
+      URL.revokeObjectURL(prev[index]);
+      return prev.filter((_, i) => i !== index);
+    });
+    setGalleryFiles(prev => prev.filter((_, i) => i !== index));
+  }
+
+  function handleSetThumbnailFromGallery(index: number) {
+    const source = galleryFiles[index];
+    if (!source) return;
+    setError(null);
+    const thumbFile = new File([source], source.name, { type: source.type });
+    setPictureFile(thumbFile);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    const thumbPreview = URL.createObjectURL(source);
+    setPreviewUrl(thumbPreview);
+  }
+
   return (
-    <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
-          {/* Header */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
-            <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Create Coffee</h1>
-                <p className="text-lg text-blue-700 mt-2">Add a new coffee.</p>
-              </div>
-              <Link href="/admin/subscriptions"
-                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
-                Back to list
-              </Link>
-            </div>
-          </header>
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
 
-          <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
-            <form onSubmit={onCreate} className="space-y-8">
-              {/* Picture Upload moved to top */}
-              <div>
-                <label className="block text-sm font-medium text-blue-900 mb-2">Picture</label>
-                <p className="text-xs text-gray-600 mb-3">Upload an image and crop it to fit the coffee thumbnail (16:9 aspect ratio, 144px height)</p>
-                <div
-                  className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-blue-300 bg-blue-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
-                  style={{ minHeight: '400px' }}
-                  onClick={() => document.getElementById('file-upload')?.click()}
-                  onDragOver={e => e.preventDefault()}
-                  onDrop={e => {
-                    e.preventDefault();
-                    if (e.dataTransfer.files?.[0]) handleSelectFile(e.dataTransfer.files[0]);
-                  }}
-                >
-                  {!previewUrl && (
-                    <div className="text-center w-full px-6 py-10">
-                      <PhotoIcon aria-hidden="true" className="mx-auto h-16 w-16 text-blue-400" />
-                      <div className="mt-4 text-base font-medium text-blue-700">
-                        <span>Click or drag and drop an image here</span>
-                      </div>
-                      <p className="text-sm text-blue-600 mt-2">PNG, JPG, WebP up to 10MB</p>
-                      <p className="text-xs text-gray-500 mt-2">You'll be able to crop and adjust the image after uploading</p>
-                    </div>
-                  )}
-                  {previewUrl && (
-                    <div className="relative w-full h-full min-h-[400px] flex items-center justify-center bg-gray-100 p-6">
-                      <img 
-                        src={previewUrl} 
-                        alt="Preview" 
-                        className="max-h-[380px] max-w-full object-contain rounded-lg shadow-lg" 
-                      />
-                      <div className="absolute top-4 right-4 flex gap-2">
-                        <button
-                          type="button"
-                          onClick={e => { 
-                            e.stopPropagation(); 
-                            setShowCropModal(true);
-                          }}
-                          className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-medium text-blue-900 shadow hover:bg-white transition"
-                        >
-                          Edit Crop
-                        </button>
-                        <button
-                          type="button"
-                          onClick={e => { 
-                            e.stopPropagation(); 
-                            setPictureFile(undefined);
-                            setPreviewUrl(null);
-                          }}
-                          className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-medium text-red-600 shadow hover:bg-white transition"
-                        >
-                          Remove
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                  <input
-                    id="file-upload"
-                    name="file-upload"
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={e => handleSelectFile(e.target.files?.[0])}
-                  />
-                </div>
-              </div>
-
-              {/* Title moved above description */}
-              <div>
-                <label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
-                <input
-                  id="title"
-                  name="title"
-                  required
-                  className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
-                  placeholder="Title"
-                  value={title}
-                  onChange={e => setTitle(e.target.value)}
-                />
-              </div>
-
-              {/* Description now after title */}
-              <div>
-                <label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
-                <textarea
-                  id="description"
-                  name="description"
-                  required
-                  className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
-                  rows={3}
-                  placeholder="Describe the product"
-                  value={description}
-                  onChange={e => setDescription(e.target.value)}
-                />
-                <p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
-              </div>
-
-              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
-                {/* Price */}
-                <div>
-                  <label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
-                  <input 
-                    id="price" 
-                    name="price" 
-                    required 
-                    min={0.01} 
-                    step={0.01} 
-                    className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" 
-                    placeholder="0.00" 
-                    type="number" 
-                    value={price} 
-                    onChange={e => {
-                      const val = e.target.value;
-                      setPrice(val);
-                    }}
-                    onBlur={e => {
-                      const num = parseFloat(e.target.value);
-                      if (!isNaN(num)) {
-                        setPrice(num.toFixed(2));
-                      }
-                    }}
-                  />
-                </div>
-                {/* Currency */}
-                <div>
-                  <label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
-                  <input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
-                </div>
-                {/* Featured */}
-                <div className="flex items-center gap-2 mt-6">
-                  <input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
-                  <label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
-                </div>
-                {/* Subscription Billing (Locked) + Availability */}
-                <div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
-                  <div>
-                    <label className="block text-sm font-medium text-blue-900">Subscription Billing</label>
-                    <p className="mt-1 text-xs text-gray-600">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
-                    <div className="mt-2 flex gap-4">
-                      <input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
-                      <input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
-                    </div>
-                  </div>
-                  <div>
-                    <label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
-                    <select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
-                      <option value="available">Available</option>
-                      <option value="unavailable">Unavailable</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-
-              {/* Actions */}
-              <div className="flex items-center justify-end gap-x-4">
-                <Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
-                  Cancel
-                </Link>
-                <button type="submit" className="inline-flex justify-center rounded-lg bg-blue-900 px-5 py-3 text-sm font-semibold text-blue-50 shadow hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-900 transition">
-                  Create Coffee
-                </button>
-              </div>
-
-              {error && <p className="text-sm text-red-600">{error}</p>}
-            </form>
+        {/* Header card */}
+        <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-slate-900">{t('autofix.kaa30f0cd')}</h1>
+            <p className="mt-1 text-sm text-slate-500">{t('autofix.kf72d41db')}</p>
           </div>
-        </main>
+          <Link
+            href="/admin/subscriptions"
+            className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 transition"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            {t('autofix.kd8a5ad17')}
+          </Link>
+        </div>
+
+        {/* Form card */}
+        <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+          <form onSubmit={onCreate} className="space-y-8">
+
+            {/* Thumbnail */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-1">Thumbnail</label>
+              <p className="text-xs text-slate-500 mb-3">Single image used as the card thumbnail. You can crop it after selecting (16:9, sent as <code className="rounded bg-slate-100 px-1 py-0.5 text-slate-600">picture</code>).</p>
+              <div
+                className="relative flex justify-center items-center rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50 cursor-pointer overflow-hidden transition hover:border-slate-400 hover:bg-slate-100"
+                style={{ minHeight: '400px' }}
+                onClick={() => document.getElementById('file-upload')?.click()}
+                onDragOver={e => e.preventDefault()}
+                onDrop={e => {
+                  e.preventDefault();
+                  if (e.dataTransfer.files?.[0]) handleSelectFile(e.dataTransfer.files[0]);
+                }}
+              >
+                {!previewUrl && (
+                  <div className="text-center w-full px-6 py-10">
+                    <PhotoIcon aria-hidden="true" className="mx-auto h-16 w-16 text-slate-300" />
+                    <div className="mt-4 text-base font-medium text-slate-600">
+                      <span>{t('autofix.k6ee0a1b6')}</span>
+                    </div>
+                    <p className="text-sm text-slate-500 mt-2">{t('autofix.k80ac9651')}</p>
+                    <p className="text-xs text-slate-400 mt-2">{t('autofix.k41ab9eb6')}</p>
+                  </div>
+                )}
+                {previewUrl && (
+                  <div className="relative w-full h-full min-h-[400px] flex items-center justify-center bg-slate-100 p-6">
+                    <img
+                      src={previewUrl}
+                      alt="Preview"
+                      className="max-h-[380px] max-w-full object-contain rounded-xl shadow-lg"
+                    />
+                    <div className="absolute top-4 right-4 flex gap-2">
+                      <button
+                        type="button"
+                        onClick={e => { e.stopPropagation(); setShowCropModal(true); }}
+                        className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-semibold text-slate-800 shadow hover:bg-white transition"
+                      >{t('autofix.k73d1d7d7')}</button>
+                      <button
+                        type="button"
+                        onClick={e => { e.stopPropagation(); setPictureFile(undefined); setPreviewUrl(null); }}
+                        className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-semibold text-rose-600 shadow hover:bg-white transition"
+                      >Remove</button>
+                    </div>
+                  </div>
+                )}
+                <input
+                  id="file-upload"
+                  name="file-upload"
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={e => handleSelectFile(e.target.files?.[0])}
+                />
+              </div>
+            </div>
+
+            {/* Gallery Images */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-700 mb-1">{t('autofix.ka219f1d9')}</label>
+              <p className="text-xs text-slate-500 mb-3">
+                Upload additional product images (JPG, PNG, WebP · max 10 MB each). These are sent as <code className="rounded bg-slate-100 px-1 py-0.5 text-slate-600">pictures</code>{t('autofix.k2992fa62')}<code className="rounded bg-slate-100 px-1 py-0.5 text-slate-600">pictureUrls</code>.
+              </p>
+
+              {/* Gallery grid */}
+              {galleryPreviews.length > 0 && (
+                <div className="mb-3 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 gap-3">
+                  {galleryPreviews.map((url, i) => (
+                    <div key={i} className="relative group rounded-xl overflow-hidden border border-slate-200 bg-slate-50 aspect-video">
+                      <img src={url} alt={`Gallery ${i + 1}`} className="w-full h-full object-cover" />
+                      <button
+                        type="button"
+                        onClick={() => handleSetThumbnailFromGallery(i)}
+                        className="absolute top-1 right-1 rounded-md bg-white/95 px-2 py-1 text-[10px] font-semibold text-slate-700 shadow hover:bg-white transition"
+                      >{t('autofix.k6c1bb40b')}</button>
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveGalleryImage(i)}
+                        className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition"
+                        aria-label="Remove image"
+                      >
+                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                      </button>
+                      <span className="absolute bottom-1 left-1 rounded bg-black/50 px-1.5 py-0.5 text-[10px] text-white font-medium">#{i + 1}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Add images button */}
+              <label
+                htmlFor="gallery-upload"
+                className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-600 hover:border-slate-400 hover:bg-slate-100 transition"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                {galleryFiles.length > 0 ? `Add more (${galleryFiles.length} selected)` : 'Add gallery images'}
+                <input
+                  id="gallery-upload"
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp"
+                  multiple
+                  className="hidden"
+                  onChange={e => handleAddGalleryFiles(e.target.files)}
+                />
+              </label>
+            </div>
+
+            {/* Title */}
+            <div>
+              <label htmlFor="title" className="block text-sm font-semibold text-slate-700 mb-1">Title</label>
+              <input
+                id="title"
+                name="title"
+                required
+                className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                placeholder="Title"
+                value={title}
+                onChange={e => setTitle(e.target.value)}
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label htmlFor="description" className="block text-sm font-semibold text-slate-700 mb-1">Description</label>
+              <textarea
+                id="description"
+                name="description"
+                required
+                className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                rows={3}
+                placeholder={t('autofix.k3477c83a')}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+              />
+              <p className="mt-1 text-xs text-slate-500">{t('autofix.k0affa826')}</p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              {/* Price */}
+              <div>
+                <label htmlFor="price" className="block text-sm font-semibold text-slate-700 mb-1">Price per pack</label>
+                <input
+                  id="price"
+                  name="price"
+                  required
+                  min={0.01}
+                  step={0.01}
+                  type="number"
+                  className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                  placeholder="0.00"
+                  value={price}
+                  onChange={e => setPrice(e.target.value)}
+                  onBlur={e => { const n = parseFloat(e.target.value); if (!isNaN(n)) setPrice(n.toFixed(2)); }}
+                />
+                <p className="mt-1 text-xs text-slate-500">Enter the gross price for one pack. The system converts it to the internal per-capsule value automatically.</p>
+              </div>
+
+              {/* Currency */}
+              <div>
+                <label htmlFor="currency" className="block text-sm font-semibold text-slate-700 mb-1">Currency (e.g., EUR)</label>
+                <input
+                  id="currency"
+                  name="currency"
+                  required
+                  maxLength={3}
+                  pattern="[A-Za-z]{3}"
+                  className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                  placeholder="EUR"
+                  value={currency}
+                  onChange={e => setCurrency(e.target.value.toUpperCase().slice(0, 3))}
+                />
+              </div>
+
+              {/* Featured */}
+              <div className="flex items-center gap-3 mt-2">
+                <input
+                  id="featured"
+                  type="checkbox"
+                  className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900"
+                  checked={isFeatured}
+                  onChange={e => setIsFeatured(e.target.checked)}
+                />
+                <label htmlFor="featured" className="text-sm font-semibold text-slate-700">Featured</label>
+              </div>
+
+              {/* Billing + Availability */}
+              <div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-1">{t('autofix.ka3ee9ded')}</label>
+                  <p className="text-xs text-slate-500 mb-2">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
+                  <div className="flex gap-3">
+                    <input disabled value={billingInterval} className="w-40 rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-sm text-slate-500" />
+                    <input disabled value={intervalCount} className="w-24 rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-sm text-slate-500" />
+                  </div>
+                </div>
+                <div>
+                  <label htmlFor="availability" className="block text-sm font-semibold text-slate-700 mb-1">Availability</label>
+                  <select
+                    id="availability"
+                    name="availability"
+                    required
+                    className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    value={state}
+                    onChange={e => setState(e.target.value as any)}
+                  >
+                    <option value="available">Available</option>
+                    <option value="unavailable">Unavailable</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            {error && (
+              <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+                {error}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex items-center justify-end gap-3 pt-2">
+              <Link
+                href="/admin/subscriptions"
+                className="rounded-xl border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition"
+              >
+                Cancel
+              </Link>
+              <button
+                type="submit"
+                className="inline-flex items-center rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-slate-800 transition"
+              >
+                {t('autofix.kaa30f0cd')}
+              </button>
+            </div>
+
+          </form>
+        </div>
       </div>
 
       {/* Image Crop Modal */}

src/app/admin/subscriptions/edit/[id]/page.tsx

@@ -1,23 +1,28 @@
-"use client";
-import React, { useEffect, useState, useRef } from 'react';
+"use client";
+import React, { useEffect, useRef, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import Link from 'next/link';
 import PageLayout from '../../../../components/PageLayout';
 import useCoffeeManagement, { CoffeeItem } from '../../hooks/useCoffeeManagement';
 import { PhotoIcon } from '@heroicons/react/24/solid';
+import ImageCropModal from '../../components/ImageCropModal';
+
+import { useTranslation } from '../../../../i18n/useTranslation';
 
 export default function EditSubscriptionPage() {
+  const { t } = useTranslation();
   const router = useRouter();
-  // next/navigation app router dynamic param
   const params = useParams();
   const idParam = params?.id;
   const id = typeof idParam === 'string' ? parseInt(idParam, 10) : Array.isArray(idParam) ? parseInt(idParam[0], 10) : NaN;
 
-  const { listProducts, updateProduct } = useCoffeeManagement();
+  const { listProducts, updateProduct, getProductPictures, updateProductPictures } = useCoffeeManagement();
 
   const [item, setItem] = useState<CoffeeItem | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [gallerySaving, setGallerySaving] = useState(false);
 
   // Form state
   const [title, setTitle] = useState('');
@@ -26,11 +31,24 @@ export default function EditSubscriptionPage() {
   const [currency, setCurrency] = useState('EUR');
   const [isFeatured, setIsFeatured] = useState(false);
   const [state, setState] = useState(true);
+
+  // Thumbnail state
   const [pictureFile, setPictureFile] = useState<File | undefined>(undefined);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [originalImageSrc, setOriginalImageSrc] = useState<string | null>(null);
+  const [showCropModal, setShowCropModal] = useState(false);
   const [removeExistingPicture, setRemoveExistingPicture] = useState(false);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  // Gallery state
+  const [existingPictures, setExistingPictures] = useState<{ id: number; url: string }[]>([]);
+  const [galleryLoading, setGalleryLoading] = useState(false);
+  const [pendingRemoveIds, setPendingRemoveIds] = useState<number[]>([]);
+  const [newGalleryFiles, setNewGalleryFiles] = useState<File[]>([]);
+  const [newGalleryPreviews, setNewGalleryPreviews] = useState<string[]>([]);
+  const galleryInputRef = useRef<HTMLInputElement | null>(null);
+
+  // ── Load product + gallery
   useEffect(() => {
     let active = true;
     async function load() {
@@ -40,7 +58,7 @@ export default function EditSubscriptionPage() {
         return;
       }
       try {
-        const all = await listProducts();
+        const [all] = await Promise.all([listProducts()]);
         const found = all.find((p: CoffeeItem) => p.id === id) || null;
         if (!active) return;
         if (!found) {
@@ -53,7 +71,6 @@ export default function EditSubscriptionPage() {
           setCurrency(found.currency || 'EUR');
           setIsFeatured(!!found.is_featured);
           setState(!!found.state);
-          setRemoveExistingPicture(false);
         }
       } catch (e: any) {
         if (active) setError(e?.message ?? 'Failed to load subscription');
@@ -66,14 +83,113 @@ export default function EditSubscriptionPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
+  // Load gallery pictures once the item is set
+  useEffect(() => {
+    if (!id || Number.isNaN(id)) return;
+    let active = true;
+    setGalleryLoading(true);
+    getProductPictures(id)
+      .then(pics => { if (active) setExistingPictures(pics); })
+      .catch(() => {})
+      .finally(() => { if (active) setGalleryLoading(false); });
+    return () => { active = false; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  // Cleanup preview URLs
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+      if (originalImageSrc) URL.revokeObjectURL(originalImageSrc);
+      newGalleryPreviews.forEach(u => URL.revokeObjectURL(u));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Thumbnail handlers
+  function handleSelectThumbnail(file?: File) {
+    if (!file) return;
+    const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+    if (!allowed.includes(file.type)) { setError('Invalid image type. Allowed: JPG, PNG, WebP'); return; }
+    if (file.size > 10 * 1024 * 1024) { setError('Image exceeds 10MB limit'); return; }
+    setError(null);
+    if (originalImageSrc) URL.revokeObjectURL(originalImageSrc);
+    setOriginalImageSrc(URL.createObjectURL(file));
+    setShowCropModal(true);
+  }
+
+  function handleCropComplete(croppedBlob: Blob) {
+    const croppedFile = new File([croppedBlob], 'cropped-image.jpg', { type: 'image/jpeg' });
+    setPictureFile(croppedFile);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    setPreviewUrl(URL.createObjectURL(croppedBlob));
+    setRemoveExistingPicture(false);
+  }
+
+  // ── Gallery handlers
+  function handleAddGalleryFiles(files: FileList | null) {
+    if (!files || files.length === 0) return;
+    const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+    const newFiles: File[] = [];
+    const newPreviews: string[] = [];
+    for (const file of Array.from(files)) {
+      if (!allowed.includes(file.type)) { setError(`"${file.name}" is not a valid image type.`); continue; }
+      if (file.size > 10 * 1024 * 1024) { setError(`"${file.name}" exceeds 10MB limit.`); continue; }
+      newFiles.push(file);
+      newPreviews.push(URL.createObjectURL(file));
+    }
+    setNewGalleryFiles(prev => [...prev, ...newFiles]);
+    setNewGalleryPreviews(prev => [...prev, ...newPreviews]);
+  }
+
+  function handleRemoveNewGalleryImage(index: number) {
+    setNewGalleryPreviews(prev => { URL.revokeObjectURL(prev[index]); return prev.filter((_, i) => i !== index); });
+    setNewGalleryFiles(prev => prev.filter((_, i) => i !== index));
+  }
+
+  function toggleRemoveExistingPicture(picId: number) {
+    setPendingRemoveIds(prev =>
+      prev.includes(picId) ? prev.filter(x => x !== picId) : [...prev, picId]
+    );
+  }
+
+  // ── Save gallery changes
+  async function handleSaveGallery() {
+    if (!item) return;
+    const hasChanges = pendingRemoveIds.length > 0 || newGalleryFiles.length > 0;
+    if (!hasChanges) return;
+    setGallerySaving(true);
+    setError(null);
+    try {
+      await updateProductPictures(item.id, {
+        removeIds: pendingRemoveIds.length > 0 ? pendingRemoveIds : undefined,
+        addFiles: newGalleryFiles.length > 0 ? newGalleryFiles : undefined,
+      });
+      // Refresh existing pictures
+      const refreshed = await getProductPictures(item.id);
+      setExistingPictures(refreshed);
+      setPendingRemoveIds([]);
+      newGalleryPreviews.forEach(u => URL.revokeObjectURL(u));
+      setNewGalleryFiles([]);
+      setNewGalleryPreviews([]);
+    } catch (e: any) {
+      setError(e?.message ?? 'Gallery update failed');
+    } finally {
+      setGallerySaving(false);
+    }
+  }
+
+  // ── Submit main form
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!item) return;
     setError(null);
+    setSaving(true);
     try {
       const numericPrice = Number(price);
       if (!Number.isFinite(numericPrice) || numericPrice < 0) {
         setError('Price must be a valid non-negative number');
+        setSaving(false);
         return;
       }
       await updateProduct(item.id, {
@@ -86,203 +202,281 @@ export default function EditSubscriptionPage() {
         pictureFile,
         removePicture: removeExistingPicture && !pictureFile ? true : false,
       });
+      // Also save gallery changes on submit if pending
+      if (pendingRemoveIds.length > 0 || newGalleryFiles.length > 0) {
+        await updateProductPictures(item.id, {
+          removeIds: pendingRemoveIds.length > 0 ? pendingRemoveIds : undefined,
+          addFiles: newGalleryFiles.length > 0 ? newGalleryFiles : undefined,
+        });
+      }
       router.push('/admin/subscriptions');
     } catch (e: any) {
       setError(e?.message ?? 'Update failed');
+    } finally {
+      setSaving(false);
     }
   }
 
-  useEffect(() => {
-    if (pictureFile) {
-      const url = URL.createObjectURL(pictureFile);
-      setPreviewUrl(url);
-      return () => URL.revokeObjectURL(url);
-    } else {
-      setPreviewUrl(null);
-    }
-  }, [pictureFile]);
+  const existingThumbnail = item?.pictureUrl || null;
+  const showThumb = previewUrl || (!removeExistingPicture && existingThumbnail);
 
-  function handleSelectFile(file?: File) {
-    if (!file) return;
-    const allowed = ['image/jpeg','image/png','image/webp'];
-    if (!allowed.includes(file.type)) {
-      setError('Invalid image type. Allowed: JPG, PNG, WebP');
-      return;
-    }
-    if (file.size > 10 * 1024 * 1024) {
-      setError('Image exceeds 10MB limit');
-      return;
-    }
-    setError(null);
-    setPictureFile(file);
-    setRemoveExistingPicture(false); // selecting new overrides removal flag
-  }
+  const galleryHasChanges = pendingRemoveIds.length > 0 || newGalleryFiles.length > 0;
 
   return (
-    <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
-            <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Edit Coffee</h1>
-                <p className="text-lg text-blue-700 mt-2">Update details of the coffee.</p>
-              </div>
-              <Link href="/admin/subscriptions"
-                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
-                Back to list
-              </Link>
-            </div>
-          </header>
+    <PageLayout contentClassName="flex-1 relative w-full">
+      {showCropModal && originalImageSrc && (
+        <ImageCropModal
+          isOpen={showCropModal}
+          imageSrc={originalImageSrc}
+          onClose={() => setShowCropModal(false)}
+          onCropComplete={handleCropComplete}
+        />
+      )}
 
-          {loading && (
-            <div className="rounded-md bg-blue-50 p-4 text-blue-700 text-sm mb-6">Loading subscription…</div>
-          )}
-          {error && !loading && (
-            <div className="rounded-md bg-red-50 p-4 text-red-700 text-sm mb-6">{error}</div>
-          )}
+      <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
 
-          {!loading && item && (
-            <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
+        {/* Header card */}
+        <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-slate-900">{t('autofix.kb06fa395')}</h1>
+            <p className="mt-1 text-sm text-slate-500">{t('autofix.kb9e483c4')}</p>
+          </div>
+          <Link
+            href="/admin/subscriptions"
+            className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 transition"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            {t('autofix.kd8a5ad17')}
+          </Link>
+        </div>
+
+        {/* Error / loading states */}
+        {loading && (
+          <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur text-sm text-slate-500">
+            {t('autofix.k2d0798a6')}
+          </div>
+        )}
+        {error && !loading && (
+          <div className="rounded-[28px] border border-red-100 bg-red-50 px-6 py-4 text-sm text-red-700 shadow-sm">
+            {error}
+          </div>
+        )}
+
+        {!loading && item && (
+          <>
+            {/* Main form card */}
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
               <form onSubmit={handleSubmit} className="space-y-8">
-                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
-                  <div>
-                    <label className="block text-sm font-medium text-blue-900">Title</label>
-                    <input
-                      required
-                      className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black"
-                      value={title}
-                      onChange={e => setTitle(e.target.value)}
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-blue-900">Price</label>
-                    <input
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      required
-                      className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black"
-                      value={price}
-                      onChange={e => setPrice(e.target.value)}
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-blue-900">Currency</label>
-                    <input
-                      required
-                      maxLength={3}
-                      pattern="[A-Za-z]{3}"
-                      className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black"
-                      value={currency}
-                      onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))}
-                    />
-                  </div>
-                  <div className="flex items-center gap-4 mt-6">
-                    <div className="flex items-center gap-2">
-                      <input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
-                      <label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <input id="enabled" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={state} onChange={e => setState(e.target.checked)} />
-                      <label htmlFor="enabled" className="text-sm font-medium text-blue-900">Enabled</label>
-                    </div>
-                  </div>
-                </div>
 
+                {/* Thumbnail */}
                 <div>
-                  <label className="block text-sm font-medium text-blue-900">Description</label>
-                  <textarea
-                    required
-                    rows={4}
-                    className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black"
-                    value={description}
-                    onChange={e => setDescription(e.target.value)}
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-blue-900 mb-2">Picture (optional)</label>
-                  <p className="text-xs text-gray-600 mb-3">Upload an image to replace the current picture (16:9 aspect ratio recommended)</p>
+                  <label className="block text-sm font-semibold text-slate-700 mb-1">Thumbnail</label>
+                  <p className="text-xs text-slate-500 mb-3">Single image used as the card thumbnail. Click to replace (crop available). Sent as <code className="rounded bg-slate-100 px-1 py-0.5 text-slate-600">picture</code>.</p>
                   <div
-                    className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-blue-300 bg-blue-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
-                    style={{ minHeight: '400px' }}
+                    className="relative flex justify-center items-center rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50 cursor-pointer overflow-hidden transition hover:border-slate-400 hover:bg-slate-100"
+                    style={{ minHeight: '340px' }}
                     onClick={() => fileInputRef.current?.click()}
                     onDragOver={e => e.preventDefault()}
-                    onDrop={e => {
-                      e.preventDefault();
-                      if (e.dataTransfer.files?.[0]) handleSelectFile(e.dataTransfer.files[0]);
-                    }}
+                    onDrop={e => { e.preventDefault(); if (e.dataTransfer.files?.[0]) handleSelectThumbnail(e.dataTransfer.files[0]); }}
                   >
-                    {!previewUrl && !item.pictureUrl && (
+                    {!showThumb && (
                       <div className="text-center w-full px-6 py-10">
-                        <PhotoIcon aria-hidden="true" className="mx-auto h-16 w-16 text-blue-400" />
-                        <div className="mt-4 text-base font-medium text-blue-700">
-                          <span>Click or drag and drop a new image here</span>
-                        </div>
-                        <p className="text-sm text-blue-600 mt-2">PNG, JPG, WebP up to 10MB</p>
+                        <PhotoIcon aria-hidden="true" className="mx-auto h-16 w-16 text-slate-300" />
+                        <div className="mt-4 text-base font-medium text-slate-600"><span>{t('autofix.k2e43a9c4')}</span></div>
+                        <p className="text-sm text-slate-500 mt-2">{t('autofix.k80ac9651')}</p>
                       </div>
                     )}
-                    {(previewUrl || (!removeExistingPicture && item.pictureUrl)) && (
-                      <div className="relative w-full h-full min-h-[400px] flex items-center justify-center bg-gray-100 p-6">
-                        <img 
-                          src={previewUrl || item.pictureUrl || ''} 
-                          alt={previewUrl ? "Preview" : item.title} 
-                          className="max-h-[380px] max-w-full object-contain rounded-lg shadow-lg" 
+                    {showThumb && (
+                      <div className="relative flex h-full min-h-85 w-full items-center justify-center bg-slate-100 p-6">
+                        <img
+                          src={previewUrl || existingThumbnail || ''}
+                          alt={previewUrl ? 'Preview' : item.title}
+                          className="max-h-80 max-w-full object-contain rounded-xl shadow-lg"
                         />
-                        <div className="absolute top-4 right-4">
-                          <button
-                            type="button"
-                            onClick={e => { 
-                              e.stopPropagation(); 
-                              if (previewUrl) { 
-                                setPictureFile(undefined); 
-                                setPreviewUrl(null); 
-                              } else if (item.pictureUrl) { 
-                                setRemoveExistingPicture(true); 
-                              } 
-                            }}
-                            className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-medium text-red-600 shadow hover:bg-white transition"
-                          >
+                        <div className="absolute top-4 right-4 flex gap-2">
+                          {previewUrl && (
+                            <button type="button" onClick={e => { e.stopPropagation(); setShowCropModal(true); }}
+                              className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-semibold text-slate-800 shadow hover:bg-white transition">
+                              {t('autofix.k73d1d7d7')}
+                            </button>
+                          )}
+                          <button type="button"
+                            onClick={e => { e.stopPropagation(); if (previewUrl) { setPictureFile(undefined); setPreviewUrl(null); } else { setRemoveExistingPicture(true); } }}
+                            className="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-sm font-semibold text-rose-600 shadow hover:bg-white transition">
                             Remove
                           </button>
                         </div>
                       </div>
                     )}
-                    {removeExistingPicture && !previewUrl && (
-                      <div className="text-center w-full px-6 py-10">
-                        <PhotoIcon aria-hidden="true" className="mx-auto h-16 w-16 text-gray-400" />
-                        <div className="mt-4 text-base font-medium text-gray-600">
-                          <span>Image removed - Click to upload a new one</span>
-                        </div>
-                        <p className="text-sm text-gray-500 mt-2">PNG, JPG, WebP up to 10MB</p>
-                      </div>
-                    )}
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/*"
-                      className="hidden"
-                      onChange={e => handleSelectFile(e.target.files?.[0])}
-                    />
+                    <input ref={fileInputRef} type="file" accept="image/*" className="hidden"
+                      onChange={e => handleSelectThumbnail(e.target.files?.[0])} />
                   </div>
                 </div>
 
-                <div className="flex items-center justify-end gap-x-4">
-                  <Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
+                {/* Title */}
+                <div>
+                  <label htmlFor="title" className="block text-sm font-semibold text-slate-700 mb-1">Title</label>
+                  <input id="title" required
+                    className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    value={title} onChange={e => setTitle(e.target.value)} />
+                </div>
+
+                {/* Description */}
+                <div>
+                  <label htmlFor="description" className="block text-sm font-semibold text-slate-700 mb-1">Description</label>
+                  <textarea id="description" required rows={4}
+                    className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                    value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                  {/* Price */}
+                  <div>
+                    <label htmlFor="price" className="block text-sm font-semibold text-slate-700 mb-1">Price per pack</label>
+                    <input id="price" type="number" min={0} step={0.01} required
+                      className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                      value={price} onChange={e => setPrice(e.target.value)}
+                      onBlur={e => { const n = parseFloat(e.target.value); if (!isNaN(n)) setPrice(n.toFixed(2)); }} />
+                    <p className="mt-1 text-xs text-slate-500">Admin input is handled per pack. The backend continues storing the internal per-capsule value automatically.</p>
+                  </div>
+
+                  {/* Currency */}
+                  <div>
+                    <label htmlFor="currency" className="block text-sm font-semibold text-slate-700 mb-1">Currency (e.g., EUR)</label>
+                    <input id="currency" required maxLength={3} pattern="[A-Za-z]{3}" placeholder="EUR"
+                      className="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+                      value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0, 3))} />
+                  </div>
+
+                  {/* Featured */}
+                  <div className="flex items-center gap-3">
+                    <input id="featured" type="checkbox"
+                      className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900"
+                      checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
+                    <label htmlFor="featured" className="text-sm font-semibold text-slate-700">Featured</label>
+                  </div>
+
+                  {/* Enabled */}
+                  <div className="flex items-center gap-3">
+                    <input id="enabled" type="checkbox"
+                      className="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-900"
+                      checked={state} onChange={e => setState(e.target.checked)} />
+                    <label htmlFor="enabled" className="text-sm font-semibold text-slate-700">Enabled</label>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-end gap-x-4 pt-2 border-t border-slate-100">
+                  <Link href="/admin/subscriptions" className="text-sm font-semibold text-slate-600 hover:text-slate-900 transition">
                     Cancel
                   </Link>
-                  <button type="submit" className="inline-flex justify-center rounded-lg bg-blue-900 px-5 py-3 text-sm font-semibold text-blue-50 shadow hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-900 transition">
-                    Save Changes
+                  <button type="submit" disabled={saving}
+                    className="inline-flex justify-center items-center gap-2 rounded-xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 transition disabled:opacity-60">
+                    {saving && <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" /></svg>}
+                    {t('autofix.k5a489751')}
                   </button>
                 </div>
-                {error && <p className="text-sm text-red-600">{error}</p>}
               </form>
             </div>
-          )}
-        </main>
+
+            {/* Gallery management card */}
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-6">
+              <div className="flex items-center justify-between gap-4 flex-wrap">
+                <div>
+                  <h2 className="text-lg font-bold text-slate-900">{t('autofix.ka219f1d9')}</h2>
+                  <p className="text-xs text-slate-500 mt-0.5">{t('autofix.k68ef9d49')}<span className="font-semibold text-slate-700">{t('autofix.k0496e5cc')}</span>.
+                  </p>
+                </div>
+                {galleryHasChanges && (
+                  <button type="button" onClick={handleSaveGallery} disabled={gallerySaving}
+                    className="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 transition disabled:opacity-60">
+                    {gallerySaving && <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" /></svg>}
+                    Save Gallery
+                  </button>
+                )}
+              </div>
+
+              {/* Existing pictures */}
+              {galleryLoading ? (
+                <p className="text-sm text-slate-500">{t('autofix.k8811e423')}</p>
+              ) : existingPictures.length > 0 ? (
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">{t('autofix.kddb4db62')}</p>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 gap-3">
+                    {existingPictures.map(pic => {
+                      const markedForRemoval = pendingRemoveIds.includes(pic.id);
+                      return (
+                        <div key={pic.id} className={`relative group rounded-xl overflow-hidden border aspect-video transition ${markedForRemoval ? 'border-rose-400 opacity-50' : 'border-slate-200 bg-slate-50'}`}>
+                          <img src={pic.url} alt="" className="w-full h-full object-cover" />
+                          <button
+                            type="button"
+                            onClick={() => toggleRemoveExistingPicture(pic.id)}
+                            className={`absolute inset-0 flex items-center justify-center transition ${markedForRemoval ? 'bg-rose-500/30 opacity-100' : 'bg-black/40 opacity-0 group-hover:opacity-100'}`}
+                            aria-label={markedForRemoval ? 'Undo remove' : 'Mark for removal'}
+                          >
+                            {markedForRemoval ? (
+                              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                              </svg>
+                            ) : (
+                              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                              </svg>
+                            )}
+                          </button>
+                          {markedForRemoval && (
+                            <span className="absolute top-1 left-1 rounded bg-rose-500 px-1.5 py-0.5 text-[10px] text-white font-semibold">Remove</span>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ) : (
+                <p className="text-sm text-slate-400">{t('autofix.k09e4edde')}</p>
+              )}
+
+              {/* New images to upload */}
+              {newGalleryPreviews.length > 0 && (
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-3">{t('autofix.kad44a0f7')}</p>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 gap-3">
+                    {newGalleryPreviews.map((url, i) => (
+                      <div key={i} className="relative group rounded-xl overflow-hidden border border-emerald-300 bg-slate-50 aspect-video">
+                        <img src={url} alt={`New ${i + 1}`} className="w-full h-full object-cover" />
+                        <button type="button" onClick={() => handleRemoveNewGalleryImage(i)}
+                          className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition"
+                          aria-label="Remove">
+                          <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                        <span className="absolute bottom-1 left-1 rounded bg-emerald-500/80 px-1.5 py-0.5 text-[10px] text-white font-semibold">New</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Add images button */}
+              <label htmlFor="gallery-edit-upload"
+                className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-600 hover:border-slate-400 hover:bg-slate-100 transition">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                {newGalleryFiles.length > 0 ? `Add more (${newGalleryFiles.length} queued)` : 'Add images'}
+                <input id="gallery-edit-upload" ref={galleryInputRef} type="file" accept="image/jpeg,image/png,image/webp"
+                  multiple className="hidden" onChange={e => handleAddGalleryFiles(e.target.files)} />
+              </label>
+
+              {pendingRemoveIds.length > 0 && (
+                <p className="text-xs text-rose-600">
+                  {pendingRemoveIds.length} image{pendingRemoveIds.length > 1 ? 's' : ''} marked for removal. Click <span className="font-semibold">{t('autofix.k0496e5cc')}</span>{t('autofix.kaabd9a3d')}</p>
+              )}
+            </div>
+          </>
+        )}
       </div>
     </PageLayout>
   );

src/app/admin/subscriptions/hooks/useCoffeeManagement.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import useAuthStore from '../../../store/authStore';
+import { CAPSULES_PER_PACK } from '../../../coffee-abonnements/lib/orderRules';
 
 export type CoffeeItem = {
   id: number;
@@ -14,6 +15,7 @@ export type CoffeeItem = {
   original_filename?: string|null;
   state: boolean;
   pictureUrl?: string | null;
+  pictureUrls?: string[] | null;
   created_at?: string;
   updated_at?: string;
 };
@@ -62,7 +64,7 @@ export default function useCoffeeManagement() {
       const text = await res.text();
       try { return JSON.parse(text) as T; } catch { return {} as T; }
     },
-    [base]
+    [base, getState]
   );
 
   const listProducts = useCallback(async (): Promise<CoffeeItem[]> => {
@@ -71,7 +73,7 @@ export default function useCoffeeManagement() {
     return data.map((r: any) => ({
       ...r,
       id: Number(r.id),
-      price: r.price != null && r.price !== '' ? Number(r.price) : 0,
+      price: r.price != null && r.price !== '' ? Number(r.price) * CAPSULES_PER_PACK : 0,
       interval_count: r.interval_count != null && r.interval_count !== '' ? Number(r.interval_count) : null,
       state: !!r.state,
     })) as CoffeeItem[];
@@ -85,19 +87,45 @@ export default function useCoffeeManagement() {
     is_featured?: boolean;
     state?: boolean;
     pictureFile?: File;
+    pictureFiles?: File[];
   }): Promise<CoffeeItem> => {
-    const fd = new FormData();
-    fd.append('title', payload.title);
-    fd.append('description', payload.description);
-    fd.append('price', String(payload.price));
-    if (payload.currency) fd.append('currency', payload.currency);
-    if (typeof payload.is_featured === 'boolean') fd.append('is_featured', String(payload.is_featured));
-    if (typeof payload.state === 'boolean') fd.append('state', String(payload.state));
-    // Fixed billing defaults
-    fd.append('billing_interval', 'month');
-    fd.append('interval_count', '1');
-    if (payload.pictureFile) fd.append('picture', payload.pictureFile);
-    return authorizedFetch<CoffeeItem>('/api/admin/coffee', { method: 'POST', body: fd });
+    const appendBaseFields = (fd: FormData) => {
+      fd.append('title', payload.title);
+      fd.append('description', payload.description);
+      fd.append('price', String(payload.price / CAPSULES_PER_PACK));
+      if (payload.currency) fd.append('currency', payload.currency);
+      if (typeof payload.is_featured === 'boolean') fd.append('is_featured', String(payload.is_featured));
+      if (typeof payload.state === 'boolean') fd.append('state', String(payload.state));
+      // Fixed billing defaults
+      fd.append('billing_interval', 'month');
+      fd.append('interval_count', '1');
+    };
+
+    const createLegacyFormData = () => {
+      const legacy = new FormData();
+      appendBaseFields(legacy);
+      const fallbackPicture = payload.pictureFile ?? payload.pictureFiles?.[0];
+      if (fallbackPicture) legacy.append('picture', fallbackPicture);
+      return legacy;
+    };
+
+    const hasMultipleGalleryImages = (payload.pictureFiles?.length ?? 0) > 1;
+
+    if (hasMultipleGalleryImages) {
+      const fd = new FormData();
+      appendBaseFields(fd);
+      if (payload.pictureFile) fd.append('picture', payload.pictureFile);
+      for (const f of payload.pictureFiles!) fd.append('pictures', f);
+
+      try {
+        return await authorizedFetch<CoffeeItem>('/api/admin/coffee', { method: 'POST', body: fd });
+      } catch {
+        // Compatibility fallback for deployments that only support legacy single-file payloads.
+        return authorizedFetch<CoffeeItem>('/api/admin/coffee', { method: 'POST', body: createLegacyFormData() });
+      }
+    }
+
+    return authorizedFetch<CoffeeItem>('/api/admin/coffee', { method: 'POST', body: createLegacyFormData() });
   }, [authorizedFetch]);
 
   const updateProduct = useCallback(async (id: number, payload: Partial<{
@@ -113,7 +141,7 @@ export default function useCoffeeManagement() {
     const fd = new FormData();
     if (payload.title !== undefined) fd.append('title', String(payload.title));
     if (payload.description !== undefined) fd.append('description', String(payload.description));
-    if (payload.price !== undefined) fd.append('price', String(payload.price));
+    if (payload.price !== undefined) fd.append('price', String(payload.price / CAPSULES_PER_PACK));
     if (payload.currency !== undefined) fd.append('currency', payload.currency);
     if (payload.is_featured !== undefined) fd.append('is_featured', String(payload.is_featured));
     if (payload.state !== undefined) fd.append('state', String(payload.state));
@@ -136,11 +164,40 @@ export default function useCoffeeManagement() {
     return authorizedFetch<{success?: boolean}>(`/api/admin/coffee/${id}`, { method: 'DELETE' });
   }, [authorizedFetch]);
 
+  const getProductPictures = useCallback(async (id: number): Promise<{ id: number; url: string }[]> => {
+    const data = await authorizedFetch<any>(`/api/admin/coffee/${id}/pictures`, { method: 'GET' });
+    // Normalize response: may be { pictures: [{id, url}] } or { pictureUrls: string[] }
+    if (Array.isArray(data?.pictures)) {
+      return data.pictures.map((p: any) => ({ id: Number(p.id), url: p.url ?? p.pictureUrl ?? p.src ?? '' }));
+    }
+    if (Array.isArray(data?.pictureUrls)) {
+      return data.pictureUrls.map((url: string, i: number) => ({ id: i, url }));
+    }
+    return [];
+  }, [authorizedFetch]);
+
+  const updateProductPictures = useCallback(async (
+    id: number,
+    opts: { addFiles?: File[]; removeIds?: number[]; replaceAll?: boolean }
+  ): Promise<any> => {
+    const fd = new FormData();
+    if (opts.replaceAll) fd.append('replaceAll', 'true');
+    if (opts.removeIds && opts.removeIds.length > 0) {
+      fd.append('removePictureIds', JSON.stringify(opts.removeIds));
+    }
+    if (opts.addFiles) {
+      for (const f of opts.addFiles) fd.append('pictures', f);
+    }
+    return authorizedFetch<any>(`/api/admin/coffee/${id}/pictures`, { method: 'PATCH', body: fd });
+  }, [authorizedFetch]);
+
   return {
     listProducts,
     createProduct,
     updateProduct,
     setProductState,
     deleteProduct,
+    getProductPictures,
+    updateProductPictures,
   };
 }

src/app/admin/subscriptions/page.tsx

@@ -4,12 +4,15 @@ import { PhotoIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import PageLayout from '../../components/PageLayout';
 import useCoffeeManagement, { CoffeeItem } from './hooks/useCoffeeManagement';
+import { useTranslation } from '../../i18n/useTranslation';
+
 import useCoffeeShippingFees, {
   CoffeeShippingFee,
   CoffeeShippingFeePieceCount,
 } from './hooks/useCoffeeShippingFees';
 
 export default function AdminSubscriptionsPage() {
+  const { t } = useTranslation();
   const { listProducts, setProductState, deleteProduct } = useCoffeeManagement();
   const { listShippingFees, updateShippingFee } = useCoffeeShippingFees();
 
@@ -134,51 +137,51 @@ export default function AdminSubscriptionsPage() {
   const [deleteTarget, setDeleteTarget] = useState<CoffeeItem | null>(null);
 
   return (
-    <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
           {/* Header */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-6 px-6 rounded-2xl shadow-lg mb-8">
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
               <div>
-                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Coffees</h1>
-                <p className="text-lg text-blue-700 mt-2">Manage all coffees.</p>
+                <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+                  Admin
+                </div>
+                <h1 className="mt-3 text-2xl font-bold text-slate-900 tracking-tight">Coffees</h1>
+                <p className="text-sm text-slate-500 mt-1">{t('autofix.k875f4054')}</p>
               </div>
               <Link
                 href="/admin/subscriptions/createSubscription"
-                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition self-start sm:self-auto"
+                className="inline-flex items-center gap-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white px-4 py-2.5 text-sm font-semibold shadow transition self-start sm:self-auto"
               >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M7 1a1 1 0 0 1 2 0v5h5a1 1 0 1 1 0 2H9v5a1 1 0 1 1-2 0V8H2a1 1 0 1 1 0-2h5V1z"/></svg>
-                Create Coffee
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                {t('autofix.kaa30f0cd')}
               </Link>
-            </div>
-          </header>
+          </div>
 
           {error && (
-            <div className="mb-4 rounded-md bg-red-50 p-3 text-sm text-red-700 ring-1 ring-inset ring-red-200">{error}</div>
+            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</div>
           )}
 
           {/* Shipping Fees */}
-          <section className="mb-8 rounded-2xl border border-gray-100 bg-white shadow-lg p-6">
-            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+          <section className="rounded-[28px] border border-white/80 bg-white/90 backdrop-blur shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] p-6">
+            <div className="flex flex-wrap items-start justify-between gap-4 mb-5">
               <div>
-                <h2 className="text-xl font-semibold text-blue-900">Shipping Fees (ABO)</h2>
-                <p className="mt-1 text-sm text-gray-600">Edit the shipping prices for 60 and 120 pieces.</p>
+                <h2 className="text-lg font-semibold text-slate-900">Shipping Fees (ABO)</h2>
+                <p className="mt-1 text-sm text-slate-500">{t('autofix.k027bd82e')}</p>
               </div>
               <button
-                className="inline-flex items-center rounded-lg bg-gray-50 px-4 py-2 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 hover:bg-gray-100 shadow transition self-start"
+                className="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 shadow-sm transition"
                 onClick={loadShippingFees}
                 disabled={shippingFeesLoading}
-              >
-                {shippingFeesLoading ? 'Refreshing…' : 'Refresh'}
-              </button>
+              >{shippingFeesLoading ? t('autofix.k14a4b43e') : 'Refresh'}</button>
             </div>
 
             {shippingFeesError && (
-              <div className="mt-4 rounded-md bg-red-50 p-3 text-sm text-red-700 ring-1 ring-inset ring-red-200">{shippingFeesError}</div>
+              <div className="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{shippingFeesError}</div>
             )}
 
-            <div className="mt-5 grid grid-cols-1 gap-4">
+            <div className="grid grid-cols-1 gap-4">
               {([60, 120] as CoffeeShippingFeePieceCount[]).map((pieceCount) => {
                 const saving = shippingFeeSaving[pieceCount];
                 const savedAt = shippingFeeSavedAt[pieceCount];
@@ -189,14 +192,14 @@ export default function AdminSubscriptionsPage() {
                 return (
                   <div
                     key={pieceCount}
-                    className="rounded-xl border border-gray-100 bg-white ring-1 ring-inset ring-gray-100 p-4"
+                    className="rounded-2xl border border-slate-200 bg-white/80 p-4"
                   >
                     <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                       <div className="min-w-0">
                         <div className="flex items-center gap-3">
-                          <div className="text-sm font-semibold text-gray-900">{pieceCount} pieces</div>
+                          <div className="text-sm font-semibold text-slate-900 wrap-break-word">{pieceCount} pieces</div>
                           {typeof current?.price === 'number' && Number.isFinite(current.price) ? (
-                            <div className="text-xs text-gray-500">Current: €{formatPriceDraft(current.price)}</div>
+                            <div className="text-xs text-slate-500 wrap-break-word">Current: €{formatPriceDraft(current.price)}</div>
                           ) : null}
                           {savedAt ? (
                             <div className="text-xs text-emerald-700 bg-emerald-50 ring-1 ring-inset ring-emerald-200 px-2 py-0.5 rounded-full">
@@ -205,19 +208,19 @@ export default function AdminSubscriptionsPage() {
                           ) : null}
                         </div>
                         {fieldError ? (
-                          <div className="mt-2 text-xs text-red-700">{fieldError}</div>
+                          <div className="mt-2 text-xs text-rose-700">{fieldError}</div>
                         ) : (
-                          <div className="mt-2 text-xs text-gray-500">Enter a price in EUR (≥ 0).</div>
+                          <div className="mt-2 text-xs text-slate-400">Enter a price in EUR (≥ 0).</div>
                         )}
                       </div>
 
                       <div className="flex items-center gap-3">
                         <div className="relative">
-                          <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-gray-500">€</span>
+                          <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-slate-400">€</span>
                           <input
                             inputMode="decimal"
-                            className={`w-40 rounded-lg border px-8 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-200 ${
-                              fieldError ? 'border-red-300 ring-1 ring-red-200' : 'border-gray-300'
+                            className={`w-40 rounded-xl border px-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent ${
+                              fieldError ? 'border-rose-300' : 'border-slate-200'
                             }`}
                             value={draft}
                             onChange={(e) => {
@@ -229,16 +232,14 @@ export default function AdminSubscriptionsPage() {
                           />
                         </div>
                         <button
-                          className={`inline-flex items-center rounded-lg px-4 py-2 text-xs font-semibold shadow transition ${
+                          className={`inline-flex items-center rounded-xl px-4 py-2 text-sm font-semibold shadow-sm transition ${
                             saving
-                              ? 'bg-gray-200 text-gray-600 cursor-not-allowed'
-                              : 'bg-blue-900 text-blue-50 hover:bg-blue-800'
+                              ? 'bg-slate-100 text-slate-400 cursor-not-allowed'
+                              : 'bg-slate-900 text-white hover:bg-slate-800'
                           }`}
                           disabled={saving}
                           onClick={() => saveShippingFee(pieceCount)}
-                        >
-                          {saving ? 'Saving…' : 'Save'}
-                        </button>
+                        >{saving ? t('autofix.kac6cedc7') : 'Save'}</button>
                       </div>
                     </div>
                   </div>
@@ -247,55 +248,57 @@ export default function AdminSubscriptionsPage() {
             </div>
           </section>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
             {loading && (
-              <div className="col-span-full text-sm text-gray-700">Loading…</div>
+              <div className="col-span-full text-sm text-slate-500 py-4">{t('autofix.k832387c5')}</div>
             )}
             {!loading && items.map(item => (
-              <div key={item.id} className="rounded-2xl border border-gray-100 bg-white shadow-lg p-6 flex flex-col gap-3 hover:shadow-xl transition">
+              <div key={item.id} className="rounded-[28px] border border-white/80 bg-white/90 backdrop-blur shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] p-5 flex flex-col gap-3 hover:shadow-[0_28px_72px_-38px_rgba(15,23,42,0.38)] transition">
                 <div className="flex items-start justify-between gap-3">
-                  <h3 className="text-xl font-semibold text-blue-900">{item.title}</h3>
-                  {availabilityBadge(!!item.state)}
+                  <h3 className="text-base font-semibold text-slate-900 leading-snug">{item.title}</h3>
+                  <span className={`shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${item.state ? 'bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200' : 'bg-slate-100 text-slate-500 ring-1 ring-inset ring-slate-200'}`}>
+                    {item.state ? 'Available' : 'Unavailable'}
+                  </span>
                 </div>
-                <div className="mt-3 w-full h-40 rounded-xl ring-1 ring-gray-200 overflow-hidden flex items-center justify-center bg-gray-50">
+                <div className="w-full h-36 rounded-xl border border-slate-100 overflow-hidden flex items-center justify-center bg-slate-50">
                   {item.pictureUrl ? (
                     <img src={item.pictureUrl} alt={item.title} className="w-full h-full object-cover" />
                   ) : (
-                    <PhotoIcon className="w-12 h-12 text-gray-300" />
+                    <PhotoIcon className="w-10 h-10 text-slate-200" />
                   )}
                 </div>
-                <p className="mt-3 text-sm text-gray-800 line-clamp-4">{item.description}</p>
-                <dl className="mt-4 grid grid-cols-1 gap-y-2 text-sm">
+                <p className="text-sm text-slate-600 line-clamp-3">{item.description}</p>
+                <dl className="grid grid-cols-1 gap-y-1 text-sm">
                   <div>
-                    <dt className="text-gray-500">Price</dt>
-                    <dd className="font-medium text-gray-900">
+                    <dt className="text-xs text-slate-400">Price per pack</dt>
+                    <dd className="font-semibold text-slate-900">
                       {item.currency || 'EUR'} {Number.isFinite(Number(item.price)) ? Number(item.price).toFixed(2) : String(item.price)}
                     </dd>
                   </div>
                   {item.billing_interval && item.interval_count ? (
-                    <div className="text-gray-600">
-                      <span className="text-xs">Subscription billing: {item.billing_interval} (x{item.interval_count})</span>
+                    <div className="text-xs text-slate-400">
+                      Subscription: {item.billing_interval} × {item.interval_count}
                     </div>
                   ) : null}
                 </dl>
-                <div className="mt-4 flex gap-2">
+                <div className="mt-auto flex flex-wrap gap-2 pt-1">
                   <button
-                    className={`inline-flex items-center rounded-lg px-4 py-2 text-xs font-medium shadow transition
-                      ${item.state
-                        ? 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200 hover:bg-amber-100'
-                        : 'bg-blue-900 text-blue-50 hover:bg-blue-800'}`}
+                    className={`inline-flex items-center rounded-xl px-3 py-1.5 text-xs font-semibold transition ${
+                      item.state
+                        ? 'bg-amber-50 text-amber-700 hover:bg-amber-100'
+                        : 'bg-slate-900 text-white hover:bg-slate-800'}`}
                     onClick={async () => { await setProductState(item.id, !item.state); await load(); }}
                   >
                     {item.state ? 'Disable' : 'Enable'}
                   </button>
                   <Link
                     href={`/admin/subscriptions/edit/${item.id}`}
-                    className="inline-flex items-center rounded-lg bg-indigo-50 px-4 py-2 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200 hover:bg-indigo-100 shadow transition"
+                    className="inline-flex items-center rounded-xl bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-200 transition"
                   >
                     Edit
                   </Link>
                   <button
-                    className="inline-flex items-center rounded-lg bg-red-50 px-4 py-2 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200 hover:bg-red-100 shadow transition"
+                    className="inline-flex items-center rounded-xl bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-100 transition"
                     onClick={() => setDeleteTarget(item)}
                   >
                     Delete
@@ -304,28 +307,28 @@ export default function AdminSubscriptionsPage() {
               </div>
             ))}
             {!loading && !items.length && (
-              <div className="col-span-full py-8 text-center text-sm text-gray-500">No subscriptions found.</div>
+              <div className="col-span-full py-10 text-center text-sm text-slate-400">{t('autofix.k8c75468c')}</div>
             )}
           </div>
           {/* Confirm Delete Modal */}
           {deleteTarget && (
             <div className="fixed inset-0 z-50">
-              <div className="absolute inset-0 bg-black/30" onClick={() => setDeleteTarget(null)} />
+              <div className="absolute inset-0 bg-black/35 backdrop-blur-sm" onClick={() => setDeleteTarget(null)} />
               <div className="absolute inset-0 flex items-center justify-center p-4">
-                <div className="w-full max-w-md rounded-2xl bg-white shadow-xl ring-1 ring-gray-200">
+                <div className="w-full max-w-md rounded-[28px] border border-white/80 bg-white/90 backdrop-blur shadow-[0_32px_80px_-40px_rgba(15,23,42,0.42)]">
                   <div className="px-6 pt-6">
-                    <h3 className="text-lg font-semibold text-blue-900">Delete coffee?</h3>
-                    <p className="mt-2 text-sm text-gray-700">You are about to delete the coffee “{deleteTarget.title}”. This action cannot be undone.</p>
+                    <h3 className="text-lg font-semibold text-slate-900">{t('autofix.kddd4832f')}</h3>
+                    <p className="mt-2 text-sm text-slate-600">You are about to delete the coffee &quot;{deleteTarget.title}&quot;. This action cannot be undone.</p>
                   </div>
                   <div className="px-6 pb-6 pt-4 flex justify-end gap-3">
                     <button
-                      className="inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                      className="inline-flex items-center rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition"
                       onClick={() => setDeleteTarget(null)}
                     >
                       Cancel
                     </button>
                     <button
-                      className="inline-flex items-center rounded-lg px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-500 shadow"
+                      className="inline-flex items-center rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-500 shadow transition"
                       onClick={async () => { await deleteProduct(deleteTarget.id); setDeleteTarget(null); await load(); }}
                     >
                       Delete
@@ -335,7 +338,6 @@ export default function AdminSubscriptionsPage() {
               </div>
             </div>
           )}
-        </div>
       </div>
     </PageLayout>
   );

src/app/admin/user-management/components/UserManagementAccessStates.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+type TFunction = (key: string) => string
+
+export function UserManagementInitialLoading({ t }: { t: TFunction }) {
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)] flex items-center justify-center">
+      <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur text-center">
+        <div className="h-12 w-12 rounded-full border-2 border-slate-900 border-b-transparent animate-spin mx-auto mb-4" />
+        <p className="text-slate-800 font-medium">{t('autofix.kfd6e0974')}</p>
+      </div>
+    </div>
+  )
+}
+
+export function UserManagementAccessDenied({ t }: { t: TFunction }) {
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)] flex items-center justify-center px-4">
+      <div className="mx-auto w-full max-w-xl rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+        <div className="text-center">
+          <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
+          <h1 className="text-2xl font-bold text-red-600 mb-2">{t('autofix.k26fbc186')}</h1>
+          <p className="text-slate-600">{t('autofix.k661c032b')}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/user-management/components/UserManagementFilters.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import type { FormEvent } from 'react'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import type { UserRole, UserStatus, UserType } from '../hooks/useUserManagementPageState'
+import {
+  getUserStatusLabel,
+  getUserTypeLabel,
+  getUserRoleLabel,
+  type ManagedUserType,
+  type ManagedUserRole,
+} from '../constants/userStatusPresentation'
+
+type TFunction = (key: string) => string
+
+type Props = {
+  t: TFunction
+  search: string
+  setSearch: (value: string) => void
+  fType: 'all' | UserType
+  setFType: (value: 'all' | UserType) => void
+  fStatus: 'all' | UserStatus
+  setFStatus: (value: 'all' | UserStatus) => void
+  fRole: 'all' | UserRole
+  setFRole: (value: 'all' | UserRole) => void
+  statusOptions: UserStatus[]
+  typeOptions: UserType[]
+  roleOptions: UserRole[]
+  onSubmit: () => void
+  onExportCsv: () => void
+}
+
+function getTypeLabel(t: TFunction, value: UserType): string {
+  return getUserTypeLabel(t, value as ManagedUserType)
+}
+
+function getStatusLabel(t: TFunction, value: UserStatus): string {
+  if (value === 'disabled') return t('autofix.k2fc06d90')
+  return getUserStatusLabel(t, value)
+}
+
+function getRoleLabel(t: TFunction, value: UserRole): string {
+  return getUserRoleLabel(t, value as ManagedUserRole)
+}
+
+export default function UserManagementFilters({
+  t,
+  search,
+  setSearch,
+  fType,
+  setFType,
+  fStatus,
+  setFStatus,
+  fRole,
+  setFRole,
+  statusOptions,
+  typeOptions,
+  roleOptions,
+  onSubmit,
+  onExportCsv,
+}: Props) {
+  return (
+    <form
+      onSubmit={(event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        onSubmit()
+      }}
+      className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-5"
+    >
+      <h2 className="text-lg font-semibold text-slate-900">{t('autofix.kd1f35ccf')}</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div className="md:col-span-2">
+          <label className="sr-only">{t('autofix.k91a76444')}</label>
+          <div className="relative">
+            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={t('autofix.k8b71f0c7')}
+              className="w-full rounded-lg border border-slate-200 bg-white px-3 py-3 pl-10 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+            />
+          </div>
+        </div>
+
+        <div>
+          <select
+            value={fType}
+            onChange={(event) => setFType(event.target.value as 'all' | UserType)}
+            className="w-full rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+          >
+            <option value="all">{t('autofix.k10e2568f')}</option>
+            {typeOptions.map((type) => (
+              <option key={type} value={type}>{getTypeLabel(t, type)}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <select
+            value={fStatus}
+            onChange={(event) => setFStatus(event.target.value as 'all' | UserStatus)}
+            className="w-full rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+          >
+            <option value="all">{t('autofix.k2e8f3110')}</option>
+            {statusOptions.map((status) => (
+              <option key={status} value={status}>{getStatusLabel(t, status)}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <select
+            value={fRole}
+            onChange={(event) => setFRole(event.target.value as 'all' | UserRole)}
+            className="w-full rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+          >
+            <option value="all">{t('autofix.k110bae43')}</option>
+            {roleOptions.map((role) => (
+              <option key={role} value={role}>{getRoleLabel(t, role)}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap justify-end gap-2">
+        <button
+          type="button"
+          onClick={onExportCsv}
+          className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-50 transition"
+          title={t('autofix.k1387f81e')}
+        >
+          {t('autofix.k1521a376')}
+        </button>
+        <button
+          type="submit"
+          className="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 transition"
+        >
+          {t('autofix.k3ae7a0c0')}
+        </button>
+      </div>
+    </form>
+  )
+}

src/app/admin/user-management/components/UserManagementHeader.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+type TFunction = (key: string) => string
+
+export default function UserManagementHeader({ t }: { t: TFunction }) {
+  return (
+    <header className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+      <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+        {t('autofix.k6f4e16a2')}
+      </div>
+      <h1 className="mt-3 text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight break-words">
+        {t('autofix.k1af97a07')}
+      </h1>
+      <p className="text-sm sm:text-base text-slate-600 mt-2 break-words">
+        {t('autofix.k79e1c459')}
+      </p>
+    </header>
+  )
+}

src/app/admin/user-management/components/UserManagementStats.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+type TFunction = (key: string) => string
+
+type Stats = {
+  total: number
+  admins: number
+  guests: number
+  personal: number
+  company: number
+  active: number
+  pending: number
+}
+
+function StatCard({ label, value, valueClassName }: { label: string; value: number; valueClassName?: string }) {
+  return (
+    <div className="rounded-3xl border border-white/80 bg-white/90 p-5 shadow-[0_24px_70px_-44px_rgba(15,23,42,0.3)] backdrop-blur text-center">
+      <div className="text-xs text-slate-500">{label}</div>
+      <div className={`text-2xl font-semibold mt-1 ${valueClassName || 'text-slate-900'}`}>{value}</div>
+    </div>
+  )
+}
+
+export default function UserManagementStats({ t, stats }: { t: TFunction; stats: Stats }) {
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-5">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <h2 className="text-lg font-semibold text-slate-900">{t('autofix.k20a59c89')}</h2>
+        <button
+          type="button"
+          className="inline-flex items-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-900 hover:bg-amber-100 transition"
+          onClick={() => window.location.assign('/admin/user-verify')}
+        >
+          {t('autofix.k2f78fabe')}
+        </button>
+      </div>
+      <div className="grid [grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))] gap-4">
+        <StatCard label={t('autofix.kb324fb25')} value={stats.total} />
+        <StatCard label={t('autofix.k107562d0')} value={stats.admins} valueClassName="text-indigo-700" />
+        <StatCard label={t('autofix.k1da4ef38')} value={stats.guests} valueClassName="text-amber-700" />
+        <StatCard label={t('autofix.kf1882b08')} value={stats.personal} valueClassName="text-sky-700" />
+        <StatCard label={t('autofix.k56f0ef1f')} value={stats.company} valueClassName="text-violet-700" />
+        <StatCard label={t('autofix.kf6afbb1f')} value={stats.active} valueClassName="text-green-700" />
+        <StatCard label={t('autofix.k8f278f58')} value={stats.pending} valueClassName="text-amber-700" />
+      </div>
+    </section>
+  )
+}

src/app/admin/user-management/components/UserManagementTable.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { PencilSquareIcon } from '@heroicons/react/24/outline'
+import type { UserRole, UserRow, UserStatus, UserType } from '../hooks/useUserManagementPageState'
+import {
+  getUserStatusBadgeClass,
+  getUserStatusLabel,
+  getUserTypeBadgeClass,
+  getUserTypeLabel,
+  getUserRoleBadgeClass,
+  getUserRoleLabel,
+  type ManagedUserStatus,
+  type ManagedUserType,
+  type ManagedUserRole,
+} from '../constants/userStatusPresentation'
+
+type TFunction = (key: string) => string
+
+type Props = {
+  t: TFunction
+  loading: boolean
+  users: UserRow[]
+  totalFiltered: number
+  page: number
+  totalPages: number
+  onPageChange: (nextPage: number) => void
+  onEdit: (id: string) => void
+  normalizeStatus: (status: string) => UserStatus
+}
+
+function badge(text: string, color: 'blue' | 'amber' | 'green' | 'gray' | 'rose' | 'indigo' | 'violet') {
+  const base = 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide'
+  const colorMap: Record<string, string> = {
+    blue: 'bg-sky-100 text-sky-700',
+    amber: 'bg-amber-100 text-amber-700',
+    green: 'bg-green-100 text-green-700',
+    gray: 'bg-slate-100 text-slate-700',
+    rose: 'bg-rose-100 text-rose-700',
+    indigo: 'bg-indigo-100 text-indigo-700',
+    violet: 'bg-violet-100 text-violet-700',
+  }
+  return <span className={`${base} ${colorMap[color]}`}>{text}</span>
+}
+
+function statusBadge(status: UserStatus, t: TFunction) {
+  if (status === 'disabled') return badge(t('autofix.k2fc06d90'), 'gray')
+  const managedStatus = status as ManagedUserStatus
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide border ${getUserStatusBadgeClass(managedStatus)}`}
+    >
+      {getUserStatusLabel(t, managedStatus)}
+    </span>
+  )
+}
+
+function typeBadge(type: UserType, t: TFunction) {
+  const managedType = type as ManagedUserType
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide ${getUserTypeBadgeClass(managedType)}`}>
+      {getUserTypeLabel(t, managedType)}
+    </span>
+  )
+}
+
+function roleBadge(role: UserRole, t: TFunction) {
+  const managedRole = role as ManagedUserRole
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide ${getUserRoleBadgeClass(managedRole)}`}>
+      {getUserRoleLabel(t, managedRole)}
+    </span>
+  )
+}
+
+export default function UserManagementTable({
+  t,
+  loading,
+  users,
+  totalFiltered,
+  page,
+  totalPages,
+  onPageChange,
+  onEdit,
+  normalizeStatus,
+}: Props) {
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-lg font-semibold text-slate-900">{t('autofix.k10ccb626')}</h2>
+        <div className="text-xs text-slate-500">
+          {t('autofix.k2e41c8dc').replace('{current}', String(users.length)).replace('{total}', String(totalFiltered))}
+        </div>
+      </div>
+
+      <div className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white/70 p-1">
+        <table className="min-w-full text-sm rounded-xl overflow-hidden">
+          <thead>
+            <tr className="bg-slate-50 text-left text-slate-900">
+              <th className="px-4 py-3 font-semibold">{t('autofix.k91f49568')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.kec4fe9ef')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.k81c0b74b')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.ked760737')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.kf123704b')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.kb24782ec')}</th>
+              <th className="px-4 py-3 font-semibold">{t('autofix.k0afbbac4')}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {loading ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-10 text-center">
+                  <div className="flex items-center justify-center gap-2 text-slate-700">
+                    <div className="h-4 w-4 rounded-full border-2 border-slate-900 border-b-transparent animate-spin" />
+                    <span>{t('autofix.k7fa2c4af')}</span>
+                  </div>
+                </td>
+              </tr>
+            ) : users.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-10 text-center text-sm text-slate-600">{t('autofix.k748bf541')}</td>
+              </tr>
+            ) : (
+              users.map((user) => {
+                const displayName = user.user_type === 'company'
+                  ? user.company_name || t('autofix.k835f1c86')
+                  : `${user.first_name || t('autofix.k76870ea8')} ${user.last_name || t('autofix.k2bf5e6ec')}`
+
+                const initials = user.user_type === 'company'
+                  ? (user.company_name?.[0] || 'C').toUpperCase()
+                  : `${user.first_name?.[0] || 'U'}${user.last_name?.[0] || 'U'}`.toUpperCase()
+
+                const createdDate = new Date(user.created_at).toLocaleDateString()
+                const lastLoginDate = user.last_login_at ? new Date(user.last_login_at).toLocaleDateString() : t('autofix.k768f3f4a')
+                const normalizedStatus = normalizeStatus(user.status)
+
+                return (
+                  <tr key={user.id} className="hover:bg-slate-50 transition-colors">
+                    <td className="px-4 py-4">
+                      <div className="flex items-center gap-3">
+                        <div className="h-9 w-9 flex items-center justify-center rounded-full bg-gradient-to-br from-slate-900 to-slate-700 text-white text-xs font-semibold shadow">
+                          {initials}
+                        </div>
+                        <div>
+                          <div className="font-medium text-slate-900 leading-tight">{displayName}</div>
+                          <div className="text-[11px] text-slate-600">{user.email}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4">{typeBadge(user.user_type, t)}</td>
+                    <td className="px-4 py-4">{statusBadge(normalizedStatus, t)}</td>
+                    <td className="px-4 py-4">{roleBadge(user.role, t)}</td>
+                    <td className="px-4 py-4 text-slate-900">{createdDate}</td>
+                    <td className="px-4 py-4 text-slate-600 italic">{lastLoginDate}</td>
+                    <td className="px-4 py-4">
+                      <button
+                        onClick={() => onEdit(user.id.toString())}
+                        className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 text-slate-900 px-3 py-2 text-xs font-medium transition"
+                      >
+                        <PencilSquareIcon className="h-4 w-4" />
+                        {t('autofix.k9f8d7a4f')}
+                      </button>
+                    </td>
+                  </tr>
+                )
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+        <div className="text-xs text-slate-600">
+          {t('autofix.kf03c39b7').replace('{page}', String(page)).replace('{pages}', String(totalPages)).replace('{total}', String(totalFiltered))}
+        </div>
+        <div className="flex gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => onPageChange(Math.max(1, page - 1))}
+            className="px-4 py-2 text-xs font-medium rounded-lg border border-slate-200 bg-white hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {t('autofix.kdb27a82d')}
+          </button>
+          <button
+            disabled={page === totalPages}
+            onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+            className="px-4 py-2 text-xs font-medium rounded-lg border border-slate-200 bg-white hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {t('autofix.ka8ea17b8')}
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}

src/app/admin/user-management/constants/userStatusPresentation.ts

@@ -0,0 +1,59 @@
+export type ManagedUserStatus = 'active' | 'pending' | 'suspended' | 'inactive' | 'archived'
+export type ManagedUserType = 'personal' | 'company'
+export type ManagedUserRole = 'user' | 'admin' | 'guest' | 'super_admin'
+
+export const USER_STATUS_FILTER_OPTIONS: ManagedUserStatus[] = [
+  'active',
+  'pending',
+  'suspended',
+  'inactive',
+  'archived',
+]
+
+export function getUserStatusLabelKey(status: ManagedUserStatus): string {
+  if (status === 'active') return 'autofix.kf6afbb1f'
+  if (status === 'pending') return 'autofix.k8f278f58'
+  if (status === 'suspended') return 'autofix.k18bf2a04'
+  if (status === 'inactive') return 'autofix.k2fc06d90'
+  return 'autofix.k9129ea6f'
+}
+
+export function getUserStatusLabel(t: (key: string) => string, status: ManagedUserStatus): string {
+  return t(getUserStatusLabelKey(status))
+}
+
+export function getUserStatusBadgeClass(status: ManagedUserStatus): string {
+  if (status === 'active') return 'bg-green-100 text-green-800 border-green-200'
+  if (status === 'pending') return 'bg-amber-100 text-amber-800 border-amber-200'
+  if (status === 'suspended') return 'bg-rose-100 text-rose-800 border-rose-200'
+  return 'bg-slate-100 text-slate-800 border-slate-200'
+}
+
+export function getUserTypeLabelKey(type: ManagedUserType): string {
+  return type === 'personal' ? 'autofix.kf9463361' : 'autofix.k7eedf98b'
+}
+
+export function getUserTypeLabel(t: (key: string) => string, type: ManagedUserType): string {
+  return t(getUserTypeLabelKey(type))
+}
+
+export function getUserTypeBadgeClass(type: ManagedUserType): string {
+  return type === 'personal' ? 'bg-sky-100 text-sky-700' : 'bg-violet-100 text-violet-700'
+}
+
+export function getUserRoleLabelKey(role: ManagedUserRole): string {
+  if (role === 'admin') return 'autofix.k03f9899f'
+  if (role === 'guest') return 'autofix.kdcdca454'
+  if (role === 'super_admin') return 'userDetailModal.superAdmin'
+  return 'autofix.k2bf5e6ec'
+}
+
+export function getUserRoleLabel(t: (key: string) => string, role: ManagedUserRole): string {
+  return t(getUserRoleLabelKey(role))
+}
+
+export function getUserRoleBadgeClass(role: ManagedUserRole): string {
+  if (role === 'admin' || role === 'super_admin') return 'bg-indigo-100 text-indigo-700'
+  if (role === 'guest') return 'bg-amber-100 text-amber-700'
+  return 'bg-slate-100 text-slate-700'
+}

src/app/admin/user-management/hooks/useUserManagementPageState.ts

@@ -0,0 +1,225 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useAdminUsers } from '../../../hooks/useAdminUsers'
+import { AdminAPI } from '../../../utils/api'
+import useAuthStore from '../../../store/authStore'
+import { USER_STATUS_FILTER_OPTIONS } from '../constants/userStatusPresentation'
+
+export type UserType = 'personal' | 'company'
+export type UserStatus = 'active' | 'pending' | 'disabled' | 'inactive' | 'suspended' | 'archived'
+export type UserRole = 'user' | 'admin' | 'guest'
+
+export interface UserRow {
+  id: number
+  email: string
+  user_type: UserType
+  role: UserRole
+  created_at: string
+  last_login_at: string | null
+  status: string
+  is_admin_verified: number
+  first_name?: string
+  last_name?: string
+  company_name?: string
+}
+
+export const STATUS_OPTIONS: UserStatus[] = [...USER_STATUS_FILTER_OPTIONS]
+export const TYPE_OPTIONS: UserType[] = ['personal', 'company']
+export const ROLE_OPTIONS: UserRole[] = ['user', 'admin', 'guest']
+
+const PAGE_SIZE = 10
+
+function normalizeStatus(status: string): UserStatus {
+  const allowed: UserStatus[] = ['active', 'pending', 'suspended', 'inactive', 'archived']
+  return allowed.includes(status as UserStatus) ? (status as UserStatus) : 'pending'
+}
+
+function toCsvValue(value: unknown): string {
+  if (value === null || value === undefined) return '""'
+  const escaped = String(value).replace(/"/g, '""')
+  return `"${escaped}"`
+}
+
+export function useUserManagementPageState() {
+  const { isAdmin } = useAdminUsers()
+  const token = useAuthStore((state) => state.accessToken)
+
+  const [isClient, setIsClient] = useState(false)
+  const [users, setUsers] = useState<UserRow[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const [search, setSearch] = useState('')
+  const [fType, setFType] = useState<'all' | UserType>('all')
+  const [fStatus, setFStatus] = useState<'all' | UserStatus>('all')
+  const [fRole, setFRole] = useState<'all' | UserRole>('all')
+  const [page, setPage] = useState(1)
+
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const fetchAllUsers = useCallback(async () => {
+    if (!token || !isAdmin) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await AdminAPI.getUserList(token)
+      if (!response.success) {
+        throw new Error(response.message || 'Failed to fetch users')
+      }
+      setUsers(response.users || [])
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch users'
+      setError(message)
+      console.error('useUserManagementPageState.fetchAllUsers error:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [token, isAdmin])
+
+  useEffect(() => {
+    if (isClient && token && isAdmin) {
+      void fetchAllUsers()
+    }
+  }, [isClient, token, isAdmin, fetchAllUsers])
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) => {
+      const firstName = user.first_name || ''
+      const lastName = user.last_name || ''
+      const companyName = user.company_name || ''
+      const fullName = user.user_type === 'company' ? companyName : `${firstName} ${lastName}`
+      const normalizedStatus = normalizeStatus(user.status)
+
+      return (
+        (fType === 'all' || user.user_type === fType) &&
+        (fStatus === 'all' || normalizedStatus === fStatus) &&
+        (fRole === 'all' || user.role === fRole) &&
+        (!search.trim() ||
+          user.email.toLowerCase().includes(search.toLowerCase()) ||
+          fullName.toLowerCase().includes(search.toLowerCase()))
+      )
+    })
+  }, [users, search, fType, fStatus, fRole])
+
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(filteredUsers.length / PAGE_SIZE)), [filteredUsers.length])
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages)
+    }
+  }, [page, totalPages])
+
+  const currentUsers = useMemo(() => {
+    const start = (page - 1) * PAGE_SIZE
+    return filteredUsers.slice(start, start + PAGE_SIZE)
+  }, [filteredUsers, page])
+
+  const stats = useMemo(
+    () => ({
+      total: users.length,
+      admins: users.filter((user) => user.role === 'admin').length,
+      guests: users.filter((user) => user.role === 'guest').length,
+      personal: users.filter((user) => user.user_type === 'personal').length,
+      company: users.filter((user) => user.user_type === 'company').length,
+      active: users.filter((user) => normalizeStatus(user.status) === 'active').length,
+      pending: users.filter((user) => normalizeStatus(user.status) === 'pending').length,
+    }),
+    [users]
+  )
+
+  const applyFilters = () => {
+    setPage(1)
+  }
+
+  const exportCsv = () => {
+    const headers = [
+      'ID',
+      'Email',
+      'Type',
+      'Role',
+      'Status',
+      'Admin Verified',
+      'First Name',
+      'Last Name',
+      'Company Name',
+      'Created At',
+      'Last Login At',
+    ]
+
+    const rows = filteredUsers.map((user) => {
+      return [
+        user.id,
+        user.email,
+        user.user_type,
+        user.role,
+        normalizeStatus(user.status),
+        user.is_admin_verified === 1 ? 'yes' : 'no',
+        user.first_name || '',
+        user.last_name || '',
+        user.company_name || '',
+        new Date(user.created_at).toISOString(),
+        user.last_login_at ? new Date(user.last_login_at).toISOString() : '',
+      ]
+        .map(toCsvValue)
+        .join(',')
+    })
+
+    const csv = [headers.join(','), ...rows].join('\r\n')
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `users_${new Date().toISOString().slice(0, 10)}.csv`
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const openUserDetail = (userId: string) => {
+    setSelectedUserId(userId)
+    setIsDetailModalOpen(true)
+  }
+
+  const closeUserDetail = () => {
+    setIsDetailModalOpen(false)
+    setSelectedUserId(null)
+  }
+
+  return {
+    isClient,
+    isAdmin,
+    loading,
+    error,
+    stats,
+    search,
+    setSearch,
+    fType,
+    setFType,
+    fStatus,
+    setFStatus,
+    fRole,
+    setFRole,
+    page,
+    setPage,
+    totalPages,
+    filteredUsers,
+    currentUsers,
+    fetchAllUsers,
+    applyFilters,
+    exportCsv,
+    isDetailModalOpen,
+    selectedUserId,
+    openUserDetail,
+    closeUserDetail,
+    normalizeStatus,
+  }
+}

src/app/admin/user-management/page.tsx

@@ -1,524 +1,127 @@
 'use client'
 
-import { useMemo, useState, useEffect, useCallback } from 'react'
+import { useTranslation } from '../../i18n/useTranslation'
 import PageLayout from '../../components/PageLayout'
 import UserDetailModal from '../../components/UserDetailModal'
+import UserManagementHeader from './components/UserManagementHeader'
+import UserManagementStats from './components/UserManagementStats'
+import UserManagementFilters from './components/UserManagementFilters'
+import UserManagementTable from './components/UserManagementTable'
 import {
-  MagnifyingGlassIcon,
-  PencilSquareIcon,
-  ExclamationTriangleIcon
-} from '@heroicons/react/24/outline'
-import { useAdminUsers } from '../../hooks/useAdminUsers'
-import { AdminAPI } from '../../utils/api'
-import useAuthStore from '../../store/authStore'
-
-type UserType = 'personal' | 'company'
-type UserStatus = 'active' | 'pending' | 'disabled' | 'inactive' | 'suspended' | 'archived'
-type UserRole = 'user' | 'admin' | 'guest'
-
-interface User {
-  id: number
-  email: string
-  user_type: UserType
-  role: UserRole
-  created_at: string
-  last_login_at: string | null
-  status: string
-  is_admin_verified: number
-  first_name?: string
-  last_name?: string
-  company_name?: string
-}
-
-const STATUSES: UserStatus[] = ['active','pending','disabled','inactive']
-const TYPES: UserType[] = ['personal','company']
-const ROLES: UserRole[] = ['user','admin','guest']
+  UserManagementAccessDenied,
+  UserManagementInitialLoading,
+} from './components/UserManagementAccessStates'
+import {
+  ROLE_OPTIONS,
+  STATUS_OPTIONS,
+  TYPE_OPTIONS,
+  useUserManagementPageState,
+} from './hooks/useUserManagementPageState'
 
 export default function AdminUserManagementPage() {
-  const { isAdmin } = useAdminUsers()
-  const token = useAuthStore(state => state.accessToken)
-  const [isClient, setIsClient] = useState(false)
-  
-  // State for all users (not just pending)
-  const [allUsers, setAllUsers] = useState<User[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  
-  // Handle client-side mounting
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-  
-  // Fetch all users from backend
-  const fetchAllUsers = useCallback(async () => {
-    if (!token || !isAdmin) return
-    
-    setLoading(true)
-    setError(null)
-    
-    try {
-      const response = await AdminAPI.getUserList(token)
-      if (response.success) {
-        setAllUsers(response.users || [])
-      } else {
-        throw new Error(response.message || 'Failed to fetch users')
-      }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch users'
-      setError(errorMessage)
-      console.error('AdminUserManagement.fetchAllUsers error:', err)
-    } finally {
-      setLoading(false)
-    }
-  }, [token, isAdmin])
-  
-  // Load users on mount
-  useEffect(() => {
-    if (isClient && isAdmin && token) {
-      fetchAllUsers()
-    }
-  }, [fetchAllUsers, isClient])
+  const { t } = useTranslation()
+  const {
+    isClient,
+    isAdmin,
+    loading,
+    error,
+    stats,
+    search,
+    setSearch,
+    fType,
+    setFType,
+    fStatus,
+    setFStatus,
+    fRole,
+    setFRole,
+    page,
+    setPage,
+    totalPages,
+    filteredUsers,
+    currentUsers,
+    fetchAllUsers,
+    applyFilters,
+    exportCsv,
+    isDetailModalOpen,
+    selectedUserId,
+    openUserDetail,
+    closeUserDetail,
+    normalizeStatus,
+  } = useUserManagementPageState()
 
-  // Filter hooks - must be declared before conditional returns
-  const [search, setSearch] = useState('')
-  const [fType, setFType] = useState<'all'|UserType>('all')
-  const [fStatus, setFStatus] = useState<'all'|UserStatus>('all')
-  const [fRole, setFRole] = useState<'all'|UserRole>('all')
-  const [page, setPage] = useState(1)
-  const PAGE_SIZE = 10
-
-  // Modal state
-  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
-
-  const filtered = useMemo(() => {
-    return allUsers.filter(u => {
-      const firstName = u.first_name || ''
-      const lastName = u.last_name || ''
-      const companyName = u.company_name || ''
-      const fullName = u.user_type === 'company' ? companyName : `${firstName} ${lastName}`
-      
-      // Use backend status directly for filtering
-      const allowedStatuses: UserStatus[] = ['pending','active','suspended','inactive','archived']
-      const userStatus: UserStatus = (allowedStatuses.includes(u.status as UserStatus) ? u.status : 'pending') as UserStatus
-      
-      return (
-        (fType === 'all' || u.user_type === fType) &&
-        (fStatus === 'all' || userStatus === fStatus) &&
-        (fRole === 'all' || u.role === fRole) &&
-        (
-          !search.trim() ||
-          u.email.toLowerCase().includes(search.toLowerCase()) ||
-          fullName.toLowerCase().includes(search.toLowerCase())
-        )
-      )
-    })
-  }, [allUsers, search, fType, fStatus, fRole])
-
-  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
-  const current = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-  
-  // Move stats calculation above all conditional returns to avoid hook order errors
-  const stats = useMemo(() => ({
-    total: allUsers.length,
-    admins: allUsers.filter(u => u.role === 'admin').length,
-    guests: allUsers.filter(u => u.role === 'guest').length,
-    personal: allUsers.filter(u => u.user_type === 'personal').length,
-    company: allUsers.filter(u => u.user_type === 'company').length,
-    active: allUsers.filter(u => u.status === 'active').length,
-    pending: allUsers.filter(u => u.status === 'pending').length,
-  }), [allUsers])
-
-  // Show loading during SSR/initial client render
   if (!isClient) {
     return (
       <PageLayout>
-        <div className="min-h-screen flex items-center justify-center bg-blue-50">
-          <div className="text-center">
-            <div className="h-12 w-12 rounded-full border-2 border-blue-900 border-b-transparent animate-spin mx-auto mb-4" />
-            <p className="text-blue-900">Loading...</p>
-          </div>
-        </div>
+        <UserManagementInitialLoading t={t} />
       </PageLayout>
     )
   }
-  
-  // Access check (only after client-side hydration)
+
   if (!isAdmin) {
     return (
       <PageLayout>
-        <div className="min-h-screen flex items-center justify-center bg-blue-50">
-          <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
-            <div className="text-center">
-              <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
-              <h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
-              <p className="text-gray-600">You need admin privileges to access this page.</p>
-            </div>
-          </div>
-        </div>
+        <UserManagementAccessDenied t={t} />
       </PageLayout>
     )
   }
 
-  const applyFilter = (e: React.FormEvent) => {
-    e.preventDefault()
-    setPage(1)
-  }
-
-  // NEW: CSV export utilities (exports all filtered results, not only current page)
-  const toCsvValue = (v: unknown) => {
-    if (v === null || v === undefined) return '""'
-    const s = String(v).replace(/"/g, '""')
-    return `"${s}"`
-  }
-
-  const exportCsv = () => {
-    const headers = [
-      'ID','Email','Type','Role','Status','Admin Verified',
-      'First Name','Last Name','Company Name','Created At','Last Login At'
-    ]
-    const rows = filtered.map(u => {
-      // Use backend status directly
-      const allowedStatuses: UserStatus[] = ['active','pending','suspended','inactive','archived']
-      const userStatus: UserStatus = (allowedStatuses.includes(u.status as UserStatus) ? u.status : 'pending') as UserStatus
-      return [
-        u.id,
-        u.email,
-        u.user_type,
-        u.role,
-        userStatus,
-        u.is_admin_verified === 1 ? 'yes' : 'no',
-        u.first_name || '',
-        u.last_name || '',
-        u.company_name || '',
-        new Date(u.created_at).toISOString(),
-        u.last_login_at ? new Date(u.last_login_at).toISOString() : ''
-      ].map(toCsvValue).join(',')
-    })
-    const csv = [headers.join(','), ...rows].join('\r\n')
-    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `users_${new Date().toISOString().slice(0,10)}.csv`
-    document.body.appendChild(a)
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  const badge = (text: string, color: 'blue'|'amber'|'green'|'gray'|'rose'|'indigo'|'purple') => {
-    const base = 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium tracking-wide'
-    const map: Record<string,string> = {
-      blue: 'bg-blue-100 text-blue-700',
-      amber: 'bg-amber-100 text-amber-700',
-      green: 'bg-green-100 text-green-700',
-      gray: 'bg-gray-100 text-gray-700',
-      rose: 'bg-rose-100 text-rose-700',
-      indigo: 'bg-indigo-100 text-indigo-700',
-      purple: 'bg-purple-100 text-purple-700'
-    }
-    return <span className={`${base} ${map[color]}`}>{text}</span>
-  }
-
-  const statusBadge = (s: UserStatus) =>
-    s==='active' ? badge('Active','green')
-    : s==='pending' ? badge('Pending','amber')
-    : s==='suspended' ? badge('Suspended','rose')
-    : s==='archived' ? badge('Archived','gray')
-    : s==='inactive' ? badge('Inactive','gray')
-    : badge('Unknown','gray')
-
-  const typeBadge = (t: UserType) =>
-    t==='personal' ? badge('Personal','blue') : badge('Company','purple')
-
-  const roleBadge = (r: UserRole) =>
-    r==='admin' ? badge('Admin','indigo') : r==='guest' ? badge('Guest','amber') : badge('User','gray')
-
-  // Action handler for opening edit modal
-  const onEdit = (id: string) => {
-    setSelectedUserId(id)
-    setIsDetailModalOpen(true)
-  }
-
   return (
-    <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
-          {/* Header */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
-            <div>
-              <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">User Management</h1>
-              <p className="text-lg text-blue-700 mt-2">
-                Manage all users, view statistics, and handle verification.
-              </p>
-            </div>
-          </header>
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+        <main className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+          <UserManagementHeader t={t} />
 
-          {/* Statistic Section + Verify Button */}
-          <div className="mb-8 flex flex-col sm:flex-row sm:items-center gap-6">
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-7 gap-6 flex-1">
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Total Users</div>
-                <div className="text-xl font-semibold text-blue-900">{stats.total}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Admins</div>
-                <div className="text-xl font-semibold text-indigo-700">{stats.admins}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Guests</div>
-                <div className="text-xl font-semibold text-amber-700">{stats.guests}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Personal</div>
-                <div className="text-xl font-semibold text-blue-700">{stats.personal}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Company</div>
-                <div className="text-xl font-semibold text-purple-700">{stats.company}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Active</div>
-                <div className="text-xl font-semibold text-green-700">{stats.active}</div>
-              </div>
-              <div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
-                <div className="text-xs text-gray-500">Pending</div>
-                <div className="text-xl font-semibold text-amber-700">{stats.pending}</div>
-              </div>
-            </div>
-            <div>
-              <button
-                type="button"
-                className="inline-flex items-center gap-2 rounded-lg bg-amber-100 hover:bg-amber-200 border border-amber-200 text-amber-800 text-base font-semibold px-5 py-3 shadow transition"
-                onClick={() => window.location.href = '/admin/user-verify'}
-              >
-                Go to User Verification
-              </button>
-            </div>
-          </div>
+          <UserManagementStats t={t} stats={stats} />
 
-          {/* Error Message */}
           {error && (
-            <div className="rounded-xl border border-red-300 bg-red-50 text-red-700 px-6 py-5 flex gap-3 items-start mb-8 shadow">
-              <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
-              <div>
-                <p className="font-semibold">Error loading users</p>
-                <p className="text-sm text-red-600">{error}</p>
-                <button 
-                  onClick={fetchAllUsers}
-                  className="mt-2 text-sm underline hover:no-underline"
-                >
-                  Try again
-                </button>
-              </div>
+            <div className="rounded-2xl border border-red-200 bg-red-50/90 px-4 py-3 text-sm text-red-800 backdrop-blur-sm">
+              <p className="font-semibold">{t('autofix.kbbefb159')}</p>
+              <p className="text-red-700 mt-0.5">{error}</p>
+              <button
+                onClick={() => {
+                  void fetchAllUsers()
+                }}
+                className="mt-2 text-sm underline hover:no-underline"
+              >
+                {t('autofix.k3b7dd87a')}
+              </button>
             </div>
           )}
 
-          {/* Filter Card */}
-          <form
-            onSubmit={applyFilter}
-            className="bg-white rounded-2xl shadow-lg ring-1 ring-gray-100 px-8 py-8 flex flex-col gap-6 mb-8"
-          >
-            <h2 className="text-lg font-semibold text-blue-900">
-              Search & Filter Users
-            </h2>
-            <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
-              {/* Search */}
-              <div className="md:col-span-2">
-                <label className="sr-only">Search</label>
-                <div className="relative">
-                  <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-blue-300" />
-                  <input
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
-                    placeholder="Email, name, company..."
-                    className="w-full rounded-lg border border-gray-300 pl-10 pr-3 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                  />
-                </div>
-              </div>
-              {/* Type */}
-              <div>
-                <select
-                  value={fType}
-                  onChange={e => setFType(e.target.value as any)}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Types</option>
-                  <option value="personal">Personal</option>
-                  <option value="company">Company</option>
-                </select>
-              </div>
-              {/* Status */}
-              <div>
-                <select
-                  value={fStatus}
-                  onChange={e => setFStatus(e.target.value as any)}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Status</option>
-                  {STATUSES.map(s => <option key={s} value={s}>{s[0].toUpperCase()+s.slice(1)}</option>)}
-                </select>
-              </div>
-              {/* Role */}
-              <div>
-                <select
-                  value={fRole}
-                  onChange={e => setFRole(e.target.value as any)}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Roles</option>
-                  {ROLES.map(r => <option key={r} value={r}>{r[0].toUpperCase()+r.slice(1)}</option>)}
-                </select>
-              </div>
-            </div>
-            <div className="flex justify-end gap-3">
-              <button
-                type="button"
-                onClick={exportCsv}
-                className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 text-blue-900 text-sm font-semibold px-5 py-3 shadow transition"
-                title="Export all filtered users to CSV"
-              >
-                Export all users as CSV
-              </button>
-              <button
-                type="submit"
-                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 text-sm font-semibold px-5 py-3 shadow transition"
-              >
-                Filter
-              </button>
-            </div>
-          </form>
+          <UserManagementFilters
+            t={t}
+            search={search}
+            setSearch={setSearch}
+            fType={fType}
+            setFType={setFType}
+            fStatus={fStatus}
+            setFStatus={setFStatus}
+            fRole={fRole}
+            setFRole={setFRole}
+            statusOptions={STATUS_OPTIONS}
+            typeOptions={TYPE_OPTIONS}
+            roleOptions={ROLE_OPTIONS}
+            onSubmit={applyFilters}
+            onExportCsv={exportCsv}
+          />
 
-          {/* Users Table */}
-          <div className="bg-white rounded-2xl shadow-lg ring-1 ring-gray-100 overflow-hidden mb-8">
-            <div className="px-8 py-6 border-b border-gray-100 flex items-center justify-between">
-              <div className="text-lg font-semibold text-blue-900">
-                All Users
-              </div>
-              <div className="text-xs text-gray-500">
-                Showing {current.length} of {filtered.length} users
-              </div>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-100 text-sm">
-                <thead className="bg-blue-50 text-blue-900 font-medium">
-                  <tr>
-                    <th className="px-4 py-3 text-left">User</th>
-                    <th className="px-4 py-3 text-left">Type</th>
-                    <th className="px-4 py-3 text-left">Status</th>
-                    <th className="px-4 py-3 text-left">Role</th>
-                    <th className="px-4 py-3 text-left">Created</th>
-                    <th className="px-4 py-3 text-left">Last Login</th>
-                    <th className="px-4 py-3 text-left">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-100">
-                  {loading ? (
-                    <tr>
-                      <td colSpan={7} className="px-4 py-10 text-center">
-                        <div className="flex items-center justify-center gap-2">
-                          <div className="h-4 w-4 rounded-full border-2 border-blue-900 border-b-transparent animate-spin" />
-                          <span className="text-sm text-blue-900">Loading users...</span>
-                        </div>
-                      </td>
-                    </tr>
-                  ) : current.map(u => {
-                    const displayName = u.user_type === 'company' 
-                      ? u.company_name || 'Unknown Company'
-                      : `${u.first_name || 'Unknown'} ${u.last_name || 'User'}`
-                    
-                    const initials = u.user_type === 'company' 
-                      ? (u.company_name?.[0] || 'C').toUpperCase()
-                      : `${u.first_name?.[0] || 'U'}${u.last_name?.[0] || 'U'}`.toUpperCase()
-                    
-                    // Use backend status directly for display to avoid desync
-                    const allowedStatuses: UserStatus[] = ['active','pending','suspended','inactive','archived']
-                    const userStatus: UserStatus = (allowedStatuses.includes(u.status as UserStatus) ? u.status : 'pending') as UserStatus
-                    
-                    const createdDate = new Date(u.created_at).toLocaleDateString()
-                    const lastLoginDate = u.last_login_at ? new Date(u.last_login_at).toLocaleDateString() : 'Never'
-                    
-                    return (
-                      <tr key={u.id} className="hover:bg-blue-50">
-                        <td className="px-4 py-4">
-                          <div className="flex items-center gap-3">
-                            <div className="h-9 w-9 flex items-center justify-center rounded-full bg-gradient-to-br from-blue-900 to-blue-700 text-white text-xs font-semibold shadow">
-                              {initials}
-                            </div>
-                            <div>
-                              <div className="font-medium text-blue-900 leading-tight">
-                                {displayName}
-                              </div>
-                              <div className="text-[11px] text-blue-700">
-                                {u.email}
-                              </div>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="px-4 py-4">{typeBadge(u.user_type)}</td>
-                        <td className="px-4 py-4">{statusBadge(userStatus)}</td>
-                        <td className="px-4 py-4">{roleBadge(u.role)}</td>
-                        <td className="px-4 py-4 text-blue-900">{createdDate}</td>
-                        <td className="px-4 py-4 text-blue-700 italic">
-                          {lastLoginDate}
-                        </td>
-                        <td className="px-4 py-4">
-                          <div className="flex gap-2">
-                            <button
-                              onClick={() => onEdit(u.id.toString())}
-                              className="inline-flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-50 hover:bg-blue-100 text-blue-900 px-3 py-2 text-xs font-medium transition"
-                            >
-                              <PencilSquareIcon className="h-4 w-4" /> Edit
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    )
-                  })}
-                  {current.length === 0 && (
-                    <tr>
-                      <td colSpan={7} className="px-4 py-10 text-center text-sm text-blue-700">
-                        No users match current filters.
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
-            {/* Pagination */}
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-8 py-6 bg-blue-50 border-t border-blue-100">
-              <div className="text-xs text-blue-700">
-                Page {page} of {totalPages} ({filtered.length} total users)
-              </div>
-              <div className="flex gap-2">
-                <button
-                  disabled={page===1}
-                  onClick={() => setPage(p => Math.max(1,p-1))}
-                  className="px-4 py-2 text-xs font-medium rounded-lg border border-gray-300 bg-white hover:bg-blue-50 disabled:opacity-40 disabled:cursor-not-allowed"
-                >
-                  ‹ Previous
-                </button>
-                <button
-                  disabled={page===totalPages}
-                  onClick={() => setPage(p => Math.min(totalPages,p+1))}
-                  className="px-4 py-2 text-xs font-medium rounded-lg border border-gray-300 bg-white hover:bg-blue-50 disabled:opacity-40 disabled:cursor-not-allowed"
-                >
-                  Next ›
-                </button>
-              </div>
-            </div>
-          </div>
+          <UserManagementTable
+            t={t}
+            loading={loading}
+            users={currentUsers}
+            totalFiltered={filteredUsers.length}
+            page={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+            onEdit={openUserDetail}
+            normalizeStatus={normalizeStatus}
+          />
         </main>
       </div>
 
-      {/* User Detail Modal */}
       <UserDetailModal
         isOpen={isDetailModalOpen}
-        onClose={() => {
-          setIsDetailModalOpen(false)
-          setSelectedUserId(null)
-        }}
+        onClose={closeUserDetail}
         userId={selectedUserId}
         onUserUpdated={fetchAllUsers}
       />

src/app/admin/user-verify/components/UserVerifyAccessStates.tsx

@@ -0,0 +1,30 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+type Translator = (key: string) => string
+
+export function UserVerifyInitialLoading({ t }: { t: Translator }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.12),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.12),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)]">
+      <div className="rounded-[28px] border border-white/80 bg-white/85 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] backdrop-blur">
+        <div className="text-center">
+          <div className="h-12 w-12 rounded-full border-2 border-slate-900 border-b-transparent animate-spin mx-auto mb-4" />
+          <p className="text-slate-900">{t('autofix.k1e4d7a90')}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function UserVerifyAccessDenied({ t }: { t: Translator }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.12),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.12),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)]">
+      <div className="mx-auto w-full max-w-xl rounded-[28px] border border-white/80 bg-white/85 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] p-8 backdrop-blur">
+        <div className="text-center">
+          <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
+          <h1 className="text-2xl font-bold text-red-600 mb-2 break-words">{t('autofix.k26fbc186')}</h1>
+          <p className="text-slate-600 break-words">{t('autofix.k661c032b')}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/user-verify/components/UserVerifyFilters.tsx

@@ -0,0 +1,151 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import type {
+  StatusFilter,
+  UserRole,
+  UserType,
+  VerificationReadyFilter,
+} from '../hooks/useUserVerifyPageState'
+
+type Translator = (key: string) => string
+
+type Props = {
+  t: Translator
+  search: string
+  setSearch: (value: string) => void
+  fType: 'all' | UserType
+  setFType: (value: 'all' | UserType) => void
+  fRole: 'all' | UserRole
+  setFRole: (value: 'all' | UserRole) => void
+  fReady: VerificationReadyFilter
+  setFReady: (value: VerificationReadyFilter) => void
+  fStatus: StatusFilter
+  setFStatus: (value: StatusFilter) => void
+  perPage: number
+  setPerPage: (value: number) => void
+  setPage: (page: number) => void
+  onSubmit: (event: React.FormEvent) => void
+}
+
+export default function UserVerifyFilters({
+  t,
+  search,
+  setSearch,
+  fType,
+  setFType,
+  fRole,
+  setFRole,
+  fReady,
+  setFReady,
+  fStatus,
+  setFStatus,
+  perPage,
+  setPerPage,
+  setPage,
+  onSubmit,
+}: Props) {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="rounded-[28px] border border-white/80 bg-white/85 px-6 sm:px-8 py-7 flex flex-col gap-6 mb-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] backdrop-blur-md"
+    >
+      <h2 className="text-lg font-semibold text-slate-900">{t('autofix.k85c66f50')}</h2>
+      <div className="flex flex-wrap gap-4 items-end">
+        <div className="min-w-[18rem] flex-[3_1_28rem]">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.k3f4f2b01')}</label>
+          <div className="relative">
+            <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+            <input
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                setPage(1)
+              }}
+              placeholder={t('autofix.k8b71f0c7')}
+              className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white pl-10 pr-3 py-3 text-sm text-slate-900 focus:ring-2 focus:ring-slate-900/20 focus:border-slate-400"
+            />
+          </div>
+        </div>
+
+        <div className="min-w-[13rem] flex-[1.3_1_16rem]">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.k577a012c')}</label>
+          <select
+            value={fType}
+            onChange={(event) => {
+              setFType(event.target.value as 'all' | UserType)
+              setPage(1)
+            }}
+            className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900"
+          >
+            <option value="all">{t('autofix.k10e2568f')}</option>
+            <option value="personal">{t('autofix.k8b2f1c77')}</option>
+            <option value="company">{t('autofix.k6c3d4e55')}</option>
+          </select>
+        </div>
+
+        <div className="min-w-[13rem] flex-[1.1_1_16rem]">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.k8f1a2c34')}</label>
+          <select
+            value={fRole}
+            onChange={(event) => {
+              setFRole(event.target.value as 'all' | UserRole)
+              setPage(1)
+            }}
+            className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900"
+          >
+            <option value="all">{t('autofix.k110bae43')}</option>
+            <option value="user">{t('autofix.k9d0a7b42')}</option>
+            <option value="admin">{t('autofix.k2a6c8d90')}</option>
+          </select>
+        </div>
+
+        <div className="min-w-[18rem] flex-[2_1_22rem]">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.k0efd830c')}</label>
+          <select
+            value={fReady}
+            onChange={(event) => {
+              setFReady(event.target.value as VerificationReadyFilter)
+              setPage(1)
+            }}
+            className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900"
+          >
+            <option value="all">{t('autofix.k7ab45054')}</option>
+            <option value="ready">{t('autofix.kf27e4502')}</option>
+            <option value="not_ready">{t('autofix.k4e0c889b')}</option>
+          </select>
+        </div>
+
+        <div className="min-w-[13rem] flex-[1_1_14rem]">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.k7e2d9a10')}</label>
+          <select
+            value={fStatus}
+            onChange={(event) => {
+              setFStatus(event.target.value as StatusFilter)
+              setPage(1)
+            }}
+            className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900"
+          >
+            <option value="all">{t('autofix.k0f1fc266')}</option>
+            <option value="pending">{t('autofix.k1b3d5f78')}</option>
+            <option value="active">{t('autofix.k4c7e9a21')}</option>
+          </select>
+        </div>
+
+        <div className="min-w-[11rem] basis-full w-full">
+          <label className="block text-xs font-semibold uppercase tracking-wide text-slate-600 mb-1 whitespace-normal break-words">{t('autofix.kd2e35b08')}</label>
+          <select
+            value={perPage}
+            onChange={(event) => {
+              setPerPage(parseInt(event.target.value, 10))
+              setPage(1)
+            }}
+            className="w-full min-w-0 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900"
+          >
+            {[5, 10, 15, 20].map((n) => (
+              <option key={n} value={n}>{n}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </form>
+  )
+}

src/app/admin/user-verify/components/UserVerifyHeaderAndError.tsx

@@ -0,0 +1,39 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+type Translator = (key: string) => string
+
+type ErrorCardProps = {
+  t: Translator
+  error: string
+  onRetry: () => void
+}
+
+export function UserVerifyHeader({ t }: { t: Translator }) {
+  return (
+    <header className="rounded-[28px] border border-white/80 bg-white/85 py-8 px-6 sm:px-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] backdrop-blur-md mb-6">
+      <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+        {t('autofix.k5b2c8d67')}
+      </div>
+      <h1 className="mt-3 text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight break-words">{t('autofix.kccde6d86')}</h1>
+      <p className="text-base sm:text-lg text-slate-600 mt-2 break-words">{t('autofix.k5614c806')}</p>
+    </header>
+  )
+}
+
+export function UserVerifyErrorCard({ t, error, onRetry }: ErrorCardProps) {
+  return (
+    <div className="rounded-2xl border border-red-300 bg-red-50/90 text-red-700 px-6 py-5 flex gap-3 items-start mb-6 shadow-[0_16px_40px_-28px_rgba(185,28,28,0.4)] backdrop-blur-sm">
+      <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
+      <div>
+        <p className="font-semibold">{t('autofix.k62d12fab')}</p>
+        <p className="text-sm text-red-600 break-words">{error}</p>
+        <button
+          onClick={onRetry}
+          className="mt-2 text-sm underline hover:no-underline"
+        >
+          {t('autofix.k3b7dd87a')}
+        </button>
+      </div>
+    </div>
+  )
+}

src/app/admin/user-verify/components/UserVerifyUsersTable.tsx

@@ -0,0 +1,187 @@
+import { EyeIcon } from '@heroicons/react/24/outline'
+import type { PendingUser } from '../../../utils/api'
+
+type Translator = (key: string) => string
+
+type Props = {
+  t: Translator
+  loading: boolean
+  current: PendingUser[]
+  filteredLength: number
+  page: number
+  totalPages: number
+  onPageChange: (next: number) => void
+  onViewUser: (id: string | number) => void
+}
+
+function formatMessage(template: string, values: Record<string, string | number>) {
+  return template.replace(/\{(\w+)\}/g, (_, token: string) => String(values[token] ?? ''))
+}
+
+const badgeBase = 'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium'
+
+const badge = (text: string, color: string) => (
+  <span className={`${badgeBase} ${color}`}>{text}</span>
+)
+
+const typeBadge = (type: 'personal' | 'company', t: Translator) =>
+  type === 'personal'
+    ? badge(t('autofix.k8b2f1c77'), 'bg-blue-100 text-blue-700')
+    : badge(t('autofix.k6c3d4e55'), 'bg-purple-100 text-purple-700')
+
+const roleBadge = (role: 'user' | 'admin', t: Translator) =>
+  role === 'admin'
+    ? badge(t('autofix.k2a6c8d90'), 'bg-indigo-100 text-indigo-700')
+    : badge(t('autofix.k9d0a7b42'), 'bg-gray-100 text-gray-700')
+
+const statusBadge = (status: PendingUser['status'], t: Translator) =>
+  status === 'pending'
+    ? badge(t('autofix.k1b3d5f78'), 'bg-amber-100 text-amber-700')
+    : badge(t('autofix.k4c7e9a21'), 'bg-green-100 text-green-700')
+
+const verificationStatusBadge = (user: PendingUser, t: Translator) => {
+  const completedSteps = [
+    user.email_verified === 1,
+    user.profile_completed === 1,
+    user.documents_uploaded === 1,
+    user.contract_signed === 1,
+  ].filter(Boolean).length
+
+  const totalSteps = 4
+  if (completedSteps === totalSteps) {
+    return badge(t('autofix.k5d8a1c63'), 'bg-green-100 text-green-700')
+  }
+
+  return badge(`${completedSteps}/${totalSteps} ${t('autofix.k7a4e2b19')}`, 'bg-gray-100 text-gray-700')
+}
+
+export default function UserVerifyUsersTable({
+  t,
+  loading,
+  current,
+  filteredLength,
+  page,
+  totalPages,
+  onPageChange,
+  onViewUser,
+}: Props) {
+  const summaryText = formatMessage(t('autofix.k1f8c4a52'), {
+    current: current.length,
+    total: filteredLength,
+  })
+
+  const paginationText = formatMessage(t('autofix.k9b5d2e70'), {
+    page,
+    totalPages,
+    total: filteredLength,
+  })
+
+  return (
+    <div className="rounded-[28px] border border-white/80 bg-white/85 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.32)] overflow-hidden mb-8 backdrop-blur-md">
+      <div className="px-6 sm:px-8 py-6 border-b border-slate-100 flex items-center justify-between gap-3">
+        <div className="text-lg font-semibold text-slate-900 break-words">{t('autofix.k0da2c941')}</div>
+        <div className="text-xs text-slate-500 break-words">{summaryText}</div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-slate-100 text-sm">
+          <thead className="bg-slate-50 text-slate-900 font-medium">
+            <tr>
+              <th className="px-4 py-3 text-left">{t('autofix.k7c1e5b40')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k8d4a2f16')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k3e9b6c12')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k7e2d9a10')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k8f1a2c34')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k9a5c1e68')}</th>
+              <th className="px-4 py-3 text-left">{t('autofix.k2f6d9a33')}</th>
+            </tr>
+          </thead>
+
+          <tbody className="divide-y divide-slate-100">
+            {loading ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-10 text-center">
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="h-4 w-4 rounded-full border-2 border-slate-900 border-b-transparent animate-spin" />
+                    <span className="text-sm text-slate-900">{t('autofix.k7fa2c4af')}</span>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              current.map((user) => {
+                const displayName =
+                  user.user_type === 'company'
+                    ? user.company_name || t('autofix.k2d7f4a81')
+                    : `${user.first_name || t('autofix.k9f3a1e74')} ${user.last_name || t('autofix.k9d0a7b42')}`
+
+                const initials =
+                  user.user_type === 'company'
+                    ? (user.company_name?.[0] || 'C').toUpperCase()
+                    : `${user.first_name?.[0] || 'U'}${user.last_name?.[0] || 'U'}`.toUpperCase()
+
+                const createdDate = new Date(user.created_at).toLocaleDateString()
+
+                return (
+                  <tr key={user.id} className="hover:bg-slate-50/80 transition-colors">
+                    <td className="px-4 py-4">
+                      <div className="flex items-center gap-3 min-w-0">
+                        <div className="h-9 w-9 flex items-center justify-center rounded-full bg-gradient-to-br from-slate-900 to-slate-700 text-white text-xs font-semibold shadow shrink-0">
+                          {initials}
+                        </div>
+                        <div className="min-w-0">
+                          <div className="font-medium text-slate-900 leading-tight break-words">{displayName}</div>
+                          <div className="text-[11px] text-slate-600 break-all">{user.email}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-4 py-4">{typeBadge(user.user_type, t)}</td>
+                    <td className="px-4 py-4">{verificationStatusBadge(user, t)}</td>
+                    <td className="px-4 py-4">{statusBadge(user.status, t)}</td>
+                    <td className="px-4 py-4">{roleBadge(user.role, t)}</td>
+                    <td className="px-4 py-4 text-slate-900">{createdDate}</td>
+                    <td className="px-4 py-4">
+                      <button
+                        onClick={() => onViewUser(user.id)}
+                        className="inline-flex items-center gap-1 rounded-xl border border-slate-200 bg-white hover:bg-slate-100 text-slate-900 px-3 py-2 text-xs font-medium transition"
+                      >
+                        <EyeIcon className="h-4 w-4" /> {t('autofix.k1c7b4e52')}
+                      </button>
+                    </td>
+                  </tr>
+                )
+              })
+            )}
+
+            {current.length === 0 && !loading && (
+              <tr>
+                <td colSpan={7} className="px-4 py-10 text-center text-sm text-slate-700">
+                  {t('autofix.kb4aba3dc')}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-6 sm:px-8 py-6 bg-slate-50 border-t border-slate-100">
+        <div className="text-xs text-slate-700 break-words">{paginationText}</div>
+        <div className="flex gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => onPageChange(Math.max(1, page - 1))}
+            className="px-4 py-2 text-xs font-medium rounded-xl border border-slate-300 bg-white hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {t('autofix.kdb27a82d')}
+          </button>
+          <button
+            disabled={page === totalPages}
+            onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+            className="px-4 py-2 text-xs font-medium rounded-xl border border-slate-300 bg-white hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {t('autofix.ka8ea17b8')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/user-verify/hooks/useUserVerifyPageState.ts

@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useState, type FormEvent } from 'react'
+import type { PendingUser } from '../../../utils/api'
+
+export type UserType = 'personal' | 'company'
+export type UserRole = 'user' | 'admin'
+export type VerificationReadyFilter = 'all' | 'ready' | 'not_ready'
+export type StatusFilter = 'all' | 'pending' | 'active'
+
+export function useUserVerifyPageState(pendingUsers: PendingUser[]) {
+  const [isClient, setIsClient] = useState(false)
+  const [search, setSearch] = useState('')
+  const [fType, setFType] = useState<'all' | UserType>('all')
+  const [fRole, setFRole] = useState<'all' | UserRole>('all')
+  const [fReady, setFReady] = useState<VerificationReadyFilter>('all')
+  const [fStatus, setFStatus] = useState<StatusFilter>('all')
+  const [perPage, setPerPage] = useState(10)
+  const [page, setPage] = useState(1)
+
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const filtered = useMemo(() => {
+    return pendingUsers.filter((u) => {
+      const firstName = u.first_name || ''
+      const lastName = u.last_name || ''
+      const companyName = u.company_name || ''
+      const fullName = u.user_type === 'company' ? companyName : `${firstName} ${lastName}`
+      const isReadyToVerify =
+        u.email_verified === 1 &&
+        u.profile_completed === 1 &&
+        u.documents_uploaded === 1 &&
+        u.contract_signed === 1
+
+      return (
+        (fType === 'all' || u.user_type === fType) &&
+        (fRole === 'all' || u.role === fRole) &&
+        (fStatus === 'all' || u.status === fStatus) &&
+        (fReady === 'all' ||
+          (fReady === 'ready' && isReadyToVerify) ||
+          (fReady === 'not_ready' && !isReadyToVerify)) &&
+        (!search.trim() ||
+          u.email.toLowerCase().includes(search.toLowerCase()) ||
+          fullName.toLowerCase().includes(search.toLowerCase()))
+      )
+    })
+  }, [pendingUsers, search, fType, fRole, fReady, fStatus])
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
+  const current = filtered.slice((page - 1) * perPage, page * perPage)
+
+  const applyFilters = (event: FormEvent) => {
+    event.preventDefault()
+    setPage(1)
+  }
+
+  const openUserDetail = (id: string | number) => {
+    setSelectedUserId(String(id))
+    setIsDetailModalOpen(true)
+  }
+
+  const closeUserDetail = () => {
+    setIsDetailModalOpen(false)
+    setSelectedUserId(null)
+  }
+
+  return {
+    isClient,
+    search,
+    setSearch,
+    fType,
+    setFType,
+    fRole,
+    setFRole,
+    fReady,
+    setFReady,
+    fStatus,
+    setFStatus,
+    perPage,
+    setPerPage,
+    page,
+    setPage,
+    filtered,
+    current,
+    totalPages,
+    applyFilters,
+    isDetailModalOpen,
+    selectedUserId,
+    openUserDetail,
+    closeUserDetail,
+  }
+}

src/app/admin/user-verify/page.tsx

@@ -1,131 +1,57 @@
 'use client'
 
-import { useMemo, useState, useEffect } from 'react'
+
+
+import { useTranslation } from '../../i18n/useTranslation';
 import PageLayout from '../../components/PageLayout'
 import UserDetailModal from '../../components/UserDetailModal'
-import {
-  MagnifyingGlassIcon,
-  ExclamationTriangleIcon,
-  EyeIcon
-} from '@heroicons/react/24/outline'
 import { useAdminUsers } from '../../hooks/useAdminUsers'
-import { PendingUser } from '../../utils/api'
-
-type UserType = 'personal' | 'company'
-type UserRole = 'user' | 'admin'
-type VerificationReadyFilter = 'all' | 'ready' | 'not_ready'
-type StatusFilter = 'all' | 'pending' | 'active'
+import { UserVerifyAccessDenied, UserVerifyInitialLoading } from './components/UserVerifyAccessStates'
+import { UserVerifyErrorCard, UserVerifyHeader } from './components/UserVerifyHeaderAndError'
+import UserVerifyFilters from './components/UserVerifyFilters'
+import UserVerifyUsersTable from './components/UserVerifyUsersTable'
+import { useUserVerifyPageState } from './hooks/useUserVerifyPageState'
 
 export default function AdminUserVerifyPage() {
-  const { 
-    pendingUsers, 
+  const { t } = useTranslation();
+  const {
+    pendingUsers,
     loading, 
     error,
     isAdmin,
-    fetchPendingUsers 
+    fetchPendingUsers,
   } = useAdminUsers()
-  const [isClient, setIsClient] = useState(false)
-  
-  // Handle client-side mounting
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-  const [search, setSearch] = useState('')
-  const [fType, setFType] = useState<'all' | UserType>('all')
-  const [fRole, setFRole] = useState<'all' | UserRole>('all')
-  const [fReady, setFReady] = useState<VerificationReadyFilter>('all')
-  const [fStatus, setFStatus] = useState<StatusFilter>('all')
-  const [perPage, setPerPage] = useState(10)
-  const [page, setPage] = useState(1)
-
-  // All computations must be after hooks but before conditional returns
-  const filtered = useMemo(() => {
-    return pendingUsers.filter(u => {
-      const firstName = u.first_name || ''
-      const lastName = u.last_name || ''
-      const companyName = u.company_name || ''
-      const fullName = u.user_type === 'company' ? companyName : `${firstName} ${lastName}`
-      const isReadyToVerify = u.email_verified === 1 && u.profile_completed === 1 &&
-        u.documents_uploaded === 1 && u.contract_signed === 1
-      
-      return (
-        (fType === 'all' || u.user_type === fType) &&
-        (fRole === 'all' || u.role === fRole) &&
-        (fStatus === 'all' || u.status === fStatus) &&
-        (
-          fReady === 'all' ||
-          (fReady === 'ready' && isReadyToVerify) ||
-          (fReady === 'not_ready' && !isReadyToVerify)
-        ) &&
-        (
-          !search.trim() ||
-          u.email.toLowerCase().includes(search.toLowerCase()) ||
-          fullName.toLowerCase().includes(search.toLowerCase())
-        )
-      )
-    })
-  }, [pendingUsers, search, fType, fRole, fReady, fStatus])
-
-  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
-  const current = filtered.slice((page - 1) * perPage, page * perPage)
-
-  // Modal state
-  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
-
-  const applyFilters = (e: React.FormEvent) => {
-    e.preventDefault()
-    setPage(1)
-  }
-
-  const badge = (text: string, color: string) =>
-    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${color}`}>
-      {text}
-    </span>
-
-  const typeBadge = (t: UserType) =>
-    t === 'personal'
-      ? badge('Personal', 'bg-blue-100 text-blue-700')
-      : badge('Company', 'bg-purple-100 text-purple-700')
-
-  const roleBadge = (r: UserRole) =>
-    r === 'admin'
-      ? badge('Admin', 'bg-indigo-100 text-indigo-700')
-      : badge('User', 'bg-gray-100 text-gray-700')
-
-  const statusBadge = (s: PendingUser['status']) => {
-    if (s === 'pending') return badge('Pending', 'bg-amber-100 text-amber-700')
-    return badge('Active', 'bg-green-100 text-green-700')
-  }
-
-  const verificationStatusBadge = (user: PendingUser) => {
-    const steps = [
-      { name: 'Email', completed: user.email_verified === 1 },
-      { name: 'Profile', completed: user.profile_completed === 1 },
-      { name: 'Documents', completed: user.documents_uploaded === 1 },
-      { name: 'Contract', completed: user.contract_signed === 1 }
-    ]
-    
-    const completedSteps = steps.filter(s => s.completed).length
-    const totalSteps = steps.length
-    
-    if (completedSteps === totalSteps) {
-      return badge('Ready to Verify', 'bg-green-100 text-green-700')
-    } else {
-      return badge(`${completedSteps}/${totalSteps} Steps`, 'bg-gray-100 text-gray-700')
-    }
-  }
+  const {
+    isClient,
+    search,
+    setSearch,
+    fType,
+    setFType,
+    fRole,
+    setFRole,
+    fReady,
+    setFReady,
+    fStatus,
+    setFStatus,
+    perPage,
+    setPerPage,
+    page,
+    setPage,
+    filtered,
+    current,
+    totalPages,
+    applyFilters,
+    isDetailModalOpen,
+    selectedUserId,
+    openUserDetail,
+    closeUserDetail,
+  } = useUserVerifyPageState(pendingUsers)
 
   // Show loading during SSR/initial client render
   if (!isClient) {
     return (
       <PageLayout>
-        <div className="min-h-screen flex items-center justify-center bg-blue-50">
-          <div className="text-center">
-            <div className="h-12 w-12 rounded-full border-2 border-blue-900 border-b-transparent animate-spin mx-auto mb-4" />
-            <p className="text-blue-900">Loading...</p>
-          </div>
-        </div>
+        <UserVerifyInitialLoading t={t} />
       </PageLayout>
     )
   }
@@ -134,256 +60,60 @@ export default function AdminUserVerifyPage() {
   if (!isAdmin) {
     return (
       <PageLayout>
-        <div className="min-h-screen flex items-center justify-center bg-blue-50">
-          <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
-            <div className="text-center">
-              <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
-              <h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
-              <p className="text-gray-600">You need admin privileges to access this page.</p>
-            </div>
-          </div>
-        </div>
+        <UserVerifyAccessDenied t={t} />
       </PageLayout>
     )
   }
 
   return (
     <PageLayout>
-      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
-        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
-          {/* Header */}
-          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
-            <div>
-              <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">User Verification Center</h1>
-              <p className="text-lg text-blue-700 mt-2">
-                Review and verify all users who need admin approval. Users must complete all steps before verification.
-              </p>
-            </div>
-          </header>
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.12),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.12),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_100%)]">
+        <main className="max-w-[1820px] mx-auto px-2 sm:px-6 lg:px-8 py-8">
+          <UserVerifyHeader t={t} />
 
-          {/* Error Message */}
           {error && (
-            <div className="rounded-xl border border-red-300 bg-red-50 text-red-700 px-6 py-5 flex gap-3 items-start mb-8 shadow">
-              <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
-              <div>
-                <p className="font-semibold">Error loading data</p>
-                <p className="text-sm text-red-600">{error}</p>
-                <button 
-                  onClick={fetchPendingUsers}
-                  className="mt-2 text-sm underline hover:no-underline"
-                >
-                  Try again
-                </button>
-              </div>
-            </div>
+            <UserVerifyErrorCard
+              t={t}
+              error={error}
+              onRetry={fetchPendingUsers}
+            />
           )}
 
-          {/* Filter Card */}
-          <form
+          <UserVerifyFilters
+            t={t}
+            search={search}
+            setSearch={setSearch}
+            fType={fType}
+            setFType={setFType}
+            fRole={fRole}
+            setFRole={setFRole}
+            fReady={fReady}
+            setFReady={setFReady}
+            fStatus={fStatus}
+            setFStatus={setFStatus}
+            perPage={perPage}
+            setPerPage={setPerPage}
+            setPage={setPage}
             onSubmit={applyFilters}
-            className="bg-white rounded-2xl shadow-lg ring-1 ring-gray-100 px-8 py-8 flex flex-col gap-6 mb-8"
-          >
-            <h2 className="text-lg font-semibold text-blue-900">
-              Search & Filter Pending Users
-            </h2>
-            <div className="grid grid-cols-1 lg:grid-cols-7 gap-4">
-              <div className="lg:col-span-2">
-                <label className="block text-xs font-semibold text-blue-900 mb-1">Search</label>
-                <div className="relative">
-                  <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-blue-300" />
-                  <input
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
-                    placeholder="Email, name, company..."
-                    className="w-full rounded-lg border border-gray-300 pl-10 pr-3 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-blue-900 mb-1">User Type</label>
-                <select
-                  value={fType}
-                  onChange={e => { setFType(e.target.value as any); setPage(1) }}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Types</option>
-                  <option value="personal">Personal</option>
-                  <option value="company">Company</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-blue-900 mb-1">Role</label>
-                <select
-                  value={fRole}
-                  onChange={e => { setFRole(e.target.value as any); setPage(1) }}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Roles</option>
-                  <option value="user">User</option>
-                  <option value="admin">Admin</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-blue-900 mb-1">Verification Readiness</label>
-                <select
-                  value={fReady}
-                  onChange={e => { setFReady(e.target.value as VerificationReadyFilter); setPage(1) }}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Readiness</option>
-                  <option value="ready">Ready to Verify</option>
-                  <option value="not_ready">Not Ready</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-blue-900 mb-1">Status</label>
-                <select
-                  value={fStatus}
-                  onChange={e => { setFStatus(e.target.value as StatusFilter); setPage(1) }}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  <option value="all">All Statuses</option>
-                  <option value="pending">Pending</option>
-                  <option value="active">Active</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-semibold text-blue-900 mb-1">Rows per page</label>
-                <select
-                  value={perPage}
-                  onChange={e => { setPerPage(parseInt(e.target.value, 10)); setPage(1) }}
-                  className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm text-blue-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent shadow"
-                >
-                  {[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
-                </select>
-              </div>
-            </div>
-          </form>
+          />
 
-          {/* Pending Users Table */}
-          <div className="bg-white rounded-2xl shadow-lg ring-1 ring-gray-100 overflow-hidden mb-8">
-            <div className="px-8 py-6 border-b border-gray-100 flex items-center justify-between">
-              <div className="text-lg font-semibold text-blue-900">
-                Users Pending Verification
-              </div>
-              <div className="text-xs text-gray-500">
-                Showing {current.length} of {filtered.length} users
-              </div>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-100 text-sm">
-                <thead className="bg-blue-50 text-blue-900 font-medium">
-                  <tr>
-                    <th className="px-4 py-3 text-left">User</th>
-                    <th className="px-4 py-3 text-left">Type</th>
-                    <th className="px-4 py-3 text-left">Progress</th>
-                    <th className="px-4 py-3 text-left">Status</th>
-                    <th className="px-4 py-3 text-left">Role</th>
-                    <th className="px-4 py-3 text-left">Created</th>
-                    <th className="px-4 py-3 text-left">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-100">
-                  {loading ? (
-                    <tr>
-                      <td colSpan={7} className="px-4 py-10 text-center">
-                        <div className="flex items-center justify-center gap-2">
-                          <div className="h-4 w-4 rounded-full border-2 border-blue-900 border-b-transparent animate-spin" />
-                          <span className="text-sm text-blue-900">Loading users...</span>
-                        </div>
-                      </td>
-                    </tr>
-                  ) : current.map(u => {
-                    const displayName = u.user_type === 'company' 
-                      ? u.company_name || 'Unknown Company'
-                      : `${u.first_name || 'Unknown'} ${u.last_name || 'User'}`
-                    
-                    const initials = u.user_type === 'company' 
-                      ? (u.company_name?.[0] || 'C').toUpperCase()
-                      : `${u.first_name?.[0] || 'U'}${u.last_name?.[0] || 'U'}`.toUpperCase()
-                    
-                    const createdDate = new Date(u.created_at).toLocaleDateString()
-                    
-                    return (
-                      <tr key={u.id} className="hover:bg-blue-50">
-                        <td className="px-4 py-4">
-                          <div className="flex items-center gap-3">
-                            <div className="h-9 w-9 flex items-center justify-center rounded-full bg-gradient-to-br from-blue-900 to-blue-700 text-white text-xs font-semibold shadow">
-                              {initials}
-                            </div>
-                            <div>
-                              <div className="font-medium text-blue-900 leading-tight">
-                                {displayName}
-                              </div>
-                              <div className="text-[11px] text-blue-700">{u.email}</div>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="px-4 py-4">{typeBadge(u.user_type)}</td>
-                        <td className="px-4 py-4">{verificationStatusBadge(u)}</td>
-                        <td className="px-4 py-4">{statusBadge(u.status)}</td>
-                        <td className="px-4 py-4">{roleBadge(u.role)}</td>
-                        <td className="px-4 py-4 text-blue-900">{createdDate}</td>
-                        <td className="px-4 py-4">
-                          <div className="flex gap-2">
-                            <button
-                              onClick={() => {
-                                setSelectedUserId(u.id.toString())
-                                setIsDetailModalOpen(true)
-                              }}
-                              className="inline-flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-50 hover:bg-blue-100 text-blue-900 px-3 py-2 text-xs font-medium transition"
-                            >
-                              <EyeIcon className="h-4 w-4" /> View
-                            </button>
-                            
-                          </div>
-                        </td>
-                      </tr>
-                    )
-                  })}
-                  {current.length === 0 && !loading && (
-                    <tr>
-                      <td colSpan={7} className="px-4 py-10 text-center text-sm text-blue-700">
-                        No unverified users match current filters.
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
-            {/* Pagination */}
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-8 py-6 bg-blue-50 border-t border-blue-100">
-              <div className="text-xs text-blue-700">
-                Page {page} of {totalPages} ({filtered.length} pending users)
-              </div>
-              <div className="flex gap-2">
-                <button
-                  disabled={page === 1}
-                  onClick={() => setPage(p => Math.max(1, p - 1))}
-                  className="px-4 py-2 text-xs font-medium rounded-lg border border-gray-300 bg-white hover:bg-blue-50 disabled:opacity-40 disabled:cursor-not-allowed"
-                >
-                  ‹ Previous
-                </button>
-                <button
-                  disabled={page === totalPages}
-                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                  className="px-4 py-2 text-xs font-medium rounded-lg border border-gray-300 bg-white hover:bg-blue-50 disabled:opacity-40 disabled:cursor-not-allowed"
-                >
-                  Next ›
-                </button>
-              </div>
-            </div>
-          </div>
+          <UserVerifyUsersTable
+            t={t}
+            loading={loading}
+            current={current}
+            filteredLength={filtered.length}
+            page={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+            onViewUser={openUserDetail}
+          />
         </main>
       </div>
 
       {/* User Detail Modal */}
       <UserDetailModal
         isOpen={isDetailModalOpen}
-        onClose={() => {
-          setIsDetailModalOpen(false)
-          setSelectedUserId(null)
-        }}
+        onClose={closeUserDetail}
         userId={selectedUserId}
         onUserUpdated={() => {
           fetchPendingUsers()

src/app/affiliate-links/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../i18n/useTranslation';
 import { useEffect, useState, useMemo } from 'react'
 import PageLayout from '../components/PageLayout'
 import Waves from '../components/background/waves'
@@ -18,6 +21,7 @@ type Affiliate = {
 const PLACEHOLDER_IMAGE = 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80'
 
 export default function AffiliateLinksPage() {
+  const { t } = useTranslation();
   const [affiliates, setAffiliates] = useState<Affiliate[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
@@ -115,14 +119,12 @@ export default function AffiliateLinksPage() {
               {/* Header (aligned with management pages) */}
               <header className="flex flex-col gap-4 mb-8">
                 <div>
-                  <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Affiliate Partners</h1>
-                  <p className="text-lg text-blue-700 mt-2">
-                    Discover our trusted partners and earn commissions through affiliate links.
-                  </p>
+                  <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">{t('autofix.k1b9c46e5')}</h1>
+                  <p className="text-lg text-blue-700 mt-2">{t('autofix.k633438a0')}</p>
                 </div>
                 {/* NEW: Category filter */}
                 <div className="flex items-center gap-2">
-                  <label className="text-sm text-blue-900 font-medium">Filter by category:</label>
+                  <label className="text-sm text-blue-900 font-medium">{t('autofix.kebf33594')}</label>
                   <select
                     value={selectedCategory}
                     onChange={(e) => setSelectedCategory(e.target.value)}
@@ -139,7 +141,7 @@ export default function AffiliateLinksPage() {
               {loading && (
                 <div className="mx-auto max-w-2xl text-center">
                   <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-400 border-b-transparent" />
-                  <p className="mt-4 text-sm text-gray-600">Loading affiliate partners...</p>
+                  <p className="mt-4 text-sm text-gray-600">{t('autofix.k5834cbed')}</p>
                 </div>
               )}
 
@@ -150,9 +152,7 @@ export default function AffiliateLinksPage() {
               )}
 
               {!loading && !error && posts.length === 0 && (
-                <div className="mx-auto max-w-2xl text-center text-sm text-gray-600">
-                  No affiliate partners available at the moment.
-                </div>
+                <div className="mx-auto max-w-2xl text-center text-sm text-gray-600">{t('autofix.k431328cf')}</div>
               )}
 
               {/* Cards (aligned to white panels, border, shadow) */}
@@ -195,12 +195,8 @@ export default function AffiliateLinksPage() {
                               target="_blank"
                               rel="noopener noreferrer"
                               className="rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 text-sm font-medium shadow transition"
-                            >
-                              Visit Affiliate Link
-                            </a>
-                            <span className="text-[11px] text-gray-500">
-                              External partner website.
-                            </span>
+                            >{t('autofix.k7db4e5a9')}</a>
+                            <span className="text-[11px] text-gray-500">{t('autofix.k8b89f863')}</span>
                           </div>
                         </div>
                       </article>

src/app/api/_utils/backendAuth.ts

@@ -0,0 +1,227 @@
+import { NextResponse } from 'next/server';
+
+type BackendAuthPayload = {
+  user?: {
+    id?: string;
+    role?: string;
+    roles?: string[];
+    isAdmin?: boolean;
+    [key: string]: unknown;
+  };
+  role?: string;
+  roles?: string[];
+  isAdmin?: boolean;
+  [key: string]: unknown;
+};
+
+type BackendSessionResult = {
+  ok: boolean;
+  status: number;
+  payload: BackendAuthPayload | null;
+  message?: string;
+};
+
+type BackendTokenResult = {
+  ok: boolean;
+  status: number;
+  accessToken: string | null;
+  setCookies: string[];
+  message?: string;
+};
+
+function splitSetCookieHeader(header: string): string[] {
+  const parts: string[] = [];
+  let start = 0;
+  let inExpires = false;
+
+  for (let i = 0; i < header.length; i += 1) {
+    const lower = header.slice(i, i + 8).toLowerCase();
+    if (lower === 'expires=') inExpires = true;
+    if (inExpires && header[i] === ';') inExpires = false;
+    if (!inExpires && header[i] === ',') {
+      parts.push(header.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+
+  const last = header.slice(start).trim();
+  if (last) parts.push(last);
+  return parts;
+}
+
+function readSetCookies(response: Response): string[] {
+  const anyHeaders = response.headers as unknown as { getSetCookie?: () => string[] };
+  if (typeof anyHeaders.getSetCookie === 'function') {
+    return anyHeaders.getSetCookie();
+  }
+
+  const single = response.headers.get('set-cookie');
+  return single ? splitSetCookieHeader(single) : [];
+}
+
+function resolveBackendAuthPath(): string {
+  const configured = process.env.BACKEND_AUTH_VALIDATE_PATH?.trim();
+  if (configured) return configured.startsWith('/') ? configured : `/${configured}`;
+  return '/api/auth/validate';
+}
+
+function resolveBackendBaseUrl(): string | null {
+  const value = process.env.NEXT_PUBLIC_API_BASE_URL?.trim();
+  return value || null;
+}
+
+function resolveBackendRefreshPath(): string {
+  const configured = process.env.BACKEND_REFRESH_PATH?.trim();
+  if (configured) return configured.startsWith('/') ? configured : `/${configured}`;
+  return '/api/refresh';
+}
+
+function hasAdminRole(payload: BackendAuthPayload | null): boolean {
+  if (!payload) return false;
+
+  const roleCandidates = [
+    payload.role,
+    payload.user?.role,
+    ...(Array.isArray(payload.roles) ? payload.roles : []),
+    ...(Array.isArray(payload.user?.roles) ? payload.user.roles : []),
+  ]
+    .map((v) => String(v ?? '').toLowerCase())
+    .filter(Boolean);
+
+  const explicitAdminFlag = Boolean(payload.isAdmin) || Boolean(payload.user?.isAdmin);
+  return explicitAdminFlag || roleCandidates.includes('admin') || roleCandidates.includes('superadmin');
+}
+
+export async function fetchBackendSession(request: Request): Promise<BackendSessionResult> {
+  const apiBase = resolveBackendBaseUrl();
+  if (!apiBase) {
+    return {
+      ok: false,
+      status: 500,
+      payload: null,
+      message: 'Missing NEXT_PUBLIC_API_BASE_URL.',
+    };
+  }
+
+  const cookie = request.headers.get('cookie') ?? '';
+  const authPath = resolveBackendAuthPath();
+
+  try {
+    const response = await fetch(`${apiBase}${authPath}`, {
+      method: 'GET',
+      headers: {
+        cookie,
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-store',
+    });
+
+    const payload = (await response.json().catch(() => null)) as BackendAuthPayload | null;
+
+    return {
+      ok: response.ok,
+      status: response.status,
+      payload,
+      message: !response.ok
+        ? (payload && typeof payload.message === 'string' ? payload.message : 'Authentication failed.')
+        : undefined,
+    };
+  } catch {
+    return {
+      ok: false,
+      status: 502,
+      payload: null,
+      message: 'Failed to reach backend auth endpoint.',
+    };
+  }
+}
+
+export async function fetchBackendAccessToken(request: Request): Promise<BackendTokenResult> {
+  const apiBase = resolveBackendBaseUrl();
+  if (!apiBase) {
+    return {
+      ok: false,
+      status: 500,
+      accessToken: null,
+      setCookies: [],
+      message: 'Missing NEXT_PUBLIC_API_BASE_URL.',
+    };
+  }
+
+  const cookie = request.headers.get('cookie') ?? '';
+  const refreshPath = resolveBackendRefreshPath();
+
+  try {
+    const response = await fetch(`${apiBase}${refreshPath}`, {
+      method: 'POST',
+      headers: {
+        cookie,
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-store',
+    });
+
+    const setCookies = readSetCookies(response);
+    const payload = (await response.json().catch(() => null)) as { accessToken?: string; message?: string } | null;
+    const accessToken = typeof payload?.accessToken === 'string' ? payload.accessToken : null;
+
+    if (!response.ok || !accessToken) {
+      return {
+        ok: false,
+        status: response.status,
+        accessToken: null,
+        setCookies,
+        message: payload?.message ?? 'Failed to refresh backend access token.',
+      };
+    }
+
+    return {
+      ok: true,
+      status: response.status,
+      accessToken,
+      setCookies,
+    };
+  } catch {
+    return {
+      ok: false,
+      status: 502,
+      accessToken: null,
+      setCookies: [],
+      message: 'Failed to reach backend refresh endpoint.',
+    };
+  }
+}
+
+export async function requireAdminSession(request: Request): Promise<{ ok: true; payload: BackendAuthPayload | null } | { ok: false; response: NextResponse }> {
+  const session = await fetchBackendSession(request);
+  if (!session.ok) {
+    return {
+      ok: false,
+      response: NextResponse.json(
+        { ok: false, message: session.message ?? 'Unauthorized.' },
+        { status: session.status === 401 ? 401 : 403 }
+      ),
+    };
+  }
+
+  if (!hasAdminRole(session.payload)) {
+    return {
+      ok: false,
+      response: NextResponse.json(
+        { ok: false, message: 'Admin access required.' },
+        { status: 403 }
+      ),
+    };
+  }
+
+  return { ok: true, payload: session.payload };
+}
+
+export function extractAdminState(payload: BackendAuthPayload | null): { authenticated: boolean; isAdmin: boolean; user: BackendAuthPayload['user'] | null } {
+  const authenticated = Boolean(payload);
+  return {
+    authenticated,
+    isAdmin: hasAdminRole(payload),
+    user: payload?.user ?? null,
+  };
+}

src/app/api/auth/validate/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { extractAdminState, fetchBackendSession } from '../../_utils/backendAuth';
+
+export const runtime = 'nodejs';
+
+export async function GET(request: Request) {
+  const session = await fetchBackendSession(request);
+
+  if (!session.ok) {
+    return NextResponse.json(
+      {
+        ok: false,
+        authenticated: false,
+        isAdmin: false,
+        user: null,
+        message: session.message ?? 'Unauthorized.',
+      },
+      { status: session.status }
+    );
+  }
+
+  const state = extractAdminState(session.payload);
+
+  return NextResponse.json({
+    ok: true,
+    ...state,
+  });
+}

src/app/api/i18n/preferences/route.ts

@@ -0,0 +1,138 @@
+import { NextResponse } from 'next/server';
+import { fetchBackendAccessToken, requireAdminSession } from '../../_utils/backendAuth';
+
+export const runtime = 'nodejs';
+
+function resolvePreferencesBackendPath(): string {
+  const configured = process.env.BACKEND_I18N_PREFERENCES_PATH?.trim();
+  if (configured) return configured.startsWith('/') ? configured : `/${configured}`;
+  return '/api/admin/i18n/preferences';
+}
+
+function resolveBackendBaseUrl(): string | null {
+  const value = process.env.NEXT_PUBLIC_API_BASE_URL?.trim();
+  return value || null;
+}
+
+async function proxyPreferencesRequest(request: Request, method: 'GET' | 'POST' | 'PUT' | 'DELETE') {
+  console.info('[API][i18n/preferences] start', { method });
+
+  const access = await requireAdminSession(request);
+  if (!access.ok) {
+    console.warn('[API][i18n/preferences] denied:admin-session', { method });
+    return access.response;
+  }
+
+  const tokenResult = await fetchBackendAccessToken(request);
+  if (!tokenResult.ok || !tokenResult.accessToken) {
+    console.warn('[API][i18n/preferences] denied:access-token', {
+      method,
+      status: tokenResult.status,
+      message: tokenResult.message,
+    });
+    const denied = NextResponse.json(
+      { ok: false, message: tokenResult.message ?? 'Unable to obtain backend access token.' },
+      { status: tokenResult.status === 401 ? 401 : 403 }
+    );
+
+    for (const setCookie of tokenResult.setCookies) {
+      denied.headers.append('set-cookie', setCookie);
+    }
+
+    return denied;
+  }
+
+  const apiBase = resolveBackendBaseUrl();
+  if (!apiBase) {
+    console.error('[API][i18n/preferences] missing NEXT_PUBLIC_API_BASE_URL');
+    return NextResponse.json({ ok: false, message: 'Missing NEXT_PUBLIC_API_BASE_URL.' }, { status: 500 });
+  }
+
+  const cookie = request.headers.get('cookie') ?? '';
+  const backendPath = resolvePreferencesBackendPath();
+
+  const headers: Record<string, string> = {
+    cookie,
+    Authorization: `Bearer ${tokenResult.accessToken}`,
+  };
+  let body: string | undefined;
+
+  // Build the backend URL; for DELETE we forward the languageCode query param if present.
+  const incomingUrl = new URL(request.url);
+  const languageCode = incomingUrl.searchParams.get('languageCode');
+  const backendQuery = languageCode ? `?languageCode=${encodeURIComponent(languageCode)}` : '';
+  const backendUrl = `${apiBase}${backendPath}${backendQuery}`;
+
+  if (method !== 'GET' && method !== 'DELETE') {
+    const payload = await request.json().catch(() => ({}));
+    body = JSON.stringify(payload ?? {});
+    headers['Content-Type'] = 'application/json';
+
+    const categoriesCount = Array.isArray((payload as { categories?: unknown[] })?.categories)
+      ? (payload as { categories?: unknown[] }).categories!.length
+      : 0;
+    const globalKeysCount = Array.isArray((payload as { globalKeys?: unknown[] })?.globalKeys)
+      ? (payload as { globalKeys?: unknown[] }).globalKeys!.length
+      : 0;
+
+    console.info('[API][i18n/preferences] outgoing-payload', {
+      method,
+      categoriesCount,
+      globalKeysCount,
+    });
+  }
+
+  if (method === 'DELETE' && languageCode) {
+    console.info('[API][i18n/preferences] delete-language', { languageCode });
+  }
+
+  const backendResponse = await fetch(backendUrl, {
+    method,
+    headers,
+    body,
+    cache: 'no-store',
+  }).catch(() => null);
+
+  if (!backendResponse) {
+    console.error('[API][i18n/preferences] backend unreachable', {
+      method,
+      backendPath,
+    });
+    const failed = NextResponse.json({ ok: false, message: 'Preferences backend is unreachable.' }, { status: 502 });
+    for (const setCookie of tokenResult.setCookies) {
+      failed.headers.append('set-cookie', setCookie);
+    }
+    return failed;
+  }
+
+  console.info('[API][i18n/preferences] backend-response', {
+    method,
+    status: backendResponse.status,
+    ok: backendResponse.ok,
+  });
+
+  const payload = await backendResponse.json().catch(() => null);
+  const out = NextResponse.json(payload ?? { ok: backendResponse.ok }, { status: backendResponse.status });
+
+  for (const setCookie of tokenResult.setCookies) {
+    out.headers.append('set-cookie', setCookie);
+  }
+
+  return out;
+}
+
+export async function GET(request: Request) {
+  return proxyPreferencesRequest(request, 'GET');
+}
+
+export async function POST(request: Request) {
+  return proxyPreferencesRequest(request, 'POST');
+}
+
+export async function PUT(request: Request) {
+  return proxyPreferencesRequest(request, 'PUT');
+}
+
+export async function DELETE(request: Request) {
+  return proxyPreferencesRequest(request, 'DELETE');
+}

src/app/api/i18n/translations/route.ts

@@ -0,0 +1,326 @@
+import { NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+import { flattenObject, unflattenObject } from '@/app/i18n/dynamicTranslations';
+import { requireAdminSession } from '../../_utils/backendAuth';
+
+const TRANSLATIONS_DIR = path.join(process.cwd(), 'src', 'app', 'i18n', 'translations');
+const CORE_LANGUAGE_CODES = new Set(['en', 'de']);
+
+type FlatTranslations = Record<string, string>;
+
+type LanguageDescriptor = {
+  code: string;
+  name: string;
+};
+
+function isValidLanguageCode(code: string): boolean {
+  return /^[a-z]{2,5}(?:-[a-zA-Z]{2,4})?$/.test(code);
+}
+
+function escapeRegex(input: string): string {
+  return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function normalizeLanguageName(input: string, code: string): string {
+  const trimmed = input.trim();
+  if (trimmed.length === 0) return code.toUpperCase();
+  return trimmed.replace(/[\r\n]+/g, ' ').trim();
+}
+
+function extractLanguageNameFromSource(source: string, code: string): string {
+  const nameMatch = source.match(/^\s*\/\/\s*Language name:\s*(.+)$/m);
+  if (nameMatch?.[1]) return normalizeLanguageName(nameMatch[1], code);
+  if (code === 'en') return 'English';
+  if (code === 'de') return 'Deutsch';
+  return code.toUpperCase();
+}
+
+function findObjectLiteralBounds(source: string, variableName: string): { start: number; end: number } {
+  const exportRegex = new RegExp(`export\\s+const\\s+${escapeRegex(variableName)}\\s*:\\s*Translations\\s*=`, 'm');
+  const match = exportRegex.exec(source);
+  if (!match) {
+    throw new Error(`Could not find exported translations object for language "${variableName}".`);
+  }
+
+  const afterExportIndex = match.index + match[0].length;
+  const objectStart = source.indexOf('{', afterExportIndex);
+  if (objectStart === -1) {
+    throw new Error(`Could not find object start for language "${variableName}".`);
+  }
+
+  let depth = 0;
+  let inSingle = false;
+  let inDouble = false;
+  let inBacktick = false;
+  let inLineComment = false;
+  let inBlockComment = false;
+
+  for (let i = objectStart; i < source.length; i += 1) {
+    const char = source[i];
+    const next = source[i + 1];
+    const prev = source[i - 1];
+
+    if (inLineComment) {
+      if (char === '\n') inLineComment = false;
+      continue;
+    }
+
+    if (inBlockComment) {
+      if (char === '*' && next === '/') {
+        inBlockComment = false;
+        i += 1;
+      }
+      continue;
+    }
+
+    if (!inSingle && !inDouble && !inBacktick) {
+      if (char === '/' && next === '/') {
+        inLineComment = true;
+        i += 1;
+        continue;
+      }
+      if (char === '/' && next === '*') {
+        inBlockComment = true;
+        i += 1;
+        continue;
+      }
+    }
+
+    if (!inDouble && !inBacktick && char === '\'' && prev !== '\\') {
+      inSingle = !inSingle;
+      continue;
+    }
+    if (!inSingle && !inBacktick && char === '"' && prev !== '\\') {
+      inDouble = !inDouble;
+      continue;
+    }
+    if (!inSingle && !inDouble && char === '`' && prev !== '\\') {
+      inBacktick = !inBacktick;
+      continue;
+    }
+
+    if (inSingle || inDouble || inBacktick) continue;
+
+    if (char === '{') {
+      depth += 1;
+    } else if (char === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        return { start: objectStart, end: i + 1 };
+      }
+    }
+  }
+
+  throw new Error(`Could not find object end for language "${variableName}".`);
+}
+
+function parseTranslationObject(source: string, code: string): Record<string, unknown> {
+  const { start, end } = findObjectLiteralBounds(source, code);
+  const literal = source.slice(start, end);
+
+  try {
+    const parsed = Function(`"use strict"; return (${literal});`)() as Record<string, unknown>;
+    if (!parsed || typeof parsed !== 'object') {
+      throw new Error('Invalid object result.');
+    }
+    return parsed;
+  } catch (error) {
+    throw new Error(
+      `Failed to parse translation file for language "${code}": ${error instanceof Error ? error.message : 'unknown error'}`
+    );
+  }
+}
+
+function toTsObjectLiteral(value: unknown): string {
+  return JSON.stringify(value, null, 2);
+}
+
+function buildTranslationFileContent(code: string, languageName: string, nestedObject: Record<string, unknown>): string {
+  return [
+    "import { Translations } from '../types';",
+    '',
+    `// Language name: ${normalizeLanguageName(languageName, code)}`,
+    `export const ${code}: Translations = ${toTsObjectLiteral(nestedObject)};`,
+    '',
+  ].join('\n');
+}
+
+async function readLanguageFile(code: string): Promise<{ source: string; filePath: string }> {
+  const filePath = path.join(TRANSLATIONS_DIR, `${code}.ts`);
+  const source = await fs.readFile(filePath, 'utf8');
+  return { source, filePath };
+}
+
+async function getLanguageFiles(): Promise<string[]> {
+  const entries = await fs.readdir(TRANSLATIONS_DIR, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.ts'))
+    .map((entry) => entry.name.slice(0, -3))
+    .sort((a, b) => a.localeCompare(b));
+}
+
+async function readAllTranslations(): Promise<{
+  languages: LanguageDescriptor[];
+  translations: Record<string, FlatTranslations>;
+}> {
+  const codes = await getLanguageFiles();
+  const languages: LanguageDescriptor[] = [];
+  const translations: Record<string, FlatTranslations> = {};
+
+  for (const code of codes) {
+    const { source } = await readLanguageFile(code);
+    const parsed = parseTranslationObject(source, code);
+    languages.push({ code, name: extractLanguageNameFromSource(source, code) });
+    translations[code] = flattenObject(parsed as Record<string, unknown>);
+  }
+
+  return { languages, translations };
+}
+
+function normalizeFlatTranslations(value: unknown): FlatTranslations {
+  if (!value || typeof value !== 'object') return {};
+  return Object.fromEntries(
+    Object.entries(value as Record<string, unknown>).map(([k, v]) => [k, String(v ?? '')])
+  );
+}
+
+async function writeLanguageFile(
+  code: string,
+  languageName: string,
+  incomingFlat: FlatTranslations,
+  englishFlat: FlatTranslations
+): Promise<void> {
+  const mergedFlat: FlatTranslations = {};
+  for (const key of Object.keys(englishFlat)) {
+    const candidate = incomingFlat[key];
+    mergedFlat[key] = candidate !== undefined ? String(candidate) : String(englishFlat[key] ?? '');
+  }
+
+  const nested = unflattenObject(mergedFlat);
+  const filePath = path.join(TRANSLATIONS_DIR, `${code}.ts`);
+  const content = buildTranslationFileContent(code, languageName, nested);
+  await fs.writeFile(filePath, content, 'utf8');
+}
+
+export async function GET(request: Request) {
+  const access = await requireAdminSession(request);
+  if (!access.ok) return access.response;
+
+  try {
+    const data = await readAllTranslations();
+    return NextResponse.json({ ok: true, ...data });
+  } catch (error) {
+    return NextResponse.json(
+      { ok: false, message: error instanceof Error ? error.message : 'Failed to read translations.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  const access = await requireAdminSession(request);
+  if (!access.ok) return access.response;
+
+  try {
+    const body = await request.json().catch(() => ({}));
+    const code = String(body?.code ?? '').trim().toLowerCase();
+    const languageName = normalizeLanguageName(String(body?.name ?? ''), code);
+
+    if (!isValidLanguageCode(code)) {
+      return NextResponse.json({ ok: false, message: 'Invalid language code.' }, { status: 400 });
+    }
+
+    const existingCodes = new Set(await getLanguageFiles());
+    if (existingCodes.has(code)) {
+      return NextResponse.json({ ok: false, message: `Language "${code}" already exists.` }, { status: 409 });
+    }
+
+    const { translations } = await readAllTranslations();
+    const englishFlat = translations.en;
+    if (!englishFlat) {
+      return NextResponse.json({ ok: false, message: 'English base translation file is missing.' }, { status: 500 });
+    }
+
+    await writeLanguageFile(code, languageName, englishFlat, englishFlat);
+    const updated = await readAllTranslations();
+    return NextResponse.json({ ok: true, ...updated });
+  } catch (error) {
+    return NextResponse.json(
+      { ok: false, message: error instanceof Error ? error.message : 'Failed to create language file.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(request: Request) {
+  const access = await requireAdminSession(request);
+  if (!access.ok) return access.response;
+
+  try {
+    const body = await request.json().catch(() => ({}));
+    const payload = body?.translations;
+
+    if (!payload || typeof payload !== 'object') {
+      return NextResponse.json({ ok: false, message: 'translations payload is required.' }, { status: 400 });
+    }
+
+    const allCurrent = await readAllTranslations();
+    const englishFlat = allCurrent.translations.en;
+    if (!englishFlat) {
+      return NextResponse.json({ ok: false, message: 'English base translation file is missing.' }, { status: 500 });
+    }
+
+    const languageNameByCode: Record<string, string> = Object.fromEntries(
+      allCurrent.languages.map((lang) => [lang.code, lang.name])
+    );
+
+    const incomingTranslations = payload as Record<string, unknown>;
+    const availableCodes = new Set(Object.keys(allCurrent.translations));
+
+    for (const [code, flatCandidate] of Object.entries(incomingTranslations)) {
+      if (!availableCodes.has(code)) continue;
+      const normalizedFlat = normalizeFlatTranslations(flatCandidate);
+      const languageName = languageNameByCode[code] ?? code.toUpperCase();
+      await writeLanguageFile(code, languageName, normalizedFlat, englishFlat);
+    }
+
+    const updated = await readAllTranslations();
+    return NextResponse.json({ ok: true, ...updated });
+  } catch (error) {
+    return NextResponse.json(
+      { ok: false, message: error instanceof Error ? error.message : 'Failed to save translation files.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(request: Request) {
+  const access = await requireAdminSession(request);
+  if (!access.ok) return access.response;
+
+  try {
+    const body = await request.json().catch(() => ({}));
+    const code = String(body?.code ?? '').trim().toLowerCase();
+
+    if (!isValidLanguageCode(code)) {
+      return NextResponse.json({ ok: false, message: 'Invalid language code.' }, { status: 400 });
+    }
+
+    if (CORE_LANGUAGE_CODES.has(code)) {
+      return NextResponse.json({ ok: false, message: `Language "${code}" cannot be deleted.` }, { status: 400 });
+    }
+
+    const filePath = path.join(TRANSLATIONS_DIR, `${code}.ts`);
+    await fs.unlink(filePath);
+
+    const updated = await readAllTranslations();
+    return NextResponse.json({ ok: true, ...updated });
+  } catch (error) {
+    return NextResponse.json(
+      { ok: false, message: error instanceof Error ? error.message : 'Failed to delete language file.' },
+      { status: 500 }
+    );
+  }
+}

src/app/coffee-abonnements/[id]/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import PageLayout from '../../components/PageLayout';
+import { useActiveCoffees } from '../hooks/getActiveCoffees';
+import CoffeeDetailGallery from '../components/CoffeeDetailGallery';
+import { useCoffeePictures } from '../hooks/useCoffeePictures';
+import { useTranslation } from '../../i18n/useTranslation';
+import SubscribeGuard from '../components/SubscribeGuard';
+
+export default function CoffeeAbonnementDetailPage() {
+  return (
+    <SubscribeGuard>
+      <CoffeeAbonnementDetailPageContent />
+    </SubscribeGuard>
+  );
+}
+
+function CoffeeAbonnementDetailPageContent() {
+  const { t } = useTranslation();
+  const params = useParams();
+  const { coffees, loading, error } = useActiveCoffees();
+
+  const rawId = params?.id;
+  const coffeeId = Array.isArray(rawId) ? rawId[0] : rawId;
+  const { pictureUrls: endpointPictureUrls, loading: picturesLoading } = useCoffeePictures(coffeeId ? String(coffeeId) : undefined);
+  const coffee = coffees.find((item) => item.id === String(coffeeId));
+  const fallbackGallery = coffee ? (coffee.gallery.length ? coffee.gallery : (coffee.image ? [coffee.image] : [])) : [];
+  const gallery = endpointPictureUrls.length ? endpointPictureUrls : fallbackGallery;
+
+  return (
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+        <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+          <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
+            <div>
+              <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">{t('autofix.kbdc4e405')}</div>
+              <h1 className="mt-3 text-2xl font-bold tracking-tight text-slate-900">{t('autofix.k50bb594b')}</h1>
+              <p className="mt-1 text-sm text-slate-500">{t('autofix.ka157a704')}</p>
+            </div>
+            <Link
+              href="/coffee-abonnements"
+              className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 transition"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>{t('autofix.k96839795')}</Link>
+          </div>
+
+          {loading && (
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+              <div className="h-80 rounded-2xl bg-slate-100 animate-pulse" />
+            </div>
+          )}
+
+          {!loading && error && (
+            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              {error}
+            </div>
+          )}
+
+          {!loading && !error && !coffee && (
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+              <h2 className="text-lg font-semibold text-slate-900">{t('autofix.kbcb6ceea')}</h2>
+              <p className="mt-2 text-sm text-slate-500">{t('autofix.k8e0e178e')}</p>
+            </div>
+          )}
+
+          {!loading && !error && coffee && (
+            <div className="grid grid-cols-1 xl:grid-cols-5 gap-5">
+              <div className="xl:col-span-3 rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+                <CoffeeDetailGallery images={gallery} alt={coffee.name} />
+              </div>
+
+              <div className="xl:col-span-2 space-y-5">
+                <div className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+                  <h2 className="text-xl font-semibold text-slate-900">{coffee.name}</h2>
+                  <p className="mt-3 text-sm leading-6 text-slate-600">{coffee.description || t('autofix.kec078e54')}</p>
+
+                  <div className="mt-5 space-y-2">
+                    <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
+                      <span className="text-sm text-slate-600">Price per pack</span>
+                      <span className="text-sm font-semibold text-slate-900">EUR {coffee.pricePer10.toFixed(2)}</span>
+                    </div>
+                    <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
+                      <span className="text-sm text-slate-600">Capsules per pack</span>
+                      <span className="text-sm font-semibold text-slate-900">10 capsules</span>
+                    </div>
+                    <div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-2">
+                      <span className="text-sm text-slate-600">{t('autofix.k5bd8edf9')}</span>
+                      <span className="text-sm font-semibold text-slate-900">
+                        {picturesLoading ? 'Loading...' : gallery.length}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+                  <p className="text-sm text-slate-600">Ready to add this coffee to your plan? Go back to the selection page and choose how many packs you want.</p>
+                  <Link
+                    href="/coffee-abonnements"
+                    className="mt-4 inline-flex items-center justify-center rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 transition"
+                  >{t('autofix.k47e6f301')}</Link>
+                </div>
+              </div>
+
+            </div>
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

src/app/coffee-abonnements/components/AboHeroHeader.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+
+type Props = {
+  title: string;
+  subtitle: string;
+};
+
+export default function AboHeroHeader({ title, subtitle }: Props) {
+  return (
+    <div className="rounded-[28px] border border-white/80 bg-white/90 px-8 py-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur flex flex-wrap items-center justify-between gap-4">
+      <div>
+        <div className="inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+          Coffee ABO
+        </div>
+        <h1 className="mt-3 text-2xl font-bold tracking-tight text-slate-900">{title}</h1>
+        <p className="mt-1 text-sm text-slate-500">{subtitle}</p>
+      </div>
+      <Link
+        href="/profile/subscriptions"
+        className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 transition"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        My subscriptions
+      </Link>
+    </div>
+  );
+}

src/app/coffee-abonnements/components/AboStepper.tsx

@@ -0,0 +1,25 @@
+type Props = {
+  currentStep: 1 | 2;
+};
+
+export default function AboStepper({ currentStep }: Props) {
+  return (
+    <div className="rounded-[24px] border border-white/80 bg-white/90 px-5 py-4 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.2)] backdrop-blur">
+      <div className="flex items-center gap-3 text-sm text-slate-600">
+        <div className="flex items-center">
+          <span className={`h-8 w-8 rounded-full flex items-center justify-center font-semibold ${
+            currentStep === 1 ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500'
+          }`}>1</span>
+          <span className="ml-2 font-medium">Selection</span>
+        </div>
+        <div className="h-px flex-1 bg-slate-200" />
+        <div className="flex items-center">
+          <span className={`h-8 w-8 rounded-full flex items-center justify-center font-semibold ${
+            currentStep === 2 ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500'
+          }`}>2</span>
+          <span className="ml-2 font-medium">Summary</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/coffee-abonnements/components/CoffeeDetailGallery.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+type Props = {
+  images: string[];
+  alt: string;
+};
+
+export default function CoffeeDetailGallery({ images, alt }: Props) {
+  const [index, setIndex] = useState(0);
+  const safeImages = images.length > 0 ? images : [''];
+  const current = safeImages[index] || '';
+
+  return (
+    <div className="space-y-3">
+      <div className="relative h-72 sm:h-96 overflow-hidden rounded-2xl border border-slate-200 bg-slate-100">
+        {current ? (
+          <img src={current} alt={alt} className="h-full w-full object-cover" />
+        ) : (
+          <div className="h-full w-full flex items-center justify-center text-sm text-slate-400">No image available</div>
+        )}
+      </div>
+
+      {safeImages.length > 1 && (
+        <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
+          {safeImages.map((img, i) => (
+            <button
+              key={`${img}-${i}`}
+              type="button"
+              onClick={() => setIndex(i)}
+              className={`relative h-16 sm:h-20 overflow-hidden rounded-xl border transition ${
+                i === index ? 'border-slate-900 ring-2 ring-slate-900/20' : 'border-slate-200 hover:border-slate-300'
+              }`}
+              aria-label={`Show gallery image ${i + 1}`}
+            >
+              <img src={img} alt={`${alt} ${i + 1}`} className="h-full w-full object-cover" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/coffee-abonnements/components/CoffeeSelectionGrid.tsx

@@ -0,0 +1,160 @@
+import Link from 'next/link';
+import type { CoffeeItem } from '../hooks/getActiveCoffees';
+import { CAPSULES_PER_PACK, MAX_ABO_PACKS, MIN_ABO_PACKS, packsToCapsules } from '../lib/orderRules';
+
+type Props = {
+  coffees: CoffeeItem[];
+  loading: boolean;
+  error: string | null;
+  selections: Record<string, number>;
+  totalPacks: number;
+  onAdjustQuantity: (id: string, delta: number) => void;
+  onSetQuantity: (id: string, nextQuantity: number) => void;
+  title: string;
+};
+
+export default function CoffeeSelectionGrid({
+  coffees,
+  loading,
+  error,
+  selections,
+  totalPacks,
+  onAdjustQuantity,
+  onSetQuantity,
+  title,
+}: Props) {
+  const remainingCapacity = Math.max(0, MAX_ABO_PACKS - totalPacks);
+
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur">
+      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
+          <p className="mt-1 text-sm text-slate-500">Choose your coffees in packs. One pack contains {CAPSULES_PER_PACK} capsules.</p>
+          <div className="mt-3 inline-flex items-center rounded-2xl border border-sky-200 bg-sky-50 px-4 py-2 text-sm font-medium text-sky-900">
+            Minimum order: {MIN_ABO_PACKS} packs ({packsToCapsules(MIN_ABO_PACKS)} capsules).
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-right">
+          <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Capacity</div>
+          <div className="mt-1 text-lg font-bold text-slate-900">{remainingCapacity.toLocaleString('en-US')} packs left</div>
+          <div className="text-xs text-slate-500">up to {MAX_ABO_PACKS.toLocaleString('en-US')} packs per subscription</div>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</div>
+      )}
+
+      {loading ? (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          <div className="h-52 rounded-2xl bg-slate-100 animate-pulse" />
+          <div className="h-52 rounded-2xl bg-slate-100 animate-pulse" />
+          <div className="h-52 rounded-2xl bg-slate-100 animate-pulse" />
+          <div className="h-52 rounded-2xl bg-slate-100 animate-pulse" />
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {coffees.map((coffee) => {
+            const active = coffee.id in selections;
+            const qty = selections[coffee.id] || 0;
+            const maxForCoffee = qty + remainingCapacity;
+            const addableForCoffee = remainingCapacity;
+            const subtotal = qty * coffee.pricePer10;
+
+            return (
+              <div
+                key={coffee.id}
+                className={`group rounded-2xl border p-4 shadow-sm transition ${
+                  active ? 'border-slate-900/30 bg-slate-50' : 'border-slate-200 bg-white'
+                }`}
+              >
+                <Link href={`/coffee-abonnements/${coffee.id}`} className="block relative overflow-hidden rounded-xl mb-3">
+                  {coffee.image ? (
+                    <img
+                      src={coffee.image}
+                      alt={coffee.name}
+                      className="h-36 w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="h-36 w-full bg-slate-100 rounded-xl" />
+                  )}
+                  <div className="absolute top-2 left-2 rounded-full bg-black/65 px-2 py-0.5 text-[10px] font-semibold text-white">Details</div>
+                  <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
+                    <span className={`inline-flex items-center justify-center rounded-full text-white text-[11px] font-bold px-3 py-1 shadow-lg ring-2 ring-white/50 backdrop-blur-sm ${
+                      active ? 'bg-slate-900' : 'bg-slate-700/90'
+                    }`}>
+                      EUR {coffee.pricePer10.toFixed(2)}
+                    </span>
+                    <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-slate-900/90 text-white border border-white/20 shadow-sm backdrop-blur-sm">per pack</span>
+                  </div>
+                </Link>
+
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="font-semibold text-sm text-slate-900 line-clamp-1">{coffee.name}</h3>
+                </div>
+                <p className="mt-2 text-xs text-slate-600 leading-relaxed line-clamp-3">{coffee.description}</p>
+
+                <div className="mt-3 flex gap-2">
+                  <Link
+                    href={`/coffee-abonnements/${coffee.id}`}
+                    className="inline-flex items-center justify-center text-xs font-semibold rounded-xl px-3 py-2 border border-slate-200 text-slate-600 hover:bg-slate-100 transition"
+                  >
+                    View
+                  </Link>
+                </div>
+
+                <div className="mt-4 rounded-2xl border border-slate-200 bg-slate-50 p-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Pack selection</div>
+                      <div className="mt-1 text-sm text-slate-500">{packsToCapsules(qty).toLocaleString('en-US')} capsules</div>
+                    </div>
+                    <div className="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
+                      {qty.toLocaleString('en-US')} packs
+                    </div>
+                  </div>
+
+                  <div className="mt-3 flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => onAdjustQuantity(coffee.id, -1)}
+                      disabled={qty <= 0}
+                      className="h-10 w-10 rounded-full bg-white text-base font-bold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      -
+                    </button>
+                    <input
+                      type="number"
+                      min={0}
+                      max={maxForCoffee}
+                      step={1}
+                      inputMode="numeric"
+                      value={qty}
+                      onChange={(e) => onSetQuantity(coffee.id, Number(e.target.value))}
+                      className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-center text-sm font-semibold text-slate-900 shadow-sm focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900/10"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => onAdjustQuantity(coffee.id, +1)}
+                      disabled={qty >= maxForCoffee}
+                      className="h-10 w-10 rounded-full bg-white text-base font-bold text-slate-900 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      +
+                    </button>
+                  </div>
+
+                  <div className="mt-3 flex items-center justify-between text-[11px] text-slate-500">
+                    <span>You can add {addableForCoffee.toLocaleString('en-US')} more packs here.</span>
+                    <span className="font-semibold text-slate-700">EUR {subtotal.toFixed(2)}</span>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}

src/app/coffee-abonnements/components/SelectionSummaryCard.tsx

@@ -0,0 +1,122 @@
+import type { CoffeeItem } from '../hooks/getActiveCoffees';
+import { MAX_ABO_PACKS, MIN_ABO_PACKS, packsToCapsules } from '../lib/orderRules';
+
+type SelectedEntry = {
+  coffee: CoffeeItem;
+  quantity: number;
+};
+
+type Props = {
+  selectedEntries: SelectedEntry[];
+  shippingLoading: boolean;
+  isFreeShippingSelected: boolean;
+  selectedShippingFee: number;
+  totalNetWithShipping: number;
+  totalCapsules: number;
+  totalPacks: number;
+  orderPackError: string | null;
+  remainingMinPacks: number;
+  canProceed: boolean;
+  onProceed: () => void;
+  title: string;
+  emptyText: string;
+  continueText: string;
+};
+
+export default function SelectionSummaryCard({
+  selectedEntries,
+  shippingLoading,
+  isFreeShippingSelected,
+  selectedShippingFee,
+  totalNetWithShipping,
+  totalCapsules,
+  totalPacks,
+  orderPackError,
+  remainingMinPacks,
+  canProceed,
+  onProceed,
+  title,
+  emptyText,
+  continueText,
+}: Props) {
+  return (
+    <section className="rounded-[28px] border border-white/80 bg-white/90 p-6 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur space-y-4">
+      <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
+
+      {selectedEntries.length === 0 && <p className="text-sm text-slate-600">{emptyText}</p>}
+
+      {selectedEntries.map((entry) => (
+        <div key={entry.coffee.id} className="flex justify-between text-sm border-b border-slate-100 last:border-b-0 pb-2 last:pb-0">
+          <div className="flex flex-col">
+            <span className="font-medium text-slate-800">{entry.coffee.name}</span>
+            <span className="text-xs text-slate-500">
+              {entry.quantity} packs ({packsToCapsules(entry.quantity)} capsules) • <span className="inline-flex items-center font-semibold text-slate-900">EUR {entry.coffee.pricePer10.toFixed(2)}/pack</span>
+            </span>
+          </div>
+          <div className="text-right font-semibold text-slate-800">EUR {(entry.quantity * entry.coffee.pricePer10).toFixed(2)}</div>
+        </div>
+      ))}
+
+      <div className="flex justify-between text-sm border-b border-slate-100 pb-2">
+        <span className="text-sm font-medium text-slate-700">Shipping</span>
+        <span className="text-sm font-semibold text-slate-900">
+          {shippingLoading ? 'Loading...' : isFreeShippingSelected ? 'FREE SHIPPING' : `EUR ${selectedShippingFee.toFixed(2)}`}
+        </span>
+      </div>
+
+      <div className="flex justify-between pt-2 border-t border-slate-200">
+        <span className="text-sm font-semibold text-slate-700">Total (net)</span>
+        <span className="text-lg font-extrabold tracking-tight text-slate-900">EUR {totalNetWithShipping.toFixed(2)}</span>
+      </div>
+
+      <div className="space-y-2 text-xs text-slate-700">
+        <div>
+          <span className="font-semibold">{totalPacks.toLocaleString('en-US')}</span> packs selected.
+          <div className="text-slate-500">{totalCapsules.toLocaleString('en-US')} capsules total · minimum {MIN_ABO_PACKS} packs · maximum {MAX_ABO_PACKS.toLocaleString('en-US')} packs</div>
+        </div>
+
+        {orderPackError ? (
+          <span className="inline-flex items-center rounded-md bg-rose-50 text-rose-700 px-2 py-1 border border-rose-200">
+            {remainingMinPacks > 0
+              ? `${remainingMinPacks} more pack${remainingMinPacks === 1 ? '' : 's'} needed to reach the minimum order.`
+              : orderPackError}
+          </span>
+        ) : (
+          <span className="inline-flex items-center rounded-md bg-emerald-50 text-emerald-700 px-2 py-1 border border-emerald-200">
+            Selection is within the allowed order range.
+          </span>
+        )}
+      </div>
+
+      <button
+        onClick={onProceed}
+        disabled={!canProceed}
+        className={`group w-full mt-2 rounded-xl px-4 py-3 font-semibold transition inline-flex items-center justify-center ${
+          canProceed ? 'bg-slate-900 text-white hover:bg-slate-800 shadow-md hover:shadow-lg' : 'bg-slate-200 text-slate-500 cursor-not-allowed'
+        }`}
+      >
+        {continueText}
+        <svg
+          className={`ml-2 h-5 w-5 transition-transform ${canProceed ? 'group-hover:translate-x-0.5' : ''}`}
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l5.999 6a1 1 0 010 1.414l-6 6a1 1 0 11-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      {!canProceed && (
+        <p className="text-xs text-slate-600">
+          {remainingMinPacks > 0
+            ? `You can continue once at least ${MIN_ABO_PACKS} packs are selected.`
+            : `Please reduce the order to ${MAX_ABO_PACKS.toLocaleString('en-US')} packs or fewer.`}
+        </p>
+      )}
+    </section>
+  );
+}

src/app/coffee-abonnements/components/SubscribeGuard.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import PageLayout from '../../components/PageLayout';
+import { useSubscribeGuard } from '../hooks/useSubscribeGuard';
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function SubscribeGuard({ children }: Props) {
+  const { isChecking, isAllowed } = useSubscribeGuard();
+
+  if (!isAllowed) {
+    return (
+      <PageLayout contentClassName="flex-1 relative w-full">
+        <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+          <div className="max-w-455 mx-auto px-4 sm:px-6 xl:px-10 py-8">
+            <div className="rounded-[28px] border border-white/80 bg-white/90 p-8 shadow-[0_24px_70px_-40px_rgba(15,23,42,0.3)] backdrop-blur text-center">
+              <div className="mx-auto h-10 w-10 rounded-full border-2 border-slate-200 border-t-slate-900 animate-spin" />
+              <p className="mt-4 text-sm text-slate-600">
+                {isChecking ? 'Checking subscription access...' : 'Redirecting...'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  return <>{children}</>;
+}

src/app/coffee-abonnements/hooks/getActiveCoffees.ts

@@ -7,6 +7,7 @@ export type ActiveCoffee = {
   description: string;
   price: string | number; // price can be a string or number
   pictureUrl?: string;
+  pictureUrls?: string[] | string | null;
   state: number; // 1 for active, 0 for inactive
 };
 
@@ -16,8 +17,27 @@ export type CoffeeItem = {
   description: string;
   pricePer10: number; // price for 10 pieces
   image: string;
+  gallery: string[];
 };
 
+function normalizePictureUrls(value: unknown): string[] {
+  if (Array.isArray(value)) return value.filter((url): url is string => typeof url === 'string' && url.trim() !== '');
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (Array.isArray(parsed)) {
+        return parsed.filter((url): url is string => typeof url === 'string' && url.trim() !== '');
+      }
+    } catch {
+      // Accept comma-separated fallback values.
+      return trimmed.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+  }
+  return [];
+}
+
 export function useActiveCoffees() {
   const [coffees, setCoffees] = useState<CoffeeItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -70,12 +90,15 @@ export function useActiveCoffees() {
             .filter((coffee) => (coffee as any).state === 1 || (coffee as any).state === true || (coffee as any).state === '1')
             .map((coffee) => {
               const price = typeof coffee.price === 'string' ? parseFloat(coffee.price) : coffee.price;
+              const gallery = normalizePictureUrls((coffee as any).pictureUrls);
+              const thumbnail = coffee.pictureUrl || gallery[0] || '';
               return {
                 id: String(coffee.id),
                 name: coffee.title || `Coffee ${coffee.id}`,
                 description: coffee.description || '',
                 pricePer10: !isNaN(price as number) ? (price as number) * 10 : 0,
-                image: coffee.pictureUrl || '',
+                image: thumbnail,
+                gallery,
               };
             });
 

src/app/coffee-abonnements/hooks/useCoffeePictures.ts

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { authFetch } from '../../utils/authFetch';
+
+type PictureApiRecord = {
+  url?: string;
+  pictureUrl?: string;
+  src?: string;
+  path?: string;
+};
+
+function normalizePictureUrls(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.filter((url): url is string => typeof url === 'string' && url.trim() !== '');
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (Array.isArray(parsed)) {
+        return parsed.filter((url): url is string => typeof url === 'string' && url.trim() !== '');
+      }
+    } catch {
+      return trimmed.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+  }
+
+  return [];
+}
+
+function uniqueUrls(urls: string[]): string[] {
+  return Array.from(new Set(urls.filter((u) => typeof u === 'string' && u.trim() !== '')));
+}
+
+export function useCoffeePictures(coffeeId?: string) {
+  const [pictureUrls, setPictureUrls] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!coffeeId) {
+      return;
+    }
+
+    const base = (process.env.NEXT_PUBLIC_API_BASE_URL || '').replace(/\/+$/, '');
+    const candidateUrls = [
+      `${base}/api/admin/coffee/${coffeeId}/pictures`,
+      `${base}/api/coffee/${coffeeId}/pictures`,
+    ];
+
+    let isCancelled = false;
+
+    const loadPictures = async () => {
+      if (!isCancelled) setLoading(true);
+
+      for (const url of candidateUrls) {
+        try {
+          const response = await authFetch(url, {
+            method: 'GET',
+            headers: { Accept: 'application/json' },
+            credentials: 'include',
+          });
+
+          if (!response.ok) {
+            if (response.status === 401 || response.status === 403 || response.status === 404) {
+              continue;
+            }
+            continue;
+          }
+
+          const contentType = response.headers.get('content-type') || '';
+          if (!contentType.includes('application/json')) continue;
+
+          const json = await response.json().catch(() => null);
+          const payload = json && typeof json === 'object' && json.data && typeof json.data === 'object'
+            ? json.data
+            : json;
+
+          const fromList = normalizePictureUrls((payload as any)?.pictureUrls);
+          const fromSingle = typeof (payload as any)?.pictureUrl === 'string' ? [(payload as any).pictureUrl] : [];
+          const fromDetails = Array.isArray((payload as any)?.pictures)
+            ? ((payload as any).pictures as PictureApiRecord[])
+                .map((item) => item?.url || item?.pictureUrl || item?.src || item?.path || '')
+                .filter(Boolean)
+            : [];
+
+          const merged = uniqueUrls([...fromList, ...fromDetails, ...fromSingle]);
+          if (!isCancelled) setPictureUrls(merged);
+          return;
+        } catch {
+          // Try next candidate endpoint.
+        }
+      }
+
+      if (!isCancelled) setPictureUrls([]);
+    };
+
+    void loadPictures().finally(() => {
+      if (!isCancelled) setLoading(false);
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [coffeeId]);
+
+  return {
+    pictureUrls: coffeeId ? pictureUrls : [],
+    loading: coffeeId ? loading : false,
+  };
+}

src/app/coffee-abonnements/hooks/useShippingFees.ts

@@ -2,18 +2,14 @@
 
 import { useEffect, useMemo, useState } from 'react';
 
-export type CoffeeShippingFeePieceCount = 60 | 120;
-
 export type CoffeeShippingFee = {
-  pieceCount: CoffeeShippingFeePieceCount;
+  pieceCount: number;
   price: number;
 };
 
-type ShippingFeeMap = Record<CoffeeShippingFeePieceCount, number>;
-
-function normalizePieceCount(v: any): CoffeeShippingFeePieceCount | null {
+function normalizePieceCount(v: any): number | null {
   const n = typeof v === 'number' ? v : (typeof v === 'string' && /^\d+$/.test(v) ? Number(v) : NaN);
-  if (n === 60 || n === 120) return n;
+  if (Number.isInteger(n) && n >= 60 && n % 10 === 0) return n;
   return null;
 }
 
@@ -24,12 +20,11 @@ export function useShippingFees() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const feeByPieceCount: ShippingFeeMap = useMemo(() => {
-    const map: ShippingFeeMap = { 60: 0, 120: 0 };
-    for (const row of fees) {
-      map[row.pieceCount] = row.price;
-    }
-    return map;
+  // Threshold lookup: finds the highest breakpoint <= n (mirrors backend logic).
+  const resolveShippingFee = useMemo(() => (n: number): number => {
+    const sorted = [...fees].sort((a, b) => b.pieceCount - a.pieceCount);
+    const match = sorted.find(f => f.pieceCount <= n);
+    return match ? match.price : 0;
   }, [fees]);
 
   useEffect(() => {
@@ -83,5 +78,5 @@ export function useShippingFees() {
     };
   }, [base]);
 
-  return { fees, feeByPieceCount, loading, error };
+  return { fees, resolveShippingFee, loading, error };
 }

src/app/coffee-abonnements/hooks/useSubscribeGuard.ts

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import useAuthStore from '../../store/authStore';
+
+type GuardState = 'checking' | 'allowed' | 'redirecting';
+
+function hasPermission(permsSrc: any, permission: string) {
+  if (Array.isArray(permsSrc)) {
+    return (
+      permsSrc.includes?.(permission) ||
+      permsSrc.some?.((perm: any) => perm?.name === permission || perm?.key === permission)
+    );
+  }
+
+  if (permsSrc && typeof permsSrc === 'object') {
+    return !!permsSrc[permission];
+  }
+
+  return false;
+}
+
+export function useSubscribeGuard() {
+  const router = useRouter();
+  const user = useAuthStore((state) => state.user);
+  const isAuthReady = useAuthStore((state) => state.isAuthReady);
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const refreshAuthToken = useAuthStore((state) => state.refreshAuthToken);
+  const [guardState, setGuardState] = useState<GuardState>('checking');
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      if (!isAuthReady) {
+        if (!cancelled) setGuardState('checking');
+        return;
+      }
+
+      if (!user) {
+        if (!cancelled) setGuardState('redirecting');
+        router.replace('/login');
+        return;
+      }
+
+      const uid = (user as any)?.id ?? (user as any)?._id ?? (user as any)?.userId;
+      if (!uid) {
+        if (!cancelled) setGuardState('redirecting');
+        router.replace('/');
+        return;
+      }
+
+      let tokenToUse = accessToken;
+      try {
+        if (!tokenToUse && refreshAuthToken) {
+          const ok = await refreshAuthToken();
+          if (ok) tokenToUse = useAuthStore.getState().accessToken;
+        }
+      } catch (error) {
+        console.error('useSubscribeGuard.refreshAuthToken', error);
+      }
+
+      const base = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+      const url = `${base}/api/users/${uid}/permissions`;
+
+      try {
+        const res = await fetch(url, {
+          method: 'GET',
+          cache: 'no-store',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(tokenToUse ? { Authorization: `Bearer ${tokenToUse}` } : {}),
+          },
+        });
+
+        const body = await res.json().catch(() => null);
+        const permsSrc = body?.data?.permissions ?? body?.permissions ?? body;
+        const allowed = hasPermission(permsSrc, 'can_subscribe');
+
+        if (!allowed) {
+          if (!cancelled) setGuardState('redirecting');
+          router.replace('/');
+          return;
+        }
+
+        if (!cancelled) setGuardState('allowed');
+      } catch (error) {
+        console.error('useSubscribeGuard.permissions', error);
+        if (!cancelled) setGuardState('redirecting');
+        router.replace('/');
+      }
+    };
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [isAuthReady, user, accessToken, refreshAuthToken, router]);
+
+  return {
+    isChecking: guardState === 'checking',
+    isAllowed: guardState === 'allowed',
+    isRedirecting: guardState === 'redirecting',
+  };
+}

src/app/coffee-abonnements/lib/orderRules.ts

@@ -0,0 +1,52 @@
+export const CAPSULES_PER_PACK = 10;
+export const MIN_ABO_PACKS = 6;
+export const MAX_ABO_PACKS = 10000;
+export const COFFEE_SELECTIONS_STORAGE_KEY = 'coffeeSelections';
+export const COFFEE_SELECTIONS_UNIT_STORAGE_KEY = 'coffeeSelectionsUnit';
+export const COFFEE_SELECTIONS_UNIT = 'packs-v1';
+
+export function packsToCapsules(packs: number) {
+  return Math.max(0, Math.floor(Number(packs) || 0)) * CAPSULES_PER_PACK;
+}
+
+export function normalizePackCount(value: unknown) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return 0;
+  return Math.max(0, Math.floor(parsed));
+}
+
+export function getOrderPackError(totalPacks: number) {
+  if (totalPacks < MIN_ABO_PACKS) {
+    return `Order must contain at least ${MIN_ABO_PACKS} packs (${packsToCapsules(MIN_ABO_PACKS)} capsules).`;
+  }
+
+  if (totalPacks > MAX_ABO_PACKS) {
+    return `Order cannot contain more than ${MAX_ABO_PACKS.toLocaleString('en-US')} packs (${packsToCapsules(MAX_ABO_PACKS).toLocaleString('en-US')} capsules).`;
+  }
+
+  return null;
+}
+
+export function getRemainingMinPacks(totalPacks: number) {
+  return Math.max(0, MIN_ABO_PACKS - totalPacks);
+}
+
+export function normalizeStoredSelections(
+  rawSelections: Record<string, unknown>,
+  unit: string | null,
+) {
+  const entries = Object.entries(rawSelections || {});
+
+  return entries.reduce<Record<string, number>>((acc, [coffeeId, value]) => {
+    const normalizedValue = normalizePackCount(value);
+    if (normalizedValue <= 0) return acc;
+
+    const packCount = unit === COFFEE_SELECTIONS_UNIT
+      ? normalizedValue
+      : (normalizedValue % CAPSULES_PER_PACK === 0 ? normalizedValue / CAPSULES_PER_PACK : normalizedValue);
+
+    if (packCount <= 0) return acc;
+    acc[coffeeId] = Math.min(packCount, MAX_ABO_PACKS);
+    return acc;
+  }, {});
+}

src/app/coffee-abonnements/page.tsx

@@ -4,22 +4,41 @@ import PageLayout from '../components/PageLayout';
 import { useRouter } from 'next/navigation';
 import { useActiveCoffees } from './hooks/getActiveCoffees';
 import { useShippingFees } from './hooks/useShippingFees';
+import AboHeroHeader from './components/AboHeroHeader';
+import AboStepper from './components/AboStepper';
+import CoffeeSelectionGrid from './components/CoffeeSelectionGrid';
+import SelectionSummaryCard from './components/SelectionSummaryCard';
+import SubscribeGuard from './components/SubscribeGuard';
+import {
+  COFFEE_SELECTIONS_STORAGE_KEY,
+  COFFEE_SELECTIONS_UNIT,
+  COFFEE_SELECTIONS_UNIT_STORAGE_KEY,
+  getOrderPackError,
+  getRemainingMinPacks,
+  MAX_ABO_PACKS,
+  packsToCapsules,
+} from './lib/orderRules';
+
+import { useTranslation } from '../i18n/useTranslation';
 
 export default function CoffeeAbonnementPage() {
+  return (
+    <SubscribeGuard>
+      <CoffeeAbonnementPageContent />
+    </SubscribeGuard>
+  );
+}
+
+function CoffeeAbonnementPageContent() {
+  const { t } = useTranslation();
   const [selections, setSelections] = useState<Record<string, number>>({});
-  const [bump, setBump] = useState<Record<string, boolean>>({});
-  const [selectedPlanCapsules, setSelectedPlanCapsules] = useState<60 | 120>(120);
   const router = useRouter();
 
   // Fetch active coffees from the backend
   const { coffees, loading, error } = useActiveCoffees();
 
-  // Shipping fees (per piece count)
-  const { feeByPieceCount, loading: shippingLoading, error: shippingError } = useShippingFees();
-  const shippingFeeFor60 = feeByPieceCount[60] ?? 0;
-  const shippingFeeFor120 = feeByPieceCount[120] ?? 0;
-  const selectedShippingFee = feeByPieceCount[selectedPlanCapsules] ?? 0;
-  const isFreeShippingSelected = Number(selectedShippingFee) === 0;
+  // Shipping fees (threshold-based)
+  const { resolveShippingFee, loading: shippingLoading, error: shippingError } = useShippingFees();
 
   const selectedEntries = useMemo(
     () =>
@@ -34,384 +53,103 @@ export default function CoffeeAbonnementPage() {
   const totalPrice = useMemo(
     () =>
       selectedEntries.reduce(
-        (sum, entry) => sum + (entry.quantity / 10) * entry.coffee.pricePer10,
+        (sum, entry) => sum + entry.quantity * entry.coffee.pricePer10,
         0
       ),
     [selectedEntries]
   );
 
+  const totalPacks = useMemo(
+    () => selectedEntries.reduce((sum, entry) => sum + entry.quantity, 0),
+    [selectedEntries]
+  );
+
+  const totalCapsules = useMemo(() => packsToCapsules(totalPacks), [totalPacks]);
+  const selectedShippingFee = resolveShippingFee(totalCapsules);
+  const isFreeShippingSelected = Number(selectedShippingFee) === 0;
+  const orderPackError = getOrderPackError(totalPacks);
+  const remainingMinPacks = getRemainingMinPacks(totalPacks);
+
   const totalNetWithShipping = useMemo(
     () => totalPrice + (Number.isFinite(selectedShippingFee) ? selectedShippingFee : 0),
     [totalPrice, selectedShippingFee]
   );
 
-  // NEW: enforce selected plan size (60 or 120 capsules)
-  const totalCapsules = useMemo(
-    () => selectedEntries.reduce((sum, entry) => sum + entry.quantity, 0),
-    [selectedEntries]
-  );
-  const packsSelected = totalCapsules / 10;
-  const requiredPacks = selectedPlanCapsules / 10;
-  const canProceed = packsSelected === requiredPacks;
+  const canProceed = selectedEntries.length > 0 && !orderPackError;
 
   const proceedToSummary = () => {
     if (!canProceed) return;
     try {
-      sessionStorage.setItem('coffeeSelections', JSON.stringify(selections));
-      sessionStorage.setItem('coffeeAboSizeCapsules', String(selectedPlanCapsules));
+      sessionStorage.setItem(COFFEE_SELECTIONS_STORAGE_KEY, JSON.stringify(selections));
+      sessionStorage.setItem(COFFEE_SELECTIONS_UNIT_STORAGE_KEY, COFFEE_SELECTIONS_UNIT);
     } catch {}
     router.push('/coffee-abonnements/summary');
   };
 
-  const toggleCoffee = (id: string) => {
+  const setQuantity = (id: string, nextValue: number) => {
     setSelections((prev) => {
-      const copy = { ...prev };
-      if (id in copy) {
-        delete copy[id];
-      } else {
-        const total = Object.values(copy).reduce((sum, qty) => sum + qty, 0);
-        if (total + 10 > selectedPlanCapsules) return prev;
-        copy[id] = 10;
+      const normalized = Math.max(0, Math.floor(Number(nextValue) || 0));
+      const current = prev[id] || 0;
+      const otherTotal = Object.entries(prev).reduce((sum, [key, qty]) => key === id ? sum : sum + qty, 0);
+      const maxForCoffee = Math.max(0, MAX_ABO_PACKS - otherTotal);
+      const bounded = Math.min(normalized, maxForCoffee);
+
+      if (bounded <= 0) {
+        if (!(id in prev)) return prev;
+        const next = { ...prev };
+        delete next[id];
+        return next;
       }
-      return copy;
+
+      if (bounded === current) return prev;
+      return { ...prev, [id]: bounded };
     });
   };
 
-  const changeQuantity = (id: string, delta: number) => {
-    setSelections((prev) => {
-      if (!(id in prev)) return prev;
-      const otherTotal = Object.entries(prev).reduce((sum, [key, qty]) => key === id ? sum : sum + qty, 0);
-      const maxForCoffee = Math.min(120, selectedPlanCapsules - otherTotal);
-      const next = prev[id] + delta;
-      if (next < 10 || next > maxForCoffee) return prev;
-      const updated = { ...prev, [id]: next };
-      setBump((b) => ({ ...b, [id]: true }));
-      setTimeout(() => setBump((b) => ({ ...b, [id]: false })), 250);
-      return updated;
-    });
+  const adjustQuantity = (id: string, delta: number) => {
+    const current = selections[id] || 0;
+    setQuantity(id, current + delta);
   };
 
   return (
-    <PageLayout>
-      <div className="mx-auto max-w-7xl px-4 py-10 space-y-10 bg-gradient-to-b from-white to-[#1C2B4A0D]">
-        <h1 className="text-3xl font-bold tracking-tight">
-          <span className="text-[#1C2B4A]">Configure Coffee Subscription</span>
-        </h1>
+    <PageLayout contentClassName="flex-1 relative w-full">
+      <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.10),transparent_22%),radial-gradient(circle_at_top_right,rgba(56,189,248,0.10),transparent_24%),linear-gradient(180deg,#f8fafc_0%,#f8fafc_50%,#eef2ff_100%)]">
+        <div className="max-w-[1820px] mx-auto px-4 sm:px-6 xl:px-10 py-8 space-y-5">
+          <AboHeroHeader
+            title={t('autofix.kb0b660e2')}
+            subtitle={t('autofix.k7f48f374')}
+          />
 
-        {/* Stepper */}
-        <div className="flex items-center gap-3 text-sm text-gray-600">
-          <div className="flex items-center">
-            <span className="h-8 w-8 rounded-full bg-[#1C2B4A] text-white flex items-center justify-center font-semibold">1</span>
-            <span className="ml-2 font-medium">Selection</span>
-          </div>
-          <div className="h-px flex-1 bg-gray-200" />
-          <div className="flex items-center opacity-60">
-            <span className="h-8 w-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-semibold">2</span>
-            <span className="ml-2 font-medium">Summary</span>
-          </div>
+          <AboStepper currentStep={1} />
+
+          <CoffeeSelectionGrid
+            coffees={coffees}
+            loading={loading}
+            error={error}
+            selections={selections}
+            totalPacks={totalPacks}
+            onAdjustQuantity={adjustQuantity}
+            onSetQuantity={setQuantity}
+            title={t('autofix.k0b03e660')}
+          />
+
+          <SelectionSummaryCard
+            selectedEntries={selectedEntries}
+            shippingLoading={shippingLoading}
+            isFreeShippingSelected={isFreeShippingSelected}
+            selectedShippingFee={selectedShippingFee}
+            totalNetWithShipping={totalNetWithShipping}
+            totalCapsules={totalCapsules}
+            totalPacks={totalPacks}
+            orderPackError={orderPackError}
+            remainingMinPacks={remainingMinPacks}
+            canProceed={canProceed}
+            onProceed={proceedToSummary}
+            title={t('autofix.ke7b634f2')}
+            emptyText={t('autofix.kec078e54')}
+            continueText={t('autofix.k02665163')}
+          />
         </div>
-
-        {/* Section 1: Multi coffee selection + per-coffee quantity */}
-        <section>
-          <h2 className="text-xl font-semibold mb-4">1. Select subscription size</h2>
-          <div className="mb-6 rounded-xl border border-[#1C2B4A]/20 p-4 bg-white/80 backdrop-blur-sm shadow-lg">
-            <div className="grid gap-3 sm:grid-cols-2">
-              <button
-                type="button"
-                onClick={() => setSelectedPlanCapsules(60)}
-                className={`rounded-lg border px-4 py-3 text-left transition ${
-                  selectedPlanCapsules === 60
-                    ? 'border-[#1C2B4A] bg-[#1C2B4A]/5 text-[#1C2B4A]'
-                    : 'border-gray-300 hover:bg-gray-50'
-                }`}
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="font-semibold">60 piece abo</div>
-                  {shippingLoading ? (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200">
-                      Shipping…
-                    </span>
-                  ) : shippingFeeFor60 === 0 ? (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200">
-                      FREE SHIPPING
-                    </span>
-                  ) : (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200">
-                      Shipping €{shippingFeeFor60.toFixed(2)}
-                    </span>
-                  )}
-                </div>
-                <div className="text-xs text-gray-600">6 packs of 10 capsules</div>
-              </button>
-              <button
-                type="button"
-                onClick={() => setSelectedPlanCapsules(120)}
-                className={`rounded-lg border px-4 py-3 text-left transition ${
-                  selectedPlanCapsules === 120
-                    ? 'border-[#1C2B4A] bg-[#1C2B4A]/5 text-[#1C2B4A]'
-                    : 'border-gray-300 hover:bg-gray-50'
-                }`}
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="font-semibold">120 piece abo</div>
-                  {shippingLoading ? (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200">
-                      Shipping…
-                    </span>
-                  ) : shippingFeeFor120 === 0 ? (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200">
-                      FREE SHIPPING
-                    </span>
-                  ) : (
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200">
-                      Shipping €{shippingFeeFor120.toFixed(2)}
-                    </span>
-                  )}
-                </div>
-                <div className="text-xs text-gray-600">12 packs of 10 capsules</div>
-              </button>
-            </div>
-
-            {shippingError && (
-              <div className="mt-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
-                Shipping fees could not be loaded: {shippingError}
-              </div>
-            )}
-          </div>
-
-          <h2 className="text-xl font-semibold mb-4">2. Choose coffees & quantities</h2>
-
-          {error && (
-            <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-              {error}
-            </div>
-          )}
-
-          {loading ? (
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
-              <div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
-              <div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
-            </div>
-          ) : (
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-              {coffees.map((coffee) => {
-                const active = coffee.id in selections;
-                const qty = selections[coffee.id] || 0;
-                const remainingCapsules = selectedPlanCapsules - totalCapsules;
-                const maxForCoffee = active
-                  ? Math.min(120, qty + remainingCapsules)
-                  : 0;
-                const sliderMax = Math.max(10, maxForCoffee);
-                const sliderProgress = sliderMax <= 10
-                  ? 100
-                  : Math.min(100, Math.max(0, ((qty - 10) / (sliderMax - 10)) * 100));
-                const canAddCoffee = active || remainingCapsules >= 10;
-                return (
-                  <div
-                    key={coffee.id}
-                    className={`group rounded-xl border p-4 shadow-sm transition ${
-                      active ? 'border-[#1C2B4A] bg-[#1C2B4A]/5 shadow-md' : 'border-gray-200 bg-white'
-                    }`}
-                  >
-                    <div className="relative overflow-hidden rounded-md mb-3">
-                      {coffee.image ? (
-                        <img
-                          src={coffee.image}
-                          alt={coffee.name}
-                          className="h-36 w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                          loading="lazy"
-                        />
-                      ) : (
-                        <div className="h-36 w-full bg-gray-100 rounded-md" />
-                      )}
-                      {/* price badge (per 10) */}
-                      <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
-                        <span
-                          aria-label={`Price €${coffee.pricePer10} per 10 capsules`}
-                          className={`relative inline-flex items-center justify-center rounded-full text-white text-[11px] font-bold px-3 py-1 shadow-lg ring-2 ring-white/50 backdrop-blur-sm transition-transform group-hover:scale-105 ${
-                            active ? 'bg-[#1C2B4A]' : 'bg-[#1C2B4A]/80'
-                          }`}
-                        >
-                          €{coffee.pricePer10}
-                        </span>
-                        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-[#1C2B4A]/90 text-white border border-white/20 shadow-sm backdrop-blur-sm">
-                          per 10 pcs
-                        </span>
-                      </div>
-                    </div>
-                    <div className="flex items-start justify-between">
-                      <h3 className="font-semibold text-sm">{coffee.name}</h3>
-                    </div>
-                    <p className="mt-2 text-xs text-gray-600 leading-relaxed">
-                      {coffee.description}
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() => toggleCoffee(coffee.id)}
-                      disabled={!canAddCoffee}
-                      className={`mt-3 w-full text-xs font-medium rounded px-3 py-2 border transition ${
-                        active
-                          ? 'border-[#1C2B4A] text-[#1C2B4A] bg-white hover:bg-[#1C2B4A]/10'
-                          : canAddCoffee
-                            ? 'border-gray-300 hover:bg-gray-100'
-                            : 'border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
-                      }`}
-                    >
-                      {active ? 'Remove' : 'Add'}
-                    </button>
-                    {active && (
-                      <div className="mt-4 flex flex-col gap-3">
-                        <div className="flex items-center justify-between">
-                          <span className="text-[11px] font-medium text-gray-500">Quantity (10–120)</span>
-                          <span
-                            className={`inline-flex items-center justify-center rounded-full bg-[#1C2B4A] text-white px-3 py-1 text-xs font-semibold transition-transform duration-300 ${bump[coffee.id] ? 'scale-110' : 'scale-100'}`}
-                          >
-                            {qty} pcs
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <button
-                            onClick={() => changeQuantity(coffee.id, -10)}
-                            disabled={qty <= 10}
-                            className="h-8 w-14 rounded-full bg-gray-100 hover:bg-gray-200 text-xs font-medium transition active:scale-95"
-                          >
-                            -10
-                          </button>
-                          <div className="flex-1 relative">
-                            <input
-                              type="range"
-                              min={10}
-                              max={sliderMax}
-                              step={10}
-                              value={qty}
-                              onChange={(e) =>
-                                changeQuantity(coffee.id, parseInt(e.target.value, 10) - qty)
-                              }
-                              className="w-full appearance-none cursor-pointer bg-transparent"
-                              style={{
-                                background:
-                                  'linear-gradient(to right,#1C2B4A 0%,#1C2B4A ' +
-                                  sliderProgress +
-                                  '%,#e5e7eb ' +
-                                  sliderProgress +
-                                  '%,#e5e7eb 100%)',
-                                height: '6px',
-                                borderRadius: '999px',
-                              }}
-                            />
-                          </div>
-                          <button
-                            onClick={() => changeQuantity(coffee.id, +10)}
-                            disabled={qty + 10 > maxForCoffee}
-                            className="h-8 w-14 rounded-full bg-gray-100 hover:bg-gray-200 text-xs font-medium transition active:scale-95"
-                          >
-                            +10
-                          </button>
-                        </div>
-                        <div className="flex items-center justify-between text-[11px] text-gray-500">
-                          <span>Subtotal</span>
-                          <span className="font-semibold text-gray-700">
-                            €{((qty / 10) * coffee.pricePer10).toFixed(2)}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </section>
-
-        {/* Section 2: Compact preview + next steps */}
-        <section>
-          <h2 className="text-xl font-semibold mb-4">3. Preview</h2>
-          <div className="rounded-xl border border-[#1C2B4A]/20 p-6 bg-white/80 backdrop-blur-sm space-y-4 shadow-lg">
-            {selectedEntries.length === 0 && (
-              <p className="text-sm text-gray-600">No coffees selected yet.</p>
-            )}
-            {selectedEntries.map((entry) => (
-              <div key={entry.coffee.id} className="flex justify-between text-sm border-b last:border-b-0 pb-2 last:pb-0">
-                <div className="flex flex-col">
-                  <span className="font-medium">{entry.coffee.name}</span>
-                  <span className="text-xs text-gray-500">
-                    {entry.quantity} Stk •{' '}
-                    <span className="inline-flex items-center font-semibold text-[#1C2B4A]">
-                      €{entry.coffee.pricePer10}/10
-                    </span>
-                  </span>
-                </div>
-                <div className="text-right font-semibold">
-                  €{((entry.quantity / 10) * entry.coffee.pricePer10).toFixed(2)}
-                </div>
-              </div>
-            ))}
-
-            {/* Shipping */}
-            <div className="flex justify-between text-sm border-b pb-2">
-              <span className="text-sm font-medium">Shipping</span>
-              <span className="text-sm font-semibold">
-                {shippingLoading ? (
-                  'Loading…'
-                ) : isFreeShippingSelected ? (
-                  'FREE SHIPPING'
-                ) : (
-                  `€${selectedShippingFee.toFixed(2)}`
-                )}
-              </span>
-            </div>
-
-            <div className="flex justify-between pt-2 border-t">
-              <span className="text-sm font-semibold">Total (net)</span>
-              <span className="text-lg font-extrabold tracking-tight text-[#1C2B4A]">
-                €{totalNetWithShipping.toFixed(2)}
-              </span>
-            </div>
-
-            {/* Packs/capsules summary and validation hint (refined design) */}
-            <div className="text-xs text-gray-700">
-              Selected: {totalCapsules} capsules ({packsSelected} packs of 10). Target: {selectedPlanCapsules} capsules ({requiredPacks} packs).
-              {packsSelected !== requiredPacks && (
-                <span className="ml-2 inline-flex items-center rounded-md bg-red-50 text-red-700 px-2 py-1 border border-red-200">
-                  Please select exactly {selectedPlanCapsules} capsules ({requiredPacks} packs).
-                  {packsSelected < requiredPacks ? ` ${requiredPacks - packsSelected} packs missing.` : ` ${packsSelected - requiredPacks} packs too many.`}
-                </span>
-              )}
-            </div>
-
-            <button
-              onClick={proceedToSummary}
-              disabled={!canProceed}
-              className={`group w-full mt-2 rounded-lg px-4 py-3 font-semibold transition inline-flex items-center justify-center ${
-                canProceed
-                  ? 'bg-[#1C2B4A] text-white hover:bg-[#1C2B4A]/90 shadow-md hover:shadow-lg'
-                  : 'bg-gray-200 text-gray-600 cursor-not-allowed'
-              }`}
-            >
-              Next steps
-              <svg
-                className={`ml-2 h-5 w-5 transition-transform ${
-                  canProceed ? 'group-hover:translate-x-0.5' : ''
-                }`}
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l5.999 6a1 1 0 010 1.414l-6 6a1 1 0 11-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            {!canProceed && (
-              <p className="text-xs text-gray-600">
-                You can continue once exactly {selectedPlanCapsules} capsules ({requiredPacks} packs) are selected.
-              </p>
-            )}
-          </div>
-        </section>
       </div>
     </PageLayout>
   );

src/app/coffee-abonnements/summary/components/SignaturePad.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../../../i18n/useTranslation';
 import React, { useEffect, useRef } from 'react'
 
 type Props = {
@@ -11,6 +14,7 @@ type Props = {
 }
 
 export default function SignaturePad({ value, onChange, className, required = false, error = null }: Props) {
+  const { t } = useTranslation();
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const isDrawing = useRef(false)
 
@@ -163,9 +167,7 @@ export default function SignaturePad({ value, onChange, className, required = fa
           onTouchEnd={endDrawing}
         />
       </div>
-      <p className={`mt-2 text-xs ${error ? 'text-red-700' : 'text-gray-500'}`}>
-        {error || (value ? 'Signature captured.' : 'Draw your signature in the box.')}
-      </p>
+      <p className={`mt-2 text-xs ${error ? 'text-red-700' : 'text-gray-500'}`}>{error || (value ? t('autofix.k352c82ef') : t('autofix.k99595e55'))}</p>
     </div>
   )
 }

src/app/coffee-abonnements/summary/hooks/subscribeAbo.ts

@@ -1,4 +1,5 @@
 import { authFetch } from '../../../utils/authFetch'
+import { getOrderPackError } from '../../lib/orderRules'
 
 export type SubscribeAboItem = { coffeeId: string | number; quantity?: number }
 export type SubscribeAboInput = {
@@ -33,6 +34,9 @@ export type SubscribeAboInput = {
   invoiceCity?: string
   invoicePhone?: string
   invoiceEmail?: string
+  uidNumber?: string
+  atuNumber?: string
+  taxMode?: 'standard_vat' | 'reverse_charge'
   signingCity?: string
   signatureDataUrl?: string
   // logged-in user id
@@ -99,6 +103,9 @@ export async function subscribeAbo(input: SubscribeAboInput) {
     paymentMethod: input.paymentMethod || undefined,
     invoiceByEmail: input.invoiceByEmail ?? false,
     invoiceSameAsShipping: input.invoiceSameAsShipping ?? true,
+    uidNumber: input.uidNumber || undefined,
+    atuNumber: input.atuNumber || undefined,
+    taxMode: input.taxMode || undefined,
     signingCity: input.signingCity || undefined,
     signatureDataUrl: input.signatureDataUrl || undefined,
   }
@@ -117,11 +124,11 @@ export async function subscribeAbo(input: SubscribeAboInput) {
       coffeeId: i.coffeeId,
       quantity: i.quantity != null ? i.quantity : 1,
     }))
-    // NEW: enforce supported package sizes
     const sumPacks = body.items.reduce((s: number, it: any) => s + Number(it.quantity || 0), 0)
-    if (sumPacks !== 6 && sumPacks !== 12) {
-      console.warn('[subscribeAbo] Invalid pack total:', sumPacks, 'expected 6 or 12')
-      throw new Error('Order must contain exactly 6 packs (60 capsules) or 12 packs (120 capsules).')
+    const orderPackError = getOrderPackError(sumPacks)
+    if (orderPackError) {
+      console.warn('[subscribeAbo] Invalid pack total:', sumPacks, orderPackError)
+      throw new Error(orderPackError)
     }
   } else {
     body.coffeeId = input.coffeeId

src/app/community/page.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../i18n/useTranslation';
 import { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import useAuthStore from '../store/authStore'
@@ -17,6 +20,7 @@ import {
 } from '@heroicons/react/24/outline'
 
 export default function CommunityPage() {
+  const { t } = useTranslation();
   const router = useRouter()
   const user = useAuthStore(state => state.user)
   
@@ -113,12 +117,8 @@ export default function CommunityPage() {
         <div className="max-w-7xl mx-auto">
           {/* Header Section */}
           <div className="text-center mb-12">
-            <h1 className="text-4xl font-bold text-gray-900 mb-4">
-              Welcome to Profit Planet Community 🌍
-            </h1>
-            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-              Connect with like-minded individuals, share sustainable practices, and make a positive impact together.
-            </p>
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('autofix.k08c92a12')}</h1>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{t('autofix.k3c32c87f')}</p>
           </div>
 
           {/* Community Stats */}
@@ -139,12 +139,8 @@ export default function CommunityPage() {
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                 <div className="flex items-center justify-between mb-6">
                   <h2 className="text-xl font-semibold text-gray-900 flex items-center">
-                    <TrophyIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
-                    Trending Groups
-                  </h2>
-                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium flex items-center">
-                    View All
-                    <ArrowRightIcon className="h-4 w-4 ml-1" />
+                    <TrophyIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />{t('autofix.k5c598bc0')}</h2>
+                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium flex items-center">{t('autofix.k16b60f69')}<ArrowRightIcon className="h-4 w-4 ml-1" />
                   </button>
                 </div>
 
@@ -160,9 +156,7 @@ export default function CommunityPage() {
                           <p className="text-xs text-gray-500">{group.members} members</p>
                         </div>
                       </div>
-                      <button className="w-full mt-3 px-3 py-2 bg-[#8D6B1D]/10 text-[#8D6B1D] rounded-lg text-sm font-medium hover:bg-[#8D6B1D]/20 transition-colors">
-                        Join Group
-                      </button>
+                      <button className="w-full mt-3 px-3 py-2 bg-[#8D6B1D]/10 text-[#8D6B1D] rounded-lg text-sm font-medium hover:bg-[#8D6B1D]/20 transition-colors">{t('autofix.k15da24d8')}</button>
                     </div>
                   ))}
                 </div>
@@ -172,12 +166,8 @@ export default function CommunityPage() {
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                 <div className="flex items-center justify-between mb-6">
                   <h2 className="text-xl font-semibold text-gray-900 flex items-center">
-                    <ChatBubbleLeftRightIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />
-                    Recent Discussions
-                  </h2>
-                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium">
-                    Start Discussion
-                  </button>
+                    <ChatBubbleLeftRightIcon className="h-6 w-6 text-[#8D6B1D] mr-2" />{t('autofix.k70bcafbd')}</h2>
+                  <button className="text-[#8D6B1D] hover:text-[#7A5E1A] text-sm font-medium">{t('autofix.k9c3db145')}</button>
                 </div>
 
                 <div className="space-y-6">
@@ -220,41 +210,35 @@ export default function CommunityPage() {
             <div className="space-y-6">
               {/* Quick Actions */}
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-                <h3 className="font-semibold text-gray-900 mb-4">Quick Actions</h3>
+                <h3 className="font-semibold text-gray-900 mb-4">{t('autofix.k52af8b8d')}</h3>
                 <div className="space-y-3">
                   <button className="w-full flex items-center justify-center px-4 py-3 bg-[#8D6B1D] text-white rounded-lg hover:bg-[#7A5E1A] transition-colors">
-                    <PlusIcon className="h-4 w-4 mr-2" />
-                    Create Group
-                  </button>
+                    <PlusIcon className="h-4 w-4 mr-2" />{t('autofix.k6a486e3e')}</button>
                   <button className="w-full flex items-center justify-center px-4 py-3 border border-[#8D6B1D] text-[#8D6B1D] rounded-lg hover:bg-[#8D6B1D]/10 transition-colors">
-                    <ChatBubbleLeftRightIcon className="h-4 w-4 mr-2" />
-                    Start Discussion
-                  </button>
+                    <ChatBubbleLeftRightIcon className="h-4 w-4 mr-2" />{t('autofix.k9c3db145')}</button>
                   <button 
                     onClick={() => router.push('/dashboard')}
                     className="w-full flex items-center justify-center px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-                  >
-                    Go to Dashboard
-                  </button>
+                  >{t('autofix.kd00443f2')}</button>
                 </div>
               </div>
 
               {/* My Groups */}
               <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-                <h3 className="font-semibold text-gray-900 mb-4">My Groups</h3>
+                <h3 className="font-semibold text-gray-900 mb-4">{t('autofix.k26ecadfd')}</h3>
                 <div className="space-y-3">
                   <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                     <div className="text-lg">🌱</div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">Eco Warriors</p>
-                      <p className="text-xs text-gray-500">1,284 members</p>
+                      <p className="text-sm font-medium text-gray-900">{t('autofix.k58424b1d')}</p>
+                      <p className="text-xs text-gray-500">{t('autofix.kaf787fe5')}</p>
                     </div>
                   </div>
                   <div className="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                     <div className="text-lg">♻️</div>
                     <div>
-                      <p className="text-sm font-medium text-gray-900">Zero Waste Living</p>
-                      <p className="text-xs text-gray-500">892 members</p>
+                      <p className="text-sm font-medium text-gray-900">{t('autofix.k6de13000')}</p>
+                      <p className="text-xs text-gray-500">{t('autofix.k258c3515')}</p>
                     </div>
                   </div>
                 </div>
@@ -262,16 +246,14 @@ export default function CommunityPage() {
 
               {/* Community Guidelines */}
               <div className="bg-gradient-to-br from-[#8D6B1D]/10 to-[#C49225]/10 rounded-lg p-6 border border-[#8D6B1D]/20">
-                <h3 className="font-semibold text-gray-900 mb-2">Community Guidelines</h3>
+                <h3 className="font-semibold text-gray-900 mb-2">{t('autofix.k961ba411')}</h3>
                 <ul className="text-sm text-gray-700 space-y-1">
-                  <li>• Be respectful and kind</li>
-                  <li>• Stay on topic</li>
-                  <li>• Share authentic experiences</li>
-                  <li>• Help others learn and grow</li>
+                  <li>{t('autofix.kccf7593a')}</li>
+                  <li>{t('autofix.kf69154f8')}</li>
+                  <li>{t('autofix.k483aa95a')}</li>
+                  <li>{t('autofix.k75d83433')}</li>
                 </ul>
-                <button className="text-xs text-[#8D6B1D] hover:underline mt-3">
-                  Read full guidelines
-                </button>
+                <button className="text-xs text-[#8D6B1D] hover:underline mt-3">{t('autofix.k6aa2d843')}</button>
               </div>
             </div>
           </div>

src/app/components/LanguageSwitcher.tsx

@@ -3,93 +3,79 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { useTranslation } from '../i18n/useTranslation';
-import { SUPPORTED_LANGUAGES, LANGUAGE_NAMES } from '../i18n/config';
+
+interface LangEntry { code: string; name: string }
 
 interface LanguageSwitcherProps {
   variant?: 'light' | 'dark';
 }
 
-// Flag Icons mit Emoji (viel sauberer als selbst gezeichnete CSS-Flaggen)
-const FlagIcon = ({ countryCode, className = "size-5" }: { countryCode: string; className?: string }) => {
-  const flags = {
-    'de': '🇩🇪',
-    'en': '🇬🇧'
-  };
-  
-  return (
-    <span className={`${className} flex items-center justify-center text-base`}>
-      {flags[countryCode as keyof typeof flags] || '🏳️'}
-    </span>
-  );
-};
-
 export default function LanguageSwitcher({ variant = 'light' }: LanguageSwitcherProps) {
-  const { language, setLanguage } = useTranslation();
+  const { language, setLanguage, languages } = useTranslation();
 
-  const getButtonStyles = () => {
-    if (variant === 'dark') {
-      return 'inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white inset-ring-1 inset-ring-white/5 hover:bg-white/20';
-    }
-    return 'inline-flex w-full justify-center gap-x-1.5 rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 hover:bg-gray-200';
-  };
+  const allLangs: LangEntry[] = languages.map((lang) => ({
+    code: lang.code,
+    name: lang.name,
+  }));
 
-  const getMenuStyles = () => {
-    if (variant === 'dark') {
-      return 'absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-white/10 rounded-md bg-gray-800 outline-1 -outline-offset-1 outline-white/10 transition data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in';
-    }
-    return 'absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white outline-1 -outline-offset-1 outline-gray-200 transition data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in';
-  };
+  const activeLang: LangEntry =
+    allLangs.find((l) => l.code === language) ?? { code: language, name: language };
 
-  const getItemStyles = (isActive: boolean) => {
-    if (variant === 'dark') {
-      return `group flex items-center px-4 py-2 text-sm ${
-        isActive 
-          ? 'bg-[#8D6B1D] text-white' 
-          : 'text-gray-300 data-focus:bg-white/5 data-focus:text-white data-focus:outline-hidden'
-      }`;
-    }
-    return `group flex items-center px-4 py-2 text-sm ${
-      isActive 
-        ? 'bg-[#8D6B1D] text-white' 
-        : 'text-gray-700 data-focus:bg-gray-100 data-focus:text-gray-900 data-focus:outline-hidden'
-    }`;
-  };
+  const buttonCls =
+    variant === 'dark'
+      ? 'group inline-flex min-w-[168px] items-center justify-between gap-3 rounded-xl border border-white/15 bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm backdrop-blur-sm transition hover:bg-white/15 data-[open]:bg-white/15 data-[open]:border-white/25'
+      : 'group inline-flex min-w-[176px] items-center justify-between gap-3 rounded-2xl border border-white/80 bg-white/75 px-3.5 py-2.5 text-sm font-semibold text-slate-900 shadow-[0_18px_45px_-28px_rgba(15,23,42,0.32)] backdrop-blur-md transition hover:border-white hover:bg-white/90 hover:shadow-[0_24px_60px_-32px_rgba(15,23,42,0.36)] data-[open]:border-white data-[open]:bg-white/92 data-[open]:shadow-[0_24px_60px_-32px_rgba(15,23,42,0.36)]';
+
+  const menuCls =
+    variant === 'dark'
+      ? 'absolute right-0 z-50 mt-2.5 w-60 origin-top-right rounded-2xl border border-white/15 bg-slate-900/95 p-1.5 shadow-2xl backdrop-blur-md transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in'
+      : 'absolute right-0 z-50 mt-3 w-64 origin-top-right rounded-[24px] border border-white/80 bg-white/88 p-2 shadow-[0_28px_80px_-38px_rgba(15,23,42,0.4)] backdrop-blur-xl transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in';
+
+  const itemCls = (isActive: boolean) =>
+    variant === 'dark'
+      ? `flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition ${isActive ? 'bg-[#8D6B1D]/25 text-white ring-1 ring-[#8D6B1D]/50' : 'text-slate-200 hover:bg-white/10 hover:text-white'}`
+      : `flex w-full items-center gap-3 rounded-2xl px-3.5 py-3 text-sm transition ${isActive ? 'bg-gradient-to-r from-[#8D6B1D]/12 via-amber-100/70 to-white/80 text-[#6f5416] ring-1 ring-[#8D6B1D]/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.85)]' : 'text-slate-700 hover:bg-white/75 hover:text-slate-900'}`;
 
   return (
     <Menu as="div" className="relative inline-block">
-      <MenuButton className={getButtonStyles()}>
-        <FlagIcon countryCode={language} className="size-4" />
-        {LANGUAGE_NAMES[language]}
-        <ChevronDownIcon aria-hidden="true" className="-mr-1 size-5 text-gray-500" />
+      <MenuButton className={buttonCls}>
+        <span className="inline-flex items-center gap-2 min-w-0">
+          <span className="truncate">{activeLang.name}</span>
+          <span
+            className={
+              variant === 'dark'
+                ? 'rounded-md bg-white/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white/80'
+                : 'rounded-full border border-white/80 bg-white/70 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.18em] text-slate-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]'
+            }
+          >
+            {activeLang.code}
+          </span>
+        </span>
+        <ChevronDownIcon aria-hidden="true" className="size-4 shrink-0 opacity-70 transition group-data-[open]:rotate-180" />
       </MenuButton>
 
-      <MenuItems
-        transition
-        className={getMenuStyles()}
-      >
-        <div className="py-1">
-          {SUPPORTED_LANGUAGES.map((lang) => (
-            <MenuItem key={lang}>
-              <button
-                onClick={() => setLanguage(lang)}
-                className={getItemStyles(language === lang)}
+      <MenuItems transition className={menuCls}>
+        {allLangs.map((lang) => (
+          <MenuItem key={lang.code}>
+            <button onClick={() => setLanguage(lang.code)} className={itemCls(language === lang.code)}>
+              <span className="flex-1 text-left truncate">{lang.name}</span>
+              <span
+                className={
+                  variant === 'dark'
+                    ? 'rounded-md bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white/75'
+                    : 'rounded-full border border-white/75 bg-white/65 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500'
+                }
               >
-                <FlagIcon 
-                  countryCode={lang} 
-                  className={`mr-3 size-5 ${
-                    variant === 'dark' 
-                      ? (language === lang ? 'opacity-100' : 'opacity-70 group-data-focus:opacity-100')
-                      : (language === lang ? 'opacity-100' : 'opacity-80 group-data-focus:opacity-100')
-                  }`} 
-                />
-                <span className="flex-1 text-left">{LANGUAGE_NAMES[lang]}</span>
-                {language === lang && (
-                  <span className="ml-2 text-xs font-bold">✓</span>
-                )}
-              </button>
-            </MenuItem>
-          ))}
-        </div>
+                {lang.code}
+              </span>
+              {language === lang.code && (
+                <span className={variant === 'dark' ? 'text-[11px] font-bold text-amber-300' : 'text-[11px] font-bold text-[#8D6B1D]'}>
+                  ✓
+                </span>
+              )}
+            </button>
+          </MenuItem>
+        ))}
       </MenuItems>
     </Menu>
   );

src/app/components/PageLayout.tsx

@@ -6,6 +6,8 @@ import Header from './nav/Header';
 import Footer from './Footer';
 import PageTransitionEffect from './animation/pageTransitionEffect';
 
+import { useTranslation } from '../i18n/useTranslation';
+
 // Utility to detect mobile devices
 function isMobileDevice() {
   if (typeof navigator === 'undefined') return false;
@@ -27,6 +29,7 @@ export default function PageLayout({
   className = 'bg-white text-gray-900', 
   contentClassName = 'flex-1 relative z-10 w-full',
 }: PageLayoutProps) {
+  const { t } = useTranslation();
   const isMobile = isMobileDevice();
   const [isLoggingOut, setIsLoggingOut] = useState(false); // NEW
   const pathname = usePathname();
@@ -72,7 +75,7 @@ export default function PageLayout({
         <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/60 backdrop-blur-sm">
           <div className="flex flex-col items-center gap-3 text-white">
             <div className="h-10 w-10 rounded-full border-2 border-white/30 border-t-white animate-spin" />
-            <p className="text-sm font-medium">Logging you out...</p>
+            <p className="text-sm font-medium">{t('autofix.kb1c1c0e5')}</p>
           </div>
         </div>
       )}

src/app/components/TutorialModal.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+
+
+import { useTranslation } from '../i18n/useTranslation';
 import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import {
@@ -44,6 +47,7 @@ export default function TutorialModal({
   onNext, 
   onPrevious 
 }: TutorialModalProps) {
+  const { t } = useTranslation();
   const step = steps[currentStep - 1]
   
   if (!step) return null
@@ -194,17 +198,13 @@ export default function TutorialModal({
                               ? 'text-slate-50 cursor-default' 
                               : 'text-gray-500 hover:text-gray-700'
                           }`}
-                        >
-                          ← Go back
-                        </button>
+                        >{t('autofix.kccc13f16')}</button>
                         {!isLastStep && (
                           <button
                             type="button"
                             onClick={onNext}
                             className="text-xs font-semibold text-blue-600 hover:text-blue-700 transition-colors"
-                          >
-                            Continue →
-                          </button>
+                          >{t('autofix.ka3cbb536')}</button>
                         )}
                       </div>
                     )}
@@ -214,7 +214,7 @@ export default function TutorialModal({
                   <div className="relative hidden lg:flex lg:flex-1 mt-4 lg:mt-0 h-32 lg:h-full lg:min-h-[150px] items-end justify-end">
                     {/* <img 
                       src="/images/misc/cow.png" 
-                      alt="Profit Planet Mascot" 
+                      alt={t('autofix.kcc1c5596')} 
                       className="max-h-full max-w-full object-contain opacity-90 pl-30"
                     /> */}
                   </div>