55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
// components/dashboards/KpiBottom.tsx
|
|
'use client';
|
|
import React, { ReactNode } from 'react';
|
|
|
|
type Props = {
|
|
efficiencyPct: number; // % value (0..100)
|
|
powerFactor: number; // 0..1
|
|
loadFactor: number; // ratio, not %
|
|
middle?: ReactNode;
|
|
right?: ReactNode;
|
|
};
|
|
|
|
const Panel = ({ title, children }: { title: string; children: ReactNode }) => (
|
|
<div className="rounded-2xl p-5 shadow-md bg-white dark:bg-rtgray-800 text-white min-h-[260px] flex flex-col">
|
|
<div className="text-lg font-bold opacity-80 mb-3">{title}</div>
|
|
<div className="flex-1 grid place-items-center">{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const Stat = ({ value, label, accent = false }: { value: ReactNode; label: string; accent?: boolean }) => (
|
|
<div className="flex flex-col items-center gap-1">
|
|
<div className={`text-3xl font-semibold ${accent ? 'text-[#fcd913]' : 'text-white'}`}>{value}</div>
|
|
<div className="text-xs text-[#9aa4b2]">{label}</div>
|
|
</div>
|
|
);
|
|
|
|
export default function KpiBottom({
|
|
efficiencyPct, powerFactor, loadFactor, middle, right,
|
|
}: Props) {
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<Panel title="Measurements">
|
|
<div className="grid grid-cols-3 gap-3 w-full">
|
|
<Stat value={`${efficiencyPct.toFixed(1)}%`} label="Efficiency" />
|
|
<Stat value={powerFactor.toFixed(2)} label="Power Factor" />
|
|
<Stat value={loadFactor.toFixed(2)} label="Load Factor" />
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Yield Bar Chart">
|
|
<div className="w-full h-48">
|
|
{middle}
|
|
</div>
|
|
</Panel>
|
|
|
|
<Panel title="Peak Power Demand">
|
|
<div className="text-3xl font-semibold">
|
|
{right}
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
);
|
|
}
|
|
|