customer login is working and customer dashboard created

src/App.jsx

@@ -8,6 +8,7 @@ import Dashboard from './pages/Dashboard';
 import Maps from './pages/Maps';
 import AdminSchedule from './pages/AdminSchedule';
 import CustomerProfile from './pages/CustomerProfile';
+import CustomerDashboard from './pages/CustomerDashboard';
 import LeaderboardPage from './pages/LeaderboardPage';
 import ErrorBoundary from './components/ErrorBoundary';
 import SmoothScroll from './components/SmoothScroll';
@@ -109,7 +110,12 @@ function App() {
               }
             />
 
-            {/* Protected Field Agent Routes */}
+            {/* Customer Portal Routes */}
+            <Route path="/portal/dashboard" element={
+              <ProtectedRoute allowedRoles={['CUSTOMER']}>
+                <CustomerDashboard />
+              </ProtectedRoute>
+            } />
             <Route path="/portal/profile" element={
               <ProtectedRoute allowedRoles={['CUSTOMER']}>
                 <CustomerProfile />

src/components/Layout.jsx

@@ -219,7 +219,8 @@ const Layout = () => {
                 ];
             default: // Customer or Fallback
                 return [
-                    { to: "/customer/profile", icon: LayoutDashboard, label: "Dashboard" },
+                    { to: "/portal/dashboard", icon: LayoutDashboard, label: "Dashboard" },
+                    { to: "/portal/profile", icon: User, label: "My Profile" },
                     ...commonItems,
                 ];
         }

src/data/mockStore.jsx

@@ -986,7 +986,7 @@ function generateMockMeetings() {
             status: 'Completed',
             agentName: 'Hannah Reyes',
             dealValue: 1500,
-            notes: 'Minor repairs completed. Payment received.',
+            notes: 'Minor repairs completed.',
             issueDescription: 'Leak in garage.',
             customerComments: 'Please call before arriving.',
             outcome: 'Repairs Completed'

src/pages/CustomerDashboard.jsx

@@ -0,0 +1,205 @@
+/**
+ * CustomerDashboard — the landing screen for logged-in customers (role: CUSTOMER).
+ *
+ * Rendered at /portal/dashboard and linked from the "Dashboard" item in the
+ * customer sidebar. Gives the homeowner an at-a-glance overview of their work
+ * with LynkedUp: upcoming inspections/visits, recent job history, what they've
+ * invested, plus quick links into Payments and their Profile.
+ *
+ * Data comes from the mock store (meetings) — the same source CustomerProfile uses.
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { useMockStore } from '../data/mockStore';
+import { SpotlightCard } from '../components/SpotlightCard';
+import {
+    Calendar, Clock, CheckCircle, DollarSign, Sparkles, User as UserIcon,
+    MessageSquare, Home, ArrowRight, Wrench,
+} from 'lucide-react';
+
+const CustomerDashboard = () => {
+    const { user } = useAuth();
+    const { meetings } = useMockStore();
+
+    // My visits — match by explicit id link, fall back to name for legacy data
+    const myMeetings = (meetings || []).filter(m =>
+        (m.customerId === user?.id) || (m.customerName === user?.name)
+    );
+
+    const startOfToday = () => {
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        return d;
+    };
+
+    const upcomingVisits = myMeetings
+        .filter(m => new Date(m.date) >= startOfToday() && m.status !== 'Completed' && m.status !== 'Cancelled')
+        .sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    const pastVisits = myMeetings
+        .filter(m => new Date(m.date) < startOfToday() || m.status === 'Completed')
+        .sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    const totalInvested = pastVisits.reduce((sum, m) => sum + (m.dealValue || 0), 0);
+    const nextVisit = upcomingVisits[0];
+
+    const firstName = (user?.name || 'there').split(' ')[0];
+
+    const stats = [
+        { label: 'Upcoming Visits', value: upcomingVisits.length, icon: Calendar, accent: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20', ring: 'border-blue-100 dark:border-blue-500/20' },
+        { label: 'Completed Jobs', value: pastVisits.length, icon: CheckCircle, accent: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20', ring: 'border-emerald-100 dark:border-emerald-500/20' },
+        { label: 'Total Invested', value: `$${totalInvested.toLocaleString()}`, icon: DollarSign, accent: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20', ring: 'border-amber-100 dark:border-amber-500/20' },
+    ];
+
+    const quickActions = [
+        { to: '/estimate', label: 'Estimate Wizard', desc: 'Build a new roof estimate', icon: Sparkles, accent: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
+        { to: '/portal/profile', label: 'My Profile', desc: 'Update your details & property', icon: UserIcon, accent: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20' },
+        { to: '/chat-assistant', label: 'Ask Assistant', desc: 'Get help anytime', icon: MessageSquare, accent: 'text-purple-600 dark:text-purple-400', bg: 'bg-purple-50 dark:bg-purple-900/20' },
+    ];
+
+    return (
+        <div className="min-h-screen bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white p-4 sm:p-8 pt-20 sm:pt-24 transition-colors duration-300">
+            <div className="max-w-5xl mx-auto space-y-8">
+
+                {/* --- Welcome header --- */}
+                <div className="flex items-center gap-4">
+                    <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-2xl font-bold text-white shadow-lg shrink-0">
+                        {user?.name?.charAt(0) || 'C'}
+                    </div>
+                    <div>
+                        <h1 className="text-2xl sm:text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60">
+                            Welcome back, {firstName}
+                        </h1>
+                        <p className="text-zinc-500 dark:text-zinc-400 text-sm sm:text-base">Here's what's happening with your property.</p>
+                    </div>
+                </div>
+
+                {/* --- Stat cards --- */}
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    {stats.map((stat) => {
+                        const Icon = stat.icon;
+                        return (
+                            <SpotlightCard key={stat.label} className="p-5">
+                                <div className="flex items-center gap-4">
+                                    <div className={`w-12 h-12 rounded-xl ${stat.bg} ${stat.ring} border flex items-center justify-center ${stat.accent} shrink-0`}>
+                                        <Icon size={22} />
+                                    </div>
+                                    <div>
+                                        <div className="text-2xl font-black leading-none">{stat.value}</div>
+                                        <div className="text-xs font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 mt-1.5">{stat.label}</div>
+                                    </div>
+                                </div>
+                            </SpotlightCard>
+                        );
+                    })}
+                </div>
+
+                {/* --- Next visit highlight --- */}
+                <section>
+                    <h2 className="text-lg font-bold mb-4 flex items-center text-zinc-800 dark:text-zinc-200">
+                        <Calendar className="mr-2 text-blue-500" size={20} /> Your Next Visit
+                    </h2>
+                    {nextVisit ? (
+                        <SpotlightCard className="p-6">
+                            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                                <div className="flex items-center gap-4">
+                                    <div className="w-14 h-14 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20 shrink-0">
+                                        <span className="text-[10px] uppercase font-bold">{new Date(nextVisit.date).toLocaleString('default', { month: 'short' })}</span>
+                                        <span className="text-xl font-bold leading-none">{new Date(nextVisit.date).getDate()}</span>
+                                    </div>
+                                    <div>
+                                        <h3 className="font-bold text-lg">{nextVisit.notes || 'Scheduled Visit'}</h3>
+                                        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400 mt-1">
+                                            <span className="flex items-center"><Clock size={14} className="mr-1" /> {nextVisit.time || 'TBD'}</span>
+                                            <span className="flex items-center"><UserIcon size={14} className="mr-1" /> {nextVisit.agentName || 'Assigned Agent'}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <span className="self-start px-3 py-1 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 text-xs font-bold uppercase rounded-full">
+                                    {nextVisit.status}
+                                </span>
+                            </div>
+                            {nextVisit.issueDescription && (
+                                <div className="mt-4 pt-4 border-t border-zinc-100 dark:border-white/5 flex items-start gap-2 text-sm text-zinc-600 dark:text-zinc-400">
+                                    <Wrench size={15} className="mt-0.5 shrink-0 text-zinc-400" />
+                                    <span>{nextVisit.issueDescription}</span>
+                                </div>
+                            )}
+                        </SpotlightCard>
+                    ) : (
+                        <div className="p-8 text-center border border-dashed border-zinc-300 dark:border-zinc-700 rounded-xl text-zinc-500">
+                            No upcoming visits scheduled. We'll let you know when one is booked.
+                        </div>
+                    )}
+                </section>
+
+                {/* --- Quick actions --- */}
+                <section>
+                    <h2 className="text-lg font-bold mb-4 flex items-center text-zinc-800 dark:text-zinc-200">
+                        <Home className="mr-2 text-zinc-500" size={20} /> Quick Actions
+                    </h2>
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                        {quickActions.map((action) => {
+                            const Icon = action.icon;
+                            return (
+                                <Link key={action.to} to={action.to}>
+                                    <SpotlightCard className="p-5 h-full group cursor-pointer hover:-translate-y-1 transition-transform duration-300">
+                                        <div className={`w-11 h-11 rounded-xl ${action.bg} flex items-center justify-center ${action.accent} mb-4`}>
+                                            <Icon size={20} />
+                                        </div>
+                                        <div className="flex items-center justify-between">
+                                            <h3 className="font-bold">{action.label}</h3>
+                                            <ArrowRight size={16} className="text-zinc-400 group-hover:translate-x-1 transition-transform" />
+                                        </div>
+                                        <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{action.desc}</p>
+                                    </SpotlightCard>
+                                </Link>
+                            );
+                        })}
+                    </div>
+                </section>
+
+                {/* --- Recent activity --- */}
+                <section>
+                    <h2 className="text-lg font-bold mb-4 flex items-center text-zinc-800 dark:text-zinc-200">
+                        <CheckCircle className="mr-2 text-emerald-500" size={20} /> Recent Activity
+                    </h2>
+                    {pastVisits.length > 0 ? (
+                        <div className="grid gap-3">
+                            {pastVisits.slice(0, 3).map((visit) => (
+                                <SpotlightCard key={visit.id} className="p-5">
+                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                                        <div className="flex items-center gap-4">
+                                            <div className="w-10 h-10 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-zinc-500 shrink-0">
+                                                <CheckCircle size={18} />
+                                            </div>
+                                            <div>
+                                                <div className="flex items-center gap-2 flex-wrap">
+                                                    <h4 className="font-bold">{visit.agentName || 'Agent'}</h4>
+                                                    <span className="text-xs text-zinc-400">• {new Date(visit.date).toLocaleDateString()}</span>
+                                                </div>
+                                                <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-0.5">{visit.notes || 'No notes available.'}</p>
+                                            </div>
+                                        </div>
+                                        {visit.outcome ? (
+                                            <span className="self-start px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 text-xs font-bold uppercase rounded-full">
+                                                {visit.outcome}
+                                            </span>
+                                        ) : null}
+                                    </div>
+                                </SpotlightCard>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="p-8 text-center border border-dashed border-zinc-300 dark:border-zinc-700 rounded-xl text-zinc-500">
+                            No activity yet.
+                        </div>
+                    )}
+                </section>
+            </div>
+        </div>
+    );
+};
+
+export default CustomerDashboard;

src/pages/Login.jsx

@@ -126,7 +126,7 @@ const Login = () => {
             // Role-based Redirect
             switch (result.role) {
                 case 'CUSTOMER':
-                    navigate('/');
+                    navigate('/portal/dashboard');
                     break;
                 case 'OWNER':
                     navigate('/owner/snapshot');
@@ -154,7 +154,7 @@ const Login = () => {
         const result = login(account.id, account.pw, account.loginType);
         if (result.success) {
             switch (result.role) {
-                case 'CUSTOMER':      navigate('/');                        break;
+                case 'CUSTOMER':      navigate('/portal/dashboard');          break;
                 case 'OWNER':         navigate('/owner/snapshot');           break;
                 case 'CONTRACTOR':    navigate('/contractor/dashboard');     break;
                 case 'VENDOR':        navigate('/vendor/dashboard');         break;