diff --git a/modules/customer-invoices/src/common/locales/en.json b/modules/customer-invoices/src/common/locales/en.json
index b680e4b2..12963bfa 100644
--- a/modules/customer-invoices/src/common/locales/en.json
+++ b/modules/customer-invoices/src/common/locales/en.json
@@ -160,6 +160,13 @@
"single_description": "Select the new status for proforma {{reference}}.",
"multiple_description": "Select the new status for {{count}} selected proformas.",
"empty_available_statuses": "No status transitions are available for the selected proformas.",
+ "status_explanations": {
+ "draft": "An unfinished proforma that is still pending changes.",
+ "sent": "The proforma has been sent to the customer for approval.",
+ "approved": "The proforma has been approved by the customer and can be turned into an invoice.",
+ "rejected": "The proforma has been rejected by the customer. It can stay like this or return to \"draft\".",
+ "issued": "The proforma has already been turned into an invoice."
+ },
"cancel": "Cancel",
"confirm": "Change status",
"submitting": "Changing...",
diff --git a/modules/customer-invoices/src/common/locales/es.json b/modules/customer-invoices/src/common/locales/es.json
index 9d88a325..7c05635f 100644
--- a/modules/customer-invoices/src/common/locales/es.json
+++ b/modules/customer-invoices/src/common/locales/es.json
@@ -161,6 +161,13 @@
"single_description": "Selecciona el nuevo estado para la proforma {{reference}}.",
"multiple_description": "Selecciona el nuevo estado para {{count}} proformas seleccionadas.",
"empty_available_statuses": "No hay transiciones de estado disponibles para las proformas seleccionadas.",
+ "status_explanations": {
+ "draft": "Una proforma sin terminar y pendiente de modificaciones.",
+ "sent": "Se ha enviado la proforma al cliente para su aprobación.",
+ "approved": "La proforma ha sido aprobada por el cliente y puede pasar a factura.",
+ "rejected": "La proforma ha sido rechazada por el cliente. Puede quedarse asà o volver a \"borrador\".",
+ "issued": "La proforma ya ha sido pasada a factura."
+ },
"cancel": "Cancelar",
"confirm": "Cambiar estado",
"submitting": "Cambiando...",
diff --git a/modules/customer-invoices/src/web/proformas/change-status/helpers/proforma-status-ui.ts b/modules/customer-invoices/src/web/proformas/change-status/helpers/proforma-status-ui.ts
index 9734c5d0..2ca7dd05 100644
--- a/modules/customer-invoices/src/web/proformas/change-status/helpers/proforma-status-ui.ts
+++ b/modules/customer-invoices/src/web/proformas/change-status/helpers/proforma-status-ui.ts
@@ -4,6 +4,7 @@ import {
FileCheckIcon,
FileQuestionIcon,
FileTextIcon,
+ ReceiptTextIcon,
SendIcon,
XCircleIcon,
} from "lucide-react";
@@ -62,3 +63,24 @@ export const getProformaStatusIcon = (status: ProformaStatus) => {
return FileQuestionIcon;
}
};
+
+export const getProformaStatusDisplayIcon = (status: ProformaStatus) => {
+ return status === "issued" ? ReceiptTextIcon : getProformaStatusIcon(status);
+};
+
+export const getProformaStatusBadgeClassName = (status: ProformaStatus): string => {
+ switch (status) {
+ case "draft":
+ return "border-gray-200 bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-200/90";
+ case "sent":
+ return "border-amber-300 bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-300/90";
+ case "approved":
+ return "border-emerald-300 bg-emerald-100/70 text-emerald-700 ring-1 ring-inset ring-emerald-300/90";
+ case "rejected":
+ return "border-red-300 bg-red-50 text-red-600 ring-1 ring-inset ring-red-300/90";
+ case "issued":
+ return "border-sky-300 bg-sky-100/70 text-sky-700 ring-1 ring-inset ring-sky-300/90";
+ default:
+ return "border-gray-200 bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-200/90";
+ }
+};
diff --git a/modules/customer-invoices/src/web/proformas/change-status/ui/change-status-dialog.tsx b/modules/customer-invoices/src/web/proformas/change-status/ui/change-status-dialog.tsx
index 7e58783e..a69706ba 100644
--- a/modules/customer-invoices/src/web/proformas/change-status/ui/change-status-dialog.tsx
+++ b/modules/customer-invoices/src/web/proformas/change-status/ui/change-status-dialog.tsx
@@ -15,7 +15,11 @@ import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "../../../i18n";
import { PROFORMA_STATUS, type ProformaStatus } from "../../shared";
import type { ChangeProformaStatusTarget } from "../entities";
-import { getProformaStatusColor, getProformaStatusIcon } from "../helpers";
+import {
+ getProformaStatusColor,
+ getProformaStatusDisplayIcon,
+ getProformaStatusIcon,
+} from "../helpers";
import { getCommonAvailableProformaStatuses } from "../utils";
interface ChangeProformaStatusDialogProps {
@@ -59,7 +63,7 @@ interface StatusOptionCardProps {
const StatusOptionCard = ({ status, selected, onClick }: StatusOptionCardProps) => {
const { t } = useTranslation();
- const Icon = getProformaStatusIcon(status);
+ const Icon = getProformaStatusDisplayIcon(status);
return (
diff --git a/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-badge.tsx b/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-badge.tsx
index 0e4910fb..83d9912d 100644
--- a/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-badge.tsx
+++ b/modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-badge.tsx
@@ -1,9 +1,11 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
-import { ReceiptTextIcon } from "lucide-react";
import { useTranslation } from "../../../../i18n";
-import { getProformaStatusIcon } from "../../../change-status/helpers";
+import {
+ getProformaStatusBadgeClassName,
+ getProformaStatusDisplayIcon,
+} from "../../../change-status/helpers";
import type { ProformaStatus } from "../../../shared";
export type ProformaStatusBadgeProps = {
@@ -14,20 +16,7 @@ export type ProformaStatusBadgeProps = {
export const ProformaStatusBadge = ({ status, className }: ProformaStatusBadgeProps) => {
const { t } = useTranslation();
const normalizedStatus = status.toLowerCase() as ProformaStatus;
- const Icon = normalizedStatus === "issued" ? ReceiptTextIcon : getProformaStatusIcon(normalizedStatus);
-
- const stylesByStatus: Record = {
- draft:
- "border-gray-200 bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-200/90",
- sent:
- "border-amber-300 bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-300/90",
- approved:
- "border-emerald-300 bg-emerald-100/70 text-emerald-700 ring-1 ring-inset ring-emerald-300/90",
- rejected:
- "border-red-300 bg-red-50 text-red-600 ring-1 ring-inset ring-red-300/90",
- issued:
- "border-sky-300 bg-sky-100/70 text-sky-700 ring-1 ring-inset ring-sky-300/90",
- };
+ const Icon = getProformaStatusDisplayIcon(normalizedStatus);
return (
@@ -37,7 +26,7 @@ export const ProformaStatusBadge = ({ status, className }: ProformaStatusBadgePr
className={cn(
"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium leading-none whitespace-nowrap",
"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:size-3.5",
- stylesByStatus[normalizedStatus],
+ getProformaStatusBadgeClassName(normalizedStatus),
className
)}
>