shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes done in ui screens

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-28 19:11:10 +05:30
parent b8e833dbb9
commit 7ce1f2705e
33 changed files with 1944 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/dashboard/finance/budget.tsx
View File

@@ -12,6 +12,9 @@ import StatCard from "@/components/common/dashStatCard";
import { Card } from '@/components/common/cardWrapper';
import { CardHeader } from '@/components/common/cardHeader';
import { approvalQueueData, categoryData } from "@/constants/constant";
import Table from "@/components/common/dataTable";
import { budgetPerformanceRows } from "@/constants/tabledata";
import { budgetPerformanceHeaders } from "@/constants/tabledata";
@@ -21,12 +24,12 @@ export default function BudgetPortal() {
{/* --- HEADER SECTION WITH BUTTONS --- */}
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
<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-[12px] font-bold tracking-widest text-slate-500 uppercase font-mono">
<span className="text-teal-400">Apple One — HQ Tower</span>
<span>•</span>
<span>FINANCE</span>
<span>•</span>
<span>O&M BUDGET</span>
<span className="text-gray-600">•</span>
<span className="text-gray-400">FINANCE</span>
<span className="text-gray-600">•</span>
<span className="text-gray-400">O&M BUDGET</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
@@ -99,63 +102,23 @@ export default function BudgetPortal() {
</div>
{/* --- BUDGET DETAILS & APPROVAL QUEUE SECTION --- */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div className="grid grid-cols-2 gap-3 mb-8">
{/* Planned vs Actual Table (Left 2 Columns) */}
<Card className="lg:col-span-2 justify-start">
<CardHeader
title="Planned vs actual · by category"
subtitle="CAPEX ₹35.0 L • OPEX ₹1.56 Cr"
/>
<div className="overflow-x-auto mt-2">
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-[#162942]/60 text-[11px] font-mono font-bold text-slate-500 uppercase tracking-wider">
<th className="py-2.5 px-2">Category</th>
<th className="py-2.5 px-2">Type</th>
<th className="py-2.5 px-2 font-mono">Planned</th>
<th className="py-2.5 px-2 font-mono">Actual</th>
<th className="py-2.5 px-2 font-mono">Variance</th>
<th className="py-2.5 px-2 font-mono min-w-[120px]">Utilization</th>
</tr>
</thead>
<tbody className="divide-y divide-[#162942]/40 text-xs">
{categoryData.map((row, idx) => (
<tr key={idx} className="hover:bg-slate-900/30 transition-colors">
<td className="py-3 px-2 font-semibold text-slate-100">
{row.category}
</td>
<td className="py-3 px-2">
<span className="bg-[#12233a] border border-[#1d3554] text-slate-300 font-mono text-[10px] px-2 py-0.5 rounded">
{row.type}
</span>
</td>
<td className="py-3 px-2 font-mono text-slate-300">
{row.planned}
</td>
<td className="py-3 px-2 font-mono text-slate-300">
{row.actual}
</td>
<td className={`py-3 px-2 font-mono font-semibold ${row.varianceColor}`}>
{row.variance}
</td>
<td className="py-3 px-2">
<div className="w-full bg-[#12233a] h-1.5 rounded-full overflow-hidden mb-1">
<div
className={`h-full ${row.barColor}`}
style={{ width: `${Math.min(row.utilization, 100)}%` }}
/>
</div>
<span className="text-[10px] font-mono text-slate-400">
{row.utilization}%
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</Card>
<div className=" border border-slate-800/80 rounded-lg ">
<div className="flex items-center justify-between
px-4 py-4 border-b border-slate-800/80">
<h2 className="text-base font-semibold text-white">
Planned vs actual·by category</h2>
</div>
{/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
<Table headers={budgetPerformanceHeaders} rows={budgetPerformanceRows} />
</div>
{/* Approval Queue Panel (Right 1 Column) */}
<Card className="justify-start">
@@ -174,9 +137,9 @@ export default function BudgetPortal() {
</div>
{item.status === "pending" ? (
<button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-200 text-xs font-semibold px-3 py-1 rounded transition-colors whitespace-nowrap">
<Button className="bg-[#12233a] hover:bg-[#1a3252] border border-[#1d3554] text-slate-200 text-xs font-semibold px-3 py-1 rounded transition-colors whitespace-nowrap">
Approve
</button>
</Button>
) : (
<span className="flex items-center gap-1.5 bg-emerald-950/40 border border-emerald-800/30 text-emerald-400 text-[10px] font-mono font-bold px-2.5 py-1 rounded-full whitespace-nowrap">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />