68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { Badge } from "@repo/shadcn-ui/components";
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { forwardRef } from "react";
|
|
import { useTranslation } from "../i18n";
|
|
|
|
export type CustomerInvoiceStatus = "draft" | "sent" | "approved" | "rejected" | "issued";
|
|
|
|
export type CustomerInvoiceStatusBadgeProps = {
|
|
status: string | CustomerInvoiceStatus; // permitir cualquier valor
|
|
dotVisible?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
const statusColorConfig: Record<CustomerInvoiceStatus, { badge: string; dot: string }> = {
|
|
draft: {
|
|
badge:
|
|
"bg-gray-500/10 dark:bg-gray-500/20 hover:bg-gray-500/10 text-gray-600 border-gray-400/60",
|
|
dot: "bg-gray-500",
|
|
},
|
|
sent: {
|
|
badge:
|
|
"bg-amber-500/10 dark:bg-amber-500/20 hover:bg-amber-500/10 text-amber-500 border-amber-600/60",
|
|
dot: "bg-amber-500",
|
|
},
|
|
approved: {
|
|
badge:
|
|
"bg-emerald-500/10 dark:bg-emerald-500/20 hover:bg-emerald-500/10 text-emerald-500 border-emerald-600/60",
|
|
dot: "bg-emerald-500",
|
|
},
|
|
rejected: {
|
|
badge:
|
|
"bg-red-500/10 dark:bg-red-500/20 hover:bg-red-500/10 text-red-500 border-red-600/60",
|
|
dot: "bg-red-500",
|
|
},
|
|
issued: {
|
|
badge:
|
|
"bg-blue-600/10 dark:bg-blue-600/20 hover:bg-blue-600/10 text-blue-500 border-blue-600/60",
|
|
dot: "bg-blue-500",
|
|
},
|
|
};
|
|
|
|
export const CustomerInvoiceStatusBadge = forwardRef<
|
|
HTMLDivElement,
|
|
CustomerInvoiceStatusBadgeProps
|
|
>(({ status, dotVisible, className, ...props }, ref) => {
|
|
const { t } = useTranslation();
|
|
const normalizedStatus = status.toLowerCase() as CustomerInvoiceStatus;
|
|
const config = statusColorConfig[normalizedStatus];
|
|
const commonClassName = "transition-colors duration-200 cursor-pointer shadow-none rounded-full";
|
|
|
|
if (!config) {
|
|
return (
|
|
<Badge ref={ref} className={cn(commonClassName, className)} {...props}>
|
|
{status}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge className={cn(commonClassName, config.badge, className)} {...props}>
|
|
{dotVisible && <div className={cn("h-1.5 w-1.5 rounded-full mr-2", config.dot)} />}
|
|
{t(`catalog.status.${normalizedStatus}`, { defaultValue: status })}
|
|
</Badge>
|
|
);
|
|
});
|
|
|
|
CustomerInvoiceStatusBadge.displayName = "CustomerInvoiceStatusBadge";
|