Uecko/Uecko_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
David Arranz 2026-03-31 19:14:30 +02:00
parent f38772182d
commit b26a634cfb
3 changed files with 88 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
modules/customers/src/web/list/ui/pages/list-customers-page.tsx
View File

@ -1,6 +1,11 @@
import { PageHeader, SimpleSearchInput } from "@erp/core/components";
import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import {
Button,
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
@ -22,6 +27,31 @@ export const ListCustomersPage = () => {
//onDeleteClick: (customer) => null, //confirmDelete(inv.id),
});
const isPanelOpen = panelCtrl.panelState.isOpen;
const listContent = (
<div className="h-full min-w-0 overflow-auto w-full">
<div className="flex items-center justify-between gap-16">
<SimpleSearchInput
loading={listCtrl.isFetching}
onSearchChange={listCtrl.setSearchValue}
value={listCtrl.search}
/>
</div>
<CustomersGrid
columns={columns}
data={listCtrl.data}
fetching={listCtrl.isFetching}
loading={listCtrl.isLoading}
onPageChange={listCtrl.setPageIndex}
onPageSizeChange={listCtrl.setPageSize}
pageIndex={listCtrl.pageIndex}
pageSize={listCtrl.pageSize}
/>
</div>
);
if (listCtrl.isError) {
return (
<AppContent>
@ -51,43 +81,45 @@ export const ListCustomersPage = () => {
title={t("pages.list.title")}
/>
</AppHeader>
<AppContent className="min-h-0">
<div className="flex min-h-0 flex-1 overflow-hidden gap-4">
<div className="min-w-0 flex-1 overflow-auto">
<div className="flex items-center justify-between gap-16">
<SimpleSearchInput
loading={listCtrl.isFetching}
onSearchChange={listCtrl.setSearchValue}
value={listCtrl.search}
/>
</div>
{isPanelOpen ? (
<ResizablePanelGroup
autoSave="list-customers-page"
className="h-full"
orientation="horizontal"
>
<ResizablePanel defaultSize="65%" maxSize="75%" minSize="25%">
{listContent}
</ResizablePanel>
<CustomersGrid
columns={columns}
data={listCtrl.data}
fetching={listCtrl.isFetching}
loading={listCtrl.isLoading}
onPageChange={listCtrl.setPageIndex}
onPageSizeChange={listCtrl.setPageSize}
onRowClick={() => null}
pageIndex={listCtrl.pageIndex}
pageSize={listCtrl.pageSize}
/>
</div>
<ResizableHandle className="mx-4" withHandle />
<CustomerSummaryPanel
customer={panelCtrl.customer}
mode={panelCtrl.panelState.mode}
onEdit={(customer) => navigate(`/customers/${customer.id}/edit`)}
onOpenChange={(open) => {
if (open) panelCtrl.panelState.onOpenChange(true);
else panelCtrl.closePanel();
}}
onTogglePinned={panelCtrl.panelState.togglePinned}
open={panelCtrl.panelState.isOpen}
visibility={panelCtrl.panelState.visibility}
/>
</div>
<ResizablePanel defaultSize="35%" maxSize="75%" minSize="25%">
<div className="h-full">
<CustomerSummaryPanel
className="border bg-background"
customer={panelCtrl.customer}
mode={panelCtrl.panelState.mode}
onEdit={(customer) => navigate(`/customers/${customer.id}/edit`)}
onOpenChange={(open) => {
if (!open) {
panelCtrl.closePanel();
return;
}
panelCtrl.panelState.onOpenChange(true);
}}
onTogglePinned={panelCtrl.panelState.togglePinned}
open={panelCtrl.panelState.isOpen}
visibility={panelCtrl.panelState.visibility}
/>
</div>
</ResizablePanel>
</ResizablePanelGroup>
) : (
<div className="flex min-h-0 flex-1 overflow-hidden border">{listContent}</div>
)}
</AppContent>
</>
);

45
packages/rdx-ui/src/components/right-panel/right-panel.tsx
View File

@ -17,37 +17,30 @@ export const RightPanel = ({
return (
<aside
aria-labelledby="right-panel-title"
className={cn(
"ml-4", // separación real
"border bg-background",
"w-[420px] xl:w-[460px]",
className
)}
className={cn("flex h-full flex-col bg-background", className)}
>
<div className="flex h-full flex-col">
<div className="flex items-center justify-between border-b px-4 py-3">
<h2 className="truncate text-sm font-semibold" id="right-panel-title">
{title}
</h2>
<div className="flex items-center justify-between border-b px-4 py-3">
<h2 className="truncate text-sm font-semibold" id="right-panel-title">
{title}
</h2>
<div className="flex items-center gap-1">
{headerActions}
<div className="flex items-center gap-1">
{headerActions}
{onOpenChange ? (
<Button
aria-label="Cerrar panel"
onClick={() => onOpenChange(false)}
size="icon-sm"
variant="ghost"
>
<XIcon className="size-4" />
</Button>
) : null}
</div>
{onOpenChange ? (
<Button
aria-label="Cerrar panel"
onClick={() => onOpenChange(false)}
size="icon-sm"
variant="ghost"
>
<XIcon className="size-4" />
</Button>
) : null}
</div>
<div className="flex-1 overflow-auto">{children}</div>
</div>
<div className="flex-1 overflow-auto">{children}</div>
</aside>
);
};

4
packages/shadcn-ui/src/styles/globals.css
View File

@ -149,7 +149,7 @@
--sidebar-border: oklch(0.6427 0.1407 253.94);
--sidebar-ring: oklch(1 0 0);
--radius: 0.25rem;
--radius: 0.325rem;
--shadow-x: 0;
--shadow-y: 1px;
--shadow-blur: 3px;
@ -200,7 +200,7 @@
--sidebar-accent-foreground: oklch(0.9851 0 0);
--sidebar-border: oklch(1 0 0);
--sidebar-ring: oklch(0.4915 0.2776 263.8724);
--radius: 0.25rem;
--radius: 0.325rem;
--shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);