Authentication And Serive Engineer Portal is added

components/auth/loginForm.tsx

@@ -4,6 +4,7 @@ import Button from "@/utils/button";
 import { useState } from "react";
 
 import {Props} from "@/constants/types"
+import { signIn } from "next-auth/react";
 
 
 export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
@@ -41,9 +42,9 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
   <Button
    
     onClick={() => setShowPassword(!showPassword)}
-    className="absolute right-4 top-[40px] text-slate-500 hover:text-slate-300"
+    className="absolute right-4 top-[35px] text-slate-500 hover:text-slate-300"
   >
-    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+    {showPassword ?   <Eye size={18} /> :<EyeOff size={18} />}
   </Button>
 </div>
       </div>
@@ -85,6 +86,9 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
         </div>
 
         <Button 
+        onClick={() => signIn("keycloak", {
+      callbackUrl: "/dashboard",
+    })}
           className="h-10 w-full rounded-lg border border-slate-800 bg-[#122031] text-sm font-semibold text-white hover:bg-[#17293e] transition"
         >
           Sign in with SSO

components/auth/verifyCode.tsx

@@ -7,7 +7,7 @@ import {Props} from "@/constants/types"
 
 export default function VerifyCode({ onBack }: Props) {
     const [timer, setTimer] = useState(30);
-
+   
   useEffect(() => {
     if (timer === 0) return;
 
@@ -78,7 +78,8 @@ export default function VerifyCode({ onBack }: Props) {
         Trust this device for 30 days
       </label>
 
-      <Button className="h-10 w-full rounded-xl bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-black">
+      <Button 
+      className="h-10 w-full rounded-xl bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-black">
         Verify & Continue
       </Button>
     </div>

components/dashboard/buildingOwner.tsx

@@ -1,20 +1,20 @@
-
-import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet, Sparkles } from "lucide-react";
+import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet } from "lucide-react";
 import StatCard from "@/utils/dashStatCard"; 
-import {  energyData } from "@/constants/constant";
+import { energyData } from "@/constants/constant";
 import BarChart from "@/utils/barchart";
 import InfoBanner from "@/utils/infoBanner";
 import Button from "@/utils/button";
 import { ProgressBarRow } from "@/utils/progressBarRow";
 
-export default function BuildingOwnerPortal() {
-  // Mock data matching the screenshot chart (Jan - Jun)
- 
+// Import your custom Card components
+import { Card } from "@/utils/cardWrapper"; 
+import { CardHeader } from "@/utils/cardHeader"; 
 
+export default function BuildingOwnerPortal() {
   return (
-    <div className="min-h-screen bg-[#060d18] text-slate-100 p-6 lg:p-10 font-sans antialiased selection:bg-teal-500/30">
+    <div className="mt-20 font-sans antialiased">
       
-      {/* ---  HEADER SECTION --- */}
+      {/* --- HEADER SECTION --- */}
       <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
         <div>
           <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
@@ -47,7 +47,7 @@ export default function BuildingOwnerPortal() {
           iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
         />
         <StatCard 
-          variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
+          variant="icon" title="Asset availability" value="50%" icon={ShieldCheck} 
           badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
           iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
         />
@@ -67,36 +67,30 @@ export default function BuildingOwnerPortal() {
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6 items-stretch">
         
         {/* Left Box: Site Benchmarking Progress Lists (7 Columns) */}
-        <div className="lg:col-span-7 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
-          <div>
-            <div className="flex items-center justify-between mb-8">
-              <h3 className="text-sm font-semibold text-white tracking-wide">Site benchmarking</h3>
-              <span className="text-[10px] font-mono text-slate-500 uppercase tracking-wider">performance index</span>
-            </div>
+        <div className="lg:col-span-7">
+          <Card className="p-5">
+            <CardHeader title="Site benchmarking" subtitle="performance index" />
             
-            <div className="space-y-6 my-2">
+            <div className="space-y-6 my-4">
               {/* Progress Item 1 */}
               <ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
-     <ProgressBarRow label="Annexe" value={13} maxValue={18} />
+              {/* Progress Item 2 */}
+              <ProgressBarRow label="Annexe" value={13} maxValue={18} />
             </div>
-          </div>
+          </Card>
         </div>
 
         {/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
-        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-sm font-semibold text-white tracking-wide">
-              Energy cost outlook · ₹L
-            </h3>
-            <span className="text-[10px] font-mono text-slate-500 tracking-wider lowercase">
-              forecast ↓
-            </span>
-          </div>
-          <hr className="border-[#142538] mb-6" />
-          <div className="flex-grow flex flex-col justify-end">
-            <BarChart data={energyData} />
-          </div>
+        <div className="lg:col-span-5">
+          <Card className="p-5 h-full">
+            <CardHeader title="Energy cost outlook · ₹L" subtitle="forecast ↓" />
+            <hr className="border-[#142538] mb-6" />
+            <div className="flex-grow flex flex-col justify-end">
+              <BarChart data={energyData} />
+            </div>
+          </Card>
         </div>
+
       </div>
 
       {/* --- BOTTOM INFORMATION VIEW BANNER --- */}

components/dashboard/engagement.tsx

@@ -1,19 +1,26 @@
 "use client";
 import { 
   Smile, 
-  ShieldCheck, Database, Leaf,
+  ShieldCheck, 
+  Database, 
+  Leaf,
   Plus, 
 } from "lucide-react";
       
-import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
+import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
 import StatCard from "../../utils/dashStatCard";
 import Button from "@/utils/button";
 import InfoBanner from "@/utils/infoBanner";
+
+// Import your custom Card components
+import { Card } from "@/utils/cardWrapper"; 
+import { CardHeader } from "@/utils/cardHeader"; 
+
 export default function EngagementPage() {
   return (
-    <div className="bg-[#071321] text-[#93a3b8] font-sans antialiased min-h-screen">
+    <div className=" text-[#93a3b8] font-sans antialiased ">
     
-      <main className="pt-10  pb-10">
+      <main className="mt-20">
         
         {/* Page Header Section */}
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
@@ -46,109 +53,108 @@ export default function EngagementPage() {
           </div>
         </div>
 
-        {/* Column of StatCard  */}
+        {/* --- STAT CARD GRID --- */}
+        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard 
+            variant="icon" title="Engagement score" value="82%" icon={Smile} 
+            badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
+            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+          />
+          
+          <StatCard 
+            variant="icon" title="Asset availability" value="50%" icon={ShieldCheck} 
+            badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case" 
+            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+          />
 
+          <StatCard 
+            variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
+            badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold" 
+            iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
+          />
+          
+          <StatCard 
+            variant="icon" title="ESG rating" value="B+" icon={Leaf} 
+            badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium" 
+            iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
+          />
+        </div>
 
-<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-  <StatCard 
-    variant="icon" title="Engagement score" value="82%" icon={Smile} 
-    badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
-    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-  />
-  
-  <StatCard 
-    variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
-    badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case" 
-    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-  />
-
-  <StatCard 
-    variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
-    badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold" 
-    iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
-  />
-  
-  <StatCard 
-    variant="icon" title="ESG rating" value="B+" icon={Leaf} 
-    badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium" 
-    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
-  />
-</div>
-
-        {/*  (Drivers & Tickets lists columns) */}
-        <div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* --- TWO COLUMNS (DRIVERS & TICKETS LISTS) --- */}
+        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
           
           {/* Left Column: Satisfaction Drivers */}
-          <div className="lg:col-span-7 rounded-2xl border border-[#142538] bg-[#091624] p-6">
-            <div className="flex items-center justify-between border-b border-[#142538]/40 pb-4">
-              <h3 className="font-bold text-sm text-white tracking-tight">Satisfaction drivers</h3>
-              <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider font-mono">latest pulse</span>
-            </div>
+          <div className="lg:col-span-7">
+            <Card className="p-4">
+              <CardHeader title="Satisfaction drivers" subtitle="latest pulse" />
 
-            <div className="mt-6 space-y-5">
-              {SATISFACTION_DRIVERS.map((driver) => (
-                <div key={driver.label} className="space-y-2">
-                  <div className="flex items-center justify-between text-xs font-medium">
-                    <span className="text-slate-300">{driver.label}</span>
-                    <span className="font-bold text-white">{driver.score}</span>
+              <div className="mt-6 space-y-5">
+                {SATISFACTION_DRIVERS.map((driver) => (
+                  <div key={driver.label} className="space-y-2">
+                    <div className="flex items-center justify-between text-xs font-medium">
+                      <span className="text-slate-300">{driver.label}</span>
+                      <span className="font-bold text-white">{driver.score}</span>
+                    </div>
+                    
+                    {/* Track line background */}
+                    <div className="h-2 w-full rounded-full bg-[#101c2a]">
+                      {/* Filled bar width */}
+                      <div 
+                        className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
+                        style={{ width: `${driver.score}%` }}
+                      />
+                    </div>
                   </div>
-                  
-                  {/* Track line background */}
-                  <div className="h-2 w-full rounded-full bg-[#101c2a]">
-                    {/* Filled bar width */}
-                    <div 
-                      className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
-                      style={{ width: `${driver.score}%` }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            </Card>
           </div>
 
           {/* Right Column: Tickets & Suggestions */}
-          <div className="lg:col-span-5 rounded-2xl border border-[#142538] bg-[#091624] p-6">
-            <div className="border-b border-[#142538]/40 pb-4">
-              <h3 className="font-bold text-sm text-white tracking-tight">Tickets & suggestions</h3>
-            </div>
+          <div className="lg:col-span-5">
+            <Card className="p-6 h-full">
+              <CardHeader title="Tickets & suggestions" />
 
-            <div className="mt-2 divide-y divide-[#142538]/30">
-              {TICKETS_DATA.map((ticket, index) => (
-                <div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
-                  <div className="min-w-0">
-                    <h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
-                    <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
-                      {ticket.type}
-                    </span>
-                  </div>
+              <div className="mt-2 divide-y divide-[#142538]/30">
+                {TICKETS_DATA.map((ticket, index) => (
+                  <div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
+                    <div className="min-w-0">
+                      <h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
+                      <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
+                        {ticket.type}
+                      </span>
+                    </div>
 
-                  {/* Status Indicator Badges */}
-                  <div>
-                    {ticket.status === "OPEN" ? (
-                      <span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
-                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
-                        OPEN
-                      </span>
-                    ) : (
-                      <span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
-                        <span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
-                        CLOSED
-                      </span>
-                    )}
+                    {/* Status Indicator Badges */}
+                    <div>
+                      {ticket.status === "OPEN" ? (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
+                          <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
+                          OPEN
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
+                          <span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
+                          CLOSED
+                        </span>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            </Card>
           </div>
 
         </div>
 
       </main>
-<InfoBanner 
-  boldText="Closing the loop:" 
-  normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early." 
-/>
-    
+
+      <div className="mb-10 mt-10">
+        <InfoBanner 
+          boldText="Closing the loop:" 
+          normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early." 
+        />
+      </div>
       
     </div>
   );

components/dashboard/propertyManager.tsx

@@ -1,30 +1,28 @@
-
 import Button from "@/utils/button";
 import StatCard from "@/utils/dashStatCard";
+import InfoBanner from "@/utils/infoBanner";
 import { ProgressBarRow } from "@/utils/progressBarRow";
 import { 
   FileText, 
   Wrench, 
-  ShieldCheck, 
-  Coins, 
+  ShieldCheck,  
   Smile, 
   ChevronRight, 
-  Sparkles 
+  Database,
 } from "lucide-react";
 
+// Import your custom Card components
+import { Card } from "@/utils/cardWrapper"; 
+import { CardHeader } from "@/utils/cardHeader"; 
 export default function PropertyManagerPortal() {
   return (
-    <div className="min-h-screen
-      text-slate-100 mt-15
-       font-sans antialiased selection:bg-teal-500/30 relative">
+    <div className=" text-slate-100 mt-15 font-sans antialiased
+    ">
       
       {/* --- HEADER SECTION --- */}
-      <div className="flex flex-col 
-      md:flex-row md:items-start md:justify-between
-       gap-4 mb-8">
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
         <div>
-          <div className="flex items-center gap-2 text-[10px]
-           font-bold tracking-widest text-slate-500 uppercase font-mono">
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
             <span className="text-teal-400">Apple One — HQ Tower</span>
             <span>•</span>
             <span>Portal</span>
@@ -53,105 +51,116 @@ export default function PropertyManagerPortal() {
       </div>
 
       {/* --- ROW 1: STATS GRID --- */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <StatCard 
-          title="Open work orders" value="15" icon={FileText} 
-          badgeText="active" badgeClassName="text-slate-500 lowercase font-mono"
-          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
+          variant="icon" 
+          title="Open work orders" 
+          value="16" 
+          icon={FileText} 
+          badgeText="active" 
+          badgeClassName="text-slate-500 lowercase font-mono" 
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400" 
         />
+        
         <StatCard 
-          title="SLA compliance" value="17%" icon={ShieldCheck} 
-          badgeText="this month" badgeClassName="text-emerald-400 lowercase font-mono"
-          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+          variant="icon" 
+          title="SLA compliance" 
+          value="11%" 
+          icon={ShieldCheck} 
+          badgeText="this month" 
+          badgeClassName="text-emerald-400 font-mono lowercase" 
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
         />
+
         <StatCard 
-          title="Budget used" value="74%" icon={Coins} 
-          badgeText="FY 2026" badgeClassName="text-slate-500 font-mono"
-          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
+          variant="icon" 
+          title="Budget used" 
+          value="74%" 
+          icon={Database} 
+          badgeText="FY 2026" 
+          badgeClassName="text-slate-500 font-mono" 
+          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
         />
+         
         <StatCard 
-          title="Occupant comfort" value="82%" icon={Smile} 
-          badgeText="CSAT" badgeClassName="text-emerald-400 font-mono"
-          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
+          variant="icon" 
+          title="Occupant comfort" 
+          value="82%" 
+          icon={Smile} 
+          badgeText="CSAT" 
+          badgeClassName="text-emerald-400 font-mono" 
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
         />
       </div>
 
       {/* --- ROW 2: SPLIT GRID --- */}
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 mt-5 items-stretch">
         
         {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
-        <div className="lg:col-span-7 rounded-xl border 
-        border-[#142538] bg-[#091624] p-4 flex flex-col justify-between">
-          <div>
-            <div className="mb-8">
-              <h3 className="text-sm font-semibold text-white tracking-wide">Work order status</h3>
-            </div>
-            
-            <div className="space-y-4 my-2">
-             
-                <ProgressBarRow label="Open" value={18} maxValue={18} />
-                            <ProgressBarRow label="In Progress" value={13} maxValue={18} />
-                            <ProgressBarRow label="Completed" value={9} maxValue={18} />
-             
+        <div className="lg:col-span-7">
+          <Card className="p-4 h-full">
+            <div>
+              <CardHeader title="Work order status" />
               
+              <div className="space-y-4 my-4">
+                <ProgressBarRow label="Open" value={18} maxValue={18} />
+                <ProgressBarRow label="In Progress" value={13} maxValue={18} />
+                <ProgressBarRow label="Completed" value={9} maxValue={18} />
+              </div>
             </div>
-          </div>
 
-          {/* Inline Sub-metrics Row split container inside the card */}
-          <div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
-            <div className="p-4 border-r border-[#142538]">
-              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
-              <div className="text-base font-bold text-white mt-1">₹99.4 L</div>
+            {/* Inline Sub-metrics Row split container inside the card */}
+            <div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
+              <div className="p-4 border-r border-[#142538]">
+                <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
+                <div className="text-base font-bold text-white mt-1">₹99.4 L</div>
+              </div>
+              <div className="p-4">
+                <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
+                <div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
+              </div>
             </div>
-            <div className="p-4">
-              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
-              <div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
-            </div>
-          </div>
+          </Card>
         </div>
 
         {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
-        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
-          <div>
-            <h3 className="text-sm font-semibold text-white tracking-wide mb-6">Quick actions</h3>
-            
-            <div className="space-y-2">
-              {[
-                "Track work orders",
-                "Energy optimization",
-                "Automated billing",
-                "Budget & approvals",
-                "Contracts & SLA",
-              ].map((action, idx) => (
-                <button 
-                  key={idx}
-                  className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
-                >
-                  <span className="flex items-center gap-3">
-                    <ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
-                    {action}
-                  </span>
-                </button>
-              ))}
+        <div className="lg:col-span-5">
+          <Card className="p-5 ">
+            <div>
+              <CardHeader title="Quick actions" />
+              
+              <div className="space-y-2 mt-4">
+                {[
+                  "Track work orders",
+                  "Energy optimization",
+                  "Automated billing",
+                  "Budget & approvals",
+                  "Contracts & SLA",
+                ].map((action, idx) => (
+                  <button 
+                    key={idx}
+                    className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
+                  >
+                    <span className="flex items-center gap-3">
+                      <ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
+                      {action}
+                    </span>
+                  </button>
+                ))}
+              </div>
             </div>
-          </div>
+          </Card>
         </div>
       </div>
 
       {/* --- BOTTOM INFO BANNER --- */}
-      <div className="mb-20 rounded-xl border border-[#142538]/80 bg-[#091624]/60 p-4 border-l-2 border-l-teal-400">
-        <p className="text-xs text-slate-400 font-medium">
-          <span className="text-white font-bold">Manager view: </span>
-          remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
-        </p>
+      <div className="mb-20">
+        <InfoBanner 
+          boldText="Manager view:" 
+          normalText="remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring." 
+        />
       </div>
 
-      {/* Floating Ask AI Button */}
-      <button className="fixed bottom-6 right-6 flex items-center gap-2 px-4 py-2.5 bg-[#14b8a6] hover:bg-[#0d9488] text-slate-900 rounded-full text-xs font-bold transition-all shadow-lg hover:scale-105 active:scale-95 z-50">
-        <Sparkles size={14} fill="currentColor" />
-        Ask AI
-      </button>
-
     </div>
   );
 }

components/dashboard/serviceEngineer.tsx

@@ -0,0 +1,243 @@
+import Button from "@/utils/button";
+import StatCard from "@/utils/dashStatCard";
+import InfoBanner from "@/utils/infoBanner";
+import { 
+  FileText, 
+  Wrench, 
+  Target, 
+  Calendar,   
+  Brain,
+  Check,
+} from "lucide-react";
+
+// Import your custom Card components
+import { Card } from "@/utils/cardWrapper"; 
+import { CardHeader } from "@/utils/cardHeader"; 
+
+export default function ServiceEngineerPortal() {
+  return (
+    <div className="text-slate-100 font-sans antialiased">
+      
+      {/* --- HEADER SECTION --- */}
+      <div className="pt-20 flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
+            <span className="text-teal-400">Apple One — HQ Tower</span>
+            <span>•</span>
+            <span>Portal</span>
+            <span>•</span>
+            <span>Service Engineer</span>
+          </div>
+          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
+            Service engineer portal
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Field cockpit — real-time asset metrics, actionable alerts, the PM schedule for today and verified task completion.
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center gap-3 self-start md:mt-6">
+          <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
+            <FileText size={14} className="text-slate-400" />
+            Scan Qr
+          </Button>
+          <Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
+            <Wrench size={14} />
+            My Jobs
+          </Button>
+        </div>
+      </div>
+
+      {/* --- ROW 1: STATS GRID --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <StatCard 
+          variant="icon" 
+          title="My Assigned Jobs" 
+          value="6" 
+          icon={Target} 
+          badgeText="active" 
+          badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
+        />
+        
+        <StatCard 
+          variant="icon" 
+          title="Predictive Alerts" 
+          value="2" 
+          icon={Brain} 
+          badgeText="action" 
+          badgeClassName="text-red-400/90 lowercase font-mono"
+          iconContainerClassName="bg-[#2a171c] border-red-500/10 text-red-400"
+        />
+      
+        <StatCard 
+          variant="icon" 
+          title="PM due today" 
+          value="3" 
+          icon={Calendar} 
+          badgeText="scheduled" 
+          badgeClassName="text-slate-500 lowercase font-mono"
+          iconContainerClassName="bg-[#272115] border-amber-500/10 text-amber-400"
+        />
+         
+        <StatCard 
+          variant="icon" 
+          title="Verifies this WK" 
+          value="12" 
+          icon={Check} 
+          badgeText="closed" 
+          badgeClassName="text-emerald-400 lowercase font-mono"
+          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-emerald-400"
+        />
+      </div>
+
+      {/* --- ROW 2: SPLIT GRID (METRICS & TIMELINE) --- */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
+        
+        {/* Left Section (8 Columns): Real-time Asset Metrics */}
+        <div className="lg:col-span-8">
+          <Card className="p-5 ">
+            <CardHeader title="Real-time asset metrics" subtitle="IoT / BMS" />
+
+            <div className="overflow-x-auto mt-4">
+              <table className=" text-left text-xs">
+                <thead>
+                  <tr className="border-b border-[#142538] text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">
+                    <th className="pb-3">Asset · Parameter</th>
+                    <th className="pb-3">Reading</th>
+                    <th className="pb-3">State</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[#142538]/50">
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">Chiller-02 · supply temp</td>
+                    <td className="py-3.5 font-mono text-slate-300">6.8 °C</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">AHU-07 · vibration</td>
+                    <td className="py-3.5 font-mono text-slate-300">4.1 mm/s</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-amber-500 font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Watch
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">DG-01 · fuel level</td>
+                    <td className="py-3.5 font-mono text-slate-300">62%</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-[#0d1f33]/30">
+                    <td className="py-3.5 font-semibold text-slate-200">Pump-03 · pressure</td>
+                    <td className="py-3.5 font-mono text-slate-300">3.2 bar</td>
+                    <td className="py-3.5">
+                      <span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
+                        <span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        </div>
+
+        {/* Right Section (4 Columns): Today's Schedule Timeline */}
+        <div className="lg:col-span-4">
+          <Card className="p-5 h-full">
+            <CardHeader title="Today’s schedule" subtitle="runtime + condition based" />
+
+            {/* Timeline Node Flow */}
+            <div className="relative pl-6 space-y-8 mt-6 before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-[#142538]">
+              
+              {/* Timeline Task 1 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Cooling tower cleaning</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">09:00 · PPM</p>
+                </div>
+              </div>
+
+              {/* Timeline Task 2 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">AHU filter check</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">11:30 · PPM</p>
+                </div>
+              </div>
+
+              {/* Timeline Task 3 */}
+              <div className="relative">
+                <span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Lift quarterly service</h4>
+                  <p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">14:00 · AMC</p>
+                </div>
+              </div>
+
+            </div>
+          </Card>
+        </div>
+
+      </div>
+
+      {/* --- ROW 3: FULL WIDTH ACTIONABLE ALERTS --- */}
+      <div className="mb-6">
+        <Card className="p-5">
+          <CardHeader title="Actionable alerts" />
+          
+          <div className="divide-y divide-[#142538]/60 mt-4">
+            {/* Alert 1 */}
+            <div className="flex items-center justify-between py-3.5">
+              <div className="flex items-start gap-3">
+                <span className="h-2 w-2 rounded-full bg-red-400 mt-1.5 shrink-0" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">Chiller-02 bearing wear</h4>
+                  <p className="text-[11px] text-slate-400 mt-0.5">Raise condition-based PM</p>
+                </div>
+              </div>
+              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
+                Act
+              </button>
+            </div>
+
+            {/* Alert 2 */}
+            <div className="flex items-center justify-between py-3.5">
+              <div className="flex items-start gap-3">
+                <span className="h-2 w-2 rounded-full bg-amber-400 mt-1.5 shrink-0" />
+                <div>
+                  <h4 className="text-xs font-bold text-slate-200">AHU-07 belt vibration</h4>
+                  <p className="text-[11px] text-slate-400 mt-0.5">Inspect within 10 days</p>
+                </div>
+              </div>
+              <button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
+                Act
+              </button>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* --- BOTTOM INFO BANNER --- */}
+      <div className="mb-20">
+        <InfoBanner 
+          boldText="Engineer view:" 
+          normalText="real-time asset metrics, actionable alerts from fault detection, runtime- and condition-based preventive maintenance, and verified task completion from the field." 
+        />
+      </div>
+
+    </div>
+  );
+}

components/dashboard/sidebar.tsx

@@ -6,8 +6,11 @@ import {
   ChevronDown,
   ChevronsLeft,
 } from "lucide-react";
-
+import { useSession, signOut } from "next-auth/react";
 export default function Sidebar() {
+  const { data: session } = useSession();
+  console.log("Session data ",session?.user?.name)
+console.log("Session data ",session?.user?.email)
   return (
     <aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto">
         <div className="flex items-center gap-2 px-2 pt-2 pb-3">
@@ -64,13 +67,14 @@ export default function Sidebar() {
               DT
             </div>
             <div className="min-w-0 leading-tight">
-              <h4 className="font-semibold text-xs text-white truncate">Dhananjay T</h4>
+              <h4 className="font-semibold text-xs text-white truncate">{session?.user?.name}</h4>
               <p className="text-[11px] text-slate-500 truncate">
-                dhananjay@kafm.io
+                {session?.user?.email}
               </p>
             </div>
           </div>
-          <ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14} />
+          <ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14}
+           onClick={() => signOut({ callbackUrl: "/login" })} />
         </div>
         </div>
     </aside>