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

Clientes y facturas de cliente

Browse Source
This commit is contained in:
David Arranz 2025-09-16 19:59:58 +02:00
parent f72273b069
commit 4d3430cc91
4 changed files with 355 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

306
modules/customer-invoices/src/api/application/use-cases/report/reporter/templates/customer-invoice/template.hbs
View File

@ -103,12 +103,12 @@
<!-- Bloque IZQUIERDO: imagen arriba + texto abajo, alineado a la izquierda --> <!-- Bloque IZQUIERDO: imagen arriba + texto abajo, alineado a la izquierda -->
<div class="w-[70%] flex flex-col items-start text-left"> <div class="w-[70%] flex flex-col items-start text-left">
<img src="https://rodax-software.com/images/logo1.jpg" alt="Logo Rodax" class="block h-14 w-auto mb-1" /> <img src="https://rodax-software.com/images/logo1.jpg" alt="Logo Rodax" class="block h-14 w-auto mb-1" />
<div class="flex w-full gap-9"> <div class="flex w-full">
<div class="p-1 "> <div class="p-1 ">
<p><span>Factura nº:</span>xxxxxxxx</p> <p><span>Factura nº:</span>xxxxxxxx</p>
<p><span>Fecha:</span>12/12/2024</p> <p><span>Fecha:</span>12/12/2024</p>
</div> </div>
<div class="p-1"> <div class="p-1 ml-9">
<h2 class="font-semibold uppercase mb-1">{{customer.name}}</h2> <h2 class="font-semibold uppercase mb-1">{{customer.name}}</h2>
<p>AAAA</p> <p>AAAA</p>
<p>BBBBBBsdfsfsdf sfsdf sf sdfs fsdfsd fsdf sdfsd fds </p> <p>BBBBBBsdfsfsdf sfsdf sf sdfs fsdfsd fsdf sdfsd fds </p>
@ -132,158 +132,164 @@
</aside> </aside>
</header> </header>
<table> <div class="relative bg-blue-400">
<thead> <!-- Badge TOTAL superpuesto -->
<tr> <div class="absolute -top-7 right-0">
<th>Concepto</th> <div class="relative bg-[#f08119] text-white text-sm font-semibold px-3 py-1 shadow">
<th>Cantidad</th> TOTAL: 960,56 €
<th>Precio unidad</th> <!-- Triángulo izquierdo -->
<th>Importe total</th> <span aria-hidden="true" class="absolute -left-3 top-0 bottom-0 my-auto h-0 w-0
</tr> border-y-[14px] border-y-transparent
</thead> border-r-[14px] border-r-amber-500"></span>
<tbody> </div>
<tr> </div>
<td>Mantenimiento de sistemas informáticos - Agosto (1 Equipo Servidor, 30 Ordenadores, 2 Impresoras, Disco
copias de seguridad)</td>
<td>1</td>
<td>0,14 €</td>
<td>0,14 €</td>
</tr>
<tr>
<td>Mantenimiento del programa FactuGES</td>
<td>1</td>
<td>40,00 €</td>
<td>40,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Rubén</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Míriam</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Fernando</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Elena</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Miguel</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Adrian</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil David Lablanca</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Noemí</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil John</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Eva</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Alberto</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Mantenimiento mensual copia de seguridad remota y VPN (Uecko Madrid)</td>
<td>1</td>
<td>40,00 €</td>
<td>40,00 €</td>
</tr>
<tr>
<td>50% dto fidelización servicios contratados</td>
<td>-1</td>
<td>20,00 €</td>
<td>-20,00 €</td>
</tr>
<tr>
<td>Mantenimiento de presupuestador web para distribuidores (Agosto)</td>
<td>1</td>
<td>375,00 €</td>
<td>375,00 €</td>
</tr>
<tr>
<td>Informe de compras de artículos (Presupuesto 22/04/25)</td>
<td>1</td>
<td>260,00 €</td>
<td>260,00 €</td>
</tr>
<tr>
<td>Informe presupuestos cliente (Gunni Tentrino) – modificación funcionalidad visible. Sin cargo.</td>
<td>1</td>
<td>0,00 €</td>
<td>0,00 €</td>
</tr>
</tbody>
</table>
<table class="totals"> <!-- Tu tabla -->
<tr> <table class="w-full border-t border-black">
<td class="label">Base imponible:</td> <thead>
<td>761,14 €</td> <tr class="text-left">
</tr> <th class="py-2">Concepto</th>
<tr> <th class="py-2">Cantidad</th>
<td class="label">IVA (21%):</td> <th class="py-2">Precio unidad</th>
<td>159,84 €</td> <th class="py-2">Importe total</th>
</tr> </tr>
<tr> </thead>
<td class="label"><strong>Total factura:</strong></td>
<td><strong>960,56 €</strong></td>
</tr>
</table>
<footer> <tbody>
<p>Insc. en el Reg. Merc. de Madrid, Tomo 20.073, Libro 0, Folio 141, Sección 8, Hoja M-354212 | CIF: B83999441 - <tr>
Rodax Software S.L.</p> <td>Mantenimiento de sistemas informáticos - Agosto (1 Equipo Servidor, 30 Ordenadores, 2 Impresoras, Disco
<p><strong>Forma de pago:</strong> Domiciliación bancaria</p> copias de seguridad)</td>
</footer> <td>1</td>
<td>0,14 €</td>
<td>0,14 €</td>
</tr>
<tr>
<td>Mantenimiento del programa FactuGES</td>
<td>1</td>
<td>40,00 €</td>
<td>40,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Rubén</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Míriam</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Fernando</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Elena</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Miguel</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Adrian</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil David Lablanca</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Noemí</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil John</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Eva</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Control VPN para portátil Alberto</td>
<td>1</td>
<td>6,00 €</td>
<td>6,00 €</td>
</tr>
<tr>
<td>Mantenimiento mensual copia de seguridad remota y VPN (Uecko Madrid)</td>
<td>1</td>
<td>40,00 €</td>
<td>40,00 €</td>
</tr>
<tr>
<td>50% dto fidelización servicios contratados</td>
<td>-1</td>
<td>20,00 €</td>
<td>-20,00 €</td>
</tr>
<tr>
<td>Mantenimiento de presupuestador web para distribuidores (Agosto)</td>
<td>1</td>
<td>375,00 €</td>
<td>375,00 €</td>
</tr>
<tr>
<td>Informe de compras de artículos (Presupuesto 22/04/25)</td>
<td>1</td>
<td>260,00 €</td>
<td>260,00 €</td>
</tr>
<tr>
<td>Informe presupuestos cliente (Gunni Tentrino) – modificación funcionalidad visible. Sin cargo.</td>
<td>1</td>
<td>0,00 €</td>
<td>0,00 €</td>
</tr>
</tbody>
</table>
<table class="totals">
<tr>
<td class="label">Base imponible:</td>
<td>761,14 €</td>
</tr>
<tr>
<td class="label">IVA (21%):</td>
<td>159,84 €</td>
</tr>
<tr>
<td class="label"><strong>Total factura:</strong></td>
<td><strong>960,56 €</strong></td>
</tr>
</table>
<footer>
<p>Insc. en el Reg. Merc. de Madrid, Tomo 20.073, Libro 0, Folio 141, Sección 8, Hoja M-354212 | CIF: B83999441 -
Rodax Software S.L.</p>
<p><strong>Forma de pago:</strong> Domiciliación bancaria</p>
</footer>
</body> </body>

