mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-07-22 08:48:34 +00:00
107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import type { PortfolioStatus } from "@/app/db/schema/portfolio";
|
|
import { Badge } from "@/app/shadcn_components/ui/badge";
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@/app/shadcn_components/ui/hover-card";
|
|
|
|
export default function StatusBadge({
|
|
status,
|
|
isProperty = false,
|
|
}: {
|
|
status: (typeof PortfolioStatus)[number];
|
|
isProperty?: boolean;
|
|
}) {
|
|
const statusConfig = statusColor[status];
|
|
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger>
|
|
<Badge className={statusConfig.class}>{statusConfig.text}</Badge>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent>
|
|
<div>
|
|
<div>
|
|
<div
|
|
className={"w-6 h-6 rounded-full mr-2 " + statusConfig.class}
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{!isProperty
|
|
? statusConfig.hoverText
|
|
: statusConfig.propertyHoverText}
|
|
</p>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
);
|
|
}
|
|
|
|
const statusColor: {
|
|
[key in (typeof PortfolioStatus)[number]]: {
|
|
class: string;
|
|
text: string;
|
|
hoverText: string;
|
|
propertyHoverText: string;
|
|
};
|
|
} = {
|
|
scoping: {
|
|
class: "bg-emerald-500 hover:bg-emerald-500",
|
|
text: "scoping",
|
|
hoverText: "This portfolio is currently in scoping",
|
|
propertyHoverText: "This property is currently in scoping",
|
|
},
|
|
assessment: {
|
|
class: "bg-emerald-500 hover:bg-emerald-500",
|
|
text: "assessment",
|
|
hoverText: "This portfolio is currently in the assessment stage",
|
|
propertyHoverText: "This property is currently in the assessment stage",
|
|
},
|
|
tendering: {
|
|
class: "bg-emerald-500 hover:bg-emerald-500",
|
|
text: "tendering",
|
|
hoverText: "This portfolio is currently in the tendering stage",
|
|
propertyHoverText: "This property is currently in tender",
|
|
},
|
|
"project underway": {
|
|
class: "bg-emerald-500 hover:bg-emerald-500",
|
|
text: "project underway",
|
|
hoverText: "This portfolio has begun works",
|
|
propertyHoverText: "This property has begun works",
|
|
},
|
|
"completion; status: on track": {
|
|
class: "bg-emerald-500 hover:bg-emerald-500",
|
|
text: "on track",
|
|
hoverText: "This portfolio is on track to be completed on time",
|
|
propertyHoverText: "This property is on track to be completed on time",
|
|
},
|
|
"completion; status: delayed": {
|
|
class: "bg-orange-400 hover:bg-orange-400",
|
|
text: "delayed",
|
|
hoverText:
|
|
"This portfolio is delayed and one or more properties require attention",
|
|
propertyHoverText: "This property is delayed and requires attention",
|
|
},
|
|
"completion; status: at risk": {
|
|
class: "bg-red-400 hover:bg-red-400",
|
|
text: "at risk",
|
|
hoverText:
|
|
"This portfolio is at risk. One or more properties require attention",
|
|
propertyHoverText: "This property is at risk and requires attention",
|
|
},
|
|
"completion; status: completed": {
|
|
class: "bg-gray-400 hover:bg-gray-400",
|
|
text: "completed",
|
|
hoverText: "This portfolio has been completed",
|
|
propertyHoverText: "This property has been completed",
|
|
},
|
|
"needs review": {
|
|
class: "bg-indigo-600 hover:bg-indigo-400",
|
|
text: "needs review",
|
|
hoverText: "The works in this portfolio has been completed and need review",
|
|
propertyHoverText: "The works on this property have been completed",
|
|
},
|
|
};
|