Building Owner and Property Manager Screens are added
This commit is contained in:
66
utils/dashStatCard.tsx
Normal file
66
utils/dashStatCard.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { StatCardProps } from "@/constants/types";
|
||||
import { colorMap } from "@/constants/constant";
|
||||
|
||||
export default function StatCard({
|
||||
title,
|
||||
value,
|
||||
variant = "progress",
|
||||
subtitle,
|
||||
progress,
|
||||
color = "teal",
|
||||
icon: Icon,
|
||||
badgeText,
|
||||
badgeClassName = "text-slate-500 font-mono uppercase",
|
||||
iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
|
||||
isActiveCard = false,
|
||||
}: StatCardProps) {
|
||||
|
||||
// Base structural classes matched exactly to your dark UI design
|
||||
const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
|
||||
|
||||
return (
|
||||
<div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
|
||||
|
||||
{/* --- TOP HEADER SECTION --- */}
|
||||
<div className="flex items-center justify-between w-full">
|
||||
{variant === "icon" && Icon ? (
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
|
||||
<Icon size={18} />
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
|
||||
{title}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{badgeText && (
|
||||
<span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
|
||||
{badgeText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- BODY STATS SECTION --- */}
|
||||
<div className="mt-4 flex-grow flex flex-col justify-end">
|
||||
<div className="text-3xl font-extrabold text-white tracking-tight leading-none">
|
||||
{value}
|
||||
</div>
|
||||
|
||||
{/* Subtitle / Bottom Label text arrangement layout swap */}
|
||||
<p className="text-xs font-semibold text-slate-400/70 mt-2">
|
||||
{variant === "icon" ? title : subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
|
||||
{variant === "progress" && progress !== undefined && (
|
||||
<div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user