Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: enhance RichiesteTable with status handling and display logic

Browse source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Marco Pedone 2026-05-05 16:30:58 +02:00
parent b7e1e964c3
commit 655d69c94b
2 changed files with 179 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/infoalloggi/src/components/servizio/annuncio_card.tsx
View file

@ -13,6 +13,7 @@ import {
UserActions,
} from "~/components/servizio/annuncio_actions";
import { IncrociDialog } from "~/components/servizio/incroci";
import type { StatusKey } from "~/components/tables/richieste-table";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Textarea } from "~/components/ui/textarea";
import { useMediaQuery } from "~/hooks/use-media-query";
@ -143,7 +144,7 @@ export const AnnuncioCardRichieste = ({
tableRef,
data,
}: {
tableRef: RefObject<Table<RichiesteData> | null>;
tableRef: RefObject<Table<RichiesteData & { status: StatusKey }> | null>;
data: ServizioAnnuncioData;
}) => {
const { onMutate, onSettled } = MutationPageRestore(tableRef);

354
apps/infoalloggi/src/components/tables/richieste-table.tsx
View file

@ -9,11 +9,14 @@ import {
import { it } from "date-fns/locale";
import {
BadgeEuro,
CircleCheck,
CircleCheckBig,
ClipboardPen,
ClockFading,
ExternalLink,
Logs,
ReceiptEuro,
SearchX,
UserCog,
} from "lucide-react";
@ -69,8 +72,108 @@ type RichiesteTableProps = {
data: RichiesteData[];
};
const StatusMapping = {
attesa_attivazione: "Attesa di attivazione",
interrotto: "Interrotto",
onboarding: "Onboarding",
scaduto: "Scaduto",
consulenza_da_pagare: "Consulenza da pagare",
consulenza_da_inserire: "Consulenza da inserire",
attesa_saldo: "Attesa pagamento saldo",
attesa_caparra: "Attesa versamento caparra",
attesa_conferma: "Attesa accettazione conferma",
attivo: "Attivo",
attesa_pagamento_acconto: "Attesa pagamento acconto",
confermato: "Confermato",
};
export type StatusKey = keyof typeof StatusMapping;
function statusParser(data: RichiesteData): keyof typeof StatusMapping {
if (data.isInterrotto) {
return "interrotto";
}
if (!data.onboardOk) {
return "onboarding";
}
if (!data.isOkAcconto || !data.decorrenza) {
const acconti = data.ordini_servizio.filter(
(o) => o.type === orderTypeEnum.enum.Acconto,
);
const activeAcconto = acconti.find((a) => a.isActive);
//hasActiveAcconto
if (activeAcconto) {
return "attesa_attivazione";
}
return "attesa_pagamento_acconto";
}
if (
isBefore(
add(data.decorrenza, {
days: DEFAULT_SERVIZIO_DURATION_DAYS,
}),
new Date(),
) &&
!data.isOkSaldo
) {
return "scaduto";
}
const contrattoInserito = data.annunci_servizio.filter(
(a) => a.doc_contratto_added,
);
if (contrattoInserito.length > 0) {
if (data.isOkSaldo) {
if (data.isOkConsulenza) {
return "confermato";
}
if (
//hasConsulanzaDaPagare
data.ordini_servizio.some(
(o) => o.type === orderTypeEnum.enum.Consulenza && !o.isActive,
)
) {
return "consulenza_da_pagare";
}
return "consulenza_da_inserire";
}
}
const annuncioCaparraVersata = data.annunci_servizio.filter(
(a) => a.status_conferma === statusConfermaEnum.enum["Caparra versata"],
);
if (annuncioCaparraVersata.length > 0) {
if (data.isOkSaldo) {
return "confermato";
}
return "attesa_saldo";
}
const annuncioConfermato = data.annunci_servizio.filter(
(a) => a.status_conferma === statusConfermaEnum.enum["Conferma accettata"],
);
if (annuncioConfermato.length > 0) {
return "attesa_caparra";
}
const annuncioAttesaConferma = data.annunci_servizio.filter(
(a) => a.status_conferma === statusConfermaEnum.enum["Inviato conferma"],
);
if (annuncioAttesaConferma.length > 0) {
return "attesa_conferma";
}
return "attivo";
}
export const RichiesteTable = ({ data }: RichiesteTableProps) => {
const tabledata = data;
const tabledata = data.map((d) => ({
...d,
status: statusParser(d),
}));
const columns_titles = {
id: "ID Ordine",
username: "Utente",
@ -83,12 +186,10 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
interruzione_expires_at: "Scad. interr.",
actions: "Azioni",
};
const statusOptions = [
{ label: "Attesa di attivazione", value: "attesa_attivazione" },
{ label: "Acconto pagato", value: "acconto_pagato" },
{ label: "Saldo pagato", value: "saldo_pagato" },
{ label: "Conferma in corso", value: "conferma" },
];
const statusOptions = Object.entries(StatusMapping).map(([key, label]) => ({
label,
value: key,
}));
const type_options = [
{ label: "Transitorio", value: tipologiaPosizioneEnum.enum.Transitorio },
@ -307,185 +408,83 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
accessorKey: "status",
cell: ({ row }) => {
let badgeClass = "";
let contents: React.ReactNode;
let icon: React.ReactNode;
const statusText =
StatusMapping[row.original.status as StatusKey] ||
row.original.status;
const resolveStatus = () => {
if (row.original.isInterrotto) {
switch (row.original.status) {
case "interrotto":
badgeClass =
"border-destructive bg-destructive/10 text-destructive";
contents = (
<>
<SearchX className="stroke-red-500 dark:stroke-red-400" />
Interrotto
</>
);
return;
}
if (!row.original.onboardOk) {
icon = <SearchX className="stroke-red-500 dark:stroke-red-400" />;
break;
case "onboarding":
badgeClass = "border-pink-500 bg-pink-500/10 text-pink-600";
contents = (
<>
<ClockFading className="stroke-pink-500 dark:stroke-pink-400" />
Onboarding
</>
icon = (
<ClipboardPen className="stroke-pink-500 dark:stroke-pink-400" />
);
return;
}
if (!row.original.isOkAcconto || !row.original.decorrenza) {
const acconti = row.original.ordini_servizio.filter(
(o) => o.type === orderTypeEnum.enum.Acconto,
);
const activeAcconto = acconti.find((a) => a.isActive);
//hasActiveAcconto
if (activeAcconto) {
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Attesa attivazione
</>
);
} else {
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Attesa pag. acconto
</>
);
}
return;
}
if (
isBefore(
add(row.original.decorrenza, {
days: DEFAULT_SERVIZIO_DURATION_DAYS,
}),
new Date(),
) &&
!row.original.isOkSaldo
) {
badgeClass = "border-red-500 bg-red-500/10 text-red-500";
contents = (
<>
<SearchX className="stroke-red-500 dark:stroke-red-400" />
Scaduto
</>
);
return;
}
const contrattoInserito = row.original.annunci_servizio.filter(
(a) => a.doc_contratto_added,
);
if (contrattoInserito.length > 0) {
if (row.original.isOkSaldo) {
if (row.original.isOkConsulenza) {
badgeClass = "border-blue-500 bg-blue-500/10 text-blue-500";
contents = (
<>
<CircleCheckBig className="stroke-blue-500 dark:stroke-blue-400" />
Confermato
</>
);
return;
}
if (
//hasConsulanzaDaPagare
row.original.ordini_servizio.some(
(o) =>
o.type === orderTypeEnum.enum.Consulenza && !o.isActive,
)
) {
badgeClass =
"border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Consulenza da pagare
</>
);
return;
}
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Consulenza da inserire
</>
);
return;
}
}
const annuncioCaparraVersata = row.original.annunci_servizio.filter(
(a) =>
a.status_conferma === statusConfermaEnum.enum["Caparra versata"],
);
if (annuncioCaparraVersata.length > 0) {
if (row.original.isOkSaldo) {
badgeClass = "border-blue-500 bg-blue-500/10 text-blue-500";
contents = (
<>
<CircleCheckBig className="stroke-blue-500 dark:stroke-blue-400" />
Confermato
</>
);
} else {
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Attesa saldo
</>
);
}
return;
}
const annuncioConfermato = row.original.annunci_servizio.filter(
(a) =>
a.status_conferma ===
statusConfermaEnum.enum["Conferma accettata"],
);
if (annuncioConfermato.length > 0) {
break;
case "attesa_attivazione":
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
contents = (
<>
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
Attesa di caparra
</>
icon = (
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
);
return;
}
const annuncioAttesaConferma = row.original.annunci_servizio.filter(
(a) =>
a.status_conferma === statusConfermaEnum.enum["Inviato conferma"],
);
if (annuncioAttesaConferma.length > 0) {
break;
case "attesa_pagamento_acconto":
badgeClass = "border-orange-500 bg-orange-500/10 text-orange-600";
icon = (
<BadgeEuro className="stroke-orange-500 dark:stroke-orange-400" />
);
break;
case "scaduto":
badgeClass = "border-red-500 bg-red-500/10 text-red-500";
icon = <SearchX className="stroke-red-500 dark:stroke-red-400" />;
break;
case "confermato":
badgeClass = "border-blue-500 bg-blue-500/10 text-blue-500";
contents = (
<>
<CircleCheckBig className="stroke-blue-500 dark:stroke-blue-400" />
Attesa accett. conferma
</>
icon = (
<CircleCheckBig className="stroke-blue-500 dark:stroke-blue-400" />
);
return;
}
badgeClass = "border-green-500 bg-green-500/10 text-green-500";
contents = (
<>
break;
case "consulenza_da_pagare":
badgeClass = "border-orange-500 bg-orange-500/10 text-orange-600";
icon = (
<BadgeEuro className="stroke-orange-500 dark:stroke-orange-400" />
);
break;
case "consulenza_da_inserire":
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
icon = (
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
);
break;
case "attesa_saldo":
badgeClass = "border-orange-500 bg-orange-500/10 text-orange-600";
icon = (
<BadgeEuro className="stroke-orange-500 dark:stroke-orange-400" />
);
break;
case "attesa_caparra":
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
icon = (
<ReceiptEuro className="stroke-yellow-500 dark:stroke-yellow-400" />
);
break;
case "attesa_conferma":
badgeClass = "border-yellow-500 bg-yellow-500/10 text-yellow-600";
icon = (
<ClockFading className="stroke-yellow-500 dark:stroke-yellow-400" />
);
break;
case "attivo":
badgeClass = "border-green-500 bg-green-500/10 text-green-500";
icon = (
<CircleCheck className="stroke-green-500 dark:stroke-green-400" />
Attivo
</>
);
};
resolveStatus();
);
break;
}
return (
<Badge
className={cn(
@ -494,7 +493,8 @@ export const RichiesteTable = ({ data }: RichiesteTableProps) => {
)}
variant="outline"
>
{contents}
{icon}
{statusText}
</Badge>
);
},