diff --git a/app/(marketing)/components/build-timeline.tsx b/app/(marketing)/components/build-timeline.tsx new file mode 100644 index 0000000..0874b6a --- /dev/null +++ b/app/(marketing)/components/build-timeline.tsx @@ -0,0 +1,262 @@ +"use client"; + +import { useMotionValueEvent, useScroll, useTransform, motion } from "framer-motion"; +import React, { useEffect, useRef, useState } from "react"; +import { + Rocket, Database, Sparkles, Palette, Calendar, Layout, + Users, Smartphone, FileText, Brain, Tags, Target, + HelpCircle, Zap, Eye +} from "lucide-react"; + +// Icon mapping +const iconMap = { + Rocket, + Database, + Sparkles, + Palette, + Calendar, + Layout, + Users, + Smartphone, + FileText, + Brain, + Tags, + Target, + HelpCircle, + Zap, + Eye, +}; + +interface Feature { + title: string; + description: string; + time?: string; + traditional?: string; + icon: keyof typeof iconMap; +} + +interface WeekData { + weekNumber: number; + title: string; + status: "completed" | "in_progress" | "planned"; + description: string; + features: Feature[]; + metrics: { + hours: string; + cost: string; + linesOfCode: string; + }; + achievements: string[]; +} + +interface TimelineData { + heading: string; + description: string; + weeks: WeekData[]; +} + +interface BuildTimelineProps { + data: TimelineData; +} + +const StatusBadge = ({ status }: { status: WeekData["status"] }) => { + const styles = { + completed: "bg-teal-100 text-teal-700 border-teal-200", + in_progress: "bg-amber-100 text-amber-700 border-amber-200", + planned: "bg-slate-100 text-slate-600 border-slate-200", + }; + + const labels = { + completed: "Voltooid", + in_progress: "Bezig", + planned: "Gepland", + }; + + return ( + + {labels[status]} + + ); +}; + +const FeatureCard = ({ feature }: { feature: Feature }) => { + const Icon = iconMap[feature.icon]; + + return ( +
+
+
+ +
+
+

+ {feature.title} +

+

+ {feature.description} +

