diff --git a/modules/customers/src/web/pages/list/customers-list-page.tsx b/modules/customers/src/web/pages/list/customers-list-page.tsx
index b9ded23c..911579d1 100644
--- a/modules/customers/src/web/pages/list/customers-list-page.tsx
+++ b/modules/customers/src/web/pages/list/customers-list-page.tsx
@@ -16,8 +16,8 @@ export const CustomersListPage = () => {
const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);
const [search, setSearch] = useState("");
- const debouncedQ = useDebounce(search, 300);
+ const debouncedQ = useDebounce(search, 300);
const criteria = useMemo(
() => ({
@@ -34,12 +34,9 @@ export const CustomersListPage = () => {
isLoading,
isError,
error,
- } = useCustomerListQuery({
- criteria
- });
+ } = useCustomerListQuery({ criteria });
const handlePageChange = (newPageIndex: number) => {
- // TanStack usa pageIndex 0-based → API usa 0-based también
setPageIndex(newPageIndex);
};
@@ -49,7 +46,6 @@ export const CustomersListPage = () => {
};
const handleSearchChange = (value: string) => {
- // Normalización ligera: recorta y colapsa espacios internos
const cleaned = value.trim().replace(/\s+/g, " ");
setSearch(cleaned);
setPageIndex(0);
diff --git a/modules/customers/src/web/pages/list/use-customers-list-columns.tsx b/modules/customers/src/web/pages/list/use-customers-list-columns.tsx
index 598c8042..8774c711 100644
--- a/modules/customers/src/web/pages/list/use-customers-list-columns.tsx
+++ b/modules/customers/src/web/pages/list/use-customers-list-columns.tsx
@@ -1,11 +1,16 @@
+import { DataTableColumnHeader } from '@repo/rdx-ui/components';
import {
Avatar,
AvatarFallback,
Badge,
Button,
DropdownMenu, DropdownMenuContent,
- DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger
+ DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger
} from '@repo/shadcn-ui/components';
+import { cn } from '@repo/shadcn-ui/lib/utils';
import type { ColumnDef } from "@tanstack/react-table";
import { Building2Icon, GlobeIcon, MailIcon, MoreHorizontalIcon, PencilIcon, PhoneIcon, User2Icon } from 'lucide-react';
import * as React from "react";
@@ -22,24 +27,33 @@ function shortId(id: string) {
return id ? `${id.slice(0, 4)}_${id.slice(-4)}` : "-";
}
+const statuses = {
+ inactive: 'text-gray-400 bg-gray-100 dark:text-gray-500 dark:bg-gray-100/10',
+ active: 'text-green-500 bg-green-500/10 dark:text-green-400 dark:bg-green-400/10',
+ error: 'text-rose-500 bg-rose-500/10 dark:text-rose-400 dark:bg-rose-400/10',
+}
+
// ---- Helpers UI ----
const StatusBadge = ({ status }: { status: string }) => {
// Map visual simple; ajustar a tu catálogo real
- const v =
- status.toLowerCase() === "active"
- ? "default"
- : status.toLowerCase() === "inactive"
- ? "outline"
- : "secondary";
+ const statusClass = React.useMemo(() => status.toLowerCase() === 'active' ? statuses.active : statuses.inactive, [status]);
+ const contentTxt = React.useMemo(() => status.toLowerCase() === 'active' ? 'El cliente está activo' : 'El cliente está inactivo', [status]);
+
return (
-
- {status}
-
- );
+
+
+
+
+ {contentTxt}
+
+
+ )
};
const KindBadge = ({ isCompany }: { isCompany: boolean }) => (
-
+
{isCompany ? : }
{isCompany ? "Company" : "Person"}
@@ -50,23 +64,30 @@ const Soft = ({ children }: { children: React.ReactNode }) => (
);
const ContactCell = ({ customer }: { customer: CustomerSummaryFormData }) => (
-
-
-
+
+
+ {customer.email_primary && (
+
+ )}
+
+ {customer.email_secondary && (
+
{customer.email_secondary}
+ )}
+
+
{customer.phone_primary || customer.mobile_primary || -}
{customer.phone_secondary &&
• {customer.phone_secondary}}
{customer.mobile_secondary &&
• {customer.mobile_secondary}}
- {customer.fax &&
• fax {customer.fax}}
+ {false && customer.fax &&
• fax {customer.fax}}
- {customer.website && (
-
+ {false && customer.website && (
+
);
-const AddressCell: React.FC<{ c: CustomerSummaryFormData }> = ({ c }) => {
+const AddressCell = ({ c }: { c: CustomerSummaryFormData }) => {
const line1 = [c.street, c.street2].filter(Boolean).join(", ");
const line2 = [c.postal_code, c.city].filter(Boolean).join(" ");
const line3 = [c.province, c.country].filter(Boolean).join(", ");
return (
-
- {line1 || —}
+
+ {line1 || -}
{[line2, line3].filter(Boolean).join(" • ")}
);
@@ -99,6 +120,7 @@ function safeHttp(url: string) {
return `https://${url}`;
}
+
export function useCustomersListColumns(
handlers: CustomerActionHandlers = {}
): ColumnDef[] {
@@ -110,31 +132,30 @@ export function useCustomersListColumns(
return React.useMemo[]>(() => [
// Identidad + estado + metadatos (columna compuesta)
{
- id: "identity",
- header: "Customer",
+ id: "customer",
+ header: ({ column }) => (
+
+ ),
accessorFn: (row) => row.name, // para ordenar/buscar por nombre
enableHiding: false,
- size: 380,
+ size: 140,
+ minSize: 120,
cell: ({ row }) => {
const c = row.original;
const isCompany = String(c.is_company).toLowerCase() === "true";
return (
-
-
+
+
{initials(c.name)}
- {c.name}
+ {c.name}
{c.trade_name && ({c.trade_name})}
- {c.tin && {c.tin}}
-
-
-
+ {c.tin && {c.tin}}
- {c.reference && Ref: {c.reference}}