Authentication And Serive Engineer Portal is added
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user