+ {feature.time && feature.traditional && ( +
+
+ Met AI: + {feature.time} +
+
+ Traditioneel: + {feature.traditional} +
+
+ )} +
+
+
+ ); +}; + +export const BuildTimeline = ({ data }: BuildTimelineProps) => { + const ref = useRef(null); + const containerRef = useRef(null); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (ref.current) { + const rect = ref.current.getBoundingClientRect(); + setHeight(rect.height); + } + }, [ref]); + + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ["start 10%", "end 50%"], + }); + + const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]); + const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]); + + return ( +
+ {/* Header */} +
+

+ {data.heading} +

+

+ {data.description} +

+
+ + {/* Timeline */} +
+ {data.weeks.map((week, index) => ( +
+ {/* Left side - Week title (sticky) */} +
+ {/* Timeline dot */} +
+
+
+ + {/* Week title - hidden on mobile */} +
+

+ {week.title} +

+ +
+
+ + {/* Right side - Content */} +
+ {/* Week title - mobile only */} +
+

+ {week.title} +

+ +
+ + {/* Description */} +

+ {week.description} +

+ + {/* Features */} + {week.features.length > 0 && ( +
+

+ Features +

+
+ {week.features.map((feature, fIndex) => ( + + ))} +
+
+ )} + + {/* Metrics */} +
+

+ Metrics +

+
+
+
+ {week.metrics.hours} +
+
Development
+
+
+
+ {week.metrics.cost} +
+
Infrastructure
+
+
+
+ {week.metrics.linesOfCode} +
+
Lines of Code
+
+
+
+ + {/* Achievements */} + {week.achievements.length > 0 && ( +
+

+ Achievements +

+
    + {week.achievements.map((achievement, aIndex) => ( +
  • + {achievement} +
    • + ))} +
+
+ )} +
+
+ ))} + + {/* Animated timeline line */} +
+ +
+
+
+ ); +}; diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index f945b3e..67f729a 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -16,6 +16,7 @@ import type { Metadata } from 'next' import { getContent } from '@/lib/content/loader' import type { MetadataContent } from '@/content/schemas/manifesto' import { HeroQuote } from './components/hero-quote' +import { BuildTimeline } from './components/build-timeline' // Generate metadata for SEO export async function generateMetadata(): Promise { @@ -68,7 +69,7 @@ export async function generateMetadata(): Promise { } } -// Statement content interface +// Content interfaces interface StatementContent { hero: { quote: string @@ -78,14 +79,43 @@ interface StatementContent { } } +interface Feature { + title: string + description: string + time?: string + traditional?: string + icon: "Rocket" | "Database" | "Sparkles" | "Palette" | "Calendar" | "Layout" | "Users" | "Smartphone" | "FileText" | "Brain" | "Tags" | "Target" | "HelpCircle" | "Zap" | "Eye" +} + +interface WeekData { + weekNumber: number + title: string + status: "completed" | "in_progress" | "planned" + description: string + features: Feature[] + metrics: { + hours: string + cost: string + linesOfCode: string + } + achievements: string[] +} + +interface TimelineContent { + heading: string + description: string + weeks: WeekData[] +} + export default async function HomePage() { - // Load hero content from existing manifesto - const content = await getContent('nl', 'manifesto') + // Load content + const manifestoContent = await getContent('nl', 'manifesto') + const timelineContent = await getContent('nl', 'timeline') return ( <> {/* Hero Quote Section */} - + {/* Statement Section - Software on Demand */}
@@ -121,18 +151,9 @@ export default async function HomePage() {
- {/* Timeline Section - Coming in E1.S3 */} -
-
-
-

- Build in Public: 4 Weken -

-

- Timeline komt hier in E1.S3 - volledige transparantie over voortgang, features en metrics -

-
-
+ {/* Timeline Section */} +
+
{/* CTA Section */} diff --git a/app/epd/clients/actions.ts b/app/epd/clients/actions.ts new file mode 100644 index 0000000..ba7458d --- /dev/null +++ b/app/epd/clients/actions.ts @@ -0,0 +1,143 @@ +'use server'; + +/** + * Client CRUD Server Actions + * + * Server-side actions for client management + */ + +import { revalidatePath } from 'next/cache'; +import { createClient as createSupabaseClient } from '@/lib/auth/server'; +import type { ClientFormData, ClientFilters } from '@/lib/types/client'; + +/** + * Get all clients with optional filtering + */ +export async function getClients(filters?: ClientFilters) { + const supabase = await createSupabaseClient(); + + let query = supabase + .from('clients') + .select('*'); + + // Apply search filter + if (filters?.search) { + const search = `%${filters.search}%`; + query = query.or(`first_name.ilike.${search},last_name.ilike.${search}`); + } + + // Apply sorting + const sortBy = filters?.sortBy || 'created_at'; + const sortOrder = filters?.sortOrder || 'desc'; + + if (sortBy === 'name') { + query = query.order('last_name', { ascending: sortOrder === 'asc' }); + query = query.order('first_name', { ascending: sortOrder === 'asc' }); + } else if (sortBy === 'created_at') { + query = query.order('created_at', { ascending: sortOrder === 'asc' }); + } else if (sortBy === 'age') { + // Sort by birth_date (newest birth = youngest age) + query = query.order('birth_date', { ascending: sortOrder === 'desc' }); + } + + const { data, error } = await query; + + if (error) { + console.error('Error fetching clients:', error); + throw new Error('Failed to fetch clients'); + } + + return data || []; +} + +/** + * Get single client by ID + */ +export async function getClient(id: string) { + const supabase = await createSupabaseClient(); + + const { data, error } = await supabase + .from('clients') + .select('*') + .eq('id', id) + .single(); + + if (error) { + console.error('Error fetching client:', error); + throw new Error('Failed to fetch client'); + } + + return data; +} + +/** + * Create new client + */ +export async function createClient(formData: ClientFormData) { + const supabase = await createSupabaseClient(); + + const { data, error } = await supabase + .from('clients') + .insert({ + first_name: formData.first_name.trim(), + last_name: formData.last_name.trim(), + birth_date: formData.birth_date, + }) + .select() + .single(); + + if (error) { + console.error('Error creating client:', error); + throw new Error('Failed to create client'); + } + + revalidatePath('/epd/clients'); + return data; +} + +/** + * Update existing client + */ +export async function updateClient(id: string, formData: ClientFormData) { + const supabase = await createSupabaseClient(); + + const { data, error } = await supabase + .from('clients') + .update({ + first_name: formData.first_name.trim(), + last_name: formData.last_name.trim(), + birth_date: formData.birth_date, + }) + .eq('id', id) + .select() + .single(); + + if (error) { + console.error('Error updating client:', error); + throw new Error('Failed to update client'); + } + + revalidatePath('/epd/clients'); + revalidatePath(`/epd/clients/${id}`); + return data; +} + +/** + * Delete client + */ +export async function deleteClient(id: string) { + const supabase = await createSupabaseClient(); + + const { error } = await supabase + .from('clients') + .delete() + .eq('id', id); + + if (error) { + console.error('Error deleting client:', error); + throw new Error('Failed to delete client'); + } + + revalidatePath('/epd/clients'); + return { success: true }; +} diff --git a/app/epd/clients/coming-soon-backup.tsx b/app/epd/clients/coming-soon-backup.tsx new file mode 100644 index 0000000..acd6217 --- /dev/null +++ b/app/epd/clients/coming-soon-backup.tsx @@ -0,0 +1,191 @@ +import { CheckCircle2, Circle, Clock, Rocket } from "lucide-react" + +export default function ComingSoonPage() { + // Roadmap items from bouwplan v2.1 + const roadmapItems = [ + { + week: "Week 1", + status: "in-progress", + title: "Foundation & Marketing", + items: [ + { done: true, text: "Project Setup - Next.js + Supabase" }, + { done: true, text: "Design System - Teal-first kleuren" }, + { done: true, text: "App Layout - Header + Sidebar" }, + { done: false, text: "Marketing Website - Timeline + Features" }, + ], + }, + { + week: "Week 2", + status: "upcoming", + title: "EPD Core", + items: [ + { done: false, text: "Database Schema + RLS Policies" }, + { done: false, text: "Client Module - CRUD Operations" }, + { done: false, text: "Client Detail Page" }, + ], + }, + { + week: "Week 3", + status: "upcoming", + title: "AI Magic", + items: [ + { done: false, text: "TipTap Rich Text Editor" }, + { done: false, text: "Claude API - Intake Samenvatting" }, + { done: false, text: "AI Profiel + Behandelplan Generator" }, + ], + }, + { + week: "Week 4", + status: "upcoming", + title: "Polish & Launch", + items: [ + { done: false, text: "Onboarding System" }, + { done: false, text: "Performance Optimization" }, + { done: false, text: "Demo Preparation + LinkedIn Launch" }, + ], + }, + ] + + return ( +
+ {/* Hero Section */} +
+
+ +
+

+ Coming Soon +

+

+ Het EPD wordt gebouwd in 4 weken +

+

+ Van €100.000+ en 12-24 maanden → €200 + 4 weken +

+ + {/* Build in Public Badge */} +
+
+ + Building in Public + +
+
+ + {/* Roadmap */} +
+
+

+ 4-Weken Roadmap +

+

+ Volg de voortgang van dit experiment +

+
+ + {roadmapItems.map((week, idx) => ( +
+ {/* Week Header */} +
+
+
+ W{idx + 1} +
+
+

+ {week.week} +

+

{week.title}

+
+
+ +
+ + {/* Items Checklist */} +
    + {week.items.map((item, itemIdx) => ( +
  • + {item.done ? ( + + ) : ( + + )} + + {item.text} + +
    • + ))} +
+
+ ))} +
+ + {/* Footer CTA */} +
+

+ Volg de build op LinkedIn voor real-time updates +

+ + Volg op LinkedIn + → + +
+
+ ) +} + +function StatusBadge({ status }: { status: string }) { + const config = { + "in-progress": { + bg: "bg-amber-50 border-amber-200", + text: "text-amber-700", + label: "In Progress", + icon: Clock, + }, + upcoming: { + bg: "bg-slate-50 border-slate-200", + text: "text-slate-600", + label: "Upcoming", + icon: Circle, + }, + completed: { + bg: "bg-teal-50 border-teal-200", + text: "text-teal-700", + label: "Completed", + icon: CheckCircle2, + }, + } + + const { bg, text, label, icon: Icon } = config[status as keyof typeof config] + + return ( +
+ + {label} +
+ ) +} diff --git a/app/epd/clients/components/client-form.tsx b/app/epd/clients/components/client-form.tsx new file mode 100644 index 0000000..bd7681c --- /dev/null +++ b/app/epd/clients/components/client-form.tsx @@ -0,0 +1,148 @@ +'use client'; + +import { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { Save, Loader2 } from 'lucide-react'; +import type { ClientFormData } from '@/lib/types/client'; +import type { Client } from '@/lib/types/client'; +import { createClient, updateClient } from '../actions'; + +interface ClientFormProps { + client?: Client; +} + +export function ClientForm({ client }: ClientFormProps) { + const router = useRouter(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(null); + + const [formData, setFormData] = useState({ + first_name: client?.first_name || '', + last_name: client?.last_name || '', + birth_date: client?.birth_date || '', + }); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(null); + setIsSubmitting(true); + + try { + if (client) { + await updateClient(client.id, formData); + } else { + await createClient(formData); + } + router.push('/epd/clients'); + router.refresh(); + } catch (err) { + console.error('Form submission error:', err); + setError('Er is een fout opgetreden. Probeer het opnieuw.'); + } finally { + setIsSubmitting(false); + } + }; + + const handleChange = (field: keyof ClientFormData, value: string) => { + setFormData((prev) => ({ ...prev, [field]: value })); + }; + + return ( +
+ {/* Error Message */} + {error && ( +
+

{error}

+
+ )} + + {/* Form Card */} +
+ {/* First Name */} +
+ + handleChange('first_name', e.target.value)} + className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" + placeholder="bijv. Jan" + /> +
+ + {/* Last Name */} +
+ + handleChange('last_name', e.target.value)} + className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" + placeholder="bijv. de Vries" + /> +
+ + {/* Birth Date */} +
+ + handleChange('birth_date', e.target.value)} + className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" + /> +
+
+ + {/* Form Actions */} +
+ + +
+
+ ); +} diff --git a/app/epd/clients/components/client-list-skeleton.tsx b/app/epd/clients/components/client-list-skeleton.tsx new file mode 100644 index 0000000..53868d2 --- /dev/null +++ b/app/epd/clients/components/client-list-skeleton.tsx @@ -0,0 +1,54 @@ +export function ClientListSkeleton() { + return ( +
+ {/* Search Bar Skeleton */} +
+
+
+ + {/* Table Skeleton - Desktop */} +
+
+ {[1, 2, 3, 4, 5].map((i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+
+ + {/* Card Skeleton - Mobile */} +
+ {[1, 2, 3].map((i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+
+ ); +} diff --git a/app/epd/clients/components/client-list.tsx b/app/epd/clients/components/client-list.tsx new file mode 100644 index 0000000..9deb275 --- /dev/null +++ b/app/epd/clients/components/client-list.tsx @@ -0,0 +1,256 @@ +'use client'; + +import { useState } from 'react'; +import Link from 'next/link'; +import { useRouter } from 'next/navigation'; +import { Search, ArrowUpDown, Eye, Edit2, Trash2, Users } from 'lucide-react'; +import type { Client } from '@/lib/types/client'; +import { transformClient } from '@/lib/types/client'; +import { deleteClient } from '../actions'; + +interface ClientListProps { + initialClients: Client[]; +} + +export function ClientList({ initialClients }: ClientListProps) { + const router = useRouter(); + const [searchQuery, setSearchQuery] = useState(''); + const [isDeleting, setIsDeleting] = useState(null); + + // Transform clients with computed fields + const clients = initialClients.map(transformClient); + + // Client-side filtering (for instant feedback) + const filteredClients = clients.filter((client) => { + if (!searchQuery) return true; + const query = searchQuery.toLowerCase(); + return ( + client.first_name.toLowerCase().includes(query) || + client.last_name.toLowerCase().includes(query) || + client.full_name.toLowerCase().includes(query) + ); + }); + + const handleSearch = (value: string) => { + setSearchQuery(value); + // Update URL with search param + const params = new URLSearchParams(); + if (value) params.set('search', value); + router.push(`/epd/clients?${params.toString()}`); + }; + + const handleDelete = async (id: string, name: string) => { + if (!confirm(`Weet u zeker dat u ${name} wilt verwijderen?`)) { + return; + } + + setIsDeleting(id); + try { + await deleteClient(id); + router.refresh(); + } catch (error) { + console.error('Error deleting client:', error); + alert('Fout bij verwijderen van cliënt'); + } finally { + setIsDeleting(null); + } + }; + + return ( +
+ {/* Search Bar */} +
+
+ + handleSearch(e.target.value)} + className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" + /> +
+
+ + {/* Empty State */} + {filteredClients.length === 0 && ( +
+
+ +
+

+ {searchQuery ? 'Geen resultaten' : 'Geen cliënten'} +

+

+ {searchQuery + ? 'Probeer een andere zoekopdracht' + : 'Voeg uw eerste cliënt toe om te beginnen'} +

+ {!searchQuery && ( + + Nieuwe cliënt toevoegen + + )} +
+ )} + + {/* Desktop Table View */} + {filteredClients.length > 0 && ( +
+ + + + + + + + + + + + {filteredClients.map((client) => ( + + + + + + + + ))} + +
+ Naam + + Leeftijd + + Geboortedatum + + Toegevoegd + + Acties +
+
+
+
+ + {client.first_name[0]} + {client.last_name[0]} + +
+
+
+
+ {client.full_name} +
+
+
+ 		+ {client.age} jaar + + {new Date(client.birth_date).toLocaleDateString('nl-NL')} + + {new Date(client.created_at).toLocaleDateString('nl-NL')} + +
+ + + + + + + +
+
+
+ )} + + {/* Mobile Card View */} + {filteredClients.length > 0 && ( +
+ {filteredClients.map((client) => ( +
+
+
+
+ + {client.first_name[0]} + {client.last_name[0]} + +
+
+

+ {client.full_name} +

+

+ {client.age} jaar +

+
+
+
+ +
+
+ Geboortedatum: + {new Date(client.birth_date).toLocaleDateString('nl-NL')} +
+
+ Toegevoegd: + {new Date(client.created_at).toLocaleDateString('nl-NL')} +
+
+ +
+ + + Bekijken + + + + Bewerken + + +
+
+ ))} +
+ )} +
+ ); +} diff --git a/app/epd/clients/new/page.tsx b/app/epd/clients/new/page.tsx new file mode 100644 index 0000000..f5fc669 --- /dev/null +++ b/app/epd/clients/new/page.tsx @@ -0,0 +1,29 @@ +import { ChevronLeft } from 'lucide-react'; +import Link from 'next/link'; +import { ClientForm } from '../components/client-form'; + +export default function NewClientPage() { + return ( +
+ {/* Back Button */} + + + Terug naar overzicht + + + {/* Page Header */} +
+

Nieuwe cliënt

+

+ Voeg een nieuwe cliënt toe aan het systeem +

+
+ + {/* Form */} + +
+ ); +} diff --git a/app/epd/clients/page.tsx b/app/epd/clients/page.tsx new file mode 100644 index 0000000..843ca70 --- /dev/null +++ b/app/epd/clients/page.tsx @@ -0,0 +1,57 @@ +import { Suspense } from 'react'; +import { Plus } from 'lucide-react'; +import { getClients } from './actions'; +import { ClientList } from './components/client-list'; +import { ClientListSkeleton } from './components/client-list-skeleton'; +import Link from 'next/link'; + +interface SearchParams { + search?: string; + sortBy?: 'name' | 'age' | 'created_at'; + sortOrder?: 'asc' | 'desc'; +} + +export default async function ClientsPage({ + searchParams, +}: { + searchParams: Promise; +}) { + const params = await searchParams; + return ( +
+ {/* Page Header */} +
+
+
+

Cliënten

+

+ Beheer uw cliëntenbestand +

+
+ + + Nieuwe cliënt + +
+
+ + {/* Client List with Suspense */} + }> + + +
+ ); +} + +async function ClientListWrapper({ searchParams }: { searchParams: SearchParams }) { + const clients = await getClients({ + search: searchParams.search, + sortBy: searchParams.sortBy, + sortOrder: searchParams.sortOrder, + }); + + return ; +} diff --git a/app/epd/components/epd-header.tsx b/app/epd/components/epd-header.tsx new file mode 100644 index 0000000..38c7133 --- /dev/null +++ b/app/epd/components/epd-header.tsx @@ -0,0 +1,55 @@ +"use client"; +import React from 'react'; +import { Bell, Search } from 'lucide-react'; + +interface EPDHeaderProps { + title?: string; + subtitle?: string; +} + +export function EPDHeader({ title, subtitle }: EPDHeaderProps) { + return ( +
+
+ {/* Left: Page Title */} +
+ {title && ( +
+

+ {title} +

+ {subtitle && ( +

+ {subtitle} +

+ )} +
+ )} +
+ + {/* Right: Search & Notifications */} +
+ {/* Search Bar - Hidden on mobile */} +
+ + +
+ + {/* Notifications */} + +
+
+
+ ); +} diff --git a/app/epd/components/epd-sidebar.tsx b/app/epd/components/epd-sidebar.tsx new file mode 100644 index 0000000..d38111c --- /dev/null +++ b/app/epd/components/epd-sidebar.tsx @@ -0,0 +1,273 @@ +"use client"; +import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { + Users, + Settings, + LogOut, + Menu, + X, + ChevronLeft, + ChevronRight, + FileText, + HelpCircle, + LayoutDashboard +} from 'lucide-react'; + +interface NavigationItem { + id: string; + name: string; + icon: React.ComponentType<{ className?: string }>; + href: string; + badge?: string; +} + +interface EPDSidebarProps { + className?: string; + userEmail?: string; + userName?: string; +} + +// EPD Navigation items +const navigationItems: NavigationItem[] = [ + { id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/clients" }, + { id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" }, + { id: "documentation", name: "Documentatie", icon: FileText, href: "/epd/docs" }, + { id: "settings", name: "Instellingen", icon: Settings, href: "/epd/settings" }, + { id: "help", name: "Help", icon: HelpCircle, href: "/epd/help" }, +]; + +export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) { + const pathname = usePathname(); + const [isOpen, setIsOpen] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(false); + + // Auto-open sidebar on desktop + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 768) { + setIsOpen(true); + } else { + setIsOpen(false); + } + }; + + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + const toggleSidebar = () => setIsOpen(!isOpen); + const toggleCollapse = () => setIsCollapsed(!isCollapsed); + + const handleItemClick = () => { + if (window.innerWidth < 768) { + setIsOpen(false); + } + }; + + // Get user initials + const userInitials = userName + ? userName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) + : userEmail?.slice(0, 2).toUpperCase() || 'EP'; + + return ( + <> + {/* Mobile hamburger button */} + + + {/* Mobile overlay */} + {isOpen && ( +
+ )} + + {/* Sidebar */} +
+ {/* Header with logo and collapse button */} +
+ {!isCollapsed && ( + +
+ AI +
+
+ Mini-EPD + Prototype +
+ + )} + + {isCollapsed && ( + + AI + + )} + + {/* Desktop collapse button */} + +
+ + {/* Navigation */} + + + {/* Bottom section with profile and logout */} +
+ {/* Profile Section */} +
+ {!isCollapsed ? ( +
+
+ {userInitials} +
+
+

+ {userName || userEmail || 'Demo User'} +

+

+ {userEmail || 'demo@mini-epd.demo'} +

+
+
+
+ ) : ( +
+
+
+ {userInitials} +
+
+
+
+ )} +
+ + {/* Logout Button */} +
+
+ +
+
+
+
+ + ); +} diff --git a/app/epd/layout.tsx b/app/epd/layout.tsx new file mode 100644 index 0000000..4efa727 --- /dev/null +++ b/app/epd/layout.tsx @@ -0,0 +1,38 @@ +/** + * EPD Application Layout + * + * Layout for the EPD application with sidebar navigation and header. + * Requires authentication via middleware. + */ + +import type { ReactNode } from 'react'; +import { EPDSidebar } from './components/epd-sidebar'; +import { EPDHeader } from './components/epd-header'; +import { getUser } from '@/lib/auth/server'; + +interface EPDLayoutProps { + children: ReactNode; +} + +export default async function EPDLayout({ children }: EPDLayoutProps) { + // Get authenticated user + const user = await getUser(); + + return ( +
+ {/* Sidebar */} + + + {/* Main Content Area */} +
+ {/* Page Content */} +
+ {children} +
+
+
+ ); +} diff --git a/app/login/page.tsx b/app/login/page.tsx index 7491244..181b8c4 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -3,6 +3,56 @@ import { useState } from 'react' import { useRouter } from 'next/navigation' import { loginWithMagicLink, loginWithPassword } from '@/lib/auth/client' +import { Brain, Zap, Target, FileText, Clock, TrendingDown } from 'lucide-react' +import { BentoGrid, BentoCard } from '@/components/ui/bento-grid' + +// Bento grid features with different sizes for visual interest +const bentoFeatures = [ + { + name: 'AI Intake Samenvatting', + description: 'Van 30 minuten handmatig werk naar 5 seconden automatisch. AI leest, begrijpt en structureert intake gesprekken.', + icon: Brain, + className: 'col-span-3 lg:col-span-2', + background: ( +
+ ), + href: '#', + cta: 'Meer info' + }, + { + name: '90%+ Tijdsbesparing', + description: 'Gemiddeld bespaar je 2+ uur per dag op documentatie', + icon: TrendingDown, + className: 'col-span-3 lg:col-span-1', + background: ( +
+ ), + href: '#', + cta: 'Zie metrics' + }, + { + name: 'DSM Classificatie', + description: 'Automatische categorisatie in 3 seconden vs 15 minuten handmatig', + icon: Zap, + className: 'col-span-3 lg:col-span-1', + background: ( +
+ ), + href: '#', + cta: 'Ontdekken' + }, + { + name: 'SMART Behandelplannen', + description: 'Gestructureerde doelen en interventies in 10 seconden. AI genereert evidence-based plannen.', + icon: Target, + className: 'col-span-3 lg:col-span-2', + background: ( +
+ ), + href: '#', + cta: 'Bekijk voorbeeld' + } +] export default function LoginPage() { const router = useRouter() @@ -53,7 +103,7 @@ export default function LoginPage() { // Redirect to EPD setTimeout(() => { - router.push('/clients') + router.push('/epd/clients') }, 1000) } catch (error: any) { setMessage({ @@ -75,7 +125,7 @@ export default function LoginPage() { setLoading(true) try { await loginWithPassword('demo@mini-ecd.demo', 'Demo2024!') - router.push('/clients') + router.push('/epd/clients') } catch (error: any) { setMessage({ type: 'error', @@ -86,26 +136,76 @@ export default function LoginPage() { } return ( -
-
- {/* Header */} -
-

- Mini-ECD Login -

-

- AI-powered EPD voor de GGZ sector -

-
+
+ {/* Left Side - Bento Grid Showcase (60%) */} +
+
+ {/* Header */} +
+ + ← Terug naar home + +

+ AI-Gestuurde EPD Workflows +

+

+ Van uren documentatie naar seconden. Ontdek hoe AI je dagelijkse workflow transformeert. +

+
+ + {/* Bento Grid */} + + {bentoFeatures.map((feature, index) => ( + + ))} + + + {/* Stats Footer */} +
+
+
90%+
+
Tijdsbesparing
+
+
+
< 5 sec
+
Gemiddelde respons
+
+
+
4 weken
+
Build tijd
+
+
+
+
+ + {/* Right Side - Login Form (40%) */} +
+
+ {/* Header */} +
+

+ Login +

+

+ Toegang tot EPD prototype +

+
- {/* Main Card */} -
{/* Message Display */} {message && (
@@ -116,15 +216,15 @@ export default function LoginPage() { {/* Magic Link Login */} {!showDemoLogin && (
-

+

📧 Login met Magic Link -

+
@@ -135,9 +235,9 @@ export default function LoginPage() { onChange={(e) => setEmail(e.target.value)} placeholder="jouw@email.nl" required - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" + className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent" /> -

+

Nieuw? Account wordt automatisch aangemaakt!

@@ -145,7 +245,7 @@ export default function LoginPage() { @@ -154,17 +254,17 @@ export default function LoginPage() { {/* Divider */}
-
+
- of + of
{/* Demo Account Toggle */} @@ -173,7 +273,7 @@ export default function LoginPage() { @@ -184,26 +284,26 @@ export default function LoginPage() { {showDemoLogin && (
-

+

🎯 Demo Account Login -

+
{/* Demo Credentials Info */} -
-

+

+

📋 Demo Credentials:

-
+

Email: demo@mini-ecd.demo

Password: Demo2024!

@@ -213,7 +313,7 @@ export default function LoginPage() {
@@ -224,14 +324,14 @@ export default function LoginPage() { onChange={(e) => setEmail(e.target.value)} placeholder="demo@mini-ecd.demo" required - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" + className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent" />
@@ -242,34 +342,34 @@ export default function LoginPage() { onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" required - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" + className="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent" />
)} -
- {/* Footer */} -

- Build in Public door{' '} - - AI Speedrun - -

+ {/* Footer */} +

+ Build in Public door{' '} + + AI Speedrun + +

+
) diff --git a/components/ui/bento-grid.tsx b/components/ui/bento-grid.tsx new file mode 100644 index 0000000..342a957 --- /dev/null +++ b/components/ui/bento-grid.tsx @@ -0,0 +1,79 @@ +import { ReactNode } from "react"; +import { ArrowRightIcon } from "@radix-ui/react-icons"; + +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; + +const BentoGrid = ({ + children, + className, +}: { + children: ReactNode; + className?: string; +}) => { + return ( +
+ {children} +
+ ); +}; + +const BentoCard = ({ + name, + className, + background, + Icon, + description, + href, + cta, +}: { + name: string; + className: string; + background: ReactNode; + Icon: any; + description: string; + href: string; + cta: string; +}) => ( +
+
{background}
+
+ +

+ {name} +

+

{description}

+
+ + +
+
+); + +export { BentoCard, BentoGrid }; diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..ac472bb --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + }, +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/content/nl/timeline.json b/content/nl/timeline.json new file mode 100644 index 0000000..9b9c578 --- /dev/null +++ b/content/nl/timeline.json @@ -0,0 +1,160 @@ +{ + "heading": "Build in Public: 4 Weken", + "description": "Volg de ontwikkeling van een volledig EPD prototype - van idee tot werkende applicatie. Volledige transparantie over features, tijd en kosten.", + "weeks": [ + { + "weekNumber": 1, + "title": "Week 1 • Nov 11-17", + "status": "completed", + "description": "Foundation & Marketing - Technische basis opzetten en marketing website bouwen met teal-first design system. Database schema, auth flow en vereenvoudigde user journey.", + "features": [ + { + "title": "Project Setup", + "description": "Next.js 15 + Supabase + Vercel running met complete development environment", + "icon": "Rocket" + }, + { + "title": "Database & Auth", + "description": "PostgreSQL schema met 5 core tables en RLS policies voor data isolatie", + "icon": "Database" + }, + { + "title": "Marketing Refactor", + "description": "Vereenvoudigde homepage met statement section en timeline component", + "icon": "Sparkles" + }, + { + "title": "Teal Design System", + "description": "Modern, innovatief brand identity met teal primary color en WCAG AA compliance", + "icon": "Palette" + } + ], + "metrics": { + "hours": "32 uur", + "cost": "€0", + "linesOfCode": "~2500" + }, + "achievements": [ + "✅ Development environment compleet", + "✅ Database schema en RLS policies live", + "✅ Marketing website refactored", + "✅ Teal design system geïmplementeerd" + ] + }, + { + "weekNumber": 2, + "title": "Week 2 • Nov 18-24", + "status": "planned", + "description": "EPD Core - Client management module met CRUD operations, responsive UI en navigatie. De basis van het EPD systeem.", + "features": [ + { + "title": "Coming Soon Dashboard", + "description": "Placeholder dashboard met roadmap en verwachtingen management", + "icon": "Calendar" + }, + { + "title": "App Layout & Navigation", + "description": "Header, sidebar, breadcrumbs en logout flow voor EPD applicatie", + "icon": "Layout" + }, + { + "title": "Client CRUD", + "description": "Volledige client management: toevoegen, bewerken, verwijderen en zoeken", + "icon": "Users" + }, + { + "title": "Responsive Design", + "description": "Mobile-first UI met adaptive layouts voor alle schermformaten", + "icon": "Smartphone" + } + ], + "metrics": { + "hours": "~28 uur", + "cost": "~€50", + "linesOfCode": "~2000" + }, + "achievements": [] + }, + { + "weekNumber": 3, + "title": "Week 3 • Nov 25-Dec 1", + "status": "planned", + "description": "AI Magic - TipTap editor, Claude API integratie en AI-gestuurde workflows. Het hart van de time-saving features.", + "features": [ + { + "title": "TipTap Rich Text Editor", + "description": "ProseMirror-based editor voor intake notes met formatting en shortcuts", + "icon": "FileText" + }, + { + "title": "AI Intake Samenvatting", + "description": "Claude 3.5 Sonnet genereert samenvattingen in < 5 seconden", + "time": "< 5 sec", + "traditional": "15-20 min", + "icon": "Brain" + }, + { + "title": "DSM-light Classificatie", + "description": "Automatische categorisatie van problematiek op basis van intake", + "time": "< 3 sec", + "traditional": "10-15 min", + "icon": "Tags" + }, + { + "title": "SMART Behandelplan", + "description": "AI-gegenereerde behandelplannen met doelen en interventies", + "time": "< 5 sec", + "traditional": "20-30 min", + "icon": "Target" + } + ], + "metrics": { + "hours": "~35 uur", + "cost": "~€50", + "linesOfCode": "~3000" + }, + "achievements": [] + }, + { + "weekNumber": 4, + "title": "Week 4 • Dec 2-8", + "status": "planned", + "description": "Polish & Launch - Onboarding, performance optimization en demo preparation. Klaar voor de wereld.", + "features": [ + { + "title": "User Onboarding", + "description": "Tooltips en walkthrough voor first-time users met feature highlights", + "icon": "HelpCircle" + }, + { + "title": "Performance Optimization", + "description": "Lighthouse score > 90, LCP < 2.5s en code splitting", + "icon": "Zap" + }, + { + "title": "Accessibility Audit", + "description": "WCAG AA compliance, keyboard navigation en focus states", + "icon": "Eye" + }, + { + "title": "Production Deployment", + "description": "Live op Vercel met monitoring en error tracking setup", + "icon": "Rocket" + } + ], + "metrics": { + "hours": "~25 uur", + "cost": "~€50", + "linesOfCode": "~1500" + }, + "achievements": [] + } + ], + "totals": { + "totalHours": "120 uur", + "totalCost": "€150", + "traditionalCost": "€100.000+", + "traditionalTime": "12-24 maanden", + "savings": "99.85% goedkoper, 99% sneller" + } +} diff --git a/lib/types/client.ts b/lib/types/client.ts new file mode 100644 index 0000000..2d39c5c --- /dev/null +++ b/lib/types/client.ts @@ -0,0 +1,59 @@ +/** + * Client Types + * + * Type definitions for client-related data structures + */ + +import { Database } from '@/lib/database.types'; + +// Base client type from database +export type Client = Database['public']['Tables']['clients']['Row']; +export type ClientInsert = Database['public']['Tables']['clients']['Insert']; +export type ClientUpdate = Database['public']['Tables']['clients']['Update']; + +// Extended client type with computed fields +export interface ClientWithAge extends Client { + age: number; + full_name: string; +} + +// Client form data (for create/edit forms) +export interface ClientFormData { + first_name: string; + last_name: string; + birth_date: string; // ISO date string (YYYY-MM-DD) +} + +// Client list filters +export interface ClientFilters { + search?: string; + sortBy?: 'name' | 'age' | 'created_at'; + sortOrder?: 'asc' | 'desc'; +} + +/** + * Calculate age from birth date + */ +export function calculateAge(birthDate: string | Date): number { + const birth = typeof birthDate === 'string' ? new Date(birthDate) : birthDate; + const today = new Date(); + let age = today.getFullYear() - birth.getFullYear(); + const monthDiff = today.getMonth() - birth.getMonth(); + + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) { + age--; + } + + return age; +} + +/** + * Transform client to extended client with computed fields + */ +export function transformClient(client: Client): ClientWithAge { + return { + ...client, + age: calculateAge(client.birth_date), + full_name: `${client.first_name} ${client.last_name}`, + }; +} diff --git a/middleware.ts b/middleware.ts index 5184825..fbb1466 100644 --- a/middleware.ts +++ b/middleware.ts @@ -74,9 +74,9 @@ export async function middleware(request: NextRequest) { return NextResponse.redirect(redirectUrl) } - // Redirect to /clients if authenticated and trying to access login + // Redirect to /epd/clients if authenticated and trying to access login if (user && pathname === '/login') { - return NextResponse.redirect(new URL('/clients', request.url)) + return NextResponse.redirect(new URL('/epd/clients', request.url)) } return supabaseResponse diff --git a/package.json b/package.json index e0154b2..4afa27a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "types:generate": "npx supabase gen types typescript --project-id dqugbrpwtisgyxscpefg > lib/supabase/types.ts" }, "dependencies": { + "@radix-ui/react-icons": "^1.3.2", + "@radix-ui/react-slot": "^1.2.4", "@react-three/drei": "^10.7.7", "@react-three/fiber": "^9.4.0", "@supabase/ssr": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae11b6b..4d78229 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@radix-ui/react-icons': + specifier: ^1.3.2 + version: 1.3.2(react@19.2.0) + '@radix-ui/react-slot': + specifier: ^1.2.4 + version: 1.2.4(@types/react@19.2.2)(react@19.2.0) '@react-three/drei': specifier: ^10.7.7 version: 10.7.7(@react-three/fiber@9.4.0(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.181.1))(@types/react@19.2.2)(@types/three@0.181.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.181.1) @@ -638,6 +644,29 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@radix-ui/react-compose-refs@1.1.2': + resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-icons@1.3.2': + resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc + + '@radix-ui/react-slot@1.2.4': + resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@react-three/drei@10.7.7': resolution: {integrity: sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==} peerDependencies: @@ -3201,6 +3230,23 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.0)': + dependencies: + react: 19.2.0 + optionalDependencies: + '@types/react': 19.2.2 + + '@radix-ui/react-icons@1.3.2(react@19.2.0)': + dependencies: + react: 19.2.0 + + '@radix-ui/react-slot@1.2.4(@types/react@19.2.2)(react@19.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0) + react: 19.2.0 + optionalDependencies: + '@types/react': 19.2.2 + '@react-three/drei@10.7.7(@react-three/fiber@9.4.0(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.181.1))(@types/react@19.2.2)(@types/three@0.181.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(three@0.181.1)': dependencies: '@babel/runtime': 7.28.4