KAFM-Project/components/dashboard/dashboard.tsx

import { Check } from 'lucide-react';
import Navbar from "@/components/dashboard/navbar";
import BarChart from "@/components/dashboard/barchart";
import StatCard from "@/components/dashboard/statCard";
import ActivityFeed from "@/components/dashboard/activityFeed";
import {activities, chartData} from "@/constants/constant"
import { Card } from '@/components/dashboard/cardWrapper';
import {CardHeader} from '@/components/dashboard/cardHeader';
import {ProgressBarRow }from '@/components/dashboard/progressBarRow';
import {StatusProgressRow} from '@/components/dashboard/statusProgressRow';

export default function Dashboard() {
 

  return (
    <div className=" bg-[#071321] text-[#93a3b8] font-sans antialiased">
      <Navbar />
      
      <main >
        {/* Title Section */}
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 
            text-xs font-bold uppercase tracking-widest text-teal-500 mt-8">
              <span>Apple One — HQ Tower</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Tenant</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Apple One</span>
            </div>
            <h1 className="text-2xl font-bold text-white tracking-tight">Operations dashboard</h1>
            <p className="mt-2 text-sm text-gray-400 max-w-xl leading-relaxed">
              Live snapshot scoped to Apple One. The layout below is the dashboard published for this tenant in Administration.
            </p>
          </div>
          
          <div className="mt-20 flex items-center gap-1 rounded-full border border-teal-500/30 bg-teal-500/10 px-2 py-1 text-xs font-medium text-teal-400">
            <Check className="h-3.5 w-3.5 " />
            <span>Published layout</span>
          </div>
        </div>

        {/* 4 Cards Grid */}
        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
          <StatCard title="Open Requests" value={14} subtitle="+4 overdue" progress={70} color="teal" />
          <StatCard title="Checklists Due" value={6} subtitle="of 10 scheduled" progress={60} color="amber" />
          <StatCard title="PPM Attention" value={4} subtitle="assets off-plan" progress={40} color="rose" />
          <StatCard title="Assets Tracked" value={8} subtitle="across blocks" progress={65} color="emerald" />
        </div>

        {/* Lower Row Grid */}
        <div className=" mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
          <div className="lg:col-span-7">
            <BarChart data={chartData} />
          </div>
          <div className="lg:col-span-5">
            <ActivityFeed activities={activities} />
          </div>
        </div>


        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
          
          {/* Schedule Performance MMR */}
          <div className="lg:col-span-7">
            <Card>
              <CardHeader title="Schedule performance • MMR" subtitle="ppm & amc" />
              <div className="overflow-x-auto mt-2">
                <table className=" text-left border-collapse">
                  <thead>
                    <tr className="text-[#4b5f7a] text-xs font-bold uppercase tracking-wider border-b border-[#1b2b41]/40 pb-3">
                      <th className="pb-3">Schedule</th>
                      <th className="pb-3 text-right">Total</th>
                      <th className="pb-3 text-right">Done</th>
                      <th className="pb-3 text-right">On Time</th>
                      <th className="pb-3 text-right">Delayed</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-[#1b2b41]/30 text-sm font-semibold">
                    <tr className="hover:bg-[#11233a]/25 transition-colors">
                      <td className="py-4 text-white">PPM</td>
                      <td className="py-4 text-right text-slate-300">24</td>
                      <td className="py-4 text-right text-slate-300">19</td>
                      <td className="py-4 text-right text-slate-300">17</td>
                      <td className="py-4 text-right text-red-500">2</td>
                    </tr>
                    <tr className="hover:bg-[#11233a]/25 transition-colors">
                      <td className="py-4 text-white">AMC</td>
                      <td className="py-4 text-right text-slate-300">8</td>
                      <td className="py-4 text-right text-slate-300">6</td>
                      <td className="py-4 text-right text-slate-300">6</td>
                      <td className="py-4 text-right text-slate-400">0</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Card>
          </div>

          {/* Energy Today */}
          <div className="lg:col-span-5 ">
            <Card>
              <CardHeader title="Energy • today"
               subtitle="day-wise" />
              <div className="space-y-2
               text-sm mt-2 font-mono">
                <div className="flex justify-between items-baseline">
                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Electricity</span>
                  <span className="text-white text-base font-bold">1,284 <span className="text-xs font-normal text-slate-400 font-sans">kwh</span></span>
                </div>
                <div className="flex justify-between items-baseline">
                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Water</span>
                  <span className="text-white text-base font-bold">312 <span className="text-xs font-normal text-slate-400 font-sans">kL</span></span>
                </div>
                <div className="flex justify-between items-baseline">
                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Diesel</span>
                  <span className="text-white text-base font-bold">48 <span className="text-xs font-normal text-slate-400 font-sans">L</span></span>
                </div>
                
                <div className="flex justify-between items-center pt-4 border-t border-[#1b2b41]/40">
                  <span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Vs Avg</span>
                  <div className="flex items-center space-x-3">
                    <span className="bg-[#0b2723] text-[#17cbb5] border border-[#17cbb5]/20 text-[10px] font-bold px-3 py-1 rounded-full flex items-center gap-1.5 uppercase">
                      <span className="w-1.5 h-1.5 rounded-full bg-[#17cbb5] inline-block animate-pulse"></span>
                      Completed
                    </span>
                    <span className="text-[#17cbb5] font-bold text-sm">-6%</span>
                  </div>
                </div>
              </div>
            </Card>
          </div>

        </div>

        {/* ROW 2: Sub-metrics and Tracking widgets */}
        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

          {/* Top 5 Requester */}
          <Card>
            <CardHeader title="Top 5 requester" subtitle="this month" />
            <div className="space-y-3 mt-1">
              <ProgressBarRow label="Academic Block" value={18} maxValue={18} />
              <ProgressBarRow label="Hostel Block" value={13} maxValue={18} />
              <ProgressBarRow label="HVAC Plant" value={9} maxValue={18} />
              <ProgressBarRow label="Pump Room" value={6} maxValue={18} />
              <ProgressBarRow label="Lobby" value={4} maxValue={18} />
            </div>
          </Card>

          {/* Asset Register */}
          <Card>
            <CardHeader title="Asset register" subtitle="live" />
            <div className="flex items-baseline space-x-3 my-4">
              <span className="text-5xl font-light text-[#17cbb5]">8</span>
              <span className="text-[#5b7391] text-xs font-semibold uppercase tracking-wider">assets tracked</span>
            </div>
            <div className="space-y-3 text-sm font-semibold border-t border-[#1b2b41]/40 pt-4">
              <div className="flex justify-between py-1">
                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">On Plan</span>
                <span className="text-white">3</span>
              </div>
              <div className="flex justify-between py-1">
                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Attention</span>
                <span className="text-red-500">5</span>
              </div>
              <div className="flex justify-between py-1">
                <span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Groups</span>
                <span className="text-white">4</span>
              </div>
            </div>
          </Card>

          {/* PM Plan vs Started */}
          <Card>
            <CardHeader title="PM plan vs started" subtitle="this month" />
            <div className="space-y-4 mt-1">
              <StatusProgressRow label="Planned" value={24} total={24} barColor="bg-[#52647c]" />
              <StatusProgressRow label="Started" value={19} total={24} barColor="bg-[#17cbb5]" />
              <StatusProgressRow label="Completed" value={17} total={24} barColor="bg-[#10b981]" />
            </div>
          </Card>

        </div>
      </main>
    </div>
  );
}