simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pagina Catalogo redesign Quiet Luxury — griglia servizi tokenizzata + footer conteggio

Browse Source 
- ServiceTable: contenitore bg-card/shadow-card, header uppercase muted, righe hover:bg-muted/40, footer "Visualizzazione di N servizi"
- CatalogSearch: usa il primitivo SearchInput
- page: sottotitolo sezione
- tokenizza OptionSelect ed EditableCell (accent-primary) — erano rimasti con hex hardcoded

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simone Cavalli
2026-07-12 11:37:09 +02:00
parent 1fc0650dcf
commit c29fab8975
6 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/catalog/ServiceTable.tsx
+22 -15
View File
@@ -73,7 +73,7 @@ function ServiceRow({
switch (key) {
case "nome":
return (
<td key={key} className="py-2 px-3 font-medium text-[#1a1a1a] min-w-[160px]">
<td key={key} className="py-2 px-3 font-medium text-foreground min-w-[160px]">
<EditableCell
value={service.name}
type="text"
@@ -84,7 +84,7 @@ function ServiceRow({
);
case "descrizione":
return (
<td key={key} className="py-2 px-3 text-[#71717a] min-w-[200px]">
<td key={key} className="py-2 px-3 text-muted-foreground min-w-[200px]">
<EditableCell
value={service.description ?? ""}
type="textarea"
@@ -155,7 +155,7 @@ function ServiceRow({
return (
<>
<tr
className={`border-b border-[#e5e7eb] hover:bg-[#f9f9f9] transition-colors duration-150 ${
className={`border-b border-border hover:bg-muted/40 transition-colors duration-150 ${
!service.active ? "opacity-50" : ""
}`}
>
@@ -218,7 +218,7 @@ function QuickAddRow({
}
const cellInput =
"border-0 bg-transparent shadow-none h-8 text-sm placeholder:text-[#71717a] focus-visible:ring-1 focus-visible:ring-primary";
"border-0 bg-transparent shadow-none h-8 text-sm placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-primary";
function renderCell(key: ColumnKey) {
switch (key) {
@@ -279,18 +279,18 @@ function QuickAddRow({
);
case "stato":
return (
<td key={key} className="py-2 px-3 text-xs text-[#a1a1aa]">
<td key={key} className="py-2 px-3 text-xs text-muted-foreground">
Invio ↵
</td>
);
default:
return <td key={key} className="py-2 px-3 text-xs text-[#a1a1aa]" />;
return <td key={key} className="py-2 px-3 text-xs text-muted-foreground" />;
}
}
return (
<>
<tr className="border-b border-[#e5e7eb] bg-[#f9f9f9]">
<tr className="border-b border-border bg-muted/40">
{colOrder.map((key) => renderCell(key))}
</tr>
{error && (
@@ -331,15 +331,17 @@ export function ServiceTable({
if (!COLUMN_DEFS[colKey].sortable) return null;
if (sortKey !== colKey) return <ArrowUpDown className="inline ml-1 h-3 w-3 opacity-40" />;
return sortDir === "asc"
? <ArrowUp className="inline ml-1 h-3 w-3 text-[#1A463C]" />
: <ArrowDown className="inline ml-1 h-3 w-3 text-[#1A463C]" />;
? <ArrowUp className="inline ml-1 h-3 w-3 text-primary" />
: <ArrowDown className="inline ml-1 h-3 w-3 text-primary" />;
}
const totalCount = activeServices.length + inactiveServices.length;
return (
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
<div className="bg-card rounded-xl border border-border shadow-card overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb] sticky top-0 z-[1]">
<thead className="bg-muted/50 border-b border-border sticky top-0 z-[1]">
<tr>
{colOrder.map((key) => {
const def = COLUMN_DEFS[key];
@@ -351,8 +353,8 @@ export function ServiceTable({
onDragOver={(e) => onColDragOver(e, key)}
onDrop={() => onColDrop(key)}
onClick={() => def.sortable && onSortClick(key)}
className={`text-left py-2 px-3 font-semibold text-[#71717a] select-none whitespace-nowrap group ${
def.sortable ? "cursor-pointer hover:text-[#1a1a1a]" : "cursor-grab"
className={`text-left py-3 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground select-none whitespace-nowrap group ${
def.sortable ? "cursor-pointer hover:text-foreground" : "cursor-grab"
}`}
style={{ minWidth: def.minWidth }}
>
@@ -373,10 +375,10 @@ export function ServiceTable({
<QuickAddRow options={options} colOrder={colOrder} />
{inactiveServices.length > 0 && (
<>
<tr className="bg-[#fafafa]">
<tr className="bg-muted/40">
<td
colSpan={colOrder.length}
className="py-1.5 px-3 text-xs font-medium uppercase tracking-wide text-[#a1a1aa]"
className="py-1.5 px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground"
>
Servizi disattivati
</td>
@@ -389,6 +391,11 @@ export function ServiceTable({
</tbody>
</table>
</div>
<div className="border-t border-border px-6 py-4 text-xs text-muted-foreground">
{totalCount === 1
? "Visualizzazione di 1 servizio"
: `Visualizzazione di ${totalCount} servizi`}
</div>
</div>
);
}