app/(admin)/adminDashboard/page.tsx

@@ -162,6 +162,7 @@ const AdminDashboard = () => {
 
   doc.save('dashboard_charts.pdf');
 };
+  const currentMonth = new Date().toISOString().slice(0, 7); // "YYYY-MM"
 
   return (
     <DashboardLayout>
@@ -184,7 +185,7 @@ const AdminDashboard = () => {
           </div>
 
           <div>
-            <KPI_Table siteId={siteIdMap[selectedSite]} month="2025-07" />
+          <KPI_Table siteId={siteIdMap[selectedSite]} month={currentMonth} />
           </div>
         </div>
 

components/dashboards/EnergyLineChart.tsx

@@ -129,7 +129,8 @@ const EnergyLineChart = ({ siteId }: EnergyLineChartProps) => {
   const allTimes = Array.from(new Set([
   ...groupedConsumption.map(d => d.time),
   ...groupedGeneration.map(d => d.time),
-  ])).sort();
+])).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+
 
   const consumptionMap = Object.fromEntries(groupedConsumption.map(d => [d.time, d.value]));
   const generationMap = Object.fromEntries(groupedGeneration.map(d => [d.time, d.value]));

components/dashboards/KPIStatus.tsx

@@ -12,8 +12,12 @@ interface MonthlyKPI {
   consumption_kwh: number | null;
   grid_draw_kwh: number | null;
   efficiency: number | null;
+  peak_demand_kw: number | null; // ✅ new
+  avg_power_factor: number | null; // ✅ new
+  load_factor: number | null;
 }
 
+
 const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
   const [kpiData, setKpiData] = useState<MonthlyKPI | null>(null);
   const [loading, setLoading] = useState(false);
@@ -63,14 +67,21 @@ const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
   const consumption_kwh = kpiData?.consumption_kwh ?? 0;
   const grid_draw_kwh = kpiData?.grid_draw_kwh ?? 0;
   const efficiency = kpiData?.efficiency ?? 0;
+  const peak_demand_kw = kpiData?.peak_demand_kw ?? 0;
+  const power_factor = kpiData?.avg_power_factor ?? 0;
+  const load_factor = kpiData?.load_factor ?? 0;
 
 const data = [
   { kpi: 'Monthly Yield', value: `${yield_kwh.toFixed(0)} kWh` },
   { kpi: 'Monthly Consumption', value: `${consumption_kwh.toFixed(0)} kWh` },
   { kpi: 'Monthly Grid Draw', value: `${grid_draw_kwh.toFixed(0)} kWh` },
   { kpi: 'Efficiency', value: `${efficiency.toFixed(1)}%` },
+  { kpi: 'Peak Demand', value: `${peak_demand_kw.toFixed(2)} kW` }, // ✅ added
+  { kpi: 'Power Factor', value: `${power_factor.toFixed(2)} kW` }, // ✅ added
+  { kpi: 'Load Factor', value: `${load_factor.toFixed(2)} kW` }, // ✅ added
 ];
 
+
   return (
     <div>
       <h2 className="text-lg font-bold mb-2">Monthly KPI</h2>
@@ -84,8 +95,8 @@ const KPI_Table: React.FC<KPI_TableProps> = ({ siteId, month }) => {
         <tbody>
           {data.map((row) => (
             <tr key={row.kpi}>
-              <td className="border border-gray-700 p-3">{row.kpi}</td>
-              <td className="border border-gray-700 p-3">{row.value}</td>
+              <td className="border border-gray-700 p-2.5">{row.kpi}</td>
+              <td className="border border-gray-700 p-2.5">{row.value}</td>
             </tr>
           ))}
         </tbody>

components/dashboards/MonthlyBarChart.tsx

@@ -124,7 +124,10 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteId }) => {
           <BarChart data={chartData}>
             <XAxis dataKey="month" tick={{ fontSize: 10 }} />
             <YAxis tick={{ fontSize: 10 }} />
-            <Tooltip />
+            <Tooltip
+              formatter={(value: number) => [`${value.toFixed(2)} kWh`]}
+              labelFormatter={(label) => `${label}`}
+            />
             <Legend />
             <Bar dataKey="consumption" fill={consumptionColor} name="Consumption (kWh)" />
             <Bar dataKey="generation" fill={generationColor} name="Generation (kWh)" />