7
packages/rdx-ui/src/components/form/TextField.tsx
View File

@ -50,7 +50,12 @@ export function TextField<TFormValues extends FieldValues>({
</div> </div>
)} )}
<FormControl> <FormControl>
<Input disabled={isDisabled} placeholder={placeholder} {...field} /> <Input
disabled={isDisabled}
placeholder={placeholder}
{...field}
className='font-medium'
/>
</FormControl> </FormControl>
<p className={cn("text-xs text-muted-foreground", !description && "invisible")}> <p className={cn("text-xs text-muted-foreground", !description && "invisible")}>

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

@ -1,13 +1,14 @@
import { type LucideIcon, MailIcon, PlusCircleIcon } from "lucide-react"; import { type LucideIcon, MailIcon, PlusCircleIcon } from "lucide-react";
import { Button } from "@repo/shadcn-ui/components/button";
import { import {
Button,
SidebarGroup, SidebarGroup,
SidebarGroupContent, SidebarGroupContent,
SidebarMenu, SidebarMenu,
SidebarMenuButton, SidebarMenuButton,
SidebarMenuItem, SidebarMenuItem,
} from "@repo/shadcn-ui/components/sidebar"; } from "@repo/shadcn-ui/components";
import { useNavigate } from "react-router";
export function NavMain({ export function NavMain({
items, items,
@ -18,6 +19,10 @@ export function NavMain({
icon?: LucideIcon; icon?: LucideIcon;
}[]; }[];
}) { }) {
const navigate = useNavigate();
console.log(window.location.href);
return ( return (
<SidebarGroup> <SidebarGroup>
<SidebarGroupContent className='flex flex-col gap-2'> <SidebarGroupContent className='flex flex-col gap-2'>
@ -43,7 +48,12 @@ export function NavMain({
<SidebarMenu> <SidebarMenu>
{items.map((item) => ( {items.map((item) => (
<SidebarMenuItem key={item.title}> <SidebarMenuItem key={item.title}>
<SidebarMenuButton tooltip={item.title}> <SidebarMenuButton
isActive={String(window.location.href).includes(item.url)}
tooltip={item.title}
onClick={() => navigate(item.url)}
className='data-[active=true]:bg-accent data-[active=true]:text-accent-foreground cursor-pointer'
>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
</SidebarMenuButton> </SidebarMenuButton>

389
packages/shadcn-ui/src/components/sidebar.tsx
View File

@ -1,56 +1,54 @@
"use client" "use client";
import * as React from "react" import { Slot } from "@radix-ui/react-slot";
import { Slot } from "@radix-ui/react-slot" import { VariantProps, cva } from "class-variance-authority";
import { VariantProps, cva } from "class-variance-authority" import { PanelLeftIcon } from "lucide-react";
import { PanelLeftIcon } from "lucide-react" import * as React from "react";
import { useIsMobile } from "@repo/shadcn-ui/hooks/use-mobile"
import { cn } from "@repo/shadcn-ui/lib/utils"
import { Button } from "@repo/shadcn-ui/components/button"
import { Input } from "@repo/shadcn-ui/components/input"
import { Separator } from "@repo/shadcn-ui/components/separator"
import { import {
Button,
Input,
Separator,
Sheet, Sheet,
SheetContent, SheetContent,
SheetDescription, SheetDescription,
SheetHeader, SheetHeader,
SheetTitle, SheetTitle,
} from "@repo/shadcn-ui/components/sheet" Skeleton,
import { Skeleton } from "@repo/shadcn-ui/components/skeleton"
import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@repo/shadcn-ui/components/tooltip" } from "@repo/shadcn-ui/components";
import { useIsMobile } from "../hooks/use-mobile.ts";
import { cn } from "../lib/utils.ts";
const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_NAME = "sidebar_state";
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH = "16rem";
const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_MOBILE = "18rem";
const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_WIDTH_ICON = "3rem";
const SIDEBAR_KEYBOARD_SHORTCUT = "b" const SIDEBAR_KEYBOARD_SHORTCUT = "b";
type SidebarContextProps = { type SidebarContextProps = {
state: "expanded" | "collapsed" state: "expanded" | "collapsed";
open: boolean open: boolean;
setOpen: (open: boolean) => void setOpen: (open: boolean) => void;
openMobile: boolean openMobile: boolean;
setOpenMobile: (open: boolean) => void setOpenMobile: (open: boolean) => void;
isMobile: boolean isMobile: boolean;
toggleSidebar: () => void toggleSidebar: () => void;
} };
const SidebarContext = React.createContext<SidebarContextProps | null>(null) const SidebarContext = React.createContext<SidebarContextProps | null>(null);
function useSidebar() { function useSidebar() {
const context = React.useContext(SidebarContext) const context = React.useContext(SidebarContext);
if (!context) { if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.") throw new Error("useSidebar must be used within a SidebarProvider.");
} }
return context return context;
} }
function SidebarProvider({ function SidebarProvider({
@ -62,56 +60,53 @@ function SidebarProvider({
children, children,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<"div"> & {
defaultOpen?: boolean defaultOpen?: boolean;
open?: boolean open?: boolean;
onOpenChange?: (open: boolean) => void onOpenChange?: (open: boolean) => void;
}) { }) {
const isMobile = useIsMobile() const isMobile = useIsMobile();
const [openMobile, setOpenMobile] = React.useState(false) const [openMobile, setOpenMobile] = React.useState(false);
// This is the internal state of the sidebar. // This is the internal state of the sidebar.
// We use openProp and setOpenProp for control from outside the component. // We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = React.useState(defaultOpen) const [_open, _setOpen] = React.useState(defaultOpen);
const open = openProp ?? _open const open = openProp ?? _open;
const setOpen = React.useCallback( const setOpen = React.useCallback(
(value: boolean | ((value: boolean) => boolean)) => { (value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === "function" ? value(open) : value const openState = typeof value === "function" ? value(open) : value;
if (setOpenProp) { if (setOpenProp) {
setOpenProp(openState) setOpenProp(openState);
} else { } else {
_setOpen(openState) _setOpen(openState);
} }
// This sets the cookie to keep the sidebar state. // This sets the cookie to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
}, },
[setOpenProp, open] [setOpenProp, open]
) );
// Helper to toggle the sidebar. // Helper to toggle the sidebar.
const toggleSidebar = React.useCallback(() => { const toggleSidebar = React.useCallback(() => {
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
}, [isMobile, setOpen, setOpenMobile]) }, [isMobile, setOpen, setOpenMobile]);
// Adds a keyboard shortcut to toggle the sidebar. // Adds a keyboard shortcut to toggle the sidebar.
React.useEffect(() => { React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if ( if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
event.key === SIDEBAR_KEYBOARD_SHORTCUT && event.preventDefault();
(event.metaKey || event.ctrlKey) toggleSidebar();
) {
event.preventDefault()
toggleSidebar()
} }
} };
window.addEventListener("keydown", handleKeyDown) window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown);
}, [toggleSidebar]) }, [toggleSidebar]);
// We add a state so that we can do data-state="expanded" or "collapsed". // We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes. // This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed" const state = open ? "expanded" : "collapsed";
const contextValue = React.useMemo<SidebarContextProps>( const contextValue = React.useMemo<SidebarContextProps>(
() => ({ () => ({
@ -124,13 +119,13 @@ function SidebarProvider({
toggleSidebar, toggleSidebar,
}), }),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
) );
return ( return (
<SidebarContext.Provider value={contextValue}> <SidebarContext.Provider value={contextValue}>
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<div <div
data-slot="sidebar-wrapper" data-slot='sidebar-wrapper'
style={ style={
{ {
"--sidebar-width": SIDEBAR_WIDTH, "--sidebar-width": SIDEBAR_WIDTH,
@ -148,7 +143,7 @@ function SidebarProvider({
</div> </div>
</TooltipProvider> </TooltipProvider>
</SidebarContext.Provider> </SidebarContext.Provider>
) );
} }
function Sidebar({ function Sidebar({
@ -159,16 +154,16 @@ function Sidebar({
children, children,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<"div"> & {
side?: "left" | "right" side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset" variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none" collapsible?: "offcanvas" | "icon" | "none";
}) { }) {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar() const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
if (collapsible === "none") { if (collapsible === "none") {
return ( return (
<div <div
data-slot="sidebar" data-slot='sidebar'
className={cn( className={cn(
"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
className className
@ -177,17 +172,17 @@ function Sidebar({
> >
{children} {children}
</div> </div>
) );
} }
if (isMobile) { if (isMobile) {
return ( return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}> <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent <SheetContent
data-sidebar="sidebar" data-sidebar='sidebar'
data-slot="sidebar" data-slot='sidebar'
data-mobile="true" data-mobile='true'
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden" className='bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden'
style={ style={
{ {
"--sidebar-width": SIDEBAR_WIDTH_MOBILE, "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@ -195,28 +190,28 @@ function Sidebar({
} }
side={side} side={side}
> >
<SheetHeader className="sr-only"> <SheetHeader className='sr-only'>
<SheetTitle>Sidebar</SheetTitle> <SheetTitle>Sidebar</SheetTitle>
<SheetDescription>Displays the mobile sidebar.</SheetDescription> <SheetDescription>Displays the mobile sidebar.</SheetDescription>
</SheetHeader> </SheetHeader>
<div className="flex h-full w-full flex-col">{children}</div> <div className='flex h-full w-full flex-col'>{children}</div>
</SheetContent> </SheetContent>
</Sheet> </Sheet>
) );
} }
return ( return (
<div <div
className="group peer text-sidebar-foreground hidden md:block" className='group peer text-sidebar-foreground hidden md:block'
data-state={state} data-state={state}
data-collapsible={state === "collapsed" ? collapsible : ""} data-collapsible={state === "collapsed" ? collapsible : ""}
data-variant={variant} data-variant={variant}
data-side={side} data-side={side}
data-slot="sidebar" data-slot='sidebar'
> >
{/* This is what handles the sidebar gap on desktop */} {/* This is what handles the sidebar gap on desktop */}
<div <div
data-slot="sidebar-gap" data-slot='sidebar-gap'
className={cn( className={cn(
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0", "group-data-[collapsible=offcanvas]:w-0",
@ -227,7 +222,7 @@ function Sidebar({
)} )}
/> />
<div <div
data-slot="sidebar-container" data-slot='sidebar-container'
className={cn( className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left" side === "left"
@ -242,54 +237,50 @@ function Sidebar({
{...props} {...props}
> >
<div <div
data-sidebar="sidebar" data-sidebar='sidebar'
data-slot="sidebar-inner" data-slot='sidebar-inner'
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm" className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
> >
{children} {children}
</div> </div>
</div> </div>
</div> </div>
) );
} }
function SidebarTrigger({ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
className, const { toggleSidebar } = useSidebar();
onClick,
...props
}: React.ComponentProps<typeof Button>) {
const { toggleSidebar } = useSidebar()
return ( return (
<Button <Button
data-sidebar="trigger" data-sidebar='trigger'
data-slot="sidebar-trigger" data-slot='sidebar-trigger'
variant="ghost" variant='ghost'
size="icon" size='icon'
className={cn("size-7", className)} className={cn("size-7", className)}
onClick={(event) => { onClick={(event) => {
onClick?.(event) onClick?.(event);
toggleSidebar() toggleSidebar();
}} }}
{...props} {...props}
> >
<PanelLeftIcon /> <PanelLeftIcon />
<span className="sr-only">Toggle Sidebar</span> <span className='sr-only'>Toggle Sidebar</span>
</Button> </Button>
) );
} }
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) { function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
const { toggleSidebar } = useSidebar() const { toggleSidebar } = useSidebar();
return ( return (
<button <button
data-sidebar="rail" data-sidebar='rail'
data-slot="sidebar-rail" data-slot='sidebar-rail'
aria-label="Toggle Sidebar" aria-label='Toggle Sidebar'
tabIndex={-1} tabIndex={-1}
onClick={toggleSidebar} onClick={toggleSidebar}
title="Toggle Sidebar" title='Toggle Sidebar'
className={cn( className={cn(
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
@ -301,13 +292,13 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) { function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return ( return (
<main <main
data-slot="sidebar-inset" data-slot='sidebar-inset'
className={cn( className={cn(
"bg-background relative flex w-full flex-1 flex-col", "bg-background relative flex w-full flex-1 flex-col",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
@ -315,82 +306,76 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarInput({ function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
className,
...props
}: React.ComponentProps<typeof Input>) {
return ( return (
<Input <Input
data-slot="sidebar-input" data-slot='sidebar-input'
data-sidebar="input" data-sidebar='input'
className={cn("bg-background h-8 w-full shadow-none", className)} className={cn("bg-background h-8 w-full shadow-none", className)}
{...props} {...props}
/> />
) );
} }
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) { function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-header" data-slot='sidebar-header'
data-sidebar="header" data-sidebar='header'
className={cn("flex flex-col gap-2 p-2", className)} className={cn("flex flex-col gap-2 p-2", className)}
{...props} {...props}
/> />
) );
} }
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) { function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-footer" data-slot='sidebar-footer'
data-sidebar="footer" data-sidebar='footer'
className={cn("flex flex-col gap-2 p-2", className)} className={cn("flex flex-col gap-2 p-2", className)}
{...props} {...props}
/> />
) );
} }
function SidebarSeparator({ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
className,
...props
}: React.ComponentProps<typeof Separator>) {
return ( return (
<Separator <Separator
data-slot="sidebar-separator" data-slot='sidebar-separator'
data-sidebar="separator" data-sidebar='separator'
className={cn("bg-sidebar-border mx-2 w-auto", className)} className={cn("bg-sidebar-border mx-2 w-auto", className)}
{...props} {...props}
/> />
) );
} }
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) { function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-content" data-slot='sidebar-content'
data-sidebar="content" data-sidebar='content'
className={cn( className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className className
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) { function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-group" data-slot='sidebar-group'
data-sidebar="group" data-sidebar='group'
className={cn("relative flex w-full min-w-0 flex-col p-2", className)} className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props} {...props}
/> />
) );
} }
function SidebarGroupLabel({ function SidebarGroupLabel({
@ -398,12 +383,12 @@ function SidebarGroupLabel({
asChild = false, asChild = false,
...props ...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) { }: React.ComponentProps<"div"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "div" const Comp = asChild ? Slot : "div";
return ( return (
<Comp <Comp
data-slot="sidebar-group-label" data-slot='sidebar-group-label'
data-sidebar="group-label" data-sidebar='group-label'
className={cn( className={cn(
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
@ -411,7 +396,7 @@ function SidebarGroupLabel({
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarGroupAction({ function SidebarGroupAction({
@ -419,12 +404,12 @@ function SidebarGroupAction({
asChild = false, asChild = false,
...props ...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) { }: React.ComponentProps<"button"> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
data-slot="sidebar-group-action" data-slot='sidebar-group-action'
data-sidebar="group-action" data-sidebar='group-action'
className={cn( className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile. // Increases the hit area of the button on mobile.
@ -434,43 +419,40 @@ function SidebarGroupAction({
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarGroupContent({ function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
className,
...props
}: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-group-content" data-slot='sidebar-group-content'
data-sidebar="group-content" data-sidebar='group-content'
className={cn("w-full text-sm", className)} className={cn("w-full text-sm", className)}
{...props} {...props}
/> />
) );
} }
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) { function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
return ( return (
<ul <ul
data-slot="sidebar-menu" data-slot='sidebar-menu'
data-sidebar="menu" data-sidebar='menu'
className={cn("flex w-full min-w-0 flex-col gap-1", className)} className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props} {...props}
/> />
) );
} }
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
return ( return (
<li <li
data-slot="sidebar-menu-item" data-slot='sidebar-menu-item'
data-sidebar="menu-item" data-sidebar='menu-item'
className={cn("group/menu-item relative", className)} className={cn("group/menu-item relative", className)}
{...props} {...props}
/> />
) );
} }
const sidebarMenuButtonVariants = cva( const sidebarMenuButtonVariants = cva(
@ -493,7 +475,7 @@ const sidebarMenuButtonVariants = cva(
size: "default", size: "default",
}, },
} }
) );
function SidebarMenuButton({ function SidebarMenuButton({
asChild = false, asChild = false,
@ -504,45 +486,45 @@ function SidebarMenuButton({
className, className,
...props ...props
}: React.ComponentProps<"button"> & { }: React.ComponentProps<"button"> & {
asChild?: boolean asChild?: boolean;
isActive?: boolean isActive?: boolean;
tooltip?: string | React.ComponentProps<typeof TooltipContent> tooltip?: string | React.ComponentProps<typeof TooltipContent>;
} & VariantProps<typeof sidebarMenuButtonVariants>) { } & VariantProps<typeof sidebarMenuButtonVariants>) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
const { isMobile, state } = useSidebar() const { isMobile, state } = useSidebar();
const button = ( const button = (
<Comp <Comp
data-slot="sidebar-menu-button" data-slot='sidebar-menu-button'
data-sidebar="menu-button" data-sidebar='menu-button'
data-size={size} data-size={size}
data-active={isActive} data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)} className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props} {...props}
/> />
) );
if (!tooltip) { if (!tooltip) {
return button return button;
} }
if (typeof tooltip === "string") { if (typeof tooltip === "string") {
tooltip = { tooltip = {
children: tooltip, children: tooltip,
} };
} }
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger> <TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent <TooltipContent
side="right" side='right'
align="center" align='center'
hidden={state !== "collapsed" || isMobile} hidden={state !== "collapsed" || isMobile}
{...tooltip} {...tooltip}
/> />
</Tooltip> </Tooltip>
) );
} }
function SidebarMenuAction({ function SidebarMenuAction({
@ -551,15 +533,15 @@ function SidebarMenuAction({
showOnHover = false, showOnHover = false,
...props ...props
}: React.ComponentProps<"button"> & { }: React.ComponentProps<"button"> & {
asChild?: boolean asChild?: boolean;
showOnHover?: boolean showOnHover?: boolean;
}) { }) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
data-slot="sidebar-menu-action" data-slot='sidebar-menu-action'
data-sidebar="menu-action" data-sidebar='menu-action'
className={cn( className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile. // Increases the hit area of the button on mobile.
@ -574,17 +556,14 @@ function SidebarMenuAction({
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarMenuBadge({ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
className,
...props
}: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sidebar-menu-badge" data-slot='sidebar-menu-badge'
data-sidebar="menu-badge" data-sidebar='menu-badge'
className={cn( className={cn(
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
@ -596,7 +575,7 @@ function SidebarMenuBadge({
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarMenuSkeleton({ function SidebarMenuSkeleton({
@ -604,29 +583,24 @@ function SidebarMenuSkeleton({
showIcon = false, showIcon = false,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<"div"> & {
showIcon?: boolean showIcon?: boolean;
}) { }) {
// Random width between 50 to 90%. // Random width between 50 to 90%.
const width = React.useMemo(() => { const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%` return `${Math.floor(Math.random() * 40) + 50}%`;
}, []) }, []);
return ( return (
<div <div
data-slot="sidebar-menu-skeleton" data-slot='sidebar-menu-skeleton'
data-sidebar="menu-skeleton" data-sidebar='menu-skeleton'
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)} className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props} {...props}
> >
{showIcon && ( {showIcon && <Skeleton className='size-4 rounded-md' data-sidebar='menu-skeleton-icon' />}
<Skeleton
className="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
)}
<Skeleton <Skeleton
className="h-4 max-w-(--skeleton-width) flex-1" className='h-4 max-w-(--skeleton-width) flex-1'
data-sidebar="menu-skeleton-text" data-sidebar='menu-skeleton-text'
style={ style={
{ {
"--skeleton-width": width, "--skeleton-width": width,
@ -634,14 +608,14 @@ function SidebarMenuSkeleton({
} }
/> />
</div> </div>
) );
} }
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) { function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
return ( return (
<ul <ul
data-slot="sidebar-menu-sub" data-slot='sidebar-menu-sub'
data-sidebar="menu-sub" data-sidebar='menu-sub'
className={cn( className={cn(
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",
@ -649,21 +623,18 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
)} )}
{...props} {...props}
/> />
) );
} }
function SidebarMenuSubItem({ function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
className,
...props
}: React.ComponentProps<"li">) {
return ( return (
<li <li
data-slot="sidebar-menu-sub-item" data-slot='sidebar-menu-sub-item'
data-sidebar="menu-sub-item" data-sidebar='menu-sub-item'
className={cn("group/menu-sub-item relative", className)} className={cn("group/menu-sub-item relative", className)}
{...props} {...props}
/> />
) );
} }
function SidebarMenuSubButton({ function SidebarMenuSubButton({
@ -673,16 +644,16 @@ function SidebarMenuSubButton({
className, className,
...props ...props
}: React.ComponentProps<"a"> & { }: React.ComponentProps<"a"> & {
asChild?: boolean asChild?: boolean;
size?: "sm" | "md" size?: "sm" | "md";
isActive?: boolean isActive?: boolean;
}) { }) {
const Comp = asChild ? Slot : "a" const Comp = asChild ? Slot : "a";
return ( return (
<Comp <Comp
data-slot="sidebar-menu-sub-button" data-slot='sidebar-menu-sub-button'
data-sidebar="menu-sub-button" data-sidebar='menu-sub-button'
data-size={size} data-size={size}
data-active={isActive} data-active={isActive}
className={cn( className={cn(
@ -695,7 +666,7 @@ function SidebarMenuSubButton({
)} )}
{...props} {...props}
/> />
) );
} }
export { export {
@ -723,4 +694,4 @@ export {
SidebarSeparator, SidebarSeparator,
SidebarTrigger, SidebarTrigger,
useSidebar, useSidebar,
} };