From 61adf76da5c4b4a47896a8cb8af3465e4a58c07b Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Wed, 22 Jul 2026 12:45:15 +0200
Subject: [PATCH] feat(dashboard): align quick access buttons in 3 columns with
 calendar popup

Convert quick access grid to 3 columns and open in-app dialog modal for calendar button.
---
 shop/components/HomeClient.tsx | 102 +++++++++++++++++++++++++--------
 1 file changed, 79 insertions(+), 23 deletions(-)

diff --git a/shop/components/HomeClient.tsx b/shop/components/HomeClient.tsx
index c37e5cc..9850e34 100644
--- a/shop/components/HomeClient.tsx
+++ b/shop/components/HomeClient.tsx
@@ -22,6 +22,14 @@ import {
   Sparkles,
   Activity
 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
 
 interface HomeClientProps {
   initialUser: User | null
@@ -30,6 +38,7 @@ interface HomeClientProps {
 export function HomeClient({ initialUser }: HomeClientProps) {
   const [user, setUser] = useState<User | null>(initialUser)
   const [mounted, setMounted] = useState(false)
+  const [calendarOpen, setCalendarOpen] = useState(false)
 
   useEffect(() => {
     setMounted(true)
@@ -126,23 +135,23 @@ export function HomeClient({ initialUser }: HomeClientProps) {
                   Mein Dashboard Schnellzugriff
                 </p>
 
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                   <Link href="/my-customers" className="group">
                     <motion.div
                       whileHover={{ y: -2 }}
                       whileTap={{ scale: 0.98 }}
-                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200"
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
                     >
-                      <div className="flex items-center gap-4">
-                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
-                          <Users className="w-5.5 h-5.5" />
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <Users className="w-5 h-5" />
                         </div>
                         <div className="text-left">
                           <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Kundenliste</span>
-                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Kunden & Lizenzen verwalten</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Verwalten</span>
                         </div>
                       </div>
-                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
                     </motion.div>
                   </Link>
 
@@ -150,41 +159,42 @@ export function HomeClient({ initialUser }: HomeClientProps) {
                     <motion.div
                       whileHover={{ y: -2 }}
                       whileTap={{ scale: 0.98 }}
-                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200"
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
                     >
-                      <div className="flex items-center gap-4">
-                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
-                          <ClipboardList className="w-5.5 h-5.5" />
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <ClipboardList className="w-5 h-5" />
                         </div>
                         <div className="text-left">
                           <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Bestellungen</span>
-                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Aufträge & Status einsehen</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Status einsehen</span>
                         </div>
                       </div>
-                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
                     </motion.div>
                   </Link>
-                  <Link href="/my-orders" className="group">
+
+                  <button type="button" onClick={() => setCalendarOpen(true)} className="group text-left w-full">
                     <motion.div
                       whileHover={{ y: -2 }}
                       whileTap={{ scale: 0.98 }}
-                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200"
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
                     >
-                      <div className="flex items-center gap-4">
-                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
-                          <Calendar className="w-5.5 h-5.5" />
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <Calendar className="w-5 h-5" />
                         </div>
                         <div className="text-left">
-                          <div className="flex items-center gap-2">
-                            <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Termin-Kalender</span>
+                          <div className="flex items-center gap-1.5">
+                            <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Termine</span>
                             <span className="px-1.5 py-0.5 text-[10px] font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-md">Geplant</span>
                           </div>
-                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Alle Termine im Überblick</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Terminkalender</span>
                         </div>
                       </div>
-                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
                     </motion.div>
-                  </Link>
+                  </button>
                 </div>
               </div>
             </motion.div>
@@ -193,6 +203,52 @@ export function HomeClient({ initialUser }: HomeClientProps) {
         </motion.div>
       </section>
 
+      {/* Dialog / Popup für Termin-Kalender (Geplant) */}
+      <Dialog open={calendarOpen} onOpenChange={setCalendarOpen}>
+        <DialogContent className="bg-slate-900 border-slate-800 text-slate-100 max-w-md">
+          <DialogHeader>
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-2.5 rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                <Calendar className="w-6 h-6" />
+              </div>
+              <div>
+                <DialogTitle className="text-xl font-bold text-white flex items-center gap-2">
+                  Termin-Kalender
+                  <span className="px-2 py-0.5 text-xs font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-full">
+                    In Planung
+                  </span>
+                </DialogTitle>
+              </div>
+            </div>
+            <DialogDescription className="text-slate-400 text-sm leading-relaxed pt-2">
+              Die direkte Termin-Kalender Integration befindet sich aktuell in der Entwicklung. 
+              Hier können Sie in Kürze Schulungs-, Installations- und Beratungstermine direkt buchen und verwalten.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="p-4 my-2 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-400 space-y-2">
+            <div className="flex items-center justify-between text-slate-300 font-medium">
+              <span>Geplante Features:</span>
+            </div>
+            <ul className="list-disc list-inside space-y-1 text-slate-400">
+              <li>Online-Terminbuchung für Kassen-Installationen</li>
+              <li>Schulungstermine vereinbaren</li>
+              <li>Kalender-Synchronisation (Outlook / Google)</li>
+            </ul>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setCalendarOpen(false)}
+              className="w-full sm:w-auto border-slate-700 bg-slate-800 text-slate-200 hover:bg-slate-700 hover:text-white"
+            >
+              Schließen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Grid of modules */}
       <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50 relative">
         <div className="container max-w-6xl mx-auto px-4 relative">