A lot of change in this commit. Changing the dashboard to get more data and the new features added

public/i18n.js

@@ -8,6 +8,8 @@
 const SUPPORTED_LOCALES = ['de', 'en', 'es', 'fr', 'it', 'sv', 'el', 'ru', 'tr', 'zh', 'ja', 'ar', 'hi', 'pt', 'uk'];
 const DEFAULT_LOCALE = 'de';
 const STORAGE_KEY = 'oikos-locale';
+const DATE_FORMAT_KEY = 'oikos-date-format';
+const DEFAULT_DATE_FORMAT = 'mdy';
 
 let currentLocale = DEFAULT_LOCALE;
 let translations = {};
@@ -78,6 +80,28 @@ export function t(key, params = {}) {
   return str;
 }
 
+function isDateOnlyString(value) {
+  return typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value);
+}
+
+function getDateFormatPreference() {
+  const stored = localStorage.getItem(DATE_FORMAT_KEY);
+  return ['mdy', 'dmy', 'ymd'].includes(stored) ? stored : DEFAULT_DATE_FORMAT;
+}
+
+function formatDateParts(date, useUtc = false) {
+  const d = date instanceof Date ? date : new Date(date);
+  if (isNaN(d.getTime())) return '';
+  const year = useUtc ? d.getUTCFullYear() : d.getFullYear();
+  const month = String((useUtc ? d.getUTCMonth() : d.getMonth()) + 1).padStart(2, '0');
+  const day = String(useUtc ? d.getUTCDate() : d.getDate()).padStart(2, '0');
+  switch (getDateFormatPreference()) {
+    case 'dmy': return `${day}/${month}/${year}`;
+    case 'ymd': return `${year}-${month}-${day}`;
+    default: return `${month}/${day}/${year}`;
+  }
+}
+
 /** Aktuelle Locale abfragen */
 export function getLocale() {
   return currentLocale;
@@ -91,13 +115,10 @@ export function getSupportedLocales() {
 /** Datum locale-aware formatieren */
 export function formatDate(date) {
   if (date == null) return '';
-  const d = date instanceof Date ? date : new Date(date);
-  if (isNaN(d.getTime())) return '';
-  return new Intl.DateTimeFormat(currentLocale, {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  }).format(d);
+  if (isDateOnlyString(date)) {
+    return formatDateParts(new Date(`${date}T00:00:00Z`), true);
+  }
+  return formatDateParts(date);
 }
 
 /** Uhrzeit locale-aware formatieren */

public/locales/ar.json

@@ -83,6 +83,19 @@
     "allDay": "طوال اليوم",
     "shoppingMore": "+{{count}} أخرى",
     "weather": "الطقس",
+    "familyMembers": "أفراد العائلة",
+    "participantsAdded": "مشاركون مضافون",
+    "upcomingBirthdays": "أعياد الميلاد القادمة",
+    "noBirthdays": "لا توجد أعياد ميلاد بعد",
+    "daysLeft": "{{count}} أيام",
+    "budgetOverview": "نظرة عامة على الميزانية",
+    "monthlyIncome": "الدخل",
+    "monthlyExpenses": "المصروفات",
+    "monthlyBalance": "الرصيد",
+    "savingsRate": "معدل الادخار",
+    "topExpense": "أكبر مصروف",
+    "budgetEntries": "القيود",
+    "noBudgetData": "لا توجد بيانات ميزانية لهذا الشهر.",
     "customize": "تخصيص",
     "customizeTitle": "تخصيص الأدوات",
     "customizeReset": "الافتراضي",
@@ -537,6 +550,7 @@
     "tabAccount": "الحساب",
     "tabsAriaLabel": "أقسام الإعدادات",
     "sectionDesign": "التصميم",
+    "sectionAppName": "اسم التطبيق",
     "sectionShopping": "التسوق",
     "shoppingCategoriesLabel": "فئات التسوق",
     "shoppingCategoriesHint": "إضافة الفئات أو إعادة تسميتها أو حذفها أو ترتيبها.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "مزامنة التقويم",
     "sectionFamily": "أفراد العائلة",
     "cardAppearance": "المظهر",
+    "appNameTitle": "اسم التطبيق",
+    "appNameLabel": "اسم التطبيق",
+    "appNameHint": "يظهر هذا الاسم في الشريط الجانبي وعنوان المتصفح وشاشة تسجيل الدخول.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "تم حفظ اسم التطبيق.",
+    "sectionDate": "التاريخ",
+    "dateFormatTitle": "تنسيق التاريخ",
+    "dateFormatLabel": "تنسيق التاريخ المفضل",
+    "dateFormatHint": "اختر كيف تظهر التواريخ في التطبيق.",
+    "dateFormatSavedToast": "تم حفظ تنسيق التاريخ.",
     "themeSystem": "النظام",
     "themeSysLabel": "استخدام إعداد النظام",
     "themeLight": "فاتح",

public/locales/de.json

@@ -89,6 +89,19 @@
     "allDay": "Ganztägig",
     "shoppingMore": "+{{count}} weitere",
     "weather": "Wetter",
+    "familyMembers": "Familienmitglieder",
+    "participantsAdded": "Teilnehmer hinzugefügt",
+    "upcomingBirthdays": "Nächste Geburtstage",
+    "noBirthdays": "Noch keine Geburtstage",
+    "daysLeft": "{{count}} Tage",
+    "budgetOverview": "Budgetübersicht",
+    "monthlyIncome": "Einnahmen",
+    "monthlyExpenses": "Ausgaben",
+    "monthlyBalance": "Saldo",
+    "savingsRate": "Sparquote",
+    "topExpense": "Größte Ausgabe",
+    "budgetEntries": "Einträge",
+    "noBudgetData": "Keine Budgetdaten in diesem Monat.",
     "customize": "Anpassen",
     "customizeTitle": "Widgets anpassen",
     "customizeReset": "Standard",
@@ -543,6 +556,7 @@
     "tabAccount": "Konto",
     "tabsAriaLabel": "Einstellungsbereiche",
     "sectionDesign": "Design",
+    "sectionAppName": "Anwendungsname",
     "sectionShopping": "Einkauf",
     "shoppingCategoriesLabel": "Einkaufskategorien",
     "shoppingCategoriesHint": "Kategorien hinzufügen, umbenennen, löschen oder sortieren.",
@@ -560,6 +574,16 @@
     "sectionCalendarSync": "Kalender-Synchronisation",
     "sectionFamily": "Familienmitglieder",
     "cardAppearance": "Darstellung",
+    "appNameTitle": "App-Name",
+    "appNameLabel": "Anwendungsname",
+    "appNameHint": "Dieser Name erscheint in der Seitenleiste, im Browser-Titel und auf dem Login-Bildschirm.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Anwendungsname gespeichert.",
+    "sectionDate": "Datum",
+    "dateFormatTitle": "Datumsformat",
+    "dateFormatLabel": "Bevorzugtes Datumsformat",
+    "dateFormatHint": "Wähle, wie Daten in der App angezeigt werden.",
+    "dateFormatSavedToast": "Datumsformat gespeichert.",
     "themeSystem": "System",
     "themeSysLabel": "System-Einstellung verwenden",
     "themeLight": "Hell",

public/locales/el.json

@@ -83,6 +83,19 @@
     "allDay": "Όλη μέρα",
     "shoppingMore": "+{{count}} ακόμα",
     "weather": "Καιρός",
+    "familyMembers": "Μέλη οικογένειας",
+    "participantsAdded": "συμμετέχοντες προστέθηκαν",
+    "upcomingBirthdays": "Επόμενα γενέθλια",
+    "noBirthdays": "Δεν υπάρχουν γενέθλια ακόμα",
+    "daysLeft": "{{count}} ημέρες",
+    "budgetOverview": "Επισκόπηση προϋπολογισμού",
+    "monthlyIncome": "Έσοδα",
+    "monthlyExpenses": "Έξοδα",
+    "monthlyBalance": "Υπόλοιπο",
+    "savingsRate": "Ποσοστό αποταμίευσης",
+    "topExpense": "Μεγαλύτερο έξοδο",
+    "budgetEntries": "Καταχωρήσεις",
+    "noBudgetData": "Δεν υπάρχουν δεδομένα προϋπολογισμού αυτόν τον μήνα.",
     "customize": "Προσαρμογή",
     "customizeTitle": "Προσαρμογή widgets",
     "customizeReset": "Επαναφορά",
@@ -537,6 +550,7 @@
     "tabAccount": "Λογαριασμός",
     "tabsAriaLabel": "Τμήματα ρυθμίσεων",
     "sectionDesign": "Εμφάνιση",
+    "sectionAppName": "Όνομα εφαρμογής",
     "sectionShopping": "Αγορές",
     "shoppingCategoriesLabel": "Κατηγορίες αγορών",
     "shoppingCategoriesHint": "Προσθέστε, μετονομάστε, διαγράψτε ή ταξινομήστε κατηγορίες.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Συγχρονισμός ημερολογίου",
     "sectionFamily": "Μέλη οικογένειας",
     "cardAppearance": "Εμφάνιση",
+    "appNameTitle": "Όνομα εφαρμογής",
+    "appNameLabel": "Όνομα εφαρμογής",
+    "appNameHint": "Αυτό το όνομα εμφανίζεται στην πλαϊνή μπάρα, στον τίτλο του προγράμματος περιήγησης και στην οθόνη σύνδεσης.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Το όνομα εφαρμογής αποθηκεύτηκε.",
+    "sectionDate": "Ημερομηνία",
+    "dateFormatTitle": "Μορφή ημερομηνίας",
+    "dateFormatLabel": "Προτιμώμενη μορφή ημερομηνίας",
+    "dateFormatHint": "Επιλέξτε πώς εμφανίζονται οι ημερομηνίες στην εφαρμογή.",
+    "dateFormatSavedToast": "Η μορφή ημερομηνίας αποθηκεύτηκε.",
     "themeSystem": "Σύστημα",
     "themeSysLabel": "Χρήση ρύθμισης συστήματος",
     "themeLight": "Ανοιχτό",

public/locales/en.json

@@ -83,6 +83,19 @@
     "allDay": "All day",
     "shoppingMore": "+{{count}} more",
     "weather": "Weather",
+    "familyMembers": "Family members",
+    "participantsAdded": "participants added",
+    "upcomingBirthdays": "Upcoming birthdays",
+    "noBirthdays": "No birthdays yet",
+    "daysLeft": "{{count}} days",
+    "budgetOverview": "Budget overview",
+    "monthlyIncome": "Income",
+    "monthlyExpenses": "Expenses",
+    "monthlyBalance": "Balance",
+    "savingsRate": "Savings rate",
+    "topExpense": "Top expense",
+    "budgetEntries": "Entries",
+    "noBudgetData": "No budget data this month.",
     "customize": "Customize",
     "customizeTitle": "Customize widgets",
     "customizeReset": "Reset",
@@ -537,6 +550,7 @@
     "tabAccount": "Account",
     "tabsAriaLabel": "Settings sections",
     "sectionDesign": "Appearance",
+    "sectionAppName": "Application name",
     "sectionShopping": "Shopping",
     "shoppingCategoriesLabel": "Shopping Categories",
     "shoppingCategoriesHint": "Add, rename, delete or reorder categories.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Calendar Sync",
     "sectionFamily": "Family Members",
     "cardAppearance": "Display",
+    "appNameTitle": "App name",
+    "appNameLabel": "Application name",
+    "appNameHint": "This name appears in the sidebar, browser title and login screen.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Application name saved.",
+    "sectionDate": "Date",
+    "dateFormatTitle": "Date format",
+    "dateFormatLabel": "Preferred date format",
+    "dateFormatHint": "Choose how dates are displayed throughout the app.",
+    "dateFormatSavedToast": "Date format saved.",
     "themeSystem": "System",
     "themeSysLabel": "Use system setting",
     "themeLight": "Light",

public/locales/es.json

@@ -83,6 +83,19 @@
     "allDay": "Todo el día",
     "shoppingMore": "+{{count}} más",
     "weather": "Clima",
+    "familyMembers": "Miembros de la familia",
+    "participantsAdded": "participantes añadidos",
+    "upcomingBirthdays": "Próximos cumpleaños",
+    "noBirthdays": "Aún no hay cumpleaños",
+    "daysLeft": "{{count}} días",
+    "budgetOverview": "Resumen del presupuesto",
+    "monthlyIncome": "Ingresos",
+    "monthlyExpenses": "Gastos",
+    "monthlyBalance": "Saldo",
+    "savingsRate": "Tasa de ahorro",
+    "topExpense": "Mayor gasto",
+    "budgetEntries": "Movimientos",
+    "noBudgetData": "No hay datos de presupuesto este mes.",
     "customize": "Personalizar",
     "customizeTitle": "Personalizar widgets",
     "customizeReset": "Restablecer",
@@ -537,6 +550,7 @@
     "tabAccount": "Cuenta",
     "tabsAriaLabel": "Secciones de configuración",
     "sectionDesign": "Diseño",
+    "sectionAppName": "Nombre de la aplicación",
     "sectionShopping": "Compras",
     "shoppingCategoriesLabel": "Categorías de compra",
     "shoppingCategoriesHint": "Añade, renombra, elimina u ordena las categorías.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Sincronización de calendario",
     "sectionFamily": "Miembros de la familia",
     "cardAppearance": "Apariencia",
+    "appNameTitle": "Nombre de la app",
+    "appNameLabel": "Nombre de la aplicación",
+    "appNameHint": "Este nombre aparece en la barra lateral, el título del navegador y la pantalla de inicio de sesión.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Nombre de la aplicación guardado.",
+    "sectionDate": "Fecha",
+    "dateFormatTitle": "Formato de fecha",
+    "dateFormatLabel": "Formato de fecha preferido",
+    "dateFormatHint": "Elige cómo se muestran las fechas en toda la app.",
+    "dateFormatSavedToast": "Formato de fecha guardado.",
     "themeSystem": "Sistema",
     "themeSysLabel": "Usar configuración del sistema",
     "themeLight": "Claro",

public/locales/fr.json

@@ -83,6 +83,19 @@
     "allDay": "Toute la journée",
     "shoppingMore": "+{{count}} de plus",
     "weather": "Météo",
+    "familyMembers": "Membres de la famille",
+    "participantsAdded": "participants ajoutés",
+    "upcomingBirthdays": "Prochains anniversaires",
+    "noBirthdays": "Aucun anniversaire pour l'instant",
+    "daysLeft": "{{count}} jours",
+    "budgetOverview": "Aperçu du budget",
+    "monthlyIncome": "Revenus",
+    "monthlyExpenses": "Dépenses",
+    "monthlyBalance": "Solde",
+    "savingsRate": "Taux d'épargne",
+    "topExpense": "Plus grosse dépense",
+    "budgetEntries": "Écritures",
+    "noBudgetData": "Aucune donnée de budget ce mois-ci.",
     "customize": "Personnaliser",
     "customizeTitle": "Personnaliser les widgets",
     "customizeReset": "Réinitialiser",
@@ -537,6 +550,7 @@
     "tabAccount": "Compte",
     "tabsAriaLabel": "Sections des paramètres",
     "sectionDesign": "Apparence",
+    "sectionAppName": "Nom de l'application",
     "sectionShopping": "Courses",
     "shoppingCategoriesLabel": "Catégories de courses",
     "shoppingCategoriesHint": "Ajoutez, renommez, supprimez ou réorganisez les catégories.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Synchronisation du calendrier",
     "sectionFamily": "Membres de la famille",
     "cardAppearance": "Affichage",
+    "appNameTitle": "Nom de l'application",
+    "appNameLabel": "Nom de l'application",
+    "appNameHint": "Ce nom apparaît dans la barre latérale, le titre du navigateur et l'écran de connexion.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Nom de l'application enregistré.",
+    "sectionDate": "Date",
+    "dateFormatTitle": "Format de date",
+    "dateFormatLabel": "Format de date préféré",
+    "dateFormatHint": "Choisissez comment les dates sont affichées dans l'application.",
+    "dateFormatSavedToast": "Format de date enregistré.",
     "themeSystem": "Système",
     "themeSysLabel": "Utiliser le paramètre système",
     "themeLight": "Clair",

public/locales/hi.json

@@ -83,6 +83,19 @@
     "allDay": "पूरे दिन",
     "shoppingMore": "+{{count}} और",
     "weather": "मौसम",
+    "familyMembers": "परिवार के सदस्य",
+    "participantsAdded": "प्रतिभागी जोड़े गए",
+    "upcomingBirthdays": "आने वाले जन्मदिन",
+    "noBirthdays": "अभी कोई जन्मदिन नहीं",
+    "daysLeft": "{{count}} दिन",
+    "budgetOverview": "बजट अवलोकन",
+    "monthlyIncome": "आय",
+    "monthlyExpenses": "खर्च",
+    "monthlyBalance": "शेष",
+    "savingsRate": "बचत दर",
+    "topExpense": "सबसे बड़ा खर्च",
+    "budgetEntries": "प्रविष्टियां",
+    "noBudgetData": "इस महीने बजट डेटा नहीं है।",
     "customize": "अनुकूलित करें",
     "customizeTitle": "विजेट अनुकूलित करें",
     "customizeReset": "डिफ़ॉल्ट",
@@ -537,6 +550,7 @@
     "tabAccount": "खाता",
     "tabsAriaLabel": "सेटिंग्स अनुभाग",
     "sectionDesign": "डिज़ाइन",
+    "sectionAppName": "ऐप का नाम",
     "sectionShopping": "खरीदारी",
     "shoppingCategoriesLabel": "खरीदारी श्रेणियां",
     "shoppingCategoriesHint": "श्रेणियां जोड़ें, नाम बदलें, हटाएं या क्रम बदलें।",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "कैलेंडर सिंक",
     "sectionFamily": "परिवार के सदस्य",
     "cardAppearance": "दिखावट",
+    "appNameTitle": "ऐप का नाम",
+    "appNameLabel": "ऐप का नाम",
+    "appNameHint": "यह नाम साइडबार, ब्राउज़र शीर्षक और लॉगिन स्क्रीन में दिखाई देगा।",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "ऐप का नाम सहेजा गया।",
+    "sectionDate": "तारीख",
+    "dateFormatTitle": "तारीख प्रारूप",
+    "dateFormatLabel": "पसंदीदा तारीख प्रारूप",
+    "dateFormatHint": "चुनें कि ऐप में तारीखें कैसे दिखाई दें।",
+    "dateFormatSavedToast": "तारीख प्रारूप सहेजा गया।",
     "themeSystem": "सिस्टम",
     "themeSysLabel": "सिस्टम सेटिंग का उपयोग करें",
     "themeLight": "हल्का",

public/locales/it.json

@@ -83,6 +83,19 @@
     "allDay": "Tutto il giorno",
     "shoppingMore": "+{{count}} altri",
     "weather": "Meteo",
+    "familyMembers": "Membri della famiglia",
+    "participantsAdded": "partecipanti aggiunti",
+    "upcomingBirthdays": "Prossimi compleanni",
+    "noBirthdays": "Ancora nessun compleanno",
+    "daysLeft": "{{count}} giorni",
+    "budgetOverview": "Panoramica budget",
+    "monthlyIncome": "Entrate",
+    "monthlyExpenses": "Uscite",
+    "monthlyBalance": "Saldo",
+    "savingsRate": "Tasso di risparmio",
+    "topExpense": "Spesa principale",
+    "budgetEntries": "Movimenti",
+    "noBudgetData": "Nessun dato di budget questo mese.",
     "customize": "Personalizza",
     "customizeTitle": "Personalizza widget",
     "customizeReset": "Ripristina",
@@ -537,6 +550,7 @@
     "tabAccount": "Account",
     "tabsAriaLabel": "Sezioni impostazioni",
     "sectionDesign": "Aspetto",
+    "sectionAppName": "Nome dell'applicazione",
     "sectionShopping": "Spesa",
     "shoppingCategoriesLabel": "Categorie spesa",
     "shoppingCategoriesHint": "Aggiungi, rinomina, elimina o riordina le categorie.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Sincronizzazione calendario",
     "sectionFamily": "Membri della famiglia",
     "cardAppearance": "Visualizzazione",
+    "appNameTitle": "Nome dell'app",
+    "appNameLabel": "Nome dell'applicazione",
+    "appNameHint": "Questo nome appare nella barra laterale, nel titolo del browser e nella schermata di accesso.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Nome dell'applicazione salvato.",
+    "sectionDate": "Data",
+    "dateFormatTitle": "Formato data",
+    "dateFormatLabel": "Formato data preferito",
+    "dateFormatHint": "Scegli come vengono mostrate le date nell'app.",
+    "dateFormatSavedToast": "Formato data salvato.",
     "themeSystem": "Sistema",
     "themeSysLabel": "Usa impostazione di sistema",
     "themeLight": "Chiaro",

public/locales/ja.json

@@ -83,6 +83,19 @@
     "allDay": "終日",
     "shoppingMore": "+{{count}} 件",
     "weather": "天気",
+    "familyMembers": "家族メンバー",
+    "participantsAdded": "人が追加済み",
+    "upcomingBirthdays": "今後の誕生日",
+    "noBirthdays": "誕生日はまだありません",
+    "daysLeft": "{{count}}日",
+    "budgetOverview": "予算の概要",
+    "monthlyIncome": "収入",
+    "monthlyExpenses": "支出",
+    "monthlyBalance": "残高",
+    "savingsRate": "貯蓄率",
+    "topExpense": "最大の支出",
+    "budgetEntries": "記録",
+    "noBudgetData": "今月の予算データはありません。",
     "customize": "カスタマイズ",
     "customizeTitle": "ウィジェットのカスタマイズ",
     "customizeReset": "デフォルト",
@@ -537,6 +550,7 @@
     "tabAccount": "アカウント",
     "tabsAriaLabel": "設定カテゴリー",
     "sectionDesign": "デザイン",
+    "sectionAppName": "アプリ名",
     "sectionShopping": "買い物",
     "shoppingCategoriesLabel": "買い物カテゴリー",
     "shoppingCategoriesHint": "カテゴリーの追加、名前変更、削除、並び替えができます。",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "カレンダー同期",
     "sectionFamily": "家族メンバー",
     "cardAppearance": "外観",
+    "appNameTitle": "アプリ名",
+    "appNameLabel": "アプリ名",
+    "appNameHint": "この名前はサイドバー、ブラウザのタイトル、ログイン画面に表示されます。",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "アプリ名を保存しました。",
+    "sectionDate": "日付",
+    "dateFormatTitle": "日付形式",
+    "dateFormatLabel": "希望する日付形式",
+    "dateFormatHint": "アプリ内で日付をどう表示するかを選択します。",
+    "dateFormatSavedToast": "日付形式を保存しました。",
     "themeSystem": "システム設定",
     "themeSysLabel": "システム設定を使用",
     "themeLight": "ライト",

public/locales/pt.json

@@ -83,6 +83,19 @@
     "allDay": "Dia inteiro",
     "shoppingMore": "+{{count}} mais",
     "weather": "Clima",
+    "familyMembers": "Membros da família",
+    "participantsAdded": "participantes adicionados",
+    "upcomingBirthdays": "Próximos aniversários",
+    "noBirthdays": "Nenhum aniversário ainda",
+    "daysLeft": "{{count}} dias",
+    "budgetOverview": "Visão do orçamento",
+    "monthlyIncome": "Receitas",
+    "monthlyExpenses": "Despesas",
+    "monthlyBalance": "Saldo",
+    "savingsRate": "Taxa de poupança",
+    "topExpense": "Maior despesa",
+    "budgetEntries": "Lançamentos",
+    "noBudgetData": "Sem dados de orçamento neste mês.",
     "customize": "Personalizar",
     "customizeTitle": "Personalizar widgets",
     "customizeReset": "Padrão",
@@ -537,6 +550,7 @@
     "tabAccount": "Conta",
     "tabsAriaLabel": "Seções de configurações",
     "sectionDesign": "Design",
+    "sectionAppName": "Nome da aplicação",
     "sectionShopping": "Compras",
     "shoppingCategoriesLabel": "Categorias de compras",
     "shoppingCategoriesHint": "Adicione, renomeie, exclua ou ordene categorias.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Sincronização de calendário",
     "sectionFamily": "Membros da família",
     "cardAppearance": "Aparência",
+    "appNameTitle": "Nome do app",
+    "appNameLabel": "Nome da aplicação",
+    "appNameHint": "Este nome aparece na barra lateral, no título do navegador e no ecrã de login.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Nome da aplicação guardado.",
+    "sectionDate": "Data",
+    "dateFormatTitle": "Formato da data",
+    "dateFormatLabel": "Formato preferido da data",
+    "dateFormatHint": "Escolha como as datas aparecem em toda a aplicação.",
+    "dateFormatSavedToast": "Formato da data salvo.",
     "themeSystem": "Sistema",
     "themeSysLabel": "Usar configuração do sistema",
     "themeLight": "Claro",

public/locales/ru.json

@@ -83,6 +83,19 @@
     "allDay": "Весь день",
     "shoppingMore": "+{{count}} ещё",
     "weather": "Погода",
+    "familyMembers": "Члены семьи",
+    "participantsAdded": "участников добавлено",
+    "upcomingBirthdays": "Ближайшие дни рождения",
+    "noBirthdays": "Дней рождения пока нет",
+    "daysLeft": "{{count}} дн.",
+    "budgetOverview": "Обзор бюджета",
+    "monthlyIncome": "Доходы",
+    "monthlyExpenses": "Расходы",
+    "monthlyBalance": "Баланс",
+    "savingsRate": "Норма сбережений",
+    "topExpense": "Крупнейший расход",
+    "budgetEntries": "Записи",
+    "noBudgetData": "Нет данных бюджета за этот месяц.",
     "customize": "Настроить",
     "customizeTitle": "Настроить виджеты",
     "customizeReset": "Сбросить",
@@ -537,6 +550,7 @@
     "tabAccount": "Аккаунт",
     "tabsAriaLabel": "Разделы настроек",
     "sectionDesign": "Внешний вид",
+    "sectionAppName": "Название приложения",
     "sectionShopping": "Покупки",
     "shoppingCategoriesLabel": "Категории покупок",
     "shoppingCategoriesHint": "Добавляйте, переименовывайте, удаляйте или сортируйте категории.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Синхронизация календаря",
     "sectionFamily": "Члены семьи",
     "cardAppearance": "Отображение",
+    "appNameTitle": "Название приложения",
+    "appNameLabel": "Название приложения",
+    "appNameHint": "Это название отображается в боковом меню, заголовке браузера и на экране входа.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Название приложения сохранено.",
+    "sectionDate": "Дата",
+    "dateFormatTitle": "Формат даты",
+    "dateFormatLabel": "Предпочитаемый формат даты",
+    "dateFormatHint": "Выберите, как даты отображаются в приложении.",
+    "dateFormatSavedToast": "Формат даты сохранён.",
     "themeSystem": "Система",
     "themeSysLabel": "Использовать системную настройку",
     "themeLight": "Светлая",

public/locales/sv.json

@@ -83,6 +83,19 @@
     "allDay": "Hela dagen",
     "shoppingMore": "+{{count}} till",
     "weather": "Väder",
+    "familyMembers": "Familjemedlemmar",
+    "participantsAdded": "deltagare tillagda",
+    "upcomingBirthdays": "Kommande födelsedagar",
+    "noBirthdays": "Inga födelsedagar ännu",
+    "daysLeft": "{{count}} dagar",
+    "budgetOverview": "Budgetöversikt",
+    "monthlyIncome": "Inkomster",
+    "monthlyExpenses": "Utgifter",
+    "monthlyBalance": "Saldo",
+    "savingsRate": "Sparandegrad",
+    "topExpense": "Största utgift",
+    "budgetEntries": "Poster",
+    "noBudgetData": "Ingen budgetdata denna månad.",
     "customize": "Anpassa",
     "customizeTitle": "Anpassa widgets",
     "customizeReset": "Återställ",
@@ -537,6 +550,7 @@
     "tabAccount": "Konto",
     "tabsAriaLabel": "Inställningsavsnitt",
     "sectionDesign": "Utseende",
+    "sectionAppName": "Appnamn",
     "sectionShopping": "Inköp",
     "shoppingCategoriesLabel": "Inköpskategorier",
     "shoppingCategoriesHint": "Lägg till, byt namn, ta bort eller sortera om kategorier.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Kalendersynkronisering",
     "sectionFamily": "Familjemedlemmar",
     "cardAppearance": "Visa",
+    "appNameTitle": "Appnamn",
+    "appNameLabel": "Appnamn",
+    "appNameHint": "Det här namnet visas i sidomenyn, webbläsarens titel och inloggningsskärmen.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Appnamn sparat.",
+    "sectionDate": "Datum",
+    "dateFormatTitle": "Datumformat",
+    "dateFormatLabel": "Önskat datumformat",
+    "dateFormatHint": "Välj hur datum visas i appen.",
+    "dateFormatSavedToast": "Datumformat sparat.",
     "themeSystem": "System",
     "themeSysLabel": "Använd systeminställning",
     "themeLight": "Ljus",

public/locales/tr.json

@@ -83,6 +83,19 @@
     "allDay": "Tüm gün",
     "shoppingMore": "+{{count}} daha",
     "weather": "Hava",
+    "familyMembers": "Aile üyeleri",
+    "participantsAdded": "katılımcı eklendi",
+    "upcomingBirthdays": "Yaklaşan doğum günleri",
+    "noBirthdays": "Henüz doğum günü yok",
+    "daysLeft": "{{count}} gün",
+    "budgetOverview": "Bütçe özeti",
+    "monthlyIncome": "Gelir",
+    "monthlyExpenses": "Giderler",
+    "monthlyBalance": "Bakiye",
+    "savingsRate": "Tasarruf oranı",
+    "topExpense": "En büyük gider",
+    "budgetEntries": "Kayıtlar",
+    "noBudgetData": "Bu ay bütçe verisi yok.",
     "customize": "Özelleştir",
     "customizeTitle": "Widget'ları özelleştir",
     "customizeReset": "Sıfırla",
@@ -537,6 +550,7 @@
     "tabAccount": "Hesap",
     "tabsAriaLabel": "Ayar bölümleri",
     "sectionDesign": "Görünüm",
+    "sectionAppName": "Uygulama adı",
     "sectionShopping": "Alışveriş",
     "shoppingCategoriesLabel": "Alışveriş Kategorileri",
     "shoppingCategoriesHint": "Kategorileri ekleyin, yeniden adlandırın, silin veya sıralayın.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Takvim Senkronizasyonu",
     "sectionFamily": "Aile Üyeleri",
     "cardAppearance": "Görünüm",
+    "appNameTitle": "Uygulama adı",
+    "appNameLabel": "Uygulama adı",
+    "appNameHint": "Bu ad kenar çubuğunda, tarayıcı başlığında ve giriş ekranında görünür.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Uygulama adı kaydedildi.",
+    "sectionDate": "Tarih",
+    "dateFormatTitle": "Tarih biçimi",
+    "dateFormatLabel": "Tercih edilen tarih biçimi",
+    "dateFormatHint": "Tarihlerin uygulamada nasıl görüneceğini seçin.",
+    "dateFormatSavedToast": "Tarih biçimi kaydedildi.",
     "themeSystem": "Sistem",
     "themeSysLabel": "Sistem ayarını kullan",
     "themeLight": "Açık",

public/locales/uk.json

@@ -83,6 +83,19 @@
     "allDay": "Весь день",
     "shoppingMore": "+{{count}} ще",
     "weather": "Погода",
+    "familyMembers": "Члени родини",
+    "participantsAdded": "учасників додано",
+    "upcomingBirthdays": "Найближчі дні народження",
+    "noBirthdays": "Днів народження ще немає",
+    "daysLeft": "{{count}} дн.",
+    "budgetOverview": "Огляд бюджету",
+    "monthlyIncome": "Доходи",
+    "monthlyExpenses": "Витрати",
+    "monthlyBalance": "Баланс",
+    "savingsRate": "Рівень заощаджень",
+    "topExpense": "Найбільша витрата",
+    "budgetEntries": "Записи",
+    "noBudgetData": "Немає бюджетних даних за цей місяць.",
     "customize": "Налаштувати",
     "customizeTitle": "Налаштувати віджети",
     "customizeReset": "Скинути",
@@ -537,6 +550,7 @@
     "tabAccount": "Обліковий запис",
     "tabsAriaLabel": "Розділи налаштувань",
     "sectionDesign": "Зовнішній вигляд",
+    "sectionAppName": "Назва застосунку",
     "sectionShopping": "Покупки",
     "shoppingCategoriesLabel": "Категорії покупок",
     "shoppingCategoriesHint": "Додавайте, перейменовуйте, видаляйте або змінюйте порядок категорій.",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "Синхронізація календаря",
     "sectionFamily": "Члени родини",
     "cardAppearance": "Відображення",
+    "appNameTitle": "Назва застосунку",
+    "appNameLabel": "Назва застосунку",
+    "appNameHint": "Ця назва відображається в бічному меню, заголовку браузера та на екрані входу.",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "Назву застосунку збережено.",
+    "sectionDate": "Дата",
+    "dateFormatTitle": "Формат дати",
+    "dateFormatLabel": "Бажаний формат дати",
+    "dateFormatHint": "Виберіть, як дати відображаються в застосунку.",
+    "dateFormatSavedToast": "Формат дати збережено.",
     "themeSystem": "Системна",
     "themeSysLabel": "Використовувати системні налаштування",
     "themeLight": "Світла",

public/locales/zh.json

@@ -83,6 +83,19 @@
     "allDay": "全天",
     "shoppingMore": "+{{count}} 更多",
     "weather": "天气",
+    "familyMembers": "家庭成员",
+    "participantsAdded": "位参与者已添加",
+    "upcomingBirthdays": "即将到来的生日",
+    "noBirthdays": "还没有生日",
+    "daysLeft": "{{count}} 天",
+    "budgetOverview": "预算概览",
+    "monthlyIncome": "收入",
+    "monthlyExpenses": "支出",
+    "monthlyBalance": "余额",
+    "savingsRate": "储蓄率",
+    "topExpense": "最大支出",
+    "budgetEntries": "记录",
+    "noBudgetData": "本月没有预算数据。",
     "customize": "自定义",
     "customizeTitle": "自定义小组件",
     "customizeReset": "重置",
@@ -537,6 +550,7 @@
     "tabAccount": "账户",
     "tabsAriaLabel": "设置类别",
     "sectionDesign": "外观",
+    "sectionAppName": "应用名称",
     "sectionShopping": "购物",
     "shoppingCategoriesLabel": "购物分类",
     "shoppingCategoriesHint": "添加、重命名、删除或排序分类。",
@@ -554,6 +568,16 @@
     "sectionCalendarSync": "日历同步",
     "sectionFamily": "家庭成员",
     "cardAppearance": "外观",
+    "appNameTitle": "应用名称",
+    "appNameLabel": "应用名称",
+    "appNameHint": "此名称会显示在侧边栏、浏览器标题和登录界面中。",
+    "appNamePlaceholder": "Oikos",
+    "appNameSavedToast": "应用名称已保存。",
+    "sectionDate": "日期",
+    "dateFormatTitle": "日期格式",
+    "dateFormatLabel": "首选日期格式",
+    "dateFormatHint": "选择日期在应用中的显示方式。",
+    "dateFormatSavedToast": "日期格式已保存。",
     "themeSystem": "跟随系统",
     "themeSysLabel": "使用系统设置",
     "themeLight": "浅色",

public/pages/birthdays.js

@@ -35,11 +35,11 @@ function photoAvatar(birthday, extraClass = '') {
 
 function filteredBirthdays() {
   const q = state.query.trim().toLowerCase();
-  if (!q) return state.birthdays;
-  return state.birthdays.filter((birthday) =>
+  const list = !q ? state.birthdays : state.birthdays.filter((birthday) =>
     birthday.name.toLowerCase().includes(q) ||
     (birthday.notes || '').toLowerCase().includes(q)
   );
+  return [...list].sort((a, b) => a.name.localeCompare(b.name));
 }
 
 function suggestions() {
@@ -94,8 +94,15 @@ function renderUpcoming() {
     <article class="birthday-card">
       <div class="birthday-card__media">${photoAvatar(birthday)}</div>
       <div class="birthday-card__body">
-        <div class="birthday-card__name">${esc(birthday.name)}</div>
-        <div class="birthday-card__date">${esc(formatDate(birthday.next_birthday))}</div>
+        <div class="birthday-card__top">
+          <div>
+            <div class="birthday-card__name">${esc(birthday.name)}</div>
+            <div class="birthday-card__date">${esc(formatDate(birthday.next_birthday))}</div>
+          </div>
+          <div class="birthday-card__pill">
+            ${birthday.days_until === 0 ? esc(t('common.today')) : birthday.days_until === 1 ? esc(t('common.tomorrow')) : esc(`${birthday.days_until}d`)}
+          </div>
+        </div>
         <div class="birthday-card__note">${esc(ageNote(birthday))}</div>
       </div>
     </article>
@@ -146,33 +153,42 @@ function renderPage() {
     <div class="birthdays-page">
       <h1 class="sr-only">${t('birthdays.title')}</h1>
       <div class="birthdays-toolbar">
-        <div class="birthdays-toolbar__search">
-          <i data-lucide="search" class="birthdays-toolbar__search-icon" aria-hidden="true"></i>
-          <input type="search" class="birthdays-toolbar__search-input" id="birthdays-search"
-                 placeholder="${t('birthdays.searchPlaceholder')}" autocomplete="off" value="${esc(state.query)}">
-          <div class="autocomplete-dropdown birthdays-autocomplete" id="birthdays-autocomplete" hidden></div>
+        <div class="birthdays-toolbar__title">
+          <i data-lucide="cake" class="birthdays-toolbar__title-icon" aria-hidden="true"></i>
+          <span>${t('birthdays.title')}</span>
         </div>
-        <button class="btn btn--primary" id="birthdays-add-btn">
+        <button class="btn btn--primary birthdays-header__action" id="birthdays-add-btn">
           <i data-lucide="plus" style="width:16px;height:16px;margin-right:4px;" aria-hidden="true"></i>
           ${t('birthdays.addButton')}
         </button>
       </div>
+      <p class="birthdays-toolbar__subtitle">${t('birthdays.calendarHint')}</p>
 
-      <section class="birthdays-section birthdays-section--hero">
-        <div class="birthdays-section__header">
-          <h2>${t('birthdays.upcomingTitle')}</h2>
-          <p>${t('birthdays.upcomingHint')}</p>
-        </div>
-        <div class="birthday-cards" id="birthdays-upcoming"></div>
-      </section>
+      <div class="birthdays-grid">
+        <aside class="birthdays-panel birthdays-panel--upcoming">
+          <div class="birthdays-section__header">
+            <h3>${t('birthdays.upcomingTitle')}</h3>
+            <p>${t('birthdays.upcomingHint')}</p>
+          </div>
+          <div class="birthday-cards" id="birthdays-upcoming"></div>
+        </aside>
 
-      <section class="birthdays-section birthdays-section--list">
-        <div class="birthdays-section__header">
-          <h2>${t('birthdays.peopleTitle')}</h2>
-          <p>${t('birthdays.peopleHint')}</p>
-        </div>
-        <div class="birthdays-list" id="birthdays-list"></div>
-      </section>
+        <section class="birthdays-panel birthdays-panel--list">
+          <div class="birthdays-toolbar birthdays-toolbar--embedded">
+            <div class="birthdays-toolbar__search">
+              <i data-lucide="search" class="birthdays-toolbar__search-icon" aria-hidden="true"></i>
+              <input type="search" class="birthdays-toolbar__search-input" id="birthdays-search"
+                     placeholder="${t('birthdays.searchPlaceholder')}" autocomplete="off" value="${esc(state.query)}">
+              <div class="autocomplete-dropdown birthdays-autocomplete" id="birthdays-autocomplete" hidden></div>
+            </div>
+          </div>
+          <div class="birthdays-section__header birthdays-section__header--spaced">
+            <h3>${t('birthdays.peopleTitle')}</h3>
+            <p>${t('birthdays.peopleHint')}</p>
+          </div>
+          <div class="birthdays-list" id="birthdays-list"></div>
+        </section>
+      </div>
 
       <button class="page-fab" id="fab-new-birthday" aria-label="${t('birthdays.addButton')}">
         <i data-lucide="plus" style="width:24px;height:24px" aria-hidden="true"></i>
@@ -337,7 +353,7 @@ function openBirthdayModal({ mode, birthday = null }) {
             state.birthdays.push(res.data);
             window.oikos?.showToast(t('birthdays.createdToast'), 'success');
           }
-          state.birthdays.sort((a, b) => a.days_until - b.days_until || a.name.localeCompare(b.name));
+          state.birthdays.sort((a, b) => a.name.localeCompare(b.name));
           const upcomingRes = await api.get('/birthdays/upcoming?limit=4');
           state.upcoming = upcomingRes.data ?? [];
           renderUpcoming();
@@ -356,7 +372,9 @@ function openBirthdayModal({ mode, birthday = null }) {
 async function deleteBirthday(id, name) {
   if (!await confirmModal(t('birthdays.deleteConfirm', { name }), { danger: true, confirmLabel: t('common.delete') })) return;
   await api.delete(`/birthdays/${id}`);
-  state.birthdays = state.birthdays.filter((birthday) => birthday.id !== id);
+  state.birthdays = state.birthdays
+    .filter((birthday) => birthday.id !== id)
+    .sort((a, b) => a.name.localeCompare(b.name));
   state.upcoming = state.upcoming.filter((birthday) => birthday.id !== id);
   renderUpcoming();
   renderSuggestions();

public/pages/dashboard.js

@@ -16,7 +16,7 @@ let _fabController = null;
 // Widget-Definitionen (Reihenfolge = Standard-Layout)
 // --------------------------------------------------------
 
-const WIDGET_IDS = ['weather', 'tasks', 'calendar', 'shopping', 'meals', 'notes'];
+const WIDGET_IDS = ['tasks', 'calendar', 'birthdays', 'budget', 'family', 'weather', 'shopping', 'meals', 'notes'];
 
 const DEFAULT_WIDGET_CONFIG = WIDGET_IDS.map((id) => ({ id, visible: true }));
 
@@ -28,15 +28,34 @@ function widgetLabel(id) {
     meals:    () => t('nav.meals'),
     notes:    () => t('nav.notes'),
     weather:  () => t('dashboard.weather'),
+    birthdays: () => t('nav.birthdays'),
+    budget:   () => t('nav.budget'),
+    family:   () => t('dashboard.familyMembers'),
   };
   return (map[id] ?? (() => id))();
 }
 
 function widgetIcon(id) {
-  const map = { tasks: 'check-square', calendar: 'calendar', shopping: 'shopping-cart', meals: 'utensils', notes: 'pin', weather: 'cloud-sun' };
+  const map = { tasks: 'check-square', calendar: 'calendar', birthdays: 'cake', budget: 'wallet', family: 'users', shopping: 'shopping-cart', meals: 'utensils', notes: 'pin', weather: 'cloud-sun' };
   return map[id] ?? 'layout-dashboard';
 }
 
+const BUDGET_CATEGORY_LABEL_KEYS = {
+  housing: 'catHousing',
+  food: 'catFood',
+  transport: 'catTransport',
+  personal_health: 'catPersonalHealth',
+  leisure: 'catLeisure',
+  shopping_clothing: 'catShoppingClothing',
+  education: 'catEducation',
+  financial_other: 'catFinancialOther',
+  'Erwerbseinkommen': 'catEarnedIncome',
+  'Kapitalerträge': 'catInvestmentIncome',
+  'Geschenke & Transfers': 'catTransferGiftIncome',
+  'Sozialleistungen': 'catGovernmentBenefits',
+  'Sonstiges Einkommen': 'catOtherIncome',
+};
+
 // --------------------------------------------------------
 // Hilfsfunktionen
 // --------------------------------------------------------
@@ -131,6 +150,19 @@ function initials(name = '') {
   return name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase();
 }
 
+function budgetCategoryLabel(category) {
+  const key = BUDGET_CATEGORY_LABEL_KEYS[category];
+  return key ? t(`budget.${key}`) : (category || '-');
+}
+
+function formatCurrency(amount, currency = 'EUR') {
+  return new Intl.NumberFormat(getLocale(), {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: Math.abs(amount) >= 1000 ? 0 : 2,
+  }).format(amount || 0);
+}
+
 function widgetHeader(icon, title, count, linkHref, linkLabel) {
   linkLabel = linkLabel ?? t('dashboard.allLink');
   const badge = count != null
@@ -170,51 +202,6 @@ function skeletonWidget(lines = 3) {
 // Widget-Renderer
 // --------------------------------------------------------
 
-function renderGreeting(user, stats = {}) {
-  const { overdueCount = 0, dueSoonCount = 0, todayEventCount = 0, todayMealTitle = null } = stats;
-
-  const statChips = [];
-  if (overdueCount > 0)
-    statChips.push(`<span class="greeting-chip greeting-chip--warn">
-      <i data-lucide="alert-circle" class="icon-sm" style="flex-shrink:0" aria-hidden="true"></i>
-      ${overdueCount > 1 ? t('dashboard.overdueTasksChipPlural', { count: overdueCount }) : t('dashboard.overdueTasksChip', { count: overdueCount })}
-    </span>`);
-  if (dueSoonCount > 0)
-    statChips.push(`<span class="greeting-chip greeting-chip--due">
-      <i data-lucide="clock" class="icon-sm" style="flex-shrink:0" aria-hidden="true"></i>
-      ${dueSoonCount > 1 ? t('dashboard.urgentTasksChipPlural', { count: dueSoonCount }) : t('dashboard.urgentTasksChip', { count: dueSoonCount })}
-    </span>`);
-  if (todayEventCount > 0)
-    statChips.push(`<span class="greeting-chip">
-      <i data-lucide="calendar" class="icon-sm" style="flex-shrink:0" aria-hidden="true"></i>
-      ${todayEventCount > 1 ? t('dashboard.eventsChipPlural', { count: todayEventCount }) : t('dashboard.eventsChip', { count: todayEventCount })}
-    </span>`);
-  if (todayMealTitle)
-    statChips.push(`<span class="greeting-chip">
-      <i data-lucide="utensils" class="icon-sm" style="flex-shrink:0" aria-hidden="true"></i>
-      ${t('dashboard.todayMealChip', { title: esc(todayMealTitle) })}
-    </span>`);
-
-  const time = formatTime(new Date());
-  const hour = new Date().getHours();
-  const timeVariant = hour < 11 ? 'morning' : hour < 18 ? 'day' : 'evening';
-
-  return `
-    <div class="widget-greeting" data-time-variant="${timeVariant}">
-      <div class="widget-greeting__inner">
-        <div class="widget-greeting__content">
-          <div class="widget-greeting__title">${formatDate(new Date())} - ${time}</div>
-          ${statChips.length ? `<div class="widget-greeting__chips">${statChips.join('')}</div>` : ''}
-        </div>
-        <button class="widget-customize-btn" id="dashboard-customize-btn"
-                aria-label="${t('dashboard.customize')}" title="${t('dashboard.customize')}">
-          <i data-lucide="settings-2" class="icon-base" aria-hidden="true"></i>
-        </button>
-      </div>
-    </div>
-  `;
-}
-
 function renderUrgentTasks(tasks) {
   if (!tasks.length) {
     return `<div class="widget widget--tasks">
@@ -288,6 +275,43 @@ function renderUpcomingEvents(events) {
   </div>`;
 }
 
+function renderUpcomingBirthdays(birthdays) {
+  if (!birthdays.length) {
+    return `<div class="widget widget--birthdays">
+      ${widgetHeader('cake', t('nav.birthdays'), 0, '/birthdays')}
+      <div class="widget__empty">
+        <i data-lucide="cake" class="empty-state__icon" aria-hidden="true"></i>
+        <div>${t('dashboard.noBirthdays')}</div>
+      </div>
+    </div>`;
+  }
+
+  const items = birthdays.map((b) => {
+    const daysLabel = b.days_until === 0
+      ? t('common.today')
+      : b.days_until === 1
+        ? t('common.tomorrow')
+        : t('dashboard.daysLeft', { count: b.days_until });
+    return `
+      <div class="birthday-widget-item" data-route="/birthdays" role="button" tabindex="0">
+        <div class="birthday-widget-item__avatar">
+          ${b.photo_data ? `<img src="${esc(b.photo_data)}" alt="" loading="lazy">` : `<span>${esc(initials(b.name))}</span>`}
+        </div>
+        <div class="birthday-widget-item__body">
+          <div class="birthday-widget-item__name">${esc(b.name)}</div>
+          <div class="birthday-widget-item__meta">${formatDate(b.next_birthday)} · ${daysLabel}</div>
+        </div>
+        <div class="birthday-widget-item__age">${esc(String(b.next_age ?? ''))}</div>
+      </div>
+    `;
+  }).join('');
+
+  return `<div class="widget widget--birthdays">
+    ${widgetHeader('cake', t('nav.birthdays'), birthdays.length, '/birthdays')}
+    <div class="widget__body">${items}</div>
+  </div>`;
+}
+
 function renderTodayMeals(meals) {
   const MEAL_ORDER = ['breakfast', 'lunch', 'dinner', 'snack'];
 
@@ -334,6 +358,283 @@ function renderPinnedNotes(notes) {
   </div>`;
 }
 
+function renderFamilyWidget(users) {
+  const visible = users.slice(0, 6);
+  const avatars = visible.map((u) => `
+    <span class="family-widget-avatar" style="background:${esc(u.avatar_color || '#64748b')}" title="${esc(u.display_name)}">
+      ${esc(initials(u.display_name))}
+    </span>
+  `).join('');
+
+  return `<div class="widget widget--family">
+    ${widgetHeader('users', t('dashboard.familyMembers'), users.length, '/settings')}
+    <div class="family-widget">
+      <div class="family-widget__count">${users.length}</div>
+      <div class="family-widget__meta">${t('dashboard.participantsAdded')}</div>
+      <div class="family-widget__avatars">${avatars}</div>
+    </div>
+  </div>`;
+}
+
+function renderBudgetWidget(budget, currency) {
+  const income = budget?.income || 0;
+  const expenses = budget?.expenses || 0;
+  const balance = budget?.balance || 0;
+  const savingsRate = income > 0 ? Math.round((balance / income) * 100) : 0;
+  const balanceTone = balance >= 0 ? 'positive' : 'negative';
+  const hasData = (budget?.entryCount || 0) > 0;
+
+  return `<div class="widget widget--budget">
+    ${widgetHeader('wallet', t('dashboard.budgetOverview'), null, '/budget')}
+    <div class="budget-widget">
+      <div class="budget-widget__headline">
+        <span>${t('dashboard.monthlyBalance')}</span>
+        <strong class="budget-widget__balance budget-widget__balance--${balanceTone}">${formatCurrency(balance, currency)}</strong>
+      </div>
+      <div class="budget-widget__grid">
+        <div class="budget-widget-metric budget-widget-metric--income">
+          <span>${t('dashboard.monthlyIncome')}</span>
+          <strong>${formatCurrency(income, currency)}</strong>
+        </div>
+        <div class="budget-widget-metric budget-widget-metric--expense">
+          <span>${t('dashboard.monthlyExpenses')}</span>
+          <strong>${formatCurrency(expenses, currency)}</strong>
+        </div>
+        <div class="budget-widget-metric">
+          <span>${t('dashboard.savingsRate')}</span>
+          <strong>${income > 0 ? `${savingsRate}%` : '-'}</strong>
+        </div>
+        <div class="budget-widget-metric">
+          <span>${t('dashboard.budgetEntries')}</span>
+          <strong>${budget?.entryCount || 0}</strong>
+        </div>
+      </div>
+      <div class="budget-widget__footer">
+        ${hasData && budget?.topExpenseCategory
+          ? `${t('dashboard.topExpense')}: <strong>${esc(budgetCategoryLabel(budget.topExpenseCategory))}</strong> · ${formatCurrency(budget.topExpenseAmount, currency)}`
+          : t('dashboard.noBudgetData')}
+      </div>
+    </div>
+  </div>`;
+}
+
+function renderQuickAction({ route, label, icon, tone = '' }) {
+  return `
+    <button type="button" class="dashboard-action ${tone ? `dashboard-action--${tone}` : ''}" data-route="${route}">
+      <span class="dashboard-action__icon"><i data-lucide="${icon}" aria-hidden="true"></i></span>
+      <span class="dashboard-action__label">${label}</span>
+    </button>
+  `;
+}
+
+function renderKpiTile({ title, value, meta, icon, route, tone = '' }) {
+  return `
+    <button type="button" class="dashboard-kpi ${tone ? `dashboard-kpi--${tone}` : ''}" data-route="${route}">
+      <span class="dashboard-kpi__icon"><i data-lucide="${icon}" aria-hidden="true"></i></span>
+      <span class="dashboard-kpi__body">
+        <span class="dashboard-kpi__label">${title}</span>
+        <span class="dashboard-kpi__value">${value}</span>
+        <span class="dashboard-kpi__meta">${meta}</span>
+      </span>
+    </button>
+  `;
+}
+
+function renderDashboardOverview(user, stats = null, weather = null) {
+  const dateLabel = formatDate(new Date());
+  const weatherLabel = weather
+    ? `${esc(weather.city)} · ${esc(weather.current?.temp)}${weather.units === 'imperial' ? '°F' : weather.units === 'standard' ? 'K' : '°C'}`
+    : t('dashboard.weather');
+
+  const actions = [
+    { route: '/tasks', label: t('nav.tasks'), icon: 'check-square', tone: 'blue' },
+    { route: '/calendar', label: t('nav.calendar'), icon: 'calendar', tone: 'violet' },
+    { route: '/shopping', label: t('nav.shopping'), icon: 'shopping-cart', tone: 'green' },
+    { route: '/notes', label: t('nav.notes'), icon: 'sticky-note', tone: 'amber' },
+  ].map(renderQuickAction).join('');
+
+  const kpis = stats ? [
+    renderKpiTile({
+      title: t('tasks.title'),
+      value: String(stats.overdueCount ?? 0),
+      meta: t('dashboard.overdue'),
+      icon: 'alert-circle',
+      route: '/tasks',
+      tone: 'danger',
+    }),
+    renderKpiTile({
+      title: t('nav.calendar'),
+      value: String(stats.todayEventCount ?? 0),
+      meta: t('common.today'),
+      icon: 'calendar-days',
+      route: '/calendar',
+      tone: 'calendar',
+    }),
+    renderKpiTile({
+      title: t('nav.meals'),
+      value: stats.todayMealTitle ? esc(stats.todayMealTitle) : '-',
+      meta: t('dashboard.todayMeals'),
+      icon: 'utensils',
+      route: '/meals',
+      tone: 'meals',
+    }),
+    renderKpiTile({
+      title: t('dashboard.weather'),
+      value: weatherLabel,
+      meta: t('dashboard.weatherRefreshTitle'),
+      icon: 'cloud-sun',
+      route: '/',
+      tone: 'weather',
+    }),
+    renderKpiTile({
+      title: t('nav.birthdays'),
+      value: String(stats.birthdayCount ?? 0),
+      meta: t('dashboard.upcomingBirthdays'),
+      icon: 'cake',
+      route: '/birthdays',
+      tone: 'birthdays',
+    }),
+    renderKpiTile({
+      title: t('dashboard.familyMembers'),
+      value: String(stats.familyCount ?? 0),
+      meta: t('dashboard.participantsAdded'),
+      icon: 'users',
+      route: '/settings',
+      tone: 'family',
+    }),
+  ].join('') : `
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+    <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+  `;
+
+  return `
+    <section class="dashboard-overview">
+      <div class="dashboard-overview__header">
+        <div class="dashboard-overview__heading">
+          <span class="dashboard-overview__date">${dateLabel}</span>
+          <h1 class="dashboard-overview__title">${greeting(user.display_name)}</h1>
+        </div>
+        <div class="dashboard-overview__tools">
+          <div class="dashboard-overview__actions">${actions}</div>
+          <button class="dashboard-icon-btn" id="dashboard-customize-btn"
+                  aria-label="${t('dashboard.customize')}" title="${t('dashboard.customize')}">
+            <i data-lucide="settings-2" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+      <div class="dashboard-kpi-grid">
+        ${kpis}
+      </div>
+    </section>
+  `;
+}
+
+function widgetRegion(id) {
+  return ['budget', 'family', 'weather', 'shopping', 'meals'].includes(id) ? 'side' : 'main';
+}
+
+function widgetTileClass(id) {
+  const map = {
+    tasks: 'dashboard-tile--wide',
+    calendar: 'dashboard-tile--compact',
+    birthdays: 'dashboard-tile--compact',
+    budget: 'dashboard-tile--wide',
+    family: 'dashboard-tile--compact',
+    meals: 'dashboard-tile--compact',
+    notes: 'dashboard-tile--wide',
+    shopping: 'dashboard-tile--compact',
+    weather: 'dashboard-tile--wide',
+  };
+  return map[id] || 'dashboard-tile--compact';
+}
+
+function renderDashboardTile(id, html) {
+  if (!html) return '';
+  return `<section class="dashboard-tile dashboard-tile--${id} ${widgetTileClass(id)}">${html}</section>`;
+}
+
+function renderDashboardLayout(cfg, data, weather, currency) {
+  const widgetById = {
+    tasks: () => renderUrgentTasks(data.urgentTasks ?? []),
+    calendar: () => renderUpcomingEvents(data.upcomingEvents ?? []),
+    birthdays: () => renderUpcomingBirthdays(data.birthdays ?? []),
+    budget: () => renderBudgetWidget(data.budget ?? {}, currency),
+    family: () => renderFamilyWidget(data.users ?? []),
+    meals: () => renderTodayMeals(data.todayMeals ?? []),
+    notes: () => renderPinnedNotes(data.pinnedNotes ?? []),
+    shopping: () => renderShoppingLists(data.shoppingLists ?? []),
+    weather: () => (weather ? renderWeatherWidget(weather) : ''),
+  };
+
+  const visible = cfg.filter((w) => w.visible && widgetById[w.id]);
+  const mainTiles = visible
+    .filter((w) => widgetRegion(w.id) === 'main')
+    .map((w) => renderDashboardTile(w.id, widgetById[w.id]()))
+    .join('');
+
+  const sideTiles = visible
+    .filter((w) => widgetRegion(w.id) === 'side')
+    .map((w) => renderDashboardTile(w.id, widgetById[w.id]()))
+    .join('');
+
+  return `
+    <section class="dashboard-workspace">
+      <div class="dashboard-workspace__main">
+        <div class="dashboard-widget-grid">
+          ${mainTiles}
+        </div>
+      </div>
+      <aside class="dashboard-workspace__side">
+        <div class="dashboard-side-stack">
+          ${sideTiles}
+        </div>
+      </aside>
+    </section>
+  `;
+}
+
+function renderDashboardSkeleton() {
+  return `
+    <section class="dashboard-overview">
+      <div class="dashboard-overview__header">
+        <div class="dashboard-overview__heading">
+          <div class="skeleton skeleton-line skeleton-line--short"></div>
+          <div class="skeleton skeleton-line skeleton-line--medium"></div>
+        </div>
+      </div>
+      <div class="dashboard-kpi-grid">
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+        <div class="dashboard-kpi dashboard-kpi--skeleton"></div>
+      </div>
+    </section>
+    <section class="dashboard-workspace">
+      <div class="dashboard-workspace__main">
+        <div class="dashboard-widget-grid">
+          ${skeletonWidget(3)}
+          ${skeletonWidget(3)}
+          ${skeletonWidget(2)}
+          ${skeletonWidget(3)}
+        </div>
+      </div>
+      <aside class="dashboard-workspace__side">
+        <div class="dashboard-side-stack">
+          ${skeletonWidget(3)}
+          ${skeletonWidget(3)}
+          ${skeletonWidget(2)}
+        </div>
+      </aside>
+    </section>
+  `;
+}
+
 // --------------------------------------------------------
 // Shopping-Widget
 // --------------------------------------------------------
@@ -515,25 +816,6 @@ function initFab(container, signal) {
   document.addEventListener('click', () => { if (open) toggleFab(false); }, { signal });
 }
 
-// --------------------------------------------------------
-// Widget-Rendering nach Konfiguration
-// --------------------------------------------------------
-
-function renderWidgets(cfg, data, weather) {
-  const renderers = {
-    tasks:    () => renderUrgentTasks(data.urgentTasks ?? []),
-    calendar: () => renderUpcomingEvents(data.upcomingEvents ?? []),
-    shopping: () => renderShoppingLists(data.shoppingLists ?? []),
-    meals:    () => renderTodayMeals(data.todayMeals ?? []),
-    notes:    () => renderPinnedNotes(data.pinnedNotes ?? []),
-    weather:  () => (weather ? renderWeatherWidget(weather) : ''),
-  };
-  return cfg
-    .filter((w) => w.visible)
-    .map((w) => (renderers[w.id] ? renderers[w.id]() : ''))
-    .join('');
-}
-
 // --------------------------------------------------------
 // Customize-Modal
 // --------------------------------------------------------
@@ -728,20 +1010,17 @@ export async function render(container, { user }) {
   container.innerHTML = `
     <div class="dashboard">
       <h1 class="sr-only">${t('dashboard.title')}</h1>
-      <div class="dashboard__grid">
-        ${renderGreeting(user, {})}
-        ${skeletonWidget(3)}
-        ${skeletonWidget(3)}
-        ${skeletonWidget(2)}
-        ${skeletonWidget(3)}
+      <div class="dashboard-shell" id="dashboard-shell">
+        ${renderDashboardSkeleton()}
       </div>
     </div>
     ${renderFab()}
   `;
 
-  let data         = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [], shoppingLists: [] };
+  let data         = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [], shoppingLists: [], birthdays: [], users: [], budget: {} };
   let weather      = null;
   let widgetConfig = DEFAULT_WIDGET_CONFIG;
+  let currency     = 'EUR';
   try {
     const [dashRes, weatherRes, prefsRes] = await Promise.all([
       api.get('/dashboard'),
@@ -751,6 +1030,7 @@ export async function render(container, { user }) {
     data         = dashRes;
     weather      = weatherRes.data ?? null;
     widgetConfig = prefsRes.data?.dashboard_widgets ?? DEFAULT_WIDGET_CONFIG;
+    currency     = prefsRes.data?.currency ?? 'EUR';
   } catch (err) {
     console.error('[Dashboard] Ladefehler:', err.message, 'Status:', err.status ?? 'network');
     window.oikos?.showToast(t('dashboard.loadError'), 'warning');
@@ -772,52 +1052,45 @@ export async function render(container, { user }) {
     todayMealTitle: (data.todayMeals ?? []).find((m) => m.meal_type === 'lunch')?.title
       ?? (data.todayMeals ?? [])[0]?.title
       ?? null,
+    birthdayCount: data.birthdayCount ?? (data.birthdays ?? []).length,
+    familyCount: (data.users ?? []).length,
   };
 
   const rerender = () => render(container, { user });
 
-  function rebuildGrid(cfg) {
-    const grid = container.querySelector('.dashboard__grid');
-    if (!grid) return;
-    const greeting = grid.querySelector('.widget-greeting');
-    grid.replaceChildren(...(greeting ? [greeting] : []));
-    grid.insertAdjacentHTML('beforeend', renderWidgets(cfg, data, weather));
+  function rebuildDashboard(cfg) {
+    const shell = container.querySelector('#dashboard-shell');
+    if (!shell) return;
+    shell.innerHTML = `
+      ${renderDashboardOverview(user, stats, weather)}
+      ${renderDashboardLayout(cfg, data, weather, currency)}
+    `;
     wireLinks(container, rerender);
     if (window.lucide) window.lucide.createIcons();
-    wireWeatherRefresh(container);
+    wireWeatherRefresh(container, (updatedWeather) => {
+      weather = updatedWeather;
+      rebuildDashboard(cfg);
+    });
+    container.querySelector('#dashboard-customize-btn')?.addEventListener('click', () => {
+      openCustomizeModal(widgetConfig, (newConfig) => {
+        widgetConfig = newConfig;
+        rebuildDashboard(widgetConfig);
+      });
+    }, { signal: _fabController.signal });
   }
 
-  // Greeting in-place aktualisieren (Stats-Chips hinzufügen), kein Gesamt-Reset
-  const greetingEl = container.querySelector('.widget-greeting');
-  if (greetingEl) greetingEl.outerHTML = renderGreeting(user, stats);
-
-  // Skeletons durch echte Widgets ersetzen
-  rebuildGrid(widgetConfig);
+  rebuildDashboard(widgetConfig);
 
   initFab(container, _fabController.signal);
 
-  container.querySelector('#dashboard-customize-btn')?.addEventListener(
-    'click',
-    () => openCustomizeModal(widgetConfig, (newConfig) => {
-      widgetConfig = newConfig;
-      rebuildGrid(widgetConfig);
-    }),
-    { signal: _fabController.signal },
-  );
-
   // 30-Minuten Auto-Refresh für Wetter
   const refreshBtn = container.querySelector('#weather-refresh-btn');
   if (refreshBtn) {
     const doAutoRefresh = async () => {
       try {
         const res = await api.get('/weather').catch(() => ({ data: null }));
-        const wWidget = container.querySelector('#weather-widget');
-        if (wWidget) {
-          wWidget.outerHTML = renderWeatherWidget(res.data ?? null);
-          const newWidget = container.querySelector('#weather-widget');
-          if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
-          wireWeatherRefresh(container);
-        }
+        weather = res.data ?? null;
+        rebuildDashboard(widgetConfig);
       } catch { /* silently ignore */ }
     };
     const timerId = setInterval(doAutoRefresh, 30 * 60 * 1000);
@@ -825,7 +1098,7 @@ export async function render(container, { user }) {
   }
 }
 
-function wireWeatherRefresh(container) {
+function wireWeatherRefresh(container, onUpdated = null) {
   const refreshBtn = container.querySelector('#weather-refresh-btn');
   if (!refreshBtn) return;
   const doWeatherRefresh = async () => {
@@ -838,7 +1111,7 @@ function wireWeatherRefresh(container) {
         wWidget.outerHTML = renderWeatherWidget(res.data ?? null);
         const newWidget = container.querySelector('#weather-widget');
         if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
-        wireWeatherRefresh(container);
+        onUpdated?.(res.data ?? null);
         window.oikos?.showToast(t('dashboard.weatherUpdated'), 'success', 1500);
       }
     } catch { /* silently ignore */ }

public/pages/login.js

@@ -8,16 +8,30 @@ import { auth } from '/api.js';
 import { t } from '/i18n.js';
 
 const VERSION_URL = '/api/v1/version';
+const DEFAULT_APP_NAME = 'Oikos';
+const APP_NAME_STORAGE_KEY = 'oikos-app-name';
+
+function getStoredAppName() {
+  return localStorage.getItem(APP_NAME_STORAGE_KEY) || DEFAULT_APP_NAME;
+}
+
+function setAppBranding(appName) {
+  const name = String(appName || '').trim() || DEFAULT_APP_NAME;
+  document.title = name;
+  const titleEl = document.querySelector('.login-hero__title');
+  if (titleEl) titleEl.textContent = name;
+}
 
 /**
  * Rendert die Login-Seite in den gegebenen Container.
  * @param {HTMLElement} container
  */
 export async function render(container) {
+  const storedAppName = getStoredAppName();
   container.innerHTML = `
     <main class="login-page" id="main-content">
       <div class="login-hero">
-        <h1 class="login-hero__title">Oikos</h1>
+        <h1 class="login-hero__title">${storedAppName}</h1>
         <p class="login-hero__tagline">${t('login.tagline')}</p>
       </div>
       <div class="login-card card card--padded">
@@ -67,9 +81,17 @@ export async function render(container) {
   const submitBtn = container.querySelector('#login-btn');
   const versionEl = container.querySelector('#login-version');
 
-  fetch(VERSION_URL)
+  setAppBranding(storedAppName);
+
+  fetch(VERSION_URL, { cache: 'no-store' })
     .then((r) => r.json())
-    .then((d) => { versionEl.textContent = t('login.version', { version: d.version }); })
+    .then((d) => {
+      if (d?.app_name) {
+        try { localStorage.setItem(APP_NAME_STORAGE_KEY, d.app_name); } catch (_) {}
+        setAppBranding(d.app_name);
+      }
+      versionEl.textContent = t('login.version', { version: d.version });
+    })
     .catch(() => {});
 
   form.addEventListener('submit', async (e) => {

public/router.js

@@ -19,10 +19,10 @@ const ROUTES = [
   { path: '/shopping', page: '/pages/shopping.js',  requiresAuth: true, module: 'shopping'  },
   { path: '/meals',    page: '/pages/meals.js',     requiresAuth: true, module: 'meals'     },
   { path: '/calendar', page: '/pages/calendar.js',  requiresAuth: true, module: 'calendar'  },
+  { path: '/birthdays', page: '/pages/birthdays.js', requiresAuth: true, module: 'birthdays' },
   { path: '/notes',    page: '/pages/notes.js',     requiresAuth: true, module: 'notes'     },
   { path: '/recipes',  page: '/pages/recipes.js',   requiresAuth: true, module: 'recipes'   },
   { path: '/contacts', page: '/pages/contacts.js',  requiresAuth: true, module: 'contacts'  },
-  { path: '/birthdays', page: '/pages/birthdays.js', requiresAuth: true, module: 'birthdays' },
   { path: '/budget',   page: '/pages/budget.js',    requiresAuth: true, module: 'budget'    },
   { path: '/settings', page: '/pages/settings.js',  requiresAuth: true, module: 'settings'  },
 ];
@@ -117,6 +117,7 @@ async function importPage(pagePath) {
 let currentUser = null;
 let currentPath = null;
 let isNavigating = false;
+let _preferencesLoaded = false;
 // Gesetzt wenn auth:expired waehrend einer laufenden Navigation feuert.
 // Die Weiterleitung zu /login wird nach Abschluss der Navigation nachgeholt.
 let _pendingLoginRedirect = false;
@@ -125,11 +126,14 @@ let _pendingLoginRedirect = false;
 // Router
 // --------------------------------------------------------
 
-const ROUTE_ORDER = ['/', '/tasks', '/calendar', '/meals', '/recipes', '/shopping',
-                     '/notes', '/contacts', '/birthdays', '/budget', '/settings'];
+const ROUTE_ORDER = ['/', '/tasks', '/calendar', '/birthdays', '/meals', '/recipes', '/shopping',
+                     '/notes', '/contacts', '/budget', '/settings'];
 
 const PRIMARY_NAV = 4;
 
+const DEFAULT_APP_NAME = 'Oikos';
+const APP_NAME_STORAGE_KEY = 'oikos-app-name';
+
 function getDirection(fromPath, toPath) {
   const fromIdx = ROUTE_ORDER.indexOf(fromPath ?? '/');
   const toIdx   = ROUTE_ORDER.indexOf(toPath);
@@ -137,6 +141,53 @@ function getDirection(fromPath, toPath) {
   return toIdx > fromIdx ? 'right' : 'left';
 }
 
+function getAppName() {
+  return localStorage.getItem(APP_NAME_STORAGE_KEY) || DEFAULT_APP_NAME;
+}
+
+function setAppName(name) {
+  const next = String(name || '').trim();
+  if (next) {
+    localStorage.setItem(APP_NAME_STORAGE_KEY, next);
+  } else {
+    localStorage.removeItem(APP_NAME_STORAGE_KEY);
+  }
+}
+
+function routeTitle(path) {
+  const map = {
+    '/': t('dashboard.title'),
+    '/tasks': t('nav.tasks'),
+    '/calendar': t('nav.calendar'),
+    '/birthdays': t('nav.birthdays'),
+    '/meals': t('nav.meals'),
+    '/recipes': t('nav.recipes'),
+    '/shopping': t('nav.shopping'),
+    '/notes': t('nav.notes'),
+    '/contacts': t('nav.contacts'),
+    '/budget': t('nav.budget'),
+    '/settings': t('nav.settings'),
+  };
+  return map[path] || getAppName();
+}
+
+function updateBranding(path = currentPath) {
+  const appName = getAppName();
+  const sidebarLogoSpan = document.querySelector('.nav-sidebar__logo span');
+  if (sidebarLogoSpan) sidebarLogoSpan.textContent = appName;
+
+  const loginTitle = document.querySelector('.login-hero__title');
+  if (path === '/login' && loginTitle) loginTitle.textContent = appName;
+
+  document.title = path === '/login'
+    ? appName
+    : `${routeTitle(path || '/')} · ${appName}`;
+
+  document.querySelectorAll('meta[name="apple-mobile-web-app-title"]').forEach((meta) => {
+    meta.setAttribute('content', appName);
+  });
+}
+
 /**
  * Navigiert zu einem Pfad und rendert die entsprechende Seite.
  * @param {string} path
@@ -152,6 +203,7 @@ async function navigate(path, userOrPushState = true, pushState = true) {
     // Überlastung: navigate(path, user) nach Login vs navigate(path, false) beim Init
     if (typeof userOrPushState === 'object' && userOrPushState !== null) {
       currentUser = userOrPushState;
+      await syncPreferencesOnce();
       initReminders();
     } else {
       pushState = userOrPushState;
@@ -169,6 +221,7 @@ async function navigate(path, userOrPushState = true, pushState = true) {
       try {
         const result = await auth.me();
         currentUser = result.user;
+        await syncPreferencesOnce();
         initReminders();
       } catch {
         currentPath = null; // Reset damit navigate('/login') nicht geblockt wird
@@ -199,6 +252,7 @@ async function navigate(path, userOrPushState = true, pushState = true) {
     await renderPage(route, previousPath);
     updateNav(basePath);
     updateThemeColorForRoute(route);
+    updateBranding(basePath);
   } finally {
     isNavigating = false;
     // auth:expired kann waehrend einer Navigation gefeuert haben (z.B. wenn ein
@@ -211,6 +265,24 @@ async function navigate(path, userOrPushState = true, pushState = true) {
   }
 }
 
+async function syncPreferencesOnce() {
+  if (_preferencesLoaded) return;
+  _preferencesLoaded = true;
+  try {
+    const res = await api.get('/preferences');
+    const dateFormat = res?.data?.date_format;
+    if (dateFormat) {
+      localStorage.setItem('oikos-date-format', dateFormat);
+    }
+    if (res?.data?.app_name) {
+      setAppName(res.data.app_name);
+      updateBranding();
+    }
+  } catch {
+    // Non-critical. The settings page can refresh this later.
+  }
+}
+
 /**
  * Lädt und rendert eine Seite dynamisch.
  * @param {{ path: string, page: string }} route
@@ -345,7 +417,7 @@ function renderAppShell(container) {
   sidebarLogo.appendChild(logomark);
 
   const sidebarLogoSpan = document.createElement('span');
-  sidebarLogoSpan.textContent = 'Oikos';
+  sidebarLogoSpan.textContent = getAppName();
   sidebarLogo.appendChild(sidebarLogoSpan);
   const sidebarItems = document.createElement('div');
   sidebarItems.className = 'nav-sidebar__items';
@@ -443,6 +515,7 @@ function renderAppShell(container) {
   toastContainer.setAttribute('aria-live', 'assertive');
 
   container.replaceChildren(skipLink, sidebar, main, bottomNav, backdrop, moreSheet, searchOverlay, toastContainer);
+  updateBranding(currentPath || '/');
 
   // Klick-Handler für alle Nav-Links
   container.querySelectorAll('[data-route]').forEach((el) => {
@@ -646,13 +719,13 @@ function navItems() {
   return [
     { path: '/',         label: t('nav.dashboard'), icon: 'layout-dashboard' },
     { path: '/tasks',    label: t('nav.tasks'),     icon: 'check-square'     },
+    { path: '/birthdays', label: t('nav.birthdays'), icon: 'cake'            },
     { path: '/calendar', label: t('nav.calendar'),  icon: 'calendar'         },
     { path: '/meals',    label: t('nav.meals'),     icon: 'utensils'         },
     { path: '/recipes',  label: t('nav.recipes'),   icon: 'book-text'        },
     { path: '/shopping', label: t('nav.shopping'),  icon: 'shopping-cart'    },
     { path: '/notes',    label: t('nav.notes'),     icon: 'sticky-note'      },
     { path: '/contacts', label: t('nav.contacts'),  icon: 'book-user'        },
-    { path: '/birthdays', label: t('nav.birthdays'), icon: 'cake'            },
     { path: '/budget',   label: t('nav.budget'),    icon: 'wallet'           },
     { path: '/settings', label: t('nav.settings'),  icon: 'settings'         },
   ];
@@ -876,6 +949,11 @@ window.addEventListener('locale-changed', () => {
   });
 
   updateNav(currentPath);
+  updateBranding(currentPath || '/');
+});
+
+window.addEventListener('app-name-changed', () => {
+  updateBranding(currentPath || '/');
 });
 
 // --------------------------------------------------------

public/styles/birthdays.css

@@ -9,6 +9,36 @@
   padding-bottom: calc(var(--nav-bottom-height) + var(--space-6));
 }
 
+.birthdays-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+  gap: var(--space-4);
+  padding: 0 var(--space-4);
+}
+
+.birthdays-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius-md) + 4px);
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, var(--module-accent) 10%, transparent), transparent 45%),
+    var(--color-surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.birthdays-panel--upcoming {
+  position: sticky;
+  top: var(--space-4);
+  align-self: start;
+}
+
+.birthdays-panel--list {
+  min-width: 0;
+}
+
 .birthdays-toolbar {
   display: flex;
   align-items: center;
@@ -19,6 +49,35 @@
   background: var(--color-surface);
 }
 
+.birthdays-toolbar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+}
+
+.birthdays-toolbar__title-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--module-accent);
+  flex-shrink: 0;
+}
+
+.birthdays-toolbar__subtitle {
+  margin: 0 var(--space-4) var(--space-2);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+}
+
+.birthdays-toolbar--embedded {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
 .birthdays-toolbar__search {
   flex: 1;
   position: relative;
@@ -48,7 +107,8 @@
   padding: 0 var(--space-4);
 }
 
-.birthdays-section__header h2 {
+.birthdays-section__header h2,
+.birthdays-section__header h3 {
   margin: 0;
   font-size: var(--text-lg);
 }
@@ -61,16 +121,14 @@
 
 .birthday-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  grid-template-columns: 1fr;
   gap: var(--space-3);
-  margin-top: var(--space-3);
 }
 
 .birthday-card,
 .birthday-item {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-left: 3px solid var(--module-accent);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
 }
@@ -80,6 +138,7 @@
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-4);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--module-accent) 6%, var(--color-surface)), var(--color-surface));
 }
 
 .birthday-card__body,
@@ -88,6 +147,13 @@
   flex: 1;
 }
 
+.birthday-card__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
 .birthday-card__name,
 .birthday-item__name {
   font-size: var(--text-base);
@@ -108,6 +174,16 @@
   font-size: var(--text-sm);
 }
 
+.birthday-card__pill {
+  padding: 0.35rem 0.6rem;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--module-accent) 12%, transparent);
+  color: var(--module-accent);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
 .birthday-item__notes {
   color: var(--color-text-secondary);
 }
@@ -116,7 +192,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  margin-top: var(--space-3);
 }
 
 .birthday-item {
@@ -233,6 +308,15 @@
   font-size: var(--text-sm);
 }
 
+@media (max-width: 960px) {
+  .birthdays-grid {
+    grid-template-columns: 1fr;
+  }
+  .birthdays-panel--upcoming {
+    position: static;
+  }
+}
+
 .contact-action-btn {
   width: 36px;
   height: 36px;

public/sw-register.js

@@ -7,9 +7,11 @@
 
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js').catch((err) => {
-      console.warn('[SW] Registrierung fehlgeschlagen:', err);
-    });
+    navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' })
+      .then((registration) => registration.update())
+      .catch((err) => {
+        console.warn('[SW] Registrierung fehlgeschlagen:', err);
+      });
   });
 
   // SW-Update: Auf iOS-PWA fuehrt ein sofortiger Reload bei controllerchange
@@ -24,4 +26,15 @@ if ('serviceWorker' in navigator) {
     // Auf iOS-Standalone verhindert das den "leere Seite"-Bug.
     setTimeout(() => window.location.reload(), 200);
   });
+
+  const refreshSw = () => {
+    navigator.serviceWorker.getRegistration()
+      .then((registration) => registration?.update())
+      .catch(() => {});
+  };
+
+  window.addEventListener('focus', refreshSw);
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') refreshSw();
+  });
 }

public/sw.js

@@ -13,11 +13,12 @@
  *   → bypassCacheUntil (in-memory + Cache API für SW-Restart-Robustheit)
  */
 
-const SHELL_CACHE   = 'oikos-shell-v53';
-const PAGES_CACHE   = 'oikos-pages-v48';
-const ASSETS_CACHE  = 'oikos-assets-v48';
+const SHELL_CACHE   = 'oikos-shell-v56';
+const PAGES_CACHE   = 'oikos-pages-v51';
+const LOCALES_CACHE = 'oikos-locales-v3';
+const ASSETS_CACHE  = 'oikos-assets-v51';
 const BYPASS_CACHE  = 'oikos-bypass-flag';
-const ALL_CACHES    = [SHELL_CACHE, PAGES_CACHE, ASSETS_CACHE];
+const ALL_CACHES    = [SHELL_CACHE, PAGES_CACHE, LOCALES_CACHE, ASSETS_CACHE];
 
 // App-Shell: sofort benötigt für ersten Render
 const APP_SHELL = [
@@ -27,12 +28,6 @@ const APP_SHELL = [
   '/router.js',
   '/i18n.js',
   '/rrule-ui.js',
-  '/locales/de.json',
-  '/locales/en.json',
-  '/locales/ja.json',
-  '/locales/ar.json',
-  '/locales/hi.json',
-  '/locales/pt.json',
   '/reminders.js',
   '/sw-register.js',
   '/lucide.min.js',
@@ -66,6 +61,24 @@ const APP_SHELL = [
   '/icons/icon-maskable-512.png',
 ];
 
+const APP_LOCALES = [
+  '/locales/ar.json',
+  '/locales/de.json',
+  '/locales/el.json',
+  '/locales/en.json',
+  '/locales/es.json',
+  '/locales/fr.json',
+  '/locales/hi.json',
+  '/locales/it.json',
+  '/locales/ja.json',
+  '/locales/pt.json',
+  '/locales/ru.json',
+  '/locales/sv.json',
+  '/locales/tr.json',
+  '/locales/uk.json',
+  '/locales/zh.json',
+];
+
 // Seiten-Module: lazy geladen, aber vorab gecacht für Offline
 const PAGE_MODULES = [
   '/pages/dashboard.js',
@@ -114,10 +127,12 @@ const _bypassInit = (async () => {
 self.addEventListener('install', (event) => {
   const freshShell   = APP_SHELL.map((url)    => new Request(url, { cache: 'reload' }));
   const freshModules = PAGE_MODULES.map((url) => new Request(url, { cache: 'reload' }));
+  const freshLocales = APP_LOCALES.map((url) => new Request(url, { cache: 'reload' }));
   event.waitUntil(
     Promise.all([
       caches.open(SHELL_CACHE).then((c) => c.addAll(freshShell)),
       caches.open(PAGES_CACHE).then((c) => c.addAll(freshModules)),
+      caches.open(LOCALES_CACHE).then((c) => c.addAll(freshLocales)),
     ]).then(() => self.skipWaiting())
   );
 });
@@ -207,12 +222,20 @@ function dispatchFetch(request, url) {
     return networkFirst(request, SHELL_CACHE);
   }
 
-  if (isAsset(url.pathname) && url.origin === self.location.origin) {
-    return cacheFirst(request, ASSETS_CACHE);
+  if (url.pathname.startsWith('/locales/')) {
+    return networkFirst(request, LOCALES_CACHE);
   }
 
   if (url.pathname.startsWith('/pages/')) {
-    return cacheFirst(request, PAGES_CACHE);
+    return networkFirst(request, PAGES_CACHE);
+  }
+
+  if (url.origin === self.location.origin && isMutableAppResource(url.pathname)) {
+    return networkFirst(request, SHELL_CACHE);
+  }
+
+  if (isAsset(url.pathname) && url.origin === self.location.origin) {
+    return cacheFirst(request, ASSETS_CACHE);
   }
 
   return cacheFirst(request, SHELL_CACHE);
@@ -270,3 +293,10 @@ async function cacheFirst(request, cacheName) {
 function isAsset(pathname) {
   return /\.(png|jpg|jpeg|ico|svg|webp|woff2?|gif)$/i.test(pathname);
 }
+
+function isMutableAppResource(pathname) {
+  return pathname === '/'
+    || pathname === '/index.html'
+    || pathname === '/manifest.json'
+    || /\.(css|js|json|html)$/i.test(pathname);
+}