Cambio de estilo

modules/core/src/web/components/page-header.tsx

@@ -21,32 +21,32 @@ export function PageHeader({
   className,
 }: PageHeaderProps) {
   return (
-    <div className={cn("pt-6 pb-6 lg:flex lg:items-center lg:justify-between", className)}>
+    <div className={cn("pt-6 pb-4 lg:flex lg:items-center lg:justify-between", className)}>
       {/* Lado izquierdo */}
-      <div className='min-w-0 flex-1'>
+      <div className="min-w-0 flex-1">
-        <div className='flex items-start gap-4'>
+        <div className="flex items-start gap-4">
           {backIcon && (
             <Button
-              variant='ghost'
+              className="cursor-pointer"
-              size='icon'
-              className='cursor-pointer'
               onClick={() => window.history.back()}
+              size="icon"
+              variant="ghost"
             >
-              <ChevronLeftIcon className='size-5' />
+              <ChevronLeftIcon className="size-5" />
             </Button>
           )}
 
           <div>
-            <h2 className='h-8 text-xl font-semibold text-foreground sm:truncate sm:tracking-tight'>
+            <h2 className="h-8 text-xl font-semibold text-foreground sm:truncate sm:tracking-tight">
               {title}
             </h2>
-            {description && <p className='text-sm text-muted-foreground'>{description}</p>}
+            {description && <p className="text-sm text-primary">{description}</p>}
           </div>
         </div>
       </div>
 
       {/* Lado derecho parametrizable */}
-      <div className='mt-4 flex lg:mt-0 lg:ml-4'>{rightSlot}</div>
+      <div className="mt-4 flex lg:mt-0 lg:ml-4">{rightSlot}</div>
     </div>
   );
 }

packages/rdx-ui/src/components/layout/app-content.tsx

@@ -9,7 +9,6 @@ export const AppContent = ({
   return (
     <div
       className={cn("app-content flex flex-1 flex-col gap-4 p-4 pt-6 min-h-screen", className)}
-      style={{ backgroundColor: "#fdfdfd" }}
       {...props}
     >
       {children}

packages/rdx-ui/src/components/layout/app-header.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export const AppHeader = ({
   className,
@@ -7,7 +7,14 @@ export const AppHeader = ({
   ...props
 }: PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("app-header gap-4 px-4 pt-0 border-b bg-background", className)} {...props}>
+    <div
+      className={cn(
+        "md:rounded-tl-xl md:rounded-tr-xl",
+        "app-header gap-4 px-4 pt-0 border-b border-sidebar/25 bg-background",
+        className
+      )}
+      {...props}
+    >
       {children}
     </div>
   );

packages/rdx-ui/src/components/layout/app-layout.tsx

@@ -15,7 +15,7 @@ export const AppLayout = () => {
     >
       <AppSidebar variant="inset" />
       {/* Aquí está el MAIN */}
-      <SidebarInset className="app-main">
+      <SidebarInset className="app-main bg-white">
         <Outlet />
       </SidebarInset>
     </SidebarProvider>

packages/rdx-ui/src/components/layout/app-sidebar.tsx

@@ -6,11 +6,9 @@ import {
   SidebarRail,
 } from "@repo/shadcn-ui/components";
 import {
-  AudioWaveform,
   BarChartIcon,
   CameraIcon,
   ClipboardListIcon,
-  Command,
   DatabaseIcon,
   FileCheckIcon,
   FileCodeIcon,
@@ -20,7 +18,6 @@ import {
   Frame,
   GalleryVerticalEnd,
   HelpCircleIcon,
-  HomeIcon,
   LayoutDashboardIcon,
   ListIcon,
   MapIcon,
@@ -161,24 +158,14 @@ const data2 = {
       logo: GalleryVerticalEnd,
       plan: "Enterprise",
     },
-    {
-      name: "Acme Corp.",
-      logo: AudioWaveform,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Command,
-      plan: "Free",
-    },
   ],
   navMain: [
-    {
+    /*{
       title: "Inicio",
       url: "/",
       icon: HomeIcon,
       isActive: true,
-    },
+    },*/
     {
       title: "Clientes",
       icon: UsersIcon,
@@ -188,10 +175,10 @@ const data2 = {
           title: "Listado de clientes",
           url: "/customers",
         },
-        {
+        /*{
           title: "Añadir un cliente",
           url: "/customers/create",
-        },
+        },*/
       ],
     },
     {
@@ -202,10 +189,10 @@ const data2 = {
           title: "Listado de proformas",
           url: "/proformas",
         },
-        {
+        /*{
           title: "Enviar a Veri*Factu",
           url: "#",
-        },
+        },*/
       ],
     },
     {

packages/rdx-ui/src/components/layout/nav-main.tsx

@@ -1,5 +1,3 @@
-import { ChevronRightIcon, type LucideIcon, PlusCircleIcon } from "lucide-react";
-
 import {
   Collapsible,
   CollapsibleContent,
@@ -13,6 +11,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "@repo/shadcn-ui/components";
+import { ChevronRightIcon, type LucideIcon, PlusCircleIcon } from "lucide-react";
 import { useNavigate } from "react-router";
 
 type NavMainItem = {
@@ -26,21 +25,17 @@ type NavMainItem = {
   }[];
 };
 
-export function NavMain({
+export function NavMain({ items }: { items: NavMainItem[] }) {
-  items,
-}: {
-  items: NavMainItem[];
-}) {
   const navigate = useNavigate();
 
   return (
     <SidebarGroup>
-      <SidebarGroupContent className='flex flex-col gap-2'>
+      <SidebarGroupContent className="flex flex-col gap-2">
         <SidebarMenu>
-          <SidebarMenuItem className='flex items-center gap-2'>
+          <SidebarMenuItem className="flex items-center gap-2">
             <SidebarMenuButton
-              tooltip='Quick Create'
+              className="hidden min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
-              className='min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground'
+              tooltip="Quick Create"
             >
               <PlusCircleIcon />
               <span>Quick Create</span>
@@ -49,13 +44,13 @@ export function NavMain({
         </SidebarMenu>
         <SidebarMenu>
           {items.map((item) => (
-            <Collapsible key={item.title} asChild defaultOpen={true} className='group/collapsible'>
+            <Collapsible asChild className="group/collapsible" defaultOpen={true} key={item.title}>
-              <SidebarMenuItem className='mb-6'>
+              <SidebarMenuItem className="mb-6">
                 <CollapsibleTrigger asChild>
                   <SidebarMenuButton tooltip={item.title}>
                     {item.icon && <item.icon />}
-                    <span className='font-semibold'>{item.title}</span>
+                    <span className="font-semibold">{item.title}</span>
-                    <ChevronRightIcon className='ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+                    <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                   </SidebarMenuButton>
                 </CollapsibleTrigger>
                 <CollapsibleContent>

packages/rdx-ui/src/components/loading-overlay/loading-overlay.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "@repo/rdx-ui/locales/i18n.ts";
-import { JSX } from "react";
+import type { JSX } from "react";
+
 import { LoadingIndicator } from "./loading-indicator.tsx";
 
 export type LoadingOverlayProps = {
@@ -31,7 +32,7 @@ export const LoadingOverlay = ({ title, subtitle, ...props }: LoadingOverlayProp
       }
       {...props}
     >
-      <LoadingIndicator look='dark' title={loadingTitle} subtitle={loadingSubtitle} />
+      <LoadingIndicator look="dark" subtitle={loadingSubtitle} title={loadingTitle} />
     </div>
   );
 };