feat(dashboard): align quick access buttons in 3 columns with calendar popup
All checks were successful
Staging Build / build (push) Successful in 2m59s
All checks were successful
Staging Build / build (push) Successful in 2m59s
Convert quick access grid to 3 columns and open in-app dialog modal for calendar button.
This commit is contained in:
DanielS
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user