Building Owner and Property Manager Screens are added

utils/barchart.tsx

@@ -0,0 +1,29 @@
+import {BarChartProps} from "@/constants/types";
+
+
+
+export default function BarChart({ data }: BarChartProps) {
+  return (
+   
+     
+
+      <div>
+        {/* Bars */}
+        <div className="flex items-end justify-between h-40 px-2 border-b border-[#1b3454] pb-2">
+          {data.map((item, idx) => (
+            <div key={idx} className="flex flex-col items-center flex-1 group">
+              <div className={`w-5 ${item.height} bg-teal-400 rounded-t transition-all duration-300 group-hover:bg-teal-300`} />
+            </div>
+          ))}
+        </div>
+
+        {/* X-Axis */}
+        <div className="flex justify-between pt-3 px-2 text-xs font-medium text-gray-500">
+          {data.map((item, idx) => (
+            <span key={idx} className="w-5 text-center">{item.month}</span>
+          ))}
+        </div>
+      </div>
+    
+  );
+}

utils/cardHeader.tsx

@@ -0,0 +1,14 @@
+
+
+export function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div className="flex justify-between items-baseline mb-2 border-b border-[#162942]/50 pb-3">
+      <h3 className="text-white text-base font-semibold tracking-wide">{title}</h3>
+      {subtitle && (
+        <span className="text-[#4e6178] text-xs font-medium uppercase tracking-wider">
+          {subtitle}
+        </span>
+      )}
+    </div>
+  );
+}

utils/cardWrapper.tsx

@@ -0,0 +1,9 @@
+export function Card({ children, className = "" }: 
+  { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`bg-[#0a1526] border border-[#162942] rounded-xl p-3
+     shadow-xl flex flex-col justify-between ${className}`}>
+      {children}
+    </div>
+  );
+}

utils/dashStatCard.tsx

@@ -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>
+  );
+}

utils/infoBanner.tsx

@@ -0,0 +1,22 @@
+
+
+import {InfoBannerProps} from "@/constants/types";
+
+export default function InfoBanner({ 
+  boldText, 
+  normalText,  
+}: InfoBannerProps) {
+  return (
+    <div className="w-full
+ rounded-xl border border-l-4 border-[#142538]
+  border-l-[#10b981] bg-[#091624] 
+  p-4 flex items-center shadow-sm">
+    
+        <p className="text-sm font-medium text-slate-300 tracking-wide leading-relaxed">
+          {boldText && <strong className="text-white font-bold mr-1.5">{boldText}</strong>}
+          {normalText}
+        </p>
+    
+    </div>
+  );
+}

utils/progressBarRow.tsx

@@ -0,0 +1,18 @@
+
+import { ProgressBarProps } from "@/constants/types";
+export function ProgressBarRow({ label, value, maxValue }: ProgressBarProps) {
+  const percentage = (value / maxValue) * 100;
+
+  return (
+    <div className="flex items-center justify-between py-1.5 text-sm">
+      <span className="text-[#899db7] w-32 truncate">{label}</span>
+      <div className="flex-1 mx-4 bg-[#122238] h-2.5 rounded-full overflow-hidden">
+        <div 
+          className="bg-[#17cbb5] h-full rounded-full transition-all duration-500" 
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      <span className="text-white font-bold w-6 text-right">{value}</span>
+    </div>
+  );
+}

utils/statCard.tsx

@@ -13,4 +13,4 @@ export default function Stat({
       </p>
     </div>
   );
-}
+}

utils/statusProgressRow.tsx

@@ -0,0 +1,21 @@
+
+import { StatusProgressProps } from "@/constants/types";
+
+export function StatusProgressRow({ label, value, total, barColor = "bg-[#17cbb5]" }: StatusProgressProps) {
+  const percentage = (value / total) * 100;
+
+  return (
+    <div className="space-y-2 py-1.5">
+      <div className="flex justify-between text-xs font-semibold">
+        <span className="text-white">{label}</span>
+        <span className="text-[#5b7391]">{value}/{total}</span>
+      </div>
+      <div className="bg-[#122238] h-3 rounded-full overflow-hidden">
+        <div 
+          className={`${barColor} h-full rounded-full transition-all duration-500`}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}