From 76afaf4562634194a72085851064ac238462f75f Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 02:59:31 -0400
Subject: [PATCH 01/30] style: updaet movile style in clients and users page (
 client page are not be in)

---
 src/components/ui/scroll-area.stories.tsx     |   7 +-
 src/pages/__root.tsx                          |   2 +-
 src/pages/_layout.tsx                         |  16 +-
 src/pages/_layout/client.tsx                  |   2 +-
 src/pages/_layout/client/$clientId/delete.tsx |  10 +-
 src/pages/_layout/client/$clientId/update.tsx |  13 +-
 src/pages/_layout/client/delete.tsx           |  10 +-
 src/pages/_layout/client/new.tsx              | 243 +++++++++---------
 src/pages/_layout/credit.tsx                  |  10 +-
 src/pages/_layout/credit_/$creditId.tsx       |  10 +-
 src/pages/_layout/user.tsx                    |  14 +-
 src/pages/_layout/user/$userId/delete.tsx     |  10 +-
 src/pages/_layout/user/$userId/update.tsx     |  19 +-
 src/pages/_layout/user/delete.tsx             |  10 +-
 src/pages/_layout/user/new.tsx                |   8 +-
 src/pages/login.tsx                           |   6 +-
 src/styles/global.module.css                  |   5 +-
 17 files changed, 201 insertions(+), 194 deletions(-)

diff --git a/src/components/ui/scroll-area.stories.tsx b/src/components/ui/scroll-area.stories.tsx
index 7e0d54c..3206798 100644
--- a/src/components/ui/scroll-area.stories.tsx
+++ b/src/components/ui/scroll-area.stories.tsx
@@ -1,18 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 
 const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+  (_, i, a) => `v1.2.0-beta.${a.length - i} Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.`
 )
 function Basic( { ...props }: React.ComponentProps< typeof ScrollArea > ) {
   return (
      <ScrollArea {...props} className="h-72 w-48 rounded-md border">
+      <ScrollBar orientation='horizontal'  />
       <div className="p-4">
         <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
         {tags.map((tag) => (
           <>
-            <div key={tag} className="text-sm">
+            <div key={tag} className="text-sm w-80">
               {tag}
             </div>
             <Separator className="my-2" />
diff --git a/src/pages/__root.tsx b/src/pages/__root.tsx
index 5c4608a..b093fd5 100644
--- a/src/pages/__root.tsx
+++ b/src/pages/__root.tsx
@@ -13,7 +13,7 @@ export const Route = createRootRoute({
 })
 
 export function Root() {
-   return ( <div className={clsx("py-2",
+   return ( <div className={clsx("px-4 xl:py-2",
         "bg-background bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]",
         "dark:bg-[radial-gradient(#bbabab1f_1px,#00091d_1px)] dark:bg-[size:20px_20px]",
     )}> 
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 38686ba..5372e3c 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -356,13 +356,13 @@ export function Layout() {
   return (
     <div
       className={clsx(
-        'container m-auto grid max-w-screen-2xl auto-rows-min grid-cols-2 grid-rows-3 space-y-4 [&>*]:px-2',
+        'md:container gap-2 grid auto-rows-min xl:grid-cols-2 xl:grid-rows-3 auto-rows-min space-y-4',
         styles?.['grid-layout']
       )}
     >
       <nav
         className={clsx(
-          'row-span-full h-[100dvh] rounded-lg bg-primary-foreground p-4 text-primary shadow-lg hover:shadow-xl',
+          'hidden xl:block row-span-full xl:h-[100dvh] rounded-lg bg-primary-foreground p-4 text-primary shadow-lg hover:shadow-xl',
           {
             [styles?.['menu-animation']]: !menu,
             [styles?.['menu-animation-reverse']]: menu,
@@ -430,7 +430,7 @@ export function Layout() {
           )}
         </div>
       </nav>
-      <header className="sticky top-0 z-20 !my-0 [&_div]:flex [&_div]:items-center [&_div]:gap-4">
+      <header className="hidden xl:block sticky top-0 z-20 !my-0 [&_div]:flex [&_div]:items-center [&_div]:gap-4">
         <div className="h-16 justify-between rounded-lg bg-primary-foreground px-2 shadow-lg">
           <div className="[&>button]:px-2">
             <Button
@@ -628,7 +628,7 @@ export function Layout() {
         </div>
       </header>
       <main className="space-y-2 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
-        <div>
+        <div className='!hidden xl:block'>
           <Button
             onClick={onBack}
             variant="ghost"
@@ -667,13 +667,13 @@ export function Layout() {
             </BreadcrumbList>
           </Breadcrumb>
         </div>
-        <div className="flex h-full flex-col justify-between px-8 py-4">
+        <div className="flex xl:h-full flex-col justify-between xl:px-8 xl:py-4 space-y-4">
           <Outlet />
         </div>
       </main>
-      <footer className="py-4">
-        <Separator className="my-4" />
-        <h3 className="ms-auto w-fit space-x-2">
+      <footer className="xl:py-4 py-2">
+        <Separator className="my-2 xl:my-4" />
+        <h3 className="m-auto xl:ms-auto w-fit space-x-2">
           <span className="italic">{text.footer.copyright}</span>
           <Badge> &copy; {new Date().getFullYear()} </Badge>
         </h3>
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 0796e96..228799c 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -329,7 +329,7 @@ export function Clients() {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="overflow-x-auto rounded-md bg-background ring-1 ring-border">
+            <div className="xl:block overflow-x-auto rounded-md bg-background ring-1 ring-border">
               <Table>
                 <TableHeader className="bg-muted">
                   {table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/pages/_layout/client/$clientId/delete.tsx b/src/pages/_layout/client/$clientId/delete.tsx
index 27235f2..bf59fa4 100644
--- a/src/pages/_layout/client/$clientId/delete.tsx
+++ b/src/pages/_layout/client/$clientId/delete.tsx
@@ -115,19 +115,19 @@ export function DeleteClientById() {
       {!open && <Navigate to={'../../'} replace />}
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
           <DialogDescription>
             <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>{text.alert.title}</AlertTitle>
-              <AlertDescription>
+              <AlertCircle className="h-4 w-4 hidden md:block" />
+              <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+              <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
                 {text.alert.description({ username: name })}
               </AlertDescription>
             </Alert>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="!justify-between">
+        <DialogFooter className="!justify-between flex-col md:flex-row">
           <div className="flex items-center gap-2 font-bold italic">
             <Checkbox
               id="switch-updates-client"
diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index 7c654a3..51afdbb 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -42,6 +42,8 @@ import { Skeleton } from '@/components/ui/skeleton'
 import styles from '@/styles/global.module.css'
 import { useToken } from '@/lib/context/login'
 import { redirect } from '@tanstack/react-router'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { ScrollBar } from '@/components/ui/scroll-area'
 
 export const updateClientByIdOpt = {
   mutationKey: ['update-client-by-id'],
@@ -250,14 +252,16 @@ export function UpdateClientById() {
       {!open && <Navigate to={'../../'} replace />}
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">
+          <DialogTitle className="text-start text-xl md:text-2xl">
             {text.title({ state: !checked })}
           </DialogTitle>
           <Separator />
-          <DialogDescription className="text-muted-foreground">
+          <DialogDescription className="text-xs text-start md:text-md text-muted-foreground">
             {text.description({ state: !checked })}
           </DialogDescription>
         </DialogHeader>
+        <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
+        <ScrollBar orientation='vertical' />
         <form
           autoComplete="off"
           ref={form}
@@ -265,7 +269,7 @@ export function UpdateClientById() {
           onChange={onChange}
           id="update-client"
           className={clsx(
-            'grid-rows-subgrid grid grid-cols-2 gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
+            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
             {
               '[&>label>span]:font-bold': checked,
             }
@@ -440,7 +444,8 @@ export function UpdateClientById() {
             )}
           </Label>
         </form>
-        <DialogFooter className="!justify-between">
+        </ScrollArea>
+        <DialogFooter className="!justify-between gap-2 flex-row">
           <div
             className={clsx('flex items-center gap-2 font-bold italic', {
               invisible: !userId || rol?.rolName !== 'Administrador',
diff --git a/src/pages/_layout/client/delete.tsx b/src/pages/_layout/client/delete.tsx
index 9f4d052..0e6d740 100644
--- a/src/pages/_layout/client/delete.tsx
+++ b/src/pages/_layout/client/delete.tsx
@@ -117,21 +117,21 @@ export function DeleteSelectedClients() {
   return (
     <>
       {!open && <Navigate to={'../'} replace />}
-      <DialogContent className="max-w-xl">
+      <DialogContent className="text-start text-xl md:max-w-xl">
         <DialogHeader>
           <DialogTitle className="text-2xl">{text.title}</DialogTitle>
           <Separator />
           <DialogDescription>
             <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>{text.alert.title}</AlertTitle>
-              <AlertDescription>
+              <AlertCircle className="h-4 w-4 hidden md:block" />
+              <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+              <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
                 {text.alert.description({ length: clients?.length })}
               </AlertDescription>
             </Alert>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="!justify-between">
+        <DialogFooter className="!justify-between flex-col md:flex-row">
           <div className="flex items-center gap-2 font-bold italic">
             <Checkbox
               id="switch-updates-client"
diff --git a/src/pages/_layout/client/new.tsx b/src/pages/_layout/client/new.tsx
index 93a9d06..3c386e4 100644
--- a/src/pages/_layout/client/new.tsx
+++ b/src/pages/_layout/client/new.tsx
@@ -35,6 +35,8 @@ import { _clientContext } from '@/pages/_layout/client'
 import { useStatus } from '@/lib/context/layout'
 import { getStatusByName } from '@/lib/type/status'
 import { Textarea } from '@/components/ui/textarea'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { ScrollBar } from '@/components/ui/scroll-area'
 
 export const postClientOpt = {
   mutationKey: ['create-client'],
@@ -136,132 +138,134 @@ export function NewClient() {
     ev.preventDefault()
   }
 
-  return (
-    <>
+  return (<>
       {!open && <Navigate to={'../'} replace />}
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription className="text-muted-foreground">
+          <DialogDescription className="text-xs text-start md:text-md text-muted-foreground">
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
-        <form
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          id="new-client"
-          className={clsx(
-            'grid-rows-subgrid grid grid-cols-2 gap-3 gap-y-4 [&>label]:space-y-2',
-            styles?.['custom-form']
-          )}
-        >
-          <Label>
-            <span>{text.form.firstName.label}</span>
-            <Input
-              required
-              name={'nombres' as TFormName}
-              type="text"
-              placeholder={text.form.firstName.placeholder}
-              pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-            />
-          </Label>
-          <Label>
-            <span>{text.form.lastName.label} </span>
-            <Input
-              required
-              name={'apellidos' as TFormName}
-              type="text"
-              placeholder={text.form.lastName.placeholder}
-              pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-            />
-          </Label>
-          <Label>
-            <span>{text.form.id.label} </span>
-            <Input
-              required
-              name={'numero_de_identificacion' as TFormName}
-              type="text"
-              placeholder={text.form.id.placeholder}
-              pattern="[A-Za-z0-9]{6,12}"
-            />
-          </Label>
-          <Label>
-            <span>{text.form.typeId.label} </span>
-            <Select
-              required
-              name={'tipo_de_identificacion' as TFormName}
-              defaultValue={'' + getIdByName({ idName: 'Cédula' })?.id}
-            >
-              <SelectTrigger className="!border-1 w-full !border-ring">
-                <SelectValue placeholder={text.form.typeId.placeholder} />
-              </SelectTrigger>
-              <SelectContent>
-                {listIds()?.map(({ id, nombre }, index) => (
-                  <SelectItem key={index} value={'' + id}>
-                    {nombre}
-                  </SelectItem>
+        <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
+        <ScrollBar orientation='vertical' />
+          <form
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            id="new-client"
+            className={clsx(
+              'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label]:space-y-2',
+              styles?.['custom-form']
+            )}
+          >
+            <Label>
+              <span>{text.form.firstName.label}</span>
+              <Input
+                required
+                name={'nombres' as TFormName}
+                type="text"
+                placeholder={text.form.firstName.placeholder}
+                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+              />
+            </Label>
+            <Label>
+              <span>{text.form.lastName.label} </span>
+              <Input
+                required
+                name={'apellidos' as TFormName}
+                type="text"
+                placeholder={text.form.lastName.placeholder}
+                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+              />
+            </Label>
+            <Label>
+              <span>{text.form.id.label} </span>
+              <Input
+                required
+                name={'numero_de_identificacion' as TFormName}
+                type="text"
+                placeholder={text.form.id.placeholder}
+                pattern="[A-Za-z0-9]{6,12}"
+              />
+            </Label>
+            <Label>
+              <span>{text.form.typeId.label} </span>
+              <Select
+                required
+                name={'tipo_de_identificacion' as TFormName}
+                defaultValue={'' + getIdByName({ idName: 'Cédula' })?.id}
+              >
+                <SelectTrigger className="!border-1 w-full !border-ring">
+                  <SelectValue placeholder={text.form.typeId.placeholder} />
+                </SelectTrigger>
+                <SelectContent>
+                  {listIds()?.map(({ id, nombre }, index) => (
+                    <SelectItem key={index} value={'' + id}>
+                      {nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Label>
+            <Label>
+              <span>{text.form.phone.label} </span>
+              <Input
+                required
+                name={'celular' as TFormName}
+                type="tel"
+                placeholder={text.form.phone.placeholder}
+                pattern="(?:\+57|0)[0-9]{8}"
+              />
+            </Label>
+            <Label>
+              <span>{text.form.telephone.label} </span>
+              <Input
+                required
+                name={'telefono' as TFormName}
+                type="tel"
+                placeholder={text.form.telephone.placeholder}
+                pattern="(?:\+57|0)[0-9]{6,7}"
+              />
+            </Label>
+            <Label>
+              <span>{text.form.direction.label}</span>
+              <Input
+                required
+                name={'direccion' as TFormName}
+                type="text"
+                placeholder={text.form.direction.placeholder}
+              />
+            </Label>
+            <Label>
+              <span>{text.form.ref.label}</span>
+              <Input
+                list="client-referent"
+                name={'referencia' as TFormName}
+                type="text"
+                placeholder={text.form.ref.placeholder}
+                pattern={`(${clients
+                  ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
+                  ?.join('|')})`}
+              />
+              <datalist id="client-referent">
+                {clients?.map(({ fullName }, index) => (
+                  <option key={index} value={fullName} />
                 ))}
-              </SelectContent>
-            </Select>
-          </Label>
-          <Label>
-            <span>{text.form.phone.label} </span>
-            <Input
-              required
-              name={'celular' as TFormName}
-              type="tel"
-              placeholder={text.form.phone.placeholder}
-              pattern="(?:\+57|0)[0-9]{8}"
-            />
-          </Label>
-          <Label>
-            <span>{text.form.telephone.label} </span>
-            <Input
-              required
-              name={'telefono' as TFormName}
-              type="tel"
-              placeholder={text.form.telephone.placeholder}
-              pattern="(?:\+57|0)[0-9]{6,7}"
-            />
-          </Label>
-          <Label>
-            <span>{text.form.direction.label}</span>
-            <Input
-              required
-              name={'direccion' as TFormName}
-              type="text"
-              placeholder={text.form.direction.placeholder}
-            />
-          </Label>
-          <Label>
-            <span>{text.form.ref.label}</span>
-            <Input
-              list="client-referent"
-              name={'referencia' as TFormName}
-              type="text"
-              placeholder={text.form.ref.placeholder}
-              pattern={`(${clients
-                ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
-                ?.join('|')})`}
-            />
-            <datalist id="client-referent">
-              {clients?.map(({ fullName }, index) => (
-                <option key={index} value={fullName} />
-              ))}
-            </datalist>
-          </Label>
-          <Label>
-            <span>{text.form.comment.label}</span>
-            <Textarea
-              rows={5}
-              name={'comentarios' as TFormName}
-              placeholder={text.form.comment.placeholder}
-            />
-          </Label>
-        </form>
-        <DialogFooter className="justify-end">
+              </datalist>
+            </Label>
+            <Label>
+              <span>{text.form.comment.label}</span>
+              <Textarea
+                rows={5}
+                name={'comentarios' as TFormName}
+                placeholder={text.form.comment.placeholder}
+              />
+            </Label>
+          </form>
+        </ScrollArea>
+        <DialogFooter className="justify-end gap-2 flex-col md:flex-row">
           <Button variant="default" form="new-client" type="submit">
             {text.button.update}
           </Button>
@@ -276,8 +280,7 @@ export function NewClient() {
           </DialogClose>
         </DialogFooter>
       </DialogContent>
-    </>
-  )
+  </>)
 }
 
 NewClient.dispalyname = 'NewClient'
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index 924833b..4a93ed8 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -356,14 +356,14 @@ export function Credits() {
         </div>
         <Separator />
         {!!credits?.length && (
-          <div className="items-between flex">
-            <p className="text-muted-foreground">
+          <div className="flex xl:items-center">
+            <p className="text-muted-foreground hidden xl:block">
               {text.select({
                 total: credits?.length,
               })}
             </p>
             <Select defaultValue={order} onValueChange={onSelectOrder}>
-              <SelectTrigger className="!border-1 ms-auto w-48 !border-ring">
+              <SelectTrigger className="!border-1 xl:ms-auto w-44 xl:w-48 !border-ring">
                 <SelectValue placeholder={'Orden'} />
               </SelectTrigger>
               <SelectContent className="[&_*]:cursor-pointer">
@@ -380,7 +380,7 @@ export function Credits() {
         {!!credits?.length && (
           <div
             className={clsx(
-              'flex flex-wrap gap-6 [&>*]:flex-1 [&>*]:basis-2/5'
+              'flex flex-wrap gap-2 xl:gap-6 [&>*]:flex-1 xl:[&>*]:basis-2/5'
             )}
           >
             {!!credits?.length &&
@@ -420,7 +420,7 @@ export function Credits() {
                         >
                           <CardHeader>
                             <div className="flex items-center gap-2">
-                              <CardTitle className="flex-row items-center">
+                              <CardTitle className="flex-row items-center line-clamp-1">
                                 <Link
                                   onClick={onOpenUser}
                                   to={'/client/$clientId/update'}
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index f4d6add..f1df052 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -182,11 +182,11 @@ export function CreditById() {
     <_client.Provider value={client}>
       <_credit.Provider value={credit}>
         <div className="space-y-4">
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap justify-end">
             <h1 className="text-3xl font-bold">{text.title}</h1>
             <Dialog open={open} onOpenChange={onOpenChange}>
-              <DialogTrigger className="ms-auto" asChild>
-                <Link to={'./print'} disabled={credit?.pagos?.length <= 0}>
+              <DialogTrigger  asChild>
+                <Link to={'./print'} disabled={credit?.pagos?.length <= 0} className='hidden xl:block ms-auto'>
                   <Button
                     variant="outline"
                     className="hover:ring hover:ring-primary"
@@ -318,7 +318,7 @@ export function CreditById() {
             <h2 className="text-2xl font-bold"> {text.cuotes.title} </h2>
           )}
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
-            <Table className="rounded-xl bg-background">
+            <Table className="rounded-xl bg-background hidden xl:table">
               <TableHeader className="bg-muted [&_th]:text-center">
                 <TableRow>
                   <TableHead></TableHead>
@@ -339,7 +339,7 @@ export function CreditById() {
                       <Link
                         to={'./print'}
                         search={{ index }}
-                        className="z-index absolute"
+                        className="z-index absolute hidden xl:block"
                       >
                         <Button
                           onClick={onPrint}
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 27d3558..4b175ee 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -301,7 +301,7 @@ export function Users() {
         <div className="flex items-center gap-2">
           <h1 className="text-3xl font-bold">{text.title}</h1>
           {!!users?.length && (
-            <Badge className="px-3 text-xl">{users?.length}</Badge>
+            <Badge className="text-xl">{users?.length}</Badge>
           )}
           <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogTrigger asChild className="ms-auto">
@@ -333,15 +333,15 @@ export function Users() {
         </div>
         <Separator />
         {!!users?.length && (
-          <div className="items-between flex">
-            <p className="text-muted-foreground">
+          <div className="items-center flex">
+            <p className="text-muted-foreground hidden xl:block">
               {text.select({
                 select: users?.filter(({ selected }) => selected)?.length,
                 total: usersRes?.length,
               })}
             </p>
             <Select required defaultValue={order} onValueChange={onSelectOrder}>
-              <SelectTrigger className="!border-1 ms-auto w-48 !border-ring">
+              <SelectTrigger className="!border-1 xl:ms-auto w-44 xl:w-48 !border-ring">
                 <SelectValue placeholder={'Orden'} />
               </SelectTrigger>
               <SelectContent className="[&_*]:cursor-pointer">
@@ -357,7 +357,7 @@ export function Users() {
         {!users?.length && <p>{text.notFound}</p>}
         <div
           className={clsx(
-            'min-w-80 [&>*]:min-w-1/4 flex flex-wrap  content-start justify-center gap-4 [&>*]:max-w-[24rem] [&>*]:flex-auto [&>*]:shrink',
+            'min-w-80 xl:[&>*]:min-w-1/4 flex flex-wrap content-start justify-center gap-2 xl:gap-4 [&>*]:max-w-[24rem] [&>*]:flex-auto [&>*]:shrink',
             { '!justify-start': users?.length - pagination?.start * LENGTH < 3 }
           )}
         >
@@ -391,7 +391,7 @@ export function Users() {
                           <DropdownMenuTrigger asChild onClick={onClickStop}>
                             <Button
                               variant="ghost"
-                              className="h-8 w-8 p-0 hover:ring hover:ring-primary"
+                              className="xl:h-8 xl:w-8 h-4 w-8 p-0 hover:ring hover:ring-primary"
                             >
                               <span className="sr-only">{text.menu.aria}</span>
                               <MoreHorizontal className="h-4 w-4" />
@@ -400,7 +400,7 @@ export function Users() {
                           <DropdownMenuContent
                             onClick={onClickStop}
                             align="center"
-                            className="w-56 [&>*:not(:is([role=separator],:first-child))]:h-16 [&>*]:flex [&>*]:cursor-pointer [&>*]:justify-between [&>*]:gap-2"
+                            className="w-56 mx-4 xl:mx-0 [&>*:not(:is([role=separator],:first-child))]:h-16 [&>*]:flex [&>*]:cursor-pointer [&>*]:justify-between [&>*]:gap-2"
                           >
                             <DropdownMenuLabel className="text-md">
                               {text.menu.title}
diff --git a/src/pages/_layout/user/$userId/delete.tsx b/src/pages/_layout/user/$userId/delete.tsx
index f29257b..1df3559 100644
--- a/src/pages/_layout/user/$userId/delete.tsx
+++ b/src/pages/_layout/user/$userId/delete.tsx
@@ -70,19 +70,19 @@ export function DeleteUserById() {
     { !open && <Navigate to={"../../"} replace />}
     <DialogContent className="max-w-xl">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
         <Separator />
         <DialogDescription>
           <Alert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <AlertTitle>{text.alert.title}</AlertTitle>
-            <AlertDescription>
+            <AlertCircle className="h-4 w-4 hidden md:block" />
+            <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+            <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
               {text.alert.description({ username: name })}
             </AlertDescription>
           </Alert>
         </DialogDescription>
       </DialogHeader>
-      <DialogFooter className="!justify-between">
+      <DialogFooter className="!justify-between flex-col md:flex-row">
         <div className="flex items-center gap-2 font-bold italic">
           <Checkbox
             id="confirmation"
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index da8cca4..ad1ad2e 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -1,12 +1,3 @@
-import { Button } from '@/components/ui/button'
-import {
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -38,6 +29,8 @@ import { SpinLoader } from '@/components/ui/loader'
 import { queryClient } from '@/pages/__root'
 import { useToken } from '@/lib/context/login'
 import { Link } from '@tanstack/react-router'
+import { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
 
 export const updateUserByIdOpt = {
   mutationKey: ['update-user-by-id'],
@@ -254,9 +247,9 @@ export function UpdateUserById() {
       {!open && <Navigate to={'../../'} />}
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription>{text.descriiption}</DialogDescription>
+          <DialogDescription className='text-xs text-start md:text-md text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
           autoComplete="off"
@@ -265,7 +258,7 @@ export function UpdateUserById() {
           onChange={onChange}
           id="update-user"
           className={clsx(
-            'grid-rows-subgrid grid grid-cols-2 gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
             {
               '[&_*:disabled]:opacity-100':
                 !!userId && rol?.rolName !== 'Administrador',
@@ -397,7 +390,7 @@ export function UpdateUserById() {
             </div>
           </div>
         </form>
-        <DialogFooter className="justify-start gap-2">
+        <DialogFooter className="justify-start gap-2 flex-col md:flex-row">
           {!isSuccess ? (
             <>
               {currentUserId === +userId && (
diff --git a/src/pages/_layout/user/delete.tsx b/src/pages/_layout/user/delete.tsx
index 5891dd4..c63c46f 100644
--- a/src/pages/_layout/user/delete.tsx
+++ b/src/pages/_layout/user/delete.tsx
@@ -64,19 +64,19 @@ export function DeleteSelectedUsers() {
     {!open && <Navigate to={"../"} replace />}
     <DialogContent className="max-w-xl">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
         <Separator />
         <DialogDescription>
           <Alert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <AlertTitle>{text.alert.title}</AlertTitle>
-            <AlertDescription>
+            <AlertCircle className="h-4 w-4 hidden md:block" />
+            <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+            <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
               {text.alert.description({ length: selectUsers?.length })}
             </AlertDescription>
           </Alert>
         </DialogDescription>
       </DialogHeader>
-      <DialogFooter className="!justify-between">
+      <DialogFooter className="!justify-between flex-col md:flex-row">
         <div className="flex items-center gap-2 font-bold italic">
           <Checkbox
             id="confirmation"
diff --git a/src/pages/_layout/user/new.tsx b/src/pages/_layout/user/new.tsx
index 23130e3..3a3f5ff 100644
--- a/src/pages/_layout/user/new.tsx
+++ b/src/pages/_layout/user/new.tsx
@@ -145,9 +145,9 @@ export function NewUser() {
       {!open && <Navigate to={'../'} replace />}
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription>{text.descriiption}</DialogDescription>
+          <DialogDescription className='text-xs text-start md:text-md text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
           autoComplete="off"
@@ -155,7 +155,7 @@ export function NewUser() {
           onSubmit={onSubmit}
           id="new-client-form"
           className={clsx(
-            'grid-rows-subgrid grid grid-cols-2 gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2',
+            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2',
             styles?.['custom-form']
           )}
         >
@@ -248,7 +248,7 @@ export function NewUser() {
             </div>
           </div>
         </form>
-        <DialogFooter className="justify-end">
+        <DialogFooter className="justify-end gap-2 flex-col md:flex-row">
           <Button variant="default" form="new-client-form" type="submit">
             {text.button.update}
           </Button>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index f3d6874..d567580 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -18,6 +18,7 @@ import { type TUSER_LOGIN, type TUSER_LOGIN_BODY, loginUser } from '@/api/users'
 import { useToken } from '@/lib/context/login'
 import { BoundleLoader } from '@/components/ui/loader'
 import { ToastAction } from '@radix-ui/react-toast'
+import { Separator } from '@radix-ui/react-separator'
 
 export const postCurrentUser = {
   mutationKey: ['login-user'],
@@ -119,10 +120,11 @@ export function Login() {
           <CardHeader>
             <CardTitle>{text.title}</CardTitle>
             <CardDescription>
-              <p className="text-lg font-bold">{text?.description?.[0]}</p>
-              <p>{text?.description?.[1]}</p>
+              <p className="text-md md:text-lg font-bold">{text?.description?.[0]}</p>
+              <p className='text-xs md:text-md md:block'>{text?.description?.[1]}</p>
             </CardDescription>
           </CardHeader>
+          <Separator />
           <CardContent>
             <form
               id="login"
diff --git a/src/styles/global.module.css b/src/styles/global.module.css
index 4aad570..0629563 100644
--- a/src/styles/global.module.css
+++ b/src/styles/global.module.css
@@ -1,5 +1,8 @@
 .grid-layout {
-  grid-template: min-content minmax(0, 1fr) min-content / min-content auto;
+  @apply grid-cols-none;
+  @media screen and screen(xl) {
+    grid-template: min-content minmax(0, 1fr) min-content / min-content auto;
+  } 
 }
 
 .grid__credit--card {

From d22aff10e9b3b4843528d191e48df8a0cf1cea4b Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 16:22:09 -0400
Subject: [PATCH 02/30] style: updaet movile style in credits page

---
 src/pages/-calendar.tsx                       | 88 -------------------
 src/pages/_layout/client.tsx                  |  4 +-
 src/pages/_layout/client/$clientId/delete.tsx |  6 +-
 src/pages/_layout/client/$clientId/update.tsx |  4 +-
 src/pages/_layout/client/delete.tsx           |  6 +-
 src/pages/_layout/client/new.tsx              |  2 +-
 src/pages/_layout/credit.tsx                  | 14 ++-
 src/pages/_layout/credit/new.tsx              | 41 +++++----
 src/pages/_layout/credit/pay.tsx              | 12 +--
 src/pages/_layout/credit/print.tsx            |  2 +-
 src/pages/_layout/credit_/$creditId.tsx       | 12 +--
 .../_layout/credit_/$creditId/delete.tsx      | 10 +--
 src/pages/_layout/credit_/$creditId/pay.tsx   | 12 +--
 .../credit_/$creditId_/update.confirm.tsx     | 10 +--
 .../_layout/credit_/$creditId_/update.tsx     | 22 ++---
 src/pages/_layout/report.tsx                  |  2 +-
 src/pages/_layout/user.tsx                    |  6 +-
 src/pages/_layout/user/$userId/delete.tsx     |  4 +-
 src/pages/_layout/user/$userId/update.tsx     |  4 +-
 src/pages/_layout/user/delete.tsx             |  4 +-
 src/pages/_layout/user/new.tsx                |  2 +-
 src/pages/login.tsx                           |  4 +-
 22 files changed, 92 insertions(+), 179 deletions(-)
 delete mode 100644 src/pages/-calendar.tsx

diff --git a/src/pages/-calendar.tsx b/src/pages/-calendar.tsx
deleted file mode 100644
index 8c6bdd7..0000000
--- a/src/pages/-calendar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
-import { Separator } from "@/components/ui/separator"
-import { Link } from "@tanstack/react-router"
-import clsx from "clsx"
-import { format } from "date-fns"
-
-/* eslint-disable-next-line */
-type TType = 'mora' | 'warning'
-
-/* eslint-disable-next-line */
-export type TData = {
-  type: TType
-  creditId: number
-  client: string
-  cuete: number
-}
-
-/* eslint-disable-next-line */
-export type TDaysProps = { [date: string]: TData }
-
-/* eslint-disable-next-line */
-interface THoverDate {
-  date: Date
-  credit?: TData
-}
-
-/* eslint-disable-next-line */
-function HoverDate({ date, credit }: THoverDate) {
-  if (!credit)
-    return <span className="!font-normal"> {format(date, 'dd')} </span>
-  return (
-    <HoverCard>
-      <HoverCardTrigger
-        className={clsx('cursor-pointer', {
-          "font-bold text-destructive after:content-['*']":
-            credit.type === 'mora',
-          "font-bold text-primary before:content-['-'] after:content-['-']":
-            credit.type === 'warning',
-        })}
-      >
-        <Link
-          className="hover:underline"
-          to={'/credit/$creditId'}
-          params={{ creditId: credit?.creditId }}
-        >
-          {' '}
-          {format(date, 'dd')}
-        </Link>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-[15rem] space-y-2 rounded-sm p-2">
-        <div className="space-x-2 align-middle">
-          <Link
-            className="hover:underline"
-            to={'/credit/$creditId'}
-            params={{ creditId: credit?.creditId }}
-          >
-            {' '}
-            <b>{text.title({ type: credit.type })}</b>
-          </Link>
-          <Badge>{credit.creditId}</Badge>
-        </div>
-        <Separator />
-        <ul className="[&>*]:text-start [&>li]:line-clamp-1">
-          <li>
-            {' '}
-            <b>{text.list.client + ':'}</b> {credit.client}{' '}
-          </li>
-          <li>
-            {' '}
-            <b>{text.list.ammount + ':'}</b> {credit.cuete}{' '}
-          </li>
-        </ul>
-      </HoverCardContent>
-    </HoverCard>
-  )
-}
-
-export { HoverDate }
-
-const text = {
-  title: ({ type }: { type: TType }) =>
-    'Credito ' + (type === 'warning' ? 'Pendiente' : 'en Mora'),
-  list: {
-    client: 'Cliente',
-    ammount: 'Numero de cuota',
-  },
-}
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 228799c..1c8cf56 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -212,9 +212,9 @@ export function Clients() {
       <_rowSelected.Provider value={table.resetRowSelection}>
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <h1 className="text-3xl font-bold">{text.title}</h1>
+            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
             {!!clientsRes?.length && (
-              <Badge className="px-3 text-xl">
+              <Badge className="px-3 text-lg md:text-xl">
                 {table.getFilteredRowModel().rows.length}
               </Badge>
             )}
diff --git a/src/pages/_layout/client/$clientId/delete.tsx b/src/pages/_layout/client/$clientId/delete.tsx
index bf59fa4..fab13c5 100644
--- a/src/pages/_layout/client/$clientId/delete.tsx
+++ b/src/pages/_layout/client/$clientId/delete.tsx
@@ -120,8 +120,8 @@ export function DeleteClientById() {
           <DialogDescription>
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4 hidden md:block" />
-              <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
-              <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
+              <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+              <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
                 {text.alert.description({ username: name })}
               </AlertDescription>
             </Alert>
@@ -187,7 +187,7 @@ export function Error() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index 51afdbb..d15a9a6 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -256,7 +256,7 @@ export function UpdateClientById() {
             {text.title({ state: !checked })}
           </DialogTitle>
           <Separator />
-          <DialogDescription className="text-xs text-start md:text-md text-muted-foreground">
+          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
             {text.description({ state: !checked })}
           </DialogDescription>
         </DialogHeader>
@@ -516,7 +516,7 @@ export function Error() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/client/delete.tsx b/src/pages/_layout/client/delete.tsx
index 0e6d740..3327d4f 100644
--- a/src/pages/_layout/client/delete.tsx
+++ b/src/pages/_layout/client/delete.tsx
@@ -124,8 +124,8 @@ export function DeleteSelectedClients() {
           <DialogDescription>
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4 hidden md:block" />
-              <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
-              <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
+              <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+              <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
                 {text.alert.description({ length: clients?.length })}
               </AlertDescription>
             </Alert>
@@ -191,7 +191,7 @@ export function Error() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/client/new.tsx b/src/pages/_layout/client/new.tsx
index 3c386e4..b088825 100644
--- a/src/pages/_layout/client/new.tsx
+++ b/src/pages/_layout/client/new.tsx
@@ -144,7 +144,7 @@ export function NewClient() {
         <DialogHeader>
           <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription className="text-xs text-start md:text-md text-muted-foreground">
+          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index 4a93ed8..01a2e86 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -340,10 +340,10 @@ export function Credits() {
       <div className="space-y-4">
         <div className="flex items-center gap-2">
           <Label htmlFor="acitve-credits" className="cursor-pointer">
-            <h1 className="text-3xl font-bold">{text.title}</h1>
+            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
           </Label>
           {!!credits?.length && (
-            <Badge className="px-3 text-xl">{credits?.length}</Badge>
+            <Badge className="px-3 text-lg md:text-xl">{credits?.length}</Badge>
           )}
           <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogTrigger className="ms-auto" asChild>
@@ -380,7 +380,7 @@ export function Credits() {
         {!!credits?.length && (
           <div
             className={clsx(
-              'flex flex-wrap gap-2 xl:gap-6 [&>*]:flex-1 xl:[&>*]:basis-2/5'
+              'flex flex-wrap gap-4 xl:gap-6 [&>*]:flex-1 xl:[&>*]:basis-2/5'
             )}
           >
             {!!credits?.length &&
@@ -430,7 +430,7 @@ export function Credits() {
                                   {nombre_del_cliente}
                                 </Link>
                               </CardTitle>
-                              <Badge className='text-md after:duration-400 ms-auto after:opacity-0 after:transition after:delay-150 group-hover:after:opacity-100 group-hover:after:content-["_\219D"]'>
+                              <Badge className='text-base after:duration-400 ms-auto after:opacity-0 after:transition after:delay-150 group-hover:after:opacity-100 group-hover:after:content-["_\219D"]'>
                                 {creditId}
                               </Badge>
                             </div>
@@ -483,7 +483,6 @@ export function Credits() {
                             </Badge>
                             <Dialog open={open} onOpenChange={onOpenChange}>
                               <DialogTrigger asChild className="ms-auto">
-                                {
                                   <Link
                                     to={'./print'}
                                     search={{ creditId }}
@@ -494,9 +493,9 @@ export function Credits() {
                                       onClick={onClick}
                                       disabled={numero_de_cuota <= 0}
                                       className={clsx(
-                                        'invisible px-3 opacity-0 hover:ring hover:ring-primary  group-hover:opacity-100',
+                                        'invisible px-3 opacity-0 hover:ring hover:ring-primary group-hover:opacity-100',
                                         {
-                                          'group-hover:visible':
+                                          'xl:group-hover:visible':
                                             numero_de_cuota > 0,
                                         }
                                       )}
@@ -504,7 +503,6 @@ export function Credits() {
                                       <Printer />
                                     </Button>
                                   </Link>
-                                }
                               </DialogTrigger>
                               <DialogTrigger asChild>
                                 <Link
diff --git a/src/pages/_layout/credit/new.tsx b/src/pages/_layout/credit/new.tsx
index 987f6ba..56ec3ac 100644
--- a/src/pages/_layout/credit/new.tsx
+++ b/src/pages/_layout/credit/new.tsx
@@ -44,9 +44,10 @@ import { formatISO } from 'date-fns'
 import { queryClient } from '@/pages/__root'
 import { getClientListOpt } from '@/pages/_layout/client'
 import { getUsersListOpt } from '@/pages/_layout/user'
-import { TUSER_GET } from '@/api/users'
+import { type TUSER_GET } from '@/api/users'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useToken } from '@/lib/context/login'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 type TSearch = {
   clientId: number
@@ -270,29 +271,30 @@ export function NewCredit() {
   return (
     <>
       {!open && <Navigate to={'../'} replace />}
-      <DialogContent className="max-w-4xl">
+      <DialogContent className="md:max-w-4xl max-w-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription className="text-muted-foreground">
+          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
+        <ScrollArea className='h-[25rem] md:h-full'>
+        <ScrollBar orientation='vertical' />
         <form
           autoComplete="off"
           ref={form}
           onSubmit={onSubmit}
           id="new-credit"
           className={clsx(
-            'grid-rows-subgrid grid grid-cols-3 items-end gap-4 [&>label]:space-y-2',
+            'p-1 grid-rows-subgrid grid xl:grid-cols-3 md:grid-cols-2 grid-cols-none md:items-end gap-3 gap-y-4 [&>label]:space-y-2',
             styles?.['custom-form'],
             {
-              '[&_*:disabled]:opacity-100':
-                !!curruntUserId && rol?.rolName !== 'Administrador',
+              '[&_*:disabled]:opacity-100': !!curruntUserId && rol?.rolName !== 'Administrador',
             }
           )}
         >
-          <Label className="!col-span-1">
+          <Label className="xl:!col-span-1">
             <span>{text.form.cliente.label} </span>
             {!okUsers && !okClients ? (
               <Skeleton className="h-10 w-full" />
@@ -347,7 +349,7 @@ export function NewCredit() {
               />
             )}
           </Label>
-          <Label className="row-start-2">
+          <Label className="xl:row-start-2">
             <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
               <span className='after:text-red-500 after:content-["_*_"]'>
                 {text.form.amount.label}{' '}
@@ -373,7 +375,7 @@ export function NewCredit() {
               />
             )}
           </Label>
-          <Label htmlFor="credit-cuote" className="row-start-2">
+          <Label htmlFor="credit-cuote" className="xl:row-start-2">
             <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
               <span className='after:text-red-500 after:content-["_*_"]'>
                 {text.form.interest.label}{' '}
@@ -401,7 +403,7 @@ export function NewCredit() {
               />
             )}
           </Label>
-          <Label htmlFor="credit-pay" className="row-start-2">
+          <Label htmlFor="credit-pay" className="xl:row-start-2">
             <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
               <span className='after:text-red-500 after:content-["_*_"]'>
                 {text.form.cuote.label}{' '}
@@ -429,7 +431,7 @@ export function NewCredit() {
               />
             )}
           </Label>
-          <Label className='row-start-3 [&>span]:after:text-red-500 [&>span]:after:content-["_*_"]'>
+          <Label className='xl:row-start-3 [&>span]:after:text-red-500 [&>span]:after:content-["_*_"]'>
             <span>{text.form.frecuency.label} </span>
             {!okUsers && !okClients ? (
               <Skeleton className="h-10 w-full" />
@@ -454,7 +456,7 @@ export function NewCredit() {
               </Select>
             )}
           </Label>
-          <Label className="row-start-3">
+          <Label className="xl:row-start-3">
             <span>{text.form.user.label} </span>
             {!okUsers && !okClients ? (
               <Skeleton className="h-10 w-full" />
@@ -478,7 +480,7 @@ export function NewCredit() {
               </>
             )}
           </Label>
-          <Label htmlFor="credit-installments" className="row-start-4">
+          <Label htmlFor="credit-installments" className="xl:row-start-4">
             <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
               <span className='after:text-red-500 after:content-["_*_"]'>
                 {text.form.installments.label}{' '}
@@ -534,7 +536,7 @@ export function NewCredit() {
               />
             )}
           </Label>
-          <Label className="row-start-4">
+          <Label className="xl:row-start-4">
             <span>{text.form.aditionalDays.label} </span>
             {!okUsers && !okClients ? (
               <Skeleton className="h-10 w-full" />
@@ -561,7 +563,8 @@ export function NewCredit() {
             )}
           </Label>
         </form>
-        <DialogFooter className="!items-center !justify-between">
+        </ScrollArea>
+        <DialogFooter className="!items-start md:items-center md:!justify-between flex-col gap-2 md:flex-row">
           <ul
             className={clsx(
               'transition delay-150 duration-500 [&>li]:list-inside [&>li]:list-disc [&_span]:font-bold',
@@ -586,7 +589,7 @@ export function NewCredit() {
               {'$' + getAmountCuote({ interest, amount, coute })}.{' '}
             </li>
           </ul>
-          <div className="space-x-2">
+          <div className="md:space-x-2 w-full md:w-fit flex flex-col gap-2 md:flex-row">
             {!okUsers && !okClients ? (
               <>
                 <Skeleton className="inline-block h-12 w-24" />
@@ -598,7 +601,7 @@ export function NewCredit() {
                   variant="default"
                   form="new-credit"
                   type="submit"
-                  className="self-end"
+                  className="md:self-end"
                 >
                   {text.button.update}
                 </Button>
@@ -628,7 +631,7 @@ export function Error() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/credit/pay.tsx b/src/pages/_layout/credit/pay.tsx
index 077ee90..bdc2772 100644
--- a/src/pages/_layout/credit/pay.tsx
+++ b/src/pages/_layout/credit/pay.tsx
@@ -116,9 +116,9 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
     { !open && <Navigate to={"../"} replace />}
     <DialogContent className="max-w-lg">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
         <Separator />
-        <DialogDescription className='text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
+        <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
       </DialogHeader>
       <form
         autoComplete="off"
@@ -126,7 +126,7 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
         onSubmit={onSubmit}
         id="pay-credit"
         className={clsx(
-          'grid-rows-subgrid grid gap-3 grid-cols-2 gap-y-4 [&>label]:space-y-2',
+          'px-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
           styles?.["custom-form"]
         )}
       >
@@ -142,14 +142,14 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
             defaultValue={ pay }
           />
         </Label>
-        <Label className='!col-span-1'>
+        <Label className='md:!col-span-1'>
           <span>{text.form.date.label} </span>
           <DatePicker name={"fecha_de_pago" as TFormName}
             label={text.form.date.placeholder}
             className='!border-1 !border-ring'
           />
         </Label>
-        <Label className='cols-span-full'>
+        <Label className='md:cols-span-full'>
           <span>{text.form.comment.label}</span>
           <Textarea
             name={"comentario" as TFormName}
@@ -158,7 +158,7 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
           />
         </Label>
       </form>
-      <DialogFooter className="!justify-between">
+      <DialogFooter className="justify-end gap-2 flex-col md:flex-row">
         <div className="flex items-center gap-2 font-bold italic">
           <Checkbox
             id="checkbox-payment-credit"
diff --git a/src/pages/_layout/credit/print.tsx b/src/pages/_layout/credit/print.tsx
index e28c612..e49d4a6 100644
--- a/src/pages/_layout/credit/print.tsx
+++ b/src/pages/_layout/credit/print.tsx
@@ -347,7 +347,7 @@ export function ErrorComp() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index f1df052..ddbc0ae 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -182,11 +182,11 @@ export function CreditById() {
     <_client.Provider value={client}>
       <_credit.Provider value={credit}>
         <div className="space-y-4">
-          <div className="flex gap-2 flex-wrap justify-end">
-            <h1 className="text-3xl font-bold">{text.title}</h1>
+          <div className="flex gap-2">
+            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
             <Dialog open={open} onOpenChange={onOpenChange}>
               <DialogTrigger  asChild>
-                <Link to={'./print'} disabled={credit?.pagos?.length <= 0} className='hidden xl:block ms-auto'>
+                <Link to={'./print'} disabled={credit?.pagos?.length <= 0} className='hidden xl:block xl:ms-auto'>
                   <Button
                     variant="outline"
                     className="hover:ring hover:ring-primary"
@@ -196,7 +196,7 @@ export function CreditById() {
                   </Button>
                 </Link>
               </DialogTrigger>
-              <DialogTrigger asChild>
+              <DialogTrigger asChild className='ms-auto xl:ms-0'>
                 <Link to={'./pay'}>
                   <Button
                     variant="default"
@@ -226,7 +226,7 @@ export function CreditById() {
             </Dialog>
           </div>
           <Separator />
-          <h2 className="text-2xl font-bold"> {text.details.title} </h2>
+          <h2 className="text-xl md:text-2xl font-bold"> {text.details.title} </h2>
           <ul className="flex flex-col gap-2 px-2 [&>li]:space-x-2">
             <li>
               <b>{text.details.status + ':'}</b>
@@ -315,7 +315,7 @@ export function CreditById() {
           </ul>
           <Separator />
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
-            <h2 className="text-2xl font-bold"> {text.cuotes.title} </h2>
+            <h2 className="text-xl md:text-2xl font-bold"> {text.cuotes.title} </h2>
           )}
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
             <Table className="rounded-xl bg-background hidden xl:table">
diff --git a/src/pages/_layout/credit_/$creditId/delete.tsx b/src/pages/_layout/credit_/$creditId/delete.tsx
index 47b8823..2cd9e3e 100644
--- a/src/pages/_layout/credit_/$creditId/delete.tsx
+++ b/src/pages/_layout/credit_/$creditId/delete.tsx
@@ -131,13 +131,13 @@ export function DeleteCreditById() {
       {!open && <Navigate to={'../../'} replace />}
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
           <DialogDescription>
             <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>{text.alert.title}</AlertTitle>
-              <AlertDescription>
+              <AlertCircle className="h-4 w-4 hidden md:block" />
+              <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+              <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
                 {text.alert.description({
                   // TODO
                   username: '' + credit?.owner_id,
@@ -146,7 +146,7 @@ export function DeleteCreditById() {
             </Alert>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="!justify-between">
+        <DialogFooter className="!justify-between flex-col md:flex-row">
           <div className="flex items-center gap-2 font-bold italic">
             <Checkbox
               id="confirmation"
diff --git a/src/pages/_layout/credit_/$creditId/pay.tsx b/src/pages/_layout/credit_/$creditId/pay.tsx
index 64e2ebf..2bd7eda 100644
--- a/src/pages/_layout/credit_/$creditId/pay.tsx
+++ b/src/pages/_layout/credit_/$creditId/pay.tsx
@@ -117,9 +117,9 @@ export function PayCreditById() {
     {!open && <Navigate to={"../"} replace  />}
     <DialogContent className="max-w-lg">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
         <Separator />
-        <DialogDescription className='text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
+        <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
       </DialogHeader>
       <form
         autoComplete="off"
@@ -127,7 +127,7 @@ export function PayCreditById() {
         onSubmit={onSubmit}
         id="pay-credit"
         className={clsx(
-          'grid-rows-subgrid grid gap-3 grid-cols-2 gap-y-4 [&>label]:space-y-2',
+          'px-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
           styles?.["custom-form"]
         )}
       >
@@ -143,14 +143,14 @@ export function PayCreditById() {
               defaultValue={credit?.cuotas?.at(0)?.valor_de_cuota}
           />
         </Label>
-        <Label className='!col-span-1'>
+        <Label className='md:!col-span-1'>
           <span>{text.form.date.label} </span>
           <DatePicker name={"fecha_de_pago" as TFormName}
             label={text.form.date.placeholder}
             className='!border-1 !border-ring'
           />
         </Label>
-        <Label className='cols-span-full'>
+        <Label className='md:cols-span-full'>
           <span>{text.form.comment.label}</span>
           <Textarea
             name={"comentario" as TFormName}
@@ -159,7 +159,7 @@ export function PayCreditById() {
           />
         </Label>
       </form>
-      <DialogFooter className="!justify-between">
+      <DialogFooter className="justify-end gap-2 flex-col md:flex-row">
         <div className="flex items-center gap-2 font-bold italic">
           <Checkbox
             id="checkbox-payment"
diff --git a/src/pages/_layout/credit_/$creditId_/update.confirm.tsx b/src/pages/_layout/credit_/$creditId_/update.confirm.tsx
index 0e13b37..aff3c48 100644
--- a/src/pages/_layout/credit_/$creditId_/update.confirm.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.confirm.tsx
@@ -240,13 +240,13 @@ export function UpdateConfirmationCredit() {
     {!open && <Navigate to={"../"} replace /> }
     <DialogContent className="max-w-lg">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
         <Separator />
         <DialogDescription>
           <Alert variant="destructive" >
-            <AlertCircle className="h-4 w-4" />
-            <AlertTitle>{text.alert.title}</AlertTitle>
-            <AlertDescription>
+            <AlertCircle className="h-4 w-4 hidden md:block" />
+            <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+            <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
               {text.alert.description({ 
                 username: ""+credit?.owner_id 
               })}
@@ -254,7 +254,7 @@ export function UpdateConfirmationCredit() {
           </Alert>
         </DialogDescription>
       </DialogHeader>
-      <DialogFooter className="!justify-between">
+      <DialogFooter className="!justify-between flex-col md:flex-row">
         <div className="flex items-center gap-2 font-bold italic">
           <Checkbox
             id="confirmation"
diff --git a/src/pages/_layout/credit_/$creditId_/update.tsx b/src/pages/_layout/credit_/$creditId_/update.tsx
index f3cd3a0..b502cbb 100644
--- a/src/pages/_layout/credit_/$creditId_/update.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.tsx
@@ -271,8 +271,8 @@ export function UpdateCreditById() {
           <_client.Provider value={client}>
             <Navigate to={Route.to} />
             <div className="space-y-4">
-              <div className="flex gap-2">
-                <h1 className="text-3xl font-bold">{text.title}</h1>
+              <div className="flex gap-2 items-center">
+                <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
                 <Dialog open={open} onOpenChange={onOpenChange}>
                   <Button
                     className="ms-auto"
@@ -282,7 +282,7 @@ export function UpdateCreditById() {
                   >
                     {text.button.update}
                   </Button>
-                  <Link to={'../'}>
+                  <Link to={'../'} className='hidden md:block'>
                     <Button
                       variant="outline"
                       className="hover:ring hover:ring-primary"
@@ -297,8 +297,8 @@ export function UpdateCreditById() {
               <Separator />
               <Card className="duration-400 shadow-lg transition delay-150 hover:shadow-xl">
                 <CardHeader>
-                  <div className="flex flex-row justify-between">
-                    <CardTitle className="text-2xl font-bold">
+                  <div className="flex flex-row justify-between items-center">
+                    <CardTitle className="text-xl md:text-2xl font-bold">
                       {text.form.details.title}
                     </CardTitle>
                     <Switch
@@ -311,7 +311,7 @@ export function UpdateCreditById() {
                 </CardHeader>
                 <CardContent>
                   <form
-                    className="grid grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
+                    className="grid grid-cols-none md:grid-cols-2 xl:grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
                     id={'edit-credit'}
                     onChange={onChangeDetail}
                     onSubmit={onSubmit}
@@ -350,7 +350,7 @@ export function UpdateCreditById() {
                         label={text.form.details.date.placeholder}
                       />
                     </Label>
-                    <Label className="!col-span-1">
+                    <Label className="md:!col-span-1">
                       <span>{text.form.details.ref.label}</span>
                       <Input
                         name={'ref' as TFormName}
@@ -458,7 +458,7 @@ export function UpdateCreditById() {
                     </Label>
                     <Label
                       htmlFor="credit-installments"
-                      className="row-start-4"
+                      className="md:row-start-4"
                     >
                       <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
                         <span>{text.form.details.installmants.label}</span>
@@ -511,7 +511,7 @@ export function UpdateCreditById() {
                         }
                       />
                     </Label>
-                    <Label className="row-start-4">
+                    <Label className="md:row-start-4">
                       <span>{text.form.details.aditionalsDays.label}</span>
                       <Input
                         min={0}
@@ -541,7 +541,7 @@ export function UpdateCreditById() {
                 !!creditChange?.cuotas?.length && (
                   <Card className="duration-400 shadow-lg transition delay-150 hover:shadow-xl">
                     <CardHeader>
-                      <CardTitle className="text-2xl font-bold">
+                      <CardTitle className="text-xl md:text-2xl font-bold">
                         {text.form.pay.title}
                       </CardTitle>
                     </CardHeader>
@@ -596,7 +596,7 @@ export function UpdateCreditById() {
                               </AccordionTrigger>
                               <AccordionContent asChild>
                                 <form
-                                  className="grid grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
+                                  className="grid grid-cols-none md:grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
                                   id={'edit-pay-' + index}
                                   onChange={onChangePaymentById(index)}
                                   onSubmit={onCuoteSubmit(index)}
diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index 1a0774e..91cb991 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -82,7 +82,7 @@ export function Report() {
             <AccordionTrigger className="group !no-underline">
               <div className="place-contents-start flex flex-col place-items-start p-2 text-start">
                 <p className="text-lg font-bold"> {nombre} </p>
-                <p className="text-md text-muted-foreground"> {comentario} </p>
+                <p className="text-base text-muted-foreground"> {comentario} </p>
               </div>
             </AccordionTrigger>
             <AccordionContent className="space-y-2">
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 4b175ee..27ccbd0 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -299,9 +299,9 @@ export function Users() {
     <_selectUsers.Provider value={users?.filter(({ selected }) => selected)}>
       <div className="space-y-4">
         <div className="flex items-center gap-2">
-          <h1 className="text-3xl font-bold">{text.title}</h1>
+          <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
           {!!users?.length && (
-            <Badge className="text-xl">{users?.length}</Badge>
+            <Badge className="text-lg md:text-xl">{users?.length}</Badge>
           )}
           <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogTrigger asChild className="ms-auto">
@@ -402,7 +402,7 @@ export function Users() {
                             align="center"
                             className="w-56 mx-4 xl:mx-0 [&>*:not(:is([role=separator],:first-child))]:h-16 [&>*]:flex [&>*]:cursor-pointer [&>*]:justify-between [&>*]:gap-2"
                           >
-                            <DropdownMenuLabel className="text-md">
+                            <DropdownMenuLabel className="text-base">
                               {text.menu.title}
                             </DropdownMenuLabel>
                             <DropdownMenuSeparator />
diff --git a/src/pages/_layout/user/$userId/delete.tsx b/src/pages/_layout/user/$userId/delete.tsx
index 1df3559..0214ba4 100644
--- a/src/pages/_layout/user/$userId/delete.tsx
+++ b/src/pages/_layout/user/$userId/delete.tsx
@@ -75,8 +75,8 @@ export function DeleteUserById() {
         <DialogDescription>
           <Alert variant="destructive">
             <AlertCircle className="h-4 w-4 hidden md:block" />
-            <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
-            <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
+            <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+            <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
               {text.alert.description({ username: name })}
             </AlertDescription>
           </Alert>
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index ad1ad2e..ccd0540 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -249,7 +249,7 @@ export function UpdateUserById() {
         <DialogHeader>
           <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription className='text-xs text-start md:text-md text-muted-foreground'>{text.descriiption}</DialogDescription>
+          <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
           autoComplete="off"
@@ -450,7 +450,7 @@ export function Error() {
       description: (
         <div className="flex flex-row items-center gap-2">
           <h2 className="text-2xl font-bold">:&nbsp;(</h2>
-          <p className="text-md"> {text.error.descriiption} </p>
+          <p className="text-base"> {text.error.descriiption} </p>
         </div>
       ),
       variant: 'destructive',
diff --git a/src/pages/_layout/user/delete.tsx b/src/pages/_layout/user/delete.tsx
index c63c46f..bc372b1 100644
--- a/src/pages/_layout/user/delete.tsx
+++ b/src/pages/_layout/user/delete.tsx
@@ -69,8 +69,8 @@ export function DeleteSelectedUsers() {
         <DialogDescription>
           <Alert variant="destructive">
             <AlertCircle className="h-4 w-4 hidden md:block" />
-            <AlertTitle className='text-sm md:text-md text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
-            <AlertDescription className='text-xs md:text-md text-start max-sm:!px-0'>
+            <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
+            <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
               {text.alert.description({ length: selectUsers?.length })}
             </AlertDescription>
           </Alert>
diff --git a/src/pages/_layout/user/new.tsx b/src/pages/_layout/user/new.tsx
index 3a3f5ff..e2dd477 100644
--- a/src/pages/_layout/user/new.tsx
+++ b/src/pages/_layout/user/new.tsx
@@ -147,7 +147,7 @@ export function NewUser() {
         <DialogHeader>
           <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
           <Separator />
-          <DialogDescription className='text-xs text-start md:text-md text-muted-foreground'>{text.descriiption}</DialogDescription>
+          <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
           autoComplete="off"
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index d567580..07d954f 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -120,8 +120,8 @@ export function Login() {
           <CardHeader>
             <CardTitle>{text.title}</CardTitle>
             <CardDescription>
-              <p className="text-md md:text-lg font-bold">{text?.description?.[0]}</p>
-              <p className='text-xs md:text-md md:block'>{text?.description?.[1]}</p>
+              <p className="text-base md:text-lg font-bold">{text?.description?.[0]}</p>
+              <p className='text-xs md:text-base md:block'>{text?.description?.[1]}</p>
             </CardDescription>
           </CardHeader>
           <Separator />

From fa2821e496c9d0b794feaac709c63b64c8cecd3f Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 18:02:46 -0400
Subject: [PATCH 03/30] style: update styles is ussers and login

---
 src/pages/_layout.tsx               | 23 +++++++++++++----------
 src/pages/_layout/-column.tsx       | 14 ++++++--------
 src/pages/_layout/client/delete.tsx | 14 +++++++++-----
 src/pages/_layout/user.tsx          | 14 +++++++-------
 src/pages/login.tsx                 | 12 +++++++++---
 vite.alias.ts                       |  2 ++
 6 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 5372e3c..4922b38 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -100,12 +100,12 @@ import { postPaymentOpt } from '@/pages/_layout/credit_/$creditId/pay'
 import { postCreditOpt } from '@/pages/_layout/credit/new'
 import { queryClient } from '@/pages/__root'
 import { getReportsOpt, postReportOpt } from '@/pages/_layout/report'
-import { getRolByName, TROLES } from '@/lib/type/rol'
+import { getRolByName, type TROLES } from '@/lib/type/rol'
 import { translate } from '@/lib/route'
 import { Dialog, DialogTrigger } from '@/components/ui/dialog'
 import { MyUserInfo } from '@/pages/-info'
 import { format } from 'date-fns'
-import { TCREDIT_GET_FILTER_ALL } from '@/api/credit'
+import { type TCREDIT_GET_FILTER_ALL } from '@/api/credit'
 
 export const getCurrentUserOpt = {
   queryKey: ['login-user', { userId: useToken.getState().userId }],
@@ -356,13 +356,13 @@ export function Layout() {
   return (
     <div
       className={clsx(
-        'md:container gap-2 grid auto-rows-min xl:grid-cols-2 xl:grid-rows-3 auto-rows-min space-y-4',
+        'grid auto-rows-min auto-rows-min gap-2 space-y-4 md:container xl:grid-cols-2 xl:grid-rows-3',
         styles?.['grid-layout']
       )}
     >
       <nav
         className={clsx(
-          'hidden xl:block row-span-full xl:h-[100dvh] rounded-lg bg-primary-foreground p-4 text-primary shadow-lg hover:shadow-xl',
+          'row-span-full hidden rounded-lg bg-primary-foreground p-4 text-primary shadow-lg hover:shadow-xl xl:block xl:h-[100dvh]',
           {
             [styles?.['menu-animation']]: !menu,
             [styles?.['menu-animation-reverse']]: menu,
@@ -373,7 +373,10 @@ export function Layout() {
           <img
             alt="brand"
             src={!menu ? brand : brandOff}
-            className="aspect-contain min-h-24"
+            className={clsx('aspect-contain', {
+              'h-24': !menu,
+              'h-16': menu,
+            })}
           />
         </Link>
         <Separator className="my-4" />
@@ -430,7 +433,7 @@ export function Layout() {
           )}
         </div>
       </nav>
-      <header className="hidden xl:block sticky top-0 z-20 !my-0 [&_div]:flex [&_div]:items-center [&_div]:gap-4">
+      <header className="sticky top-0 z-20 !my-0 hidden xl:block [&_div]:flex [&_div]:items-center [&_div]:gap-4">
         <div className="h-16 justify-between rounded-lg bg-primary-foreground px-2 shadow-lg">
           <div className="[&>button]:px-2">
             <Button
@@ -628,7 +631,7 @@ export function Layout() {
         </div>
       </header>
       <main className="space-y-2 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
-        <div className='!hidden xl:block'>
+        <div className="!hidden xl:block">
           <Button
             onClick={onBack}
             variant="ghost"
@@ -667,13 +670,13 @@ export function Layout() {
             </BreadcrumbList>
           </Breadcrumb>
         </div>
-        <div className="flex xl:h-full flex-col justify-between xl:px-8 xl:py-4 space-y-4">
+        <div className="flex flex-col justify-between space-y-4 xl:h-full xl:px-8 xl:py-4">
           <Outlet />
         </div>
       </main>
-      <footer className="xl:py-4 py-2">
+      <footer className="py-2 xl:py-4">
         <Separator className="my-2 xl:my-4" />
-        <h3 className="m-auto xl:ms-auto w-fit space-x-2">
+        <h3 className="m-auto w-fit space-x-2 xl:ms-auto">
           <span className="italic">{text.footer.copyright}</span>
           <Badge> &copy; {new Date().getFullYear()} </Badge>
         </h3>
diff --git a/src/pages/_layout/-column.tsx b/src/pages/_layout/-column.tsx
index 6985fa7..2e971d8 100644
--- a/src/pages/_layout/-column.tsx
+++ b/src/pages/_layout/-column.tsx
@@ -65,9 +65,7 @@ export const columns: ColumnDef<TClientTable>[] = [
         </Button>
       )
     },
-    cell: ({ row }) => (
-      <p className="copitalize min-w-32">{row.getValue('fullName')}</p>
-    ),
+    cell: ({ row }) => <p className="copitalize">{row.getValue('fullName')}</p>,
   },
   {
     accessorKey: 'direccion' as keyof TClientTable,
@@ -83,7 +81,7 @@ export const columns: ColumnDef<TClientTable>[] = [
       )
     },
     cell: ({ row }) => (
-      <p className="min-w-32">
+      <p className="">
         {row.getValue('direccion' as keyof TClientTable) + '.'}
       </p>
     ),
@@ -94,7 +92,7 @@ export const columns: ColumnDef<TClientTable>[] = [
       return <p>{text.columns.phone}</p>
     },
     cell: ({ row }) => (
-      <p className="w-32 lowercase">
+      <p className="lowercase">
         {row.getValue('celular' as keyof TClientTable)}
       </p>
     ),
@@ -105,7 +103,7 @@ export const columns: ColumnDef<TClientTable>[] = [
       return <p>{text.columns.telephone}</p>
     },
     cell: ({ row }) => (
-      <p className="w-32 lowercase">
+      <p className="lowercase">
         {row.getValue('telefono' as keyof TClientTable)}
       </p>
     ),
@@ -116,7 +114,7 @@ export const columns: ColumnDef<TClientTable>[] = [
       return <p>{text.columns.id}</p>
     },
     cell: ({ row }) => (
-      <div className="w-32">
+      <div className="">
         <p className="font-bold capitalize">
           {getIdById({ id: row.original.tipo_de_identificacion })?.nombre}
         </p>
@@ -138,7 +136,7 @@ export const columns: ColumnDef<TClientTable>[] = [
       )
     },
     cell: ({ row }) => (
-      <p className="w-32">{row.getValue('referencia' as keyof TClientTable)}</p>
+      <p className="">{row.getValue('referencia' as keyof TClientTable)}</p>
     ),
   },
   {
diff --git a/src/pages/_layout/client/delete.tsx b/src/pages/_layout/client/delete.tsx
index 3327d4f..6e5ee28 100644
--- a/src/pages/_layout/client/delete.tsx
+++ b/src/pages/_layout/client/delete.tsx
@@ -119,19 +119,23 @@ export function DeleteSelectedClients() {
       {!open && <Navigate to={'../'} replace />}
       <DialogContent className="text-start text-xl md:max-w-xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">
+            {text.title}
+          </DialogTitle>
           <Separator />
           <DialogDescription>
             <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4 hidden md:block" />
-              <AlertTitle className='text-sm md:text-base text-start max-sm:!px-0'>{text.alert.title}</AlertTitle>
-              <AlertDescription className='text-xs md:text-base text-start max-sm:!px-0'>
+              <AlertCircle className="hidden h-4 w-4 md:block" />
+              <AlertTitle className="text-start text-sm max-sm:!px-0 md:text-base">
+                {text.alert.title}
+              </AlertTitle>
+              <AlertDescription className="text-start text-xs max-sm:!px-0 md:text-base">
                 {text.alert.description({ length: clients?.length })}
               </AlertDescription>
             </Alert>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="!justify-between flex-col md:flex-row">
+        <DialogFooter className="flex-col !justify-between md:flex-row">
           <div className="flex items-center gap-2 font-bold italic">
             <Checkbox
               id="switch-updates-client"
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 27ccbd0..8f2acf6 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -299,7 +299,7 @@ export function Users() {
     <_selectUsers.Provider value={users?.filter(({ selected }) => selected)}>
       <div className="space-y-4">
         <div className="flex items-center gap-2">
-          <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
+          <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
           {!!users?.length && (
             <Badge className="text-lg md:text-xl">{users?.length}</Badge>
           )}
@@ -333,15 +333,15 @@ export function Users() {
         </div>
         <Separator />
         {!!users?.length && (
-          <div className="items-center flex">
-            <p className="text-muted-foreground hidden xl:block">
+          <div className="flex items-center">
+            <p className="hidden text-muted-foreground xl:block">
               {text.select({
                 select: users?.filter(({ selected }) => selected)?.length,
                 total: usersRes?.length,
               })}
             </p>
             <Select required defaultValue={order} onValueChange={onSelectOrder}>
-              <SelectTrigger className="!border-1 xl:ms-auto w-44 xl:w-48 !border-ring">
+              <SelectTrigger className="!border-1 w-44 !border-ring xl:ms-auto xl:w-48">
                 <SelectValue placeholder={'Orden'} />
               </SelectTrigger>
               <SelectContent className="[&_*]:cursor-pointer">
@@ -357,7 +357,7 @@ export function Users() {
         {!users?.length && <p>{text.notFound}</p>}
         <div
           className={clsx(
-            'min-w-80 xl:[&>*]:min-w-1/4 flex flex-wrap content-start justify-center gap-2 xl:gap-4 [&>*]:max-w-[24rem] [&>*]:flex-auto [&>*]:shrink',
+            'min-w-80 xl:[&>*]:max-w-1/3 md:[&>*]:max-w-1/2 flex flex-wrap content-start justify-center gap-3 xl:gap-4 [&>*]:max-w-[24rem] [&>*]:flex-auto [&>*]:shrink',
             { '!justify-start': users?.length - pagination?.start * LENGTH < 3 }
           )}
         >
@@ -391,7 +391,7 @@ export function Users() {
                           <DropdownMenuTrigger asChild onClick={onClickStop}>
                             <Button
                               variant="ghost"
-                              className="xl:h-8 xl:w-8 h-4 w-8 p-0 hover:ring hover:ring-primary"
+                              className="h-4 w-8 p-0 hover:ring hover:ring-primary xl:h-8 xl:w-8"
                             >
                               <span className="sr-only">{text.menu.aria}</span>
                               <MoreHorizontal className="h-4 w-4" />
@@ -400,7 +400,7 @@ export function Users() {
                           <DropdownMenuContent
                             onClick={onClickStop}
                             align="center"
-                            className="w-56 mx-4 xl:mx-0 [&>*:not(:is([role=separator],:first-child))]:h-16 [&>*]:flex [&>*]:cursor-pointer [&>*]:justify-between [&>*]:gap-2"
+                            className="mx-4 w-56 xl:mx-0 [&>*:not(:is([role=separator],:first-child))]:h-16 [&>*]:flex [&>*]:cursor-pointer [&>*]:justify-between [&>*]:gap-2"
                           >
                             <DropdownMenuLabel className="text-base">
                               {text.menu.title}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 07d954f..c956454 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -19,6 +19,7 @@ import { useToken } from '@/lib/context/login'
 import { BoundleLoader } from '@/components/ui/loader'
 import { ToastAction } from '@radix-ui/react-toast'
 import { Separator } from '@radix-ui/react-separator'
+import brand from '@/assets/menu-brand.avif'
 
 export const postCurrentUser = {
   mutationKey: ['login-user'],
@@ -116,12 +117,16 @@ export function Login() {
     <>
       {token && <Navigate to={'/'} />}
       <section className="grid min-h-screen place-content-center place-items-center">
-        <Card className="inline-block shadow-lg">
+        <Card className="w-screen shadow-lg md:w-full">
           <CardHeader>
             <CardTitle>{text.title}</CardTitle>
             <CardDescription>
-              <p className="text-base md:text-lg font-bold">{text?.description?.[0]}</p>
-              <p className='text-xs md:text-base md:block'>{text?.description?.[1]}</p>
+              <p className="text-base font-bold md:text-lg">
+                {text?.description?.[0]}
+              </p>
+              <p className="text-xs md:block md:text-base">
+                {text?.description?.[1]}
+              </p>
             </CardDescription>
           </CardHeader>
           <Separator />
@@ -163,6 +168,7 @@ export function Login() {
             </form>
           </CardContent>
           <CardFooter>
+            <img alt="brand" src={brand} className="aspect-contain max-h-12" />
             <Button
               type="submit"
               form="login"
diff --git a/vite.alias.ts b/vite.alias.ts
index aa6397d..3a531f5 100644
--- a/vite.alias.ts
+++ b/vite.alias.ts
@@ -1,9 +1,11 @@
 import { resolve } from 'path'
 
 const root = resolve(__dirname, 'src')
+const public_root = resolve(__dirname, 'public')
 
 export const alias: Record<string, string> = {
   '@': root,
+  public: public_root,
 }
 
 export default alias

From b639765b67ca4dcb9fc054135fad6e439c64ae76 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 19:09:27 -0400
Subject: [PATCH 04/30] style: update styles is info view

---
 src/pages/-info.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/-info.tsx b/src/pages/-info.tsx
index 7ac2ceb..7a178b5 100644
--- a/src/pages/-info.tsx
+++ b/src/pages/-info.tsx
@@ -215,9 +215,13 @@ export const MyUserInfo = memo(function () {
   return (
     <DialogContent className="max-w-lg">
       <DialogHeader>
-        <DialogTitle className="text-2xl">{text.title}</DialogTitle>
+        <DialogTitle className="text-start text-xl md:text-2xl">
+          {text.title}
+        </DialogTitle>
         <Separator />
-        <DialogDescription>{text.descriiption}</DialogDescription>
+        <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
+          {text.descriiption}
+        </DialogDescription>
       </DialogHeader>
       <form
         autoComplete="off"
@@ -226,7 +230,7 @@ export const MyUserInfo = memo(function () {
         onChange={onChange}
         id="user-info"
         className={clsx(
-          'grid-rows-subgrid grid grid-cols-2 gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+          'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 px-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
           {
             '[&_*:disabled]:opacity-100':
               !!userId && rol?.rolName !== 'Administrador',
@@ -361,7 +365,7 @@ export const MyUserInfo = memo(function () {
           </div>
         </div>
       </form>
-      <DialogFooter className="justify-start gap-2">
+      <DialogFooter className="flex-col justify-start gap-2 gap-2 md:flex-row">
         {!isSuccess ? (
           <>
             <Skeleton className="me-auto h-12 w-40" />

From d381400e2c873b701658b763ff3e4103a4366ab4 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 19:10:56 -0400
Subject: [PATCH 05/30] style: update styles in movile dispositives of header
 bar

---
 src/pages/__root.tsx  |  2 +-
 src/pages/_layout.tsx | 28 ++++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/pages/__root.tsx b/src/pages/__root.tsx
index b093fd5..42726b7 100644
--- a/src/pages/__root.tsx
+++ b/src/pages/__root.tsx
@@ -13,7 +13,7 @@ export const Route = createRootRoute({
 })
 
 export function Root() {
-   return ( <div className={clsx("px-4 xl:py-2",
+   return ( <div className={clsx("md:py-2 min-h-screen xl:h-auto",
         "bg-background bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]",
         "dark:bg-[radial-gradient(#bbabab1f_1px,#00091d_1px)] dark:bg-[size:20px_20px]",
     )}> 
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 4922b38..6388b28 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -356,7 +356,7 @@ export function Layout() {
   return (
     <div
       className={clsx(
-        'grid auto-rows-min auto-rows-min gap-2 space-y-4 md:container xl:grid-cols-2 xl:grid-rows-3',
+        'grid auto-rows-min auto-rows-min gap-2 space-y-4 md:landscape:container xl:grid-cols-2 xl:grid-rows-3',
         styles?.['grid-layout']
       )}
     >
@@ -433,8 +433,8 @@ export function Layout() {
           )}
         </div>
       </nav>
-      <header className="sticky top-0 z-20 !my-0 hidden xl:block [&_div]:flex [&_div]:items-center [&_div]:gap-4">
-        <div className="h-16 justify-between rounded-lg bg-primary-foreground px-2 shadow-lg">
+      <header className="px-0 md:px-2 sticky top-0 z-20 !my-0 xl:block [&_div]:flex [&_div]:items-center [&_div]:gap-4">
+        <div className="px-2 py-2 md:px-4 md:px-4 h-16 justify-between rounded-lg bg-primary-foreground px-2 shadow-lg max-sm:rounded-t-none">
           <div className="[&>button]:px-2">
             <Button
               variant={!menu ? 'default' : 'outline'}
@@ -455,11 +455,11 @@ export function Layout() {
             <SpinLoader />
           </div>
           <div>
-            <Label className="flex cursor-pointer items-center gap-2">
+            <Label className="!hidden md:!flex flex-row cursor-pointer items-center gap-2">
               {theme === 'dark' ? <Moon /> : <Sun />}
               <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
             </Label>
-            <Label className="flex items-center justify-center rounded-lg border border-border">
+            <Label className="items-center justify-center rounded-lg border border-border hidden md:flex">
               <Popover open={search} onOpenChange={onSearchChange}>
                 <PopoverTrigger>
                   <Button
@@ -563,7 +563,7 @@ export function Layout() {
                     .join('')}
                 </Badge>
               </HoverCardTrigger>
-              <HoverCardContent>
+              <HoverCardContent className='mx-4 xl:mx-0'>
                 {errorCurrentUser && <Error currentUser />}
                 {pendingCurrentUser && (
                   <div className="p-2">
@@ -581,13 +581,14 @@ export function Layout() {
                   </div>
                 )}
                 {okCurrentUser && (
-                  <div className="p-2">
-                    <Avatar className="ring-1 ring-ring">
+                  <div className="flex flex-col [&>*]:w-full w=full">
+                    <div className=''>
+                      <Avatar className="ring-1 ring-ring">
                       <AvatarFallback>
                         {name?.split(' ')?.map((items) => items?.[0])}
                       </AvatarFallback>
                     </Avatar>
-                    <ul className="space-y-2 [&>li]:w-fit">
+                    <ul className="p-2 space-y-2 [&>li]:w-fit w-full">
                       <li>
                         <Dialog open={open} onOpenChange={onOpenChange}>
                           <DialogTrigger asChild>
@@ -606,6 +607,13 @@ export function Layout() {
                         <Badge> {currentUserRes?.rol} </Badge>{' '}
                       </li>
                     </ul>
+                    </div>
+                    <div>
+                      <Label className="md:hidden flex cursor-pointer items-center gap-2">
+                        {theme === 'dark' ? <Moon /> : <Sun />}
+                        <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
+                      </Label>
+                    </div>
                   </div>
                 )}
               </HoverCardContent>
@@ -630,7 +638,7 @@ export function Layout() {
           </div>
         </div>
       </header>
-      <main className="space-y-2 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
+      <main className=" px-4 space-y-2 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
         <div className="!hidden xl:block">
           <Button
             onClick={onBack}

From 340398a14983cb834be2739da731ba403b842833 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 23:28:16 -0400
Subject: [PATCH 06/30] style: update styles in movile dispositives for search
 bar

---
 src/pages/_layout.tsx | 210 +++++++++++++++++++++++-------------------
 1 file changed, 117 insertions(+), 93 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 6388b28..87b5031 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -19,6 +19,7 @@ import {
   NotepadText,
   Sun,
   X as ErrorIcon,
+  Search,
 } from 'lucide-react'
 import { Separator } from '@/components/ui/separator'
 import { Link } from '@tanstack/react-router'
@@ -106,6 +107,7 @@ import { Dialog, DialogTrigger } from '@/components/ui/dialog'
 import { MyUserInfo } from '@/pages/-info'
 import { format } from 'date-fns'
 import { type TCREDIT_GET_FILTER_ALL } from '@/api/credit'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 export const getCurrentUserOpt = {
   queryKey: ['login-user', { userId: useToken.getState().userId }],
@@ -293,6 +295,10 @@ export function Layout() {
       )
       setClients(query)
     }
+
+    return () => {
+      setClients(clientsRes)
+    }
   }
 
   const onKeyDown: React.KeyboardEventHandler<
@@ -433,8 +439,8 @@ export function Layout() {
           )}
         </div>
       </nav>
-      <header className="px-0 md:px-2 sticky top-0 z-20 !my-0 xl:block [&_div]:flex [&_div]:items-center [&_div]:gap-4">
-        <div className="px-2 py-2 md:px-4 md:px-4 h-16 justify-between rounded-lg bg-primary-foreground px-2 shadow-lg max-sm:rounded-t-none">
+      <header className="sticky top-0 z-20 !my-0 px-0 md:px-2 xl:block [&_div]:flex [&_div]:items-center [&_div]:gap-4">
+        <div className="h-16 justify-between rounded-lg bg-primary-foreground px-2 px-2 py-2 shadow-lg max-sm:rounded-t-none md:px-4 md:px-4">
           <div className="[&>button]:px-2">
             <Button
               variant={!menu ? 'default' : 'outline'}
@@ -455,15 +461,22 @@ export function Layout() {
             <SpinLoader />
           </div>
           <div>
-            <Label className="!hidden md:!flex flex-row cursor-pointer items-center gap-2">
-              {theme === 'dark' ? <Moon /> : <Sun />}
-              <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
-            </Label>
-            <Label className="items-center justify-center rounded-lg border border-border hidden md:flex">
+            <Label className="group relative hidden items-center justify-center gap-1 rounded-lg md:flex xl:flex-row-reverse">
+              <Search className="translate-x-36 opacity-100 transition delay-150 duration-300 group-focus-within:invisible group-focus-within:-translate-x-2 group-focus:opacity-0 xl:hidden" />
+              <Input
+                className="origin-right scale-x-[30%] transition delay-150 duration-300 placeholder:invisible focus-within:scale-x-[100%] focus:placeholder:visible xl:scale-x-[100%] xl:placeholder:visible"
+                type="search"
+                placeholder={text.search.placeholder({
+                  pathname: rchild?.at(0)?.pathname,
+                })}
+                onChange={onChange}
+                onKeyDown={onKeyDown}
+                value={value}
+              />
               <Popover open={search} onOpenChange={onSearchChange}>
                 <PopoverTrigger>
                   <Button
-                    className={clsx('rounded-br-none rounded-tr-none p-2')}
+                    className={clsx('p-2')}
                     variant={!search ? 'ghost' : 'default'}
                   >
                     <User />
@@ -492,67 +505,64 @@ export function Layout() {
                       <Badge variant="default"> {clients?.length} </Badge>
                     </h3>
                     <Separator />
-                    <ul className="flex max-h-56 flex-col gap-2 overflow-y-auto [&_a]:flex [&_a]:flex-row [&_a]:items-center [&_a]:gap-4">
-                      {clients?.map(
-                        (
-                          {
-                            apellidos,
-                            nombres,
-                            id: clientId,
-                            numero_de_identificacion,
-                          },
-                          index
-                        ) =>
-                          clientId && (
-                            <li
-                              key={index}
-                              className="group cursor-pointer"
-                              onClick={onSelect(index)}
-                            >
-                              <Link
-                                to={'/client/$clientId/update'}
-                                params={{ clientId }}
+                    <ScrollArea className="h-56">
+                      <ScrollBar orientation="vertical" />
+                      <ul className="flex flex-col gap-2 [&_a]:flex [&_a]:flex-row [&_a]:items-center [&_a]:gap-4">
+                        {clients?.map(
+                          (
+                            {
+                              apellidos,
+                              nombres,
+                              id: clientId,
+                              numero_de_identificacion,
+                            },
+                            index
+                          ) =>
+                            clientId && (
+                              <li
+                                key={index}
+                                className="group cursor-pointer"
+                                onClick={onSelect(index)}
                               >
-                                <Avatar>
-                                  <AvatarFallback className="!ring-2 ring-ring">
-                                    {nombres?.[0] + apellidos?.[0]}
-                                  </AvatarFallback>
-                                </Avatar>
-                                <div>
-                                  <p
-                                    className={clsx(
-                                      "font-bold group-hover:after:content-['#']"
-                                    )}
-                                  >
-                                    {nombres + ' ' + apellidos}
-                                  </p>
-                                  <p className="italic">
-                                    {numero_de_identificacion.slice(0, 4) +
-                                      '...' +
-                                      numero_de_identificacion.slice(
-                                        -4,
-                                        numero_de_identificacion.length
+                                <Link
+                                  to={'/client/$clientId/update'}
+                                  params={{ clientId }}
+                                >
+                                  <Avatar>
+                                    <AvatarFallback className="!ring-2 ring-ring">
+                                      {nombres?.[0] + apellidos?.[0]}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <div>
+                                    <p
+                                      className={clsx(
+                                        "font-bold group-hover:after:content-['#']"
                                       )}
-                                  </p>
-                                </div>
-                              </Link>
-                            </li>
-                          )
-                      )}
-                    </ul>
+                                    >
+                                      {nombres + ' ' + apellidos}
+                                    </p>
+                                    <p className="italic">
+                                      {numero_de_identificacion.slice(0, 4) +
+                                        '...' +
+                                        numero_de_identificacion.slice(
+                                          -4,
+                                          numero_de_identificacion.length
+                                        )}
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                            )
+                        )}
+                      </ul>
+                    </ScrollArea>
                   </div>
                 </PopoverContent>
               </Popover>
-              <Input
-                className="rounded-bl-none rounded-tl-none border-none"
-                type="search"
-                placeholder={text.search.placeholder({
-                  pathname: rchild?.at(0)?.pathname,
-                })}
-                onChange={onChange}
-                onKeyDown={onKeyDown}
-                value={value}
-              />
+            </Label>
+            <Label className="!hidden cursor-pointer flex-row items-center gap-2 md:landscape:!flex">
+              {theme === 'dark' ? <Moon /> : <Sun />}
+              <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
             </Label>
             <HoverCard>
               <HoverCardTrigger>
@@ -563,7 +573,7 @@ export function Layout() {
                     .join('')}
                 </Badge>
               </HoverCardTrigger>
-              <HoverCardContent className='mx-4 xl:mx-0'>
+              <HoverCardContent className="mx-4 xl:mx-0">
                 {errorCurrentUser && <Error currentUser />}
                 {pendingCurrentUser && (
                   <div className="p-2">
@@ -581,37 +591,40 @@ export function Layout() {
                   </div>
                 )}
                 {okCurrentUser && (
-                  <div className="flex flex-col [&>*]:w-full w=full">
-                    <div className=''>
+                  <div className="w=full flex flex-col [&>*]:w-full">
+                    <div className="">
                       <Avatar className="ring-1 ring-ring">
-                      <AvatarFallback>
-                        {name?.split(' ')?.map((items) => items?.[0])}
-                      </AvatarFallback>
-                    </Avatar>
-                    <ul className="p-2 space-y-2 [&>li]:w-fit w-full">
-                      <li>
-                        <Dialog open={open} onOpenChange={onOpenChange}>
-                          <DialogTrigger asChild>
-                            <span
-                              title="Modificar mi usuario"
-                              className="cursor-pointer font-bold after:opacity-0 after:transition after:transition after:delay-150 after:duration-300 hover:after:opacity-100 hover:after:content-['#']"
-                            >
-                              {currentUserRes?.nombre}
-                            </span>
-                          </DialogTrigger>
-                          <MyUserInfo />
-                        </Dialog>
-                      </li>
-                      <li>
-                        {' '}
-                        <Badge> {currentUserRes?.rol} </Badge>{' '}
-                      </li>
-                    </ul>
+                        <AvatarFallback>
+                          {name?.split(' ')?.map((items) => items?.[0])}
+                        </AvatarFallback>
+                      </Avatar>
+                      <ul className="w-full space-y-2 p-2 [&>li]:w-fit">
+                        <li>
+                          <Dialog open={open} onOpenChange={onOpenChange}>
+                            <DialogTrigger asChild>
+                              <span
+                                title="Modificar mi usuario"
+                                className="cursor-pointer font-bold after:opacity-0 after:transition after:transition after:delay-150 after:duration-300 hover:after:opacity-100 hover:after:content-['#']"
+                              >
+                                {currentUserRes?.nombre}
+                              </span>
+                            </DialogTrigger>
+                            <MyUserInfo />
+                          </Dialog>
+                        </li>
+                        <li>
+                          {' '}
+                          <Badge> {currentUserRes?.rol} </Badge>{' '}
+                        </li>
+                      </ul>
                     </div>
                     <div>
-                      <Label className="md:hidden flex cursor-pointer items-center gap-2">
+                      <Label className="flex cursor-pointer items-center gap-2 md:landscape:hidden">
                         {theme === 'dark' ? <Moon /> : <Sun />}
-                        <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
+                        <Switch
+                          checked={theme === 'dark'}
+                          onCheckedChange={onSwitch}
+                        />
                       </Label>
                     </div>
                   </div>
@@ -638,7 +651,7 @@ export function Layout() {
           </div>
         </div>
       </header>
-      <main className=" px-4 space-y-2 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
+      <main className=" space-y-2 px-4 [&>:first-child]:flex [&>:first-child]:items-center [&>:first-child]:gap-2">
         <div className="!hidden xl:block">
           <Button
             onClick={onBack}
@@ -920,6 +933,17 @@ const SpinLoader = memo(function () {
       </span>
     )
   }
+
+  return (
+    <Link to={'/'}>
+      {' '}
+      <img
+        alt="brand"
+        src={brand}
+        className={clsx('aspect-contain h-12 xl:hidden')}
+      />
+    </Link>
+  )
 })
 
 /* eslint-disable-next-line */

From 0f5e6df02a69eb0d9d66539676ca84578c2c21a6 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 23:49:16 -0400
Subject: [PATCH 07/30] fix: search layout length clients

---
 src/pages/_layout.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 87b5031..f843a6f 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -287,18 +287,14 @@ export function Layout() {
     setValue({ value })
 
     if (clientsRes) {
-      const query = clients?.filter((props) =>
-        Object.values(props)
+      const query = clientsRes?.filter((items) =>
+        Object.values(items)
           .join(' ')
           .toLowerCase()
           .includes(value.toLowerCase())
       )
       setClients(query)
     }
-
-    return () => {
-      setClients(clientsRes)
-    }
   }
 
   const onKeyDown: React.KeyboardEventHandler<

From 1119a6cb993ade8da0041500440c3dbf25f1b370 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Fri, 19 Apr 2024 23:53:02 -0400
Subject: [PATCH 08/30] style: search popover content

---
 src/pages/_layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index f843a6f..5e3f33c 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -492,7 +492,7 @@ export function Layout() {
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent
-                  className="absolute -start-16 top-2 w-80"
+                  className="absolute -start-48 top-2 w-80 xl:-start-16"
                   hidden={!clients?.length}
                 >
                   <div className="space-y-4 [&>h3]:flex [&>h3]:items-center [&>h3]:gap-2">

From 537e275ea722816a01ab9b979d23360bc601b254 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 00:27:22 -0400
Subject: [PATCH 09/30] style: update styles in movile dispositives nav bar

---
 src/pages/_layout.tsx | 53 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 5e3f33c..0aa2676 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -439,6 +439,7 @@ export function Layout() {
         <div className="h-16 justify-between rounded-lg bg-primary-foreground px-2 px-2 py-2 shadow-lg max-sm:rounded-t-none md:px-4 md:px-4">
           <div className="[&>button]:px-2">
             <Button
+              className="hidden xl:block"
               variant={!menu ? 'default' : 'outline'}
               onClick={onclick(setStatus, { menu: !menu })}
             >
@@ -704,6 +705,18 @@ export function Layout() {
 
 /* eslint-disable-next-line */
 const SpinLoader = memo(function () {
+  const [menu, setMenu] = useState<boolean>(false)
+
+  const onOpenChange = (open: boolean) => {
+    setMenu(open)
+  }
+
+  const onClick: React.MouseEventHandler<
+    React.ComponentRef<typeof Button>
+  > = () => {
+    setMenu(!menu)
+  }
+
   const getUser = useIsFetching({
     fetchStatus: 'fetching',
     type: 'inactive',
@@ -931,14 +944,38 @@ const SpinLoader = memo(function () {
   }
 
   return (
-    <Link to={'/'}>
-      {' '}
-      <img
-        alt="brand"
-        src={brand}
-        className={clsx('aspect-contain h-12 xl:hidden')}
-      />
-    </Link>
+    <Popover open={menu} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild className="xl:hidden">
+        <img alt="brand" src={brand} className={clsx('aspect-contain h-12')} />
+      </PopoverTrigger>
+      <PopoverContent className="min-sm:rounded-t-none w-screen shadow-xl md:mx-4 md:mt-4 md:w-[96dvw]">
+        <ul className="space-y-3 px-4 md:px-20 [&_button]:w-full">
+          {Object.entries(translate())
+            ?.filter(([, { validation }]) => validation)
+            ?.map(([url, { name: title, icon: Icon }], index) => {
+              return (
+                <li key={index}>
+                  <Link to={url}>
+                    {({ isActive }) => (
+                      <Button
+                        onClick={onClick}
+                        variant={!isActive ? 'link' : 'default'}
+                        className={clsx(
+                          'delay-50 flex gap-2 font-bold duration-300',
+                          {}
+                        )}
+                      >
+                        <Icon />
+                        {title}
+                      </Button>
+                    )}
+                  </Link>
+                </li>
+              )
+            })}
+        </ul>
+      </PopoverContent>
+    </Popover>
   )
 })
 

From b893e5b68c14989a163628c3ddd22a47436cc458 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 00:56:58 -0400
Subject: [PATCH 10/30] fix: users state in search filter

---
 src/lib/route.ts             |  2 +-
 src/pages/_layout/credit.tsx | 48 ++++++++++++++++++------------------
 src/pages/_layout/user.tsx   |  8 +++---
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/lib/route.ts b/src/lib/route.ts
index 6fdb0b8..7e9d45f 100644
--- a/src/lib/route.ts
+++ b/src/lib/route.ts
@@ -24,7 +24,7 @@ export const translate = () => {
     '/report': { name: 'Reportes', validation: true, icon: icons.BookA },
     '/notification': {
       name: 'Notificaciones',
-      validation: false,
+      validation: true,
       icon: icons.Notebook,
     },
     '/update': { name: 'Editar', validation: false, icon: icons.Upload },
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index 01a2e86..99723ba 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -340,7 +340,7 @@ export function Credits() {
       <div className="space-y-4">
         <div className="flex items-center gap-2">
           <Label htmlFor="acitve-credits" className="cursor-pointer">
-            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
+            <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
           </Label>
           {!!credits?.length && (
             <Badge className="px-3 text-lg md:text-xl">{credits?.length}</Badge>
@@ -357,13 +357,13 @@ export function Credits() {
         <Separator />
         {!!credits?.length && (
           <div className="flex xl:items-center">
-            <p className="text-muted-foreground hidden xl:block">
+            <p className="hidden text-muted-foreground xl:block">
               {text.select({
                 total: credits?.length,
               })}
             </p>
             <Select defaultValue={order} onValueChange={onSelectOrder}>
-              <SelectTrigger className="!border-1 xl:ms-auto w-44 xl:w-48 !border-ring">
+              <SelectTrigger className="!border-1 w-44 !border-ring xl:ms-auto xl:w-48">
                 <SelectValue placeholder={'Orden'} />
               </SelectTrigger>
               <SelectContent className="[&_*]:cursor-pointer">
@@ -380,7 +380,7 @@ export function Credits() {
         {!!credits?.length && (
           <div
             className={clsx(
-              'flex flex-wrap gap-4 xl:gap-6 [&>*]:flex-1 xl:[&>*]:basis-2/5'
+              'flex flex-wrap gap-4 xl:gap-6 [&>*]:flex-1 md:[&>*]:basis-2/5'
             )}
           >
             {!!credits?.length &&
@@ -420,7 +420,7 @@ export function Credits() {
                         >
                           <CardHeader>
                             <div className="flex items-center gap-2">
-                              <CardTitle className="flex-row items-center line-clamp-1">
+                              <CardTitle className="line-clamp-1 flex-row items-center">
                                 <Link
                                   onClick={onOpenUser}
                                   to={'/client/$clientId/update'}
@@ -430,7 +430,7 @@ export function Credits() {
                                   {nombre_del_cliente}
                                 </Link>
                               </CardTitle>
-                              <Badge className='text-base after:duration-400 ms-auto after:opacity-0 after:transition after:delay-150 group-hover:after:opacity-100 group-hover:after:content-["_\219D"]'>
+                              <Badge className='after:duration-400 ms-auto text-base after:opacity-0 after:transition after:delay-150 group-hover:after:opacity-100 group-hover:after:content-["_\219D"]'>
                                 {creditId}
                               </Badge>
                             </div>
@@ -483,26 +483,26 @@ export function Credits() {
                             </Badge>
                             <Dialog open={open} onOpenChange={onOpenChange}>
                               <DialogTrigger asChild className="ms-auto">
-                                  <Link
-                                    to={'./print'}
-                                    search={{ creditId }}
+                                <Link
+                                  to={'./print'}
+                                  search={{ creditId }}
+                                  disabled={numero_de_cuota <= 0}
+                                >
+                                  <Button
+                                    variant="ghost"
+                                    onClick={onClick}
                                     disabled={numero_de_cuota <= 0}
+                                    className={clsx(
+                                      'invisible px-3 opacity-0 hover:ring hover:ring-primary group-hover:opacity-100',
+                                      {
+                                        'xl:group-hover:visible':
+                                          numero_de_cuota > 0,
+                                      }
+                                    )}
                                   >
-                                    <Button
-                                      variant="ghost"
-                                      onClick={onClick}
-                                      disabled={numero_de_cuota <= 0}
-                                      className={clsx(
-                                        'invisible px-3 opacity-0 hover:ring hover:ring-primary group-hover:opacity-100',
-                                        {
-                                          'xl:group-hover:visible':
-                                            numero_de_cuota > 0,
-                                        }
-                                      )}
-                                    >
-                                      <Printer />
-                                    </Button>
-                                  </Link>
+                                    <Printer />
+                                  </Button>
+                                </Link>
                               </DialogTrigger>
                               <DialogTrigger asChild>
                                 <Link
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 8f2acf6..5541ed4 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -285,8 +285,10 @@ export function Users() {
 
   useEffect(() => {
     if (value) {
-      usersRes?.filter(({ nombre }) =>
-        nombre.toLowerCase().includes(value?.toLowerCase() ?? '')
+      setUsers(
+        usersRes?.filter(({ nombre }) =>
+          nombre.toLowerCase().includes(value?.toLowerCase() ?? '')
+        )
       )
       setPagination({ ...pagination, start: 0, end: STEP })
     }
@@ -357,7 +359,7 @@ export function Users() {
         {!users?.length && <p>{text.notFound}</p>}
         <div
           className={clsx(
-            'min-w-80 xl:[&>*]:max-w-1/3 md:[&>*]:max-w-1/2 flex flex-wrap content-start justify-center gap-3 xl:gap-4 [&>*]:max-w-[24rem] [&>*]:flex-auto [&>*]:shrink',
+            'md:[&>*]:baisis-3/5 flex flex-wrap content-start justify-center gap-3 xl:gap-4 [&>*]:flex-auto',
             { '!justify-start': users?.length - pagination?.start * LENGTH < 3 }
           )}
         >

From cc4ace673a058d5dbf6b5916e4384eba0afd1f66 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 02:36:14 -0400
Subject: [PATCH 11/30] feat: add search bar in the movile view

---
 src/pages/_layout.tsx | 82 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 61 insertions(+), 21 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 0aa2676..3f4e1a3 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -25,7 +25,13 @@ import { Separator } from '@/components/ui/separator'
 import { Link } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { Calendar, TData, TDaysProps } from '@/components/ui/calendar'
-import React, { memo, useEffect, useReducer, useState } from 'react'
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useReducer,
+  useState,
+} from 'react'
 import { User } from 'lucide-react'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
@@ -280,22 +286,25 @@ export function Layout() {
       setStatus(props)
     }
 
-  const onChange: React.ChangeEventHandler<React.ComponentRef<typeof Input>> = (
-    ev
-  ) => {
-    const { value } = ev.currentTarget
-    setValue({ value })
-
-    if (clientsRes) {
-      const query = clientsRes?.filter((items) =>
-        Object.values(items)
-          .join(' ')
-          .toLowerCase()
-          .includes(value.toLowerCase())
-      )
-      setClients(query)
-    }
-  }
+  const onChange = useCallback<
+    React.ChangeEventHandler<React.ComponentRef<typeof Input>>
+  >(
+    (ev) => {
+      const { value } = ev.currentTarget
+      setValue({ value })
+
+      if (clientsRes) {
+        const query = clientsRes?.filter((items) =>
+          Object.values(items)
+            .join(' ')
+            .toLowerCase()
+            .includes(value.toLowerCase())
+        )
+        setClients(query)
+      }
+    },
+    [clientsRes]
+  )
 
   const onKeyDown: React.KeyboardEventHandler<
     React.ComponentRef<typeof Input>
@@ -455,7 +464,11 @@ export function Layout() {
                 </Button>
               )}
             </Link>
-            <SpinLoader />
+            <SpinLoader
+              value={value}
+              onChange={onChange}
+              rchild={rchild?.at(0)?.pathname}
+            />
           </div>
           <div>
             <Label className="group relative hidden items-center justify-center gap-1 rounded-lg md:flex xl:flex-row-reverse">
@@ -704,7 +717,14 @@ export function Layout() {
 }
 
 /* eslint-disable-next-line */
-const SpinLoader = memo(function () {
+type TSpinLoader = {
+  rchild?: string
+  value?: string
+  onChange: React.ChangeEventHandler<React.ComponentRef<typeof Input>>
+}
+
+/* eslint-disable-next-line */
+const SpinLoader = memo<TSpinLoader>(function ({ onChange, rchild, value }) {
   const [menu, setMenu] = useState<boolean>(false)
 
   const onOpenChange = (open: boolean) => {
@@ -717,6 +737,13 @@ const SpinLoader = memo(function () {
     setMenu(!menu)
   }
 
+  const onKeyDown: React.KeyboardEventHandler<
+    React.ComponentRef<typeof Input>
+  > = (ev) => {
+    const key = ev.key
+    if (key === 'Enter') setMenu(!menu)
+  }
+
   const getUser = useIsFetching({
     fetchStatus: 'fetching',
     type: 'inactive',
@@ -948,7 +975,20 @@ const SpinLoader = memo(function () {
       <PopoverTrigger asChild className="xl:hidden">
         <img alt="brand" src={brand} className={clsx('aspect-contain h-12')} />
       </PopoverTrigger>
-      <PopoverContent className="min-sm:rounded-t-none w-screen shadow-xl md:mx-4 md:mt-4 md:w-[96dvw]">
+      <PopoverContent className="min-sm:rounded-t-none w-screen space-y-2 shadow-xl md:mx-4 md:mt-4 md:w-[96dvw]">
+        <div className="flex items-center gap-3 px-4 md:hidden">
+          <Search />
+          <Input
+            type="search"
+            placeholder={text.search.placeholder({
+              pathname: rchild,
+            })}
+            onChange={onChange}
+            value={value}
+            onKeyDown={onKeyDown}
+          />
+        </div>
+        <Separator className="my-2" />
         <ul className="space-y-3 px-4 md:px-20 [&_button]:w-full">
           {Object.entries(translate())
             ?.filter(([, { validation }]) => validation)
@@ -961,7 +1001,7 @@ const SpinLoader = memo(function () {
                         onClick={onClick}
                         variant={!isActive ? 'link' : 'default'}
                         className={clsx(
-                          'delay-50 flex gap-2 font-bold duration-300',
+                          'delay-50 flex justify-start gap-2 font-bold  duration-300 md:justify-center',
                           {}
                         )}
                       >

From cf4fa261f4ea6c79d89b449fdbec080672621d3e Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 02:44:52 -0400
Subject: [PATCH 12/30] style: update styles in movile dispositives the
 notification view

---
 src/pages/_layout/notification.tsx | 129 ++++++++++++++++++-----------
 1 file changed, 81 insertions(+), 48 deletions(-)

diff --git a/src/pages/_layout/notification.tsx b/src/pages/_layout/notification.tsx
index 96a3b85..03c8592 100644
--- a/src/pages/_layout/notification.tsx
+++ b/src/pages/_layout/notification.tsx
@@ -1,12 +1,18 @@
 import { Separator } from '@/components/ui/separator'
 import { createFileRoute } from '@tanstack/react-router'
-import { useNotifications } from "@/lib/context/notification";
-import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { X as Close, Cross, Zap } from 'lucide-react';
-import clsx from 'clsx';
-import { format } from 'date-fns';
-import { Badge } from "@/components/ui/badge";
-import { useEffect } from 'react';
+import { useNotifications } from '@/lib/context/notification'
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { X as Close, Cross, Zap } from 'lucide-react'
+import clsx from 'clsx'
+import { format } from 'date-fns'
+import { Badge } from '@/components/ui/badge'
+import { useEffect } from 'react'
 
 export const Route = createFileRoute('/_layout/notification')({
   component: Notifications,
@@ -16,62 +22,89 @@ export const Route = createFileRoute('/_layout/notification')({
 export function Notifications() {
   const { notifications, deleteNotificationById } = useNotifications()
 
-  useEffect( () => {
-    document.title = import.meta.env.VITE_NAME + " | " + text.browser
-  }, [] )
+  useEffect(() => {
+    document.title = import.meta.env.VITE_NAME + ' | ' + text.browser
+  }, [])
 
-  const onDelete: (index: number) => React.MouseEventHandler< HTMLSpanElement > = ( index ) => (  ) => {
-    const notification = notifications?.[index]
-    if(!notification || !notification?.id) return;
-    deleteNotificationById( notification.id ) 
-  }
+  const onDelete: (index: number) => React.MouseEventHandler<HTMLSpanElement> =
+    (index) => () => {
+      const notification = notifications?.[index]
+      if (!notification || !notification?.id) return
+      deleteNotificationById(notification.id)
+    }
 
   return (
-    <div className='space-y-2'>
+    <div className="space-y-2">
       <div className="flex items-center gap-2">
-        <h1 className="text-3xl font-bold">{text.title}</h1>
-        {!!notifications?.length && <Badge className="px-3 text-xl"> {notifications?.length} </Badge>}
+        <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
+        {!!notifications?.length && (
+          <Badge className="px-3 text-xl"> {notifications?.length} </Badge>
+        )}
       </div>
       <Separator />
-      <div className='space-y-6 py-2'>
-      { !notifications?.length && <p> {text.notfound} </p> }
-      { !!notifications?.length && notifications?.reverse()?.map( ({ id: notificationId, description, action, date }, index) => 
-        notificationId && <Card key={index} className={clsx('shadow-lg space-y-2 ring-2', {
-            "ring-green-500": action === "POST",
-            "ring-blue-500": action === "PATH",
-            "ring-red-500": action === "DELETE",
-          })}>
-            <CardHeader>
-              
-              <span onClick={onDelete(index)} className='p-1 ms-auto rounded-full [&>svg]:stroke-destructive hover:bg-destructive [&>svg]:hover:stroke-secondary cursor-pointer transition delay-150 duration-300 [&>svg]:transition [&>svg]:dalay-150 [&>svg]:duration-300'>
-                <Close className='p-1' />
-              </span>
-              <CardTitle className='flex items-center gap-4'> <ActionIcon action={action} />  {getAction(action)} </CardTitle>
-              <CardDescription className='text-lg'> <p>{description}</p> </CardDescription>
-            </CardHeader>
-            <CardFooter className='flex justify-end'>
-              <div><Badge>{format(date, "dd-MM-yyyy")}</Badge></div>
-            </CardFooter>
-        </Card> 
-      ) }
+      <div className="space-y-4 py-2 md:space-y-4">
+        {!notifications?.length && <p> {text.notfound} </p>}
+        {!!notifications?.length &&
+          notifications?.reverse()?.map(
+            ({ id: notificationId, description, action, date }, index) =>
+              notificationId && (
+                <Card
+                  key={index}
+                  className={clsx('shadow-lg ring-2', {
+                    'ring-green-500': action === 'POST',
+                    'ring-blue-500': action === 'PATH',
+                    'ring-red-500': action === 'DELETE',
+                  })}
+                >
+                  <CardHeader>
+                    <span
+                      onClick={onDelete(index)}
+                      className="[&>svg]:dalay-150 ms-auto cursor-pointer rounded-full p-1 transition delay-150 duration-300 hover:bg-destructive [&>svg]:stroke-destructive [&>svg]:transition [&>svg]:duration-300 [&>svg]:hover:stroke-secondary"
+                    >
+                      <Close className="p-1" />
+                    </span>
+                    <CardTitle className="flex items-center gap-2 md:gap-4">
+                      {' '}
+                      <ActionIcon action={action} /> {getAction(action)}{' '}
+                    </CardTitle>
+                    <CardDescription className="text-sm md:text-base">
+                      {' '}
+                      <p>{description}</p>{' '}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardFooter className="flex justify-end">
+                    <div>
+                      <Badge>{format(date, 'dd-MM-yyyy')}</Badge>
+                    </div>
+                  </CardFooter>
+                </Card>
+              )
+          )}
       </div>
     </div>
   )
 }
 
 /* eslint-disable-next-line */
-export function ActionIcon({ action }: {action: "POST" | "PATH" | "DELETE"}) {
-  if( action ===   "DELETE") return <Cross className='rotate-45 stroke-red-500 ring-2 ring-red-500 rounded-full' />;
-  if( action ===   "PATH") return <Zap className='stroke-blue-500 ring-2 ring-blue-500 rounded-full' />;
-  if( action ===   "POST") return <Cross className='stroke-green-500 ring-2 ring-green-500 rounded-full' />;
+export function ActionIcon({ action }: { action: 'POST' | 'PATH' | 'DELETE' }) {
+  if (action === 'DELETE')
+    return (
+      <Cross className="rotate-45 rounded-full stroke-red-500 ring-2 ring-red-500" />
+    )
+  if (action === 'PATH')
+    return <Zap className="rounded-full stroke-blue-500 ring-2 ring-blue-500" />
+  if (action === 'POST')
+    return (
+      <Cross className="rounded-full stroke-green-500 ring-2 ring-green-500" />
+    )
   return <Zap />
 }
 
-const getAction = (action: "POST" | "PATH" | "DELETE") => {
-  if( action ===   "DELETE") return "Eliminacion";
-  if( action ===   "PATH") return "Actualizacion";
-  if( action ===   "POST") return "Creacion";
-  return ""
+const getAction = (action: 'POST' | 'PATH' | 'DELETE') => {
+  if (action === 'DELETE') return 'Eliminacion'
+  if (action === 'PATH') return 'Actualizacion'
+  if (action === 'POST') return 'Creacion'
+  return ''
 }
 
 Notifications.dispalyname = 'Notification'

From d13eef5042ee9f2003b754b80c89403ee54eb04e Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 02:50:21 -0400
Subject: [PATCH 13/30] style: update styles in movile dispositives the report
 view

---
 src/pages/_layout/report.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index 91cb991..c26beaf 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -70,9 +70,9 @@ export function Report() {
 
   return (
     <div className="space-y-4">
-      <h1 className="text-3xl font-bold">{text.title}</h1>
+      <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
       <Separator />
-      <Accordion className="my-2 space-y-2" type="multiple">
+      <Accordion className="my-2 space-y-2" type="single">
         {reports.map(({ nombre, parametros, id, comentario}, index) => (
           <AccordionItem
             key={id}
@@ -89,7 +89,7 @@ export function Report() {
               <form
                 ref={form?.[index]}
                 onSubmit={onSubmit(index)}
-                className="grid grid-cols-2 gap-4 px-6 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
+                className="grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
                 id={'report' + id}
               >
                 {parametros.map(({ nombre, id, tipo_dato, obligatorio }) => (

From 09f8be877093fc65fe04a9e8bd3ab2210bc95211 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 03:41:30 -0400
Subject: [PATCH 14/30] style: update styles in movile dispositives the report
 view

---
 src/pages/_layout/report.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index c26beaf..5ee0b21 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -81,15 +81,15 @@ export function Report() {
           >
             <AccordionTrigger className="group !no-underline">
               <div className="place-contents-start flex flex-col place-items-start p-2 text-start">
-                <p className="text-lg font-bold"> {nombre} </p>
-                <p className="text-base text-muted-foreground"> {comentario} </p>
+                <p className="text-base md:text-lg font-bold"> {nombre} </p>
+                <p className="text-sm md:text-base text-muted-foreground"> {comentario} </p>
               </div>
             </AccordionTrigger>
             <AccordionContent className="space-y-2">
               <form
                 ref={form?.[index]}
                 onSubmit={onSubmit(index)}
-                className="grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
+                className="px-1 grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
                 id={'report' + id}
               >
                 {parametros.map(({ nombre, id, tipo_dato, obligatorio }) => (

From 59eb8b9add5cf300167711857105491c30d83190 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 03:41:59 -0400
Subject: [PATCH 15/30] style: added styles in movile dispositives
 compatibility in the layout

---
 src/main.tsx          |  6 ++--
 src/pages/_layout.tsx | 77 +++++++++++++++++++++++++++++--------------
 2 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 4211336..a8084a0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,9 +9,9 @@ import {
 import { routeTree } from './routeTree.gen'
 
 async function enableMocking() {
-  if (!+import.meta.env.VITE_MSW || !import.meta.env.DEV) {
-    return
-  }
+  // if (!+import.meta.env.VITE_MSW || !import.meta.env.DEV) {
+  //   return
+  // }
   const { worker } = await import('@/mocks/config')
   return worker.start()
 }
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 3f4e1a3..a25bdbd 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -156,7 +156,8 @@ export const Route = createFileRoute('/_layout')({
 /* eslint-disable-next-line */
 interface TStatus {
   offline?: boolean
-  menu?: boolean
+  navmenu?: boolean
+  usermenu?: boolean
   calendar?: boolean
   search?: boolean
 }
@@ -168,10 +169,13 @@ const reducer: React.Reducer<TStatus, TStatus> = (prev, state) => {
 /* eslint-disable-next-line */
 export function Layout() {
   const { deleteToken, setUserId, userId, name, setRol, rol } = useToken()
-  const [{ offline, menu, calendar }, setStatus] = useReducer(reducer, {
-    offline: navigator.onLine,
-    menu: false,
-  })
+  const [{ offline, navmenu, calendar, usermenu }, setStatus] = useReducer(
+    reducer,
+    {
+      offline: navigator.onLine,
+      navmenu: false,
+    }
+  )
   const { open, setOpen } = useStatus()
   const { setValue, setSearch, search, value } = useStatus()
   const {
@@ -375,18 +379,18 @@ export function Layout() {
         className={clsx(
           'row-span-full hidden rounded-lg bg-primary-foreground p-4 text-primary shadow-lg hover:shadow-xl xl:block xl:h-[100dvh]',
           {
-            [styles?.['menu-animation']]: !menu,
-            [styles?.['menu-animation-reverse']]: menu,
+            [styles?.['menu-animation']]: !navmenu,
+            [styles?.['menu-animation-reverse']]: navmenu,
           }
         )}
       >
         <Link to={'/'}>
           <img
             alt="brand"
-            src={!menu ? brand : brandOff}
+            src={!navmenu ? brand : brandOff}
             className={clsx('aspect-contain', {
-              'h-24': !menu,
-              'h-16': menu,
+              'h-24': !navmenu,
+              'h-16': navmenu,
             })}
           />
         </Link>
@@ -403,10 +407,10 @@ export function Layout() {
                         <Button
                           variant={!isActive ? 'link' : 'default'}
                           className={clsx('delay-50 font-bold duration-300', {
-                            'p-2': menu,
+                            'p-2': navmenu,
                           })}
                         >
-                          {!menu ? title : <Icon />}
+                          {!navmenu ? title : <Icon />}
                         </Button>
                       )}
                     </Link>
@@ -417,7 +421,7 @@ export function Layout() {
         </div>
         <Separator className="my-4" />
         <div className="grid place-items-center">
-          {!menu ? (
+          {!navmenu ? (
             <Calendar
               key={'calendar'}
               className="rounded-xl bg-secondary-foreground text-muted-foreground ring-1 ring-secondary"
@@ -427,7 +431,7 @@ export function Layout() {
             <Popover onOpenChange={onclick(setStatus, { calendar: !calendar })}>
               <PopoverTrigger>
                 <Button
-                  className={clsx({ 'p-2': menu })}
+                  className={clsx({ 'p-2': navmenu })}
                   variant={!calendar ? 'outline' : 'default'}
                 >
                   <CalendarIcon />
@@ -449,8 +453,8 @@ export function Layout() {
           <div className="[&>button]:px-2">
             <Button
               className="hidden xl:block"
-              variant={!menu ? 'default' : 'outline'}
-              onClick={onclick(setStatus, { menu: !menu })}
+              variant={!navmenu ? 'default' : 'outline'}
+              onClick={onclick(setStatus, { navmenu: !navmenu })}
             >
               <MenuSquare />
             </Button>
@@ -471,10 +475,9 @@ export function Layout() {
             />
           </div>
           <div>
-            <Label className="group relative hidden items-center justify-center gap-1 rounded-lg md:flex xl:flex-row-reverse">
-              <Search className="translate-x-36 opacity-100 transition delay-150 duration-300 group-focus-within:invisible group-focus-within:-translate-x-2 group-focus:opacity-0 xl:hidden" />
+            <Label className="group hidden items-center justify-center gap-2 rounded-lg md:flex md:gap-1 xl:flex-row-reverse">
               <Input
-                className="origin-right scale-x-[30%] transition delay-150 duration-300 placeholder:invisible focus-within:scale-x-[100%] focus:placeholder:visible xl:scale-x-[100%] xl:placeholder:visible"
+                className="invisible origin-right scale-x-[0%] transition delay-150 duration-300 placeholder:invisible group-hover:visible group-hover:scale-x-[100%] group-hover:placeholder:visible xl:scale-x-[100%] xl:placeholder:visible"
                 type="search"
                 placeholder={text.search.placeholder({
                   pathname: rchild?.at(0)?.pathname,
@@ -483,6 +486,12 @@ export function Layout() {
                 onKeyDown={onKeyDown}
                 value={value}
               />
+              <Button
+                variant="ghost"
+                className="duration-450 px-2 opacity-100 transition delay-300 group-hover:invisible group-hover:opacity-0 xl:hidden"
+              >
+                <Search />
+              </Button>
               <Popover open={search} onOpenChange={onSearchChange}>
                 <PopoverTrigger>
                   <Button
@@ -574,8 +583,15 @@ export function Layout() {
               {theme === 'dark' ? <Moon /> : <Sun />}
               <Switch checked={theme === 'dark'} onCheckedChange={onSwitch} />
             </Label>
-            <HoverCard>
-              <HoverCardTrigger>
+            <HoverCard
+              open={usermenu}
+              onOpenChange={(value) =>
+                onclick(setStatus, { usermenu: value })()
+              }
+            >
+              <HoverCardTrigger
+                onClick={onclick(setStatus, { usermenu: !usermenu })}
+              >
                 <Badge className="cursor-pointer text-sm" variant="outline">
                   {(name ?? 'User')
                     .split(' ')
@@ -737,6 +753,13 @@ const SpinLoader = memo<TSpinLoader>(function ({ onChange, rchild, value }) {
     setMenu(!menu)
   }
 
+  const onSearch: React.MouseEventHandler<
+    React.ComponentRef<typeof Button>
+  > = () => {
+    if (!value || value === '') return
+    setMenu(!menu)
+  }
+
   const onKeyDown: React.KeyboardEventHandler<
     React.ComponentRef<typeof Input>
   > = (ev) => {
@@ -976,8 +999,7 @@ const SpinLoader = memo<TSpinLoader>(function ({ onChange, rchild, value }) {
         <img alt="brand" src={brand} className={clsx('aspect-contain h-12')} />
       </PopoverTrigger>
       <PopoverContent className="min-sm:rounded-t-none w-screen space-y-2 shadow-xl md:mx-4 md:mt-4 md:w-[96dvw]">
-        <div className="flex items-center gap-3 px-4 md:hidden">
-          <Search />
+        <Label className="flex items-center gap-2 px-4 md:hidden">
           <Input
             type="search"
             placeholder={text.search.placeholder({
@@ -987,7 +1009,14 @@ const SpinLoader = memo<TSpinLoader>(function ({ onChange, rchild, value }) {
             value={value}
             onKeyDown={onKeyDown}
           />
-        </div>
+          <Button
+            variant="outline"
+            className="duration-450 px-2 opacity-100 transition delay-300 group-hover:invisible group-hover:opacity-0 xl:hidden"
+            onClick={onSearch}
+          >
+            <Search />
+          </Button>
+        </Label>
         <Separator className="my-2" />
         <ul className="space-y-3 px-4 md:px-20 [&_button]:w-full">
           {Object.entries(translate())

From 8d8077ab8b6e32c8d77f99d854455f1285d4cd1c Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 12:55:46 -0400
Subject: [PATCH 16/30] styles: fix styles in users layout clients and credit
 list  pages

---
 src/pages/_layout.tsx        |  5 ++-
 src/pages/_layout/client.tsx | 84 ++++++++++++++++++------------------
 src/pages/_layout/credit.tsx |  2 +-
 src/pages/_layout/user.tsx   |  2 +-
 4 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index a25bdbd..5891355 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -324,7 +324,8 @@ export function Layout() {
     if (
       key === 'Enter' &&
       pathname !== ('/user' as TSearch) &&
-      pathname !== ('/client' as TSearch)
+      pathname !== ('/client' as TSearch) &&
+      pathname !== ('/credit' as TSearch)
     ) {
       setSearch({ search: !search })
     }
@@ -477,7 +478,7 @@ export function Layout() {
           <div>
             <Label className="group hidden items-center justify-center gap-2 rounded-lg md:flex md:gap-1 xl:flex-row-reverse">
               <Input
-                className="invisible origin-right scale-x-[0%] transition delay-150 duration-300 placeholder:invisible group-hover:visible group-hover:scale-x-[100%] group-hover:placeholder:visible xl:scale-x-[100%] xl:placeholder:visible"
+                className="origin-right scale-x-[0%] transition delay-150 duration-300 placeholder:invisible group-hover:visible group-hover:scale-x-[100%] group-hover:placeholder:visible xl:scale-x-[100%] xl:placeholder:visible"
                 type="search"
                 placeholder={text.search.placeholder({
                   pathname: rchild?.at(0)?.pathname,
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 1c8cf56..454d8be 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -212,51 +212,57 @@ export function Clients() {
       <_rowSelected.Provider value={table.resetRowSelection}>
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
+            <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
             {!!clientsRes?.length && (
               <Badge className="px-3 text-lg md:text-xl">
                 {table.getFilteredRowModel().rows.length}
               </Badge>
             )}
-          </div>
-          <Separator />
-          <div>
-            <div className="flex items-center gap-2 py-4">
-              <Dialog open={open} onOpenChange={onOpenChange}>
+            <Dialog open={open} onOpenChange={onOpenChange}>
+              <DialogTrigger asChild className="ms-auto">
+                <Link to={'./new'}>
+                  <Button variant="default">{text.buttons.new}</Button>
+                </Link>
+              </DialogTrigger>
+              {!!userId && rol?.rolName === 'Administrador' && (
                 <DialogTrigger asChild>
-                  <Link to={'./new'}>
-                    <Button variant="default">{text.buttons.new}</Button>
-                  </Link>
-                </DialogTrigger>
-                {!!userId && rol?.rolName === 'Administrador' && (
-                  <DialogTrigger asChild>
-                    <Link
+                  <Link
+                    disabled={!table.getFilteredSelectedRowModel().rows?.length}
+                    to={'./delete'}
+                    search={{
+                      clients: table
+                        .getFilteredSelectedRowModel()
+                        ?.rows?.map(({ original }) => original.id),
+                    }}
+                  >
+                    <Button
+                      className={clsx({
+                        'bg-destructive hover:bg-destructive':
+                          table.getFilteredSelectedRowModel().rows?.length,
+                      })}
                       disabled={
                         !table.getFilteredSelectedRowModel().rows?.length
                       }
-                      to={'./delete'}
-                      search={{
-                        clients: table
-                          .getFilteredSelectedRowModel()
-                          ?.rows?.map(({ original }) => original.id),
-                      }}
                     >
-                      <Button
-                        className={clsx({
-                          'bg-destructive hover:bg-destructive':
-                            table.getFilteredSelectedRowModel().rows?.length,
-                        })}
-                        disabled={
-                          !table.getFilteredSelectedRowModel().rows?.length
-                        }
-                      >
-                        {text.buttons.delete}
-                      </Button>
-                    </Link>
-                  </DialogTrigger>
-                )}
-                <Outlet />
-              </Dialog>
+                      {text.buttons.delete}
+                    </Button>
+                  </Link>
+                </DialogTrigger>
+              )}
+              <Outlet />
+            </Dialog>
+          </div>
+          <Separator />
+          <div>
+            <div className="flex items-center gap-2 py-4">
+              {!!table.getRowCount() && (
+                <p className="hidden text-sm text-muted-foreground xl:block">
+                  {text.search.selected({
+                    selected: table.getFilteredSelectedRowModel().rows.length,
+                    total: table.getFilteredRowModel().rows.length,
+                  })}
+                </p>
+              )}
               <Select value={filter} onValueChange={onValueChange}>
                 <SelectTrigger
                   title="Filtro de busqueda"
@@ -329,7 +335,7 @@ export function Clients() {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="xl:block overflow-x-auto rounded-md bg-background ring-1 ring-border">
+            <div className="overflow-x-auto rounded-md bg-background ring-1 ring-border xl:block">
               <Table>
                 <TableHeader className="bg-muted">
                   {table.getHeaderGroups().map((headerGroup) => (
@@ -390,12 +396,6 @@ export function Clients() {
               </Table>
             </div>
             <div className="flex items-center justify-end space-x-2 py-4">
-              <div className="flex-1 text-sm text-muted-foreground">
-                {text.search.selected({
-                  selected: table.getFilteredSelectedRowModel().rows.length,
-                  total: table.getFilteredRowModel().rows.length,
-                })}
-              </div>
               <div className="space-x-2">
                 <Button
                   variant="outline"
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index 99723ba..ce1d05a 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -357,7 +357,7 @@ export function Credits() {
         <Separator />
         {!!credits?.length && (
           <div className="flex xl:items-center">
-            <p className="hidden text-muted-foreground xl:block">
+            <p className="hidden text-sm text-muted-foreground xl:block">
               {text.select({
                 total: credits?.length,
               })}
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 5541ed4..ec631df 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -336,7 +336,7 @@ export function Users() {
         <Separator />
         {!!users?.length && (
           <div className="flex items-center">
-            <p className="hidden text-muted-foreground xl:block">
+            <p className="hidden text-sm text-muted-foreground xl:block">
               {text.select({
                 select: users?.filter(({ selected }) => selected)?.length,
                 total: usersRes?.length,

From 59711ef3d669aa971693742b05e1928a0cfe55d2 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 13:17:16 -0400
Subject: [PATCH 17/30] style: create table component for a credit id page

---
 src/pages/_layout/credit_/$creditId.tsx | 150 +++------------------
 src/pages/_layout/credit_/-table.tsx    | 165 ++++++++++++++++++++++++
 2 files changed, 183 insertions(+), 132 deletions(-)
 create mode 100644 src/pages/_layout/credit_/-table.tsx

diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index ddbc0ae..4ed44f4 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -7,15 +7,6 @@ import {
 import { type TCREDIT_GET, getCreditById } from '@/api/credit'
 import { Separator } from '@/components/ui/separator'
 import { Switch } from '@/components/ui/switch'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import clsx from 'clsx'
 import { Button } from '@/components/ui/button'
 import { Annoyed, Printer } from 'lucide-react'
@@ -44,6 +35,7 @@ import { postCreditOpt } from '@/pages/_layout/credit/new'
 import { deleteCreditByIdOpt } from '@/pages/_layout/credit_/$creditId/delete'
 import { useToken } from '@/lib/context/login'
 import { redirect } from '@tanstack/react-router'
+import { PaymentTable } from './-table'
 
 export const getCreditByIdOpt = ({ creditId }: { creditId: string }) => ({
   queryKey: ['get-credit-by-id', { creditId }],
@@ -126,12 +118,6 @@ export function CreditById() {
     setOpen({ open })
   }
 
-  const onPrint: React.MouseEventHandler<
-    React.ComponentRef<typeof Button>
-  > = () => {
-    onOpenChange(!open)
-  }
-
   const table = useMemo(
     () =>
       credit?.pagos?.map((_, i, list) => ({
@@ -183,10 +169,14 @@ export function CreditById() {
       <_credit.Provider value={credit}>
         <div className="space-y-4">
           <div className="flex gap-2">
-            <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
+            <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
             <Dialog open={open} onOpenChange={onOpenChange}>
-              <DialogTrigger  asChild>
-                <Link to={'./print'} disabled={credit?.pagos?.length <= 0} className='hidden xl:block xl:ms-auto'>
+              <DialogTrigger asChild>
+                <Link
+                  to={'./print'}
+                  disabled={credit?.pagos?.length <= 0}
+                  className="hidden xl:ms-auto xl:block"
+                >
                   <Button
                     variant="outline"
                     className="hover:ring hover:ring-primary"
@@ -196,7 +186,7 @@ export function CreditById() {
                   </Button>
                 </Link>
               </DialogTrigger>
-              <DialogTrigger asChild className='ms-auto xl:ms-0'>
+              <DialogTrigger asChild className="ms-auto xl:ms-0">
                 <Link to={'./pay'}>
                   <Button
                     variant="default"
@@ -226,7 +216,10 @@ export function CreditById() {
             </Dialog>
           </div>
           <Separator />
-          <h2 className="text-xl md:text-2xl font-bold"> {text.details.title} </h2>
+          <h2 className="text-xl font-bold md:text-2xl">
+            {' '}
+            {text.details.title}{' '}
+          </h2>
           <ul className="flex flex-col gap-2 px-2 [&>li]:space-x-2">
             <li>
               <b>{text.details.status + ':'}</b>
@@ -315,102 +308,13 @@ export function CreditById() {
           </ul>
           <Separator />
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
-            <h2 className="text-xl md:text-2xl font-bold"> {text.cuotes.title} </h2>
+            <h2 className="text-xl font-bold md:text-2xl">
+              {' '}
+              {text.cuotes.title}{' '}
+            </h2>
           )}
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
-            <Table className="rounded-xl bg-background hidden xl:table">
-              <TableHeader className="bg-muted [&_th]:text-center">
-                <TableRow>
-                  <TableHead></TableHead>
-                  <TableHead>{text.cuotes.payDate}</TableHead>
-                  <TableHead>{text.cuotes.payValue}</TableHead>
-                  <TableHead>{text.cuotes.installmantsDate}</TableHead>
-                  <TableHead>{text.cuotes.payInstallmants}</TableHead>
-                  <TableHead>{text.cuotes.payStatus}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="[&_td>*]:text-center">
-                {table?.map(({ payment, cuote }, index) => (
-                  <TableRow key={index} className="group">
-                    <TableCell className="relative flex w-20 items-center justify-center">
-                      <p className="trasition font-bold opacity-100 delay-150 duration-300 group-hover:opacity-0">
-                        {index + 1}
-                      </p>
-                      <Link
-                        to={'./print'}
-                        search={{ index }}
-                        className="z-index absolute hidden xl:block"
-                      >
-                        <Button
-                          onClick={onPrint}
-                          variant="ghost"
-                          className="opacity-0 hover:ring hover:ring-primary group-hover:opacity-100"
-                          disabled={credit?.pagos?.length <= 0}
-                        >
-                          <Printer />
-                        </Button>
-                      </Link>
-                    </TableCell>
-                    <TableCell>
-                      <ul>
-                        <li className='before:font-bold before:text-destructive before:content-["_-_"]'>
-                          {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy')}
-                        </li>
-                        <li className='before:font-bold before:text-success before:content-["_+_"]'>
-                          {format(
-                            new Date(payment?.fecha_de_pago),
-                            'dd/MM/yyyy'
-                          )}
-                        </li>
-                      </ul>
-                    </TableCell>
-                    <TableCell>
-                      <p>
-                        <b>$</b>
-                        {payment?.valor_del_pago?.toFixed(2)}
-                      </p>
-                    </TableCell>
-                    <TableCell>
-                      <p>
-                        {cuote?.valor_de_mora > 0
-                          ? format(
-                              new Date(cuote?.fecha_de_aplicacion_de_mora),
-                              'dd/MM/yyyy'
-                            )
-                          : '-'}
-                      </p>
-                    </TableCell>
-                    <TableCell>
-                      <p>
-                        {cuote?.valor_de_mora > 0 ? (
-                          <>
-                            <b>$</b> {cuote?.valor_de_mora?.toFixed(2)}
-                          </>
-                        ) : (
-                          '-'
-                        )}
-                      </p>
-                    </TableCell>
-                    <TableCell className="flex justify-center">
-                      <Switch
-                        checked={cuote?.pagada}
-                        className={'cursor-not-allowed'}
-                      ></Switch>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={5} className="font-bold">
-                    <p>{text.cuotes.total + ':'}</p>
-                  </TableCell>
-                  <TableCell colSpan={2} className="text-right">
-                    <GetPay credit={credit} />
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
+            <PaymentTable credit={credit} table={table} />
           )}
         </div>
       </_credit.Provider>
@@ -520,24 +424,6 @@ export function Error() {
   )
 }
 
-/* eslint-disable-next-line */
-function GetPay({ credit }: { credit: TCREDIT_GET }) {
-  if (!credit.cuotas || !credit.pagos) return
-
-  return (
-    <p>
-      <b>$</b>
-      {credit.pagos
-        .map(({ valor_del_pago }) => valor_del_pago)
-        .reduce((prev, acc) => (acc += prev))
-        ?.toFixed(2)}
-      <b>&#8193;/&#8193;</b>
-      <b>$</b>
-      {credit?.monto}
-    </p>
-  )
-}
-
 CreditById.dispalyname = 'CreditById'
 Pending.dispalyname = 'CreditByIdPending'
 Error.dispalyname = 'CreditByIdError'
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
new file mode 100644
index 0000000..04bfd06
--- /dev/null
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -0,0 +1,165 @@
+import type { TCREDIT_GET, TCUOTE } from '@/api/credit'
+import type { TPAYMENT_GET_BASE } from '@/api/payment'
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { useStatus } from '@/lib/context/layout'
+import { useNavigate } from '@tanstack/react-router'
+import { Link } from '@tanstack/react-router'
+import { format } from 'date-fns'
+import { Printer } from 'lucide-react'
+import { Route } from '@/pages/_layout/credit_/$creditId'
+import { Switch } from '@radix-ui/react-switch'
+
+/* eslint-disable-next-line */
+type TData = {
+  payment: TPAYMENT_GET_BASE
+  cuote: TCUOTE
+}
+
+/* eslint-disable-next-line */
+type TPaymentTable = {
+  table: TData[]
+  credit: TCREDIT_GET
+}
+
+/* eslint-disable-next-line */
+export function PaymentTable({ table, credit }: TPaymentTable) {
+  const { open, setOpen } = useStatus()
+  const navigate = useNavigate()
+
+  const onPrint: React.MouseEventHandler<
+    React.ComponentRef<typeof Button>
+  > = () => {
+    if (!open) {
+      navigate({ to: Route.to })
+    }
+    setOpen({ open: !open })
+  }
+  return (
+    <Table className="hidden rounded-xl bg-background xl:table">
+      <TableHeader className="bg-muted [&_th]:text-center">
+        <TableRow>
+          <TableHead></TableHead>
+          <TableHead>{text.payDate}</TableHead>
+          <TableHead>{text.payValue}</TableHead>
+          <TableHead>{text.installmantsDate}</TableHead>
+          <TableHead>{text.payInstallmants}</TableHead>
+          <TableHead>{text.payStatus}</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody className="[&_td>*]:text-center">
+        {table?.map(({ payment, cuote }, index) => (
+          <TableRow key={index} className="group">
+            <TableCell className="relative flex w-20 items-center justify-center">
+              <p className="trasition h-full font-bold opacity-100 delay-150 duration-300 group-hover:opacity-0">
+                {index + 1}
+              </p>
+              <Link
+                to={'./print'}
+                search={{ index }}
+                className="z-index absolute hidden xl:block"
+              >
+                <Button
+                  onClick={onPrint}
+                  variant="ghost"
+                  className="opacity-0 hover:ring hover:ring-primary group-hover:opacity-100"
+                  disabled={credit?.pagos?.length <= 0}
+                >
+                  <Printer />
+                </Button>
+              </Link>
+            </TableCell>
+            <TableCell>
+              <ul>
+                <li className='before:font-bold before:text-destructive before:content-["_-_"]'>
+                  {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy')}
+                </li>
+                <li className='before:font-bold before:text-success before:content-["_+_"]'>
+                  {format(new Date(payment?.fecha_de_pago), 'dd/MM/yyyy')}
+                </li>
+              </ul>
+            </TableCell>
+            <TableCell>
+              <p>
+                <b>$</b>
+                {payment?.valor_del_pago?.toFixed(2)}
+              </p>
+            </TableCell>
+            <TableCell>
+              <p>
+                {cuote?.valor_de_mora > 0
+                  ? format(
+                      new Date(cuote?.fecha_de_aplicacion_de_mora),
+                      'dd/MM/yyyy'
+                    )
+                  : '-'}
+              </p>
+            </TableCell>
+            <TableCell>
+              <p>
+                {cuote?.valor_de_mora > 0 ? (
+                  <>
+                    <b>$</b> {cuote?.valor_de_mora?.toFixed(2)}
+                  </>
+                ) : (
+                  '-'
+                )}
+              </p>
+            </TableCell>
+            <TableCell className="flex justify-center">
+              <Switch
+                checked={cuote?.pagada}
+                className={'cursor-not-allowed'}
+              ></Switch>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={5} className="font-bold">
+            <p>{text.total + ':'}</p>
+          </TableCell>
+          <TableCell colSpan={2} className="text-right">
+            <GetPay credit={credit} />
+          </TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
+
+/* eslint-disable-next-line */
+function GetPay({ credit }: { credit: TCREDIT_GET }) {
+  if (!credit.cuotas || !credit.pagos) return
+
+  return (
+    <p>
+      <b>$</b>
+      {credit.pagos
+        .map(({ valor_del_pago }) => valor_del_pago)
+        .reduce((prev, acc) => (acc += prev))
+        ?.toFixed(2)}
+      <b>&#8193;/&#8193;</b>
+      <b>$</b>
+      {credit?.monto}
+    </p>
+  )
+}
+
+const text = {
+  payDate: 'Fecha de pago',
+  installmantsDate: 'Fecha de aplicacion de mora',
+  payValue: 'Monto del pago',
+  payInstallmants: 'Monto de la mora',
+  payStatus: 'Pagada',
+  total: 'Monto total',
+}

From edde56ad5f4e4901c21b3873d0995bbdd61ff206 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 14:55:21 -0400
Subject: [PATCH 18/30] style: create table component for a credit id table
 page

---
 src/lib/hook/useScreens.ts           | 32 +++++++++++++
 src/pages/_layout/credit_/-table.tsx | 71 +++++++++++++++++++++++++++-
 2 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/hook/useScreens.ts

diff --git a/src/lib/hook/useScreens.ts b/src/lib/hook/useScreens.ts
new file mode 100644
index 0000000..4295c68
--- /dev/null
+++ b/src/lib/hook/useScreens.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { screens } from 'tailwindcss/defaultTheme'
+
+/* eslint-disable-next-line */
+type TScreen = 'sm' | 'md' | 'lg'
+
+/* eslint-disable-next-line */
+type TUseScreens = () => TScreen
+
+/* eslint-disable-next-line */
+export const useScreen: TUseScreens = () => {
+  const [theme, setTheme] = useState<TScreen>('sm')
+  useEffect(() => {
+    const onChange = () => {
+      if (window.innerWidth >= +screens.md?.replace(/px/g, '')) {
+        setTheme('md')
+      }
+
+      if (window.innerWidth >= +screens.lg?.replace(/px/g, '')) {
+        setTheme('lg')
+      }
+    }
+    window.addEventListener('resize', onChange)
+    onChange()
+
+    return () => {
+      window.removeEventListener('resize', onChange)
+    }
+  }, [])
+
+  return theme
+}
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index 04bfd06..3ec01af 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -16,7 +16,9 @@ import { Link } from '@tanstack/react-router'
 import { format } from 'date-fns'
 import { Printer } from 'lucide-react'
 import { Route } from '@/pages/_layout/credit_/$creditId'
-import { Switch } from '@radix-ui/react-switch'
+import { Switch } from '@/components/ui/switch'
+import { useScreen } from '@/lib/hook/useScreens'
+import { Badge } from '@/components/ui/badge'
 
 /* eslint-disable-next-line */
 type TData = {
@@ -34,6 +36,7 @@ type TPaymentTable = {
 export function PaymentTable({ table, credit }: TPaymentTable) {
   const { open, setOpen } = useStatus()
   const navigate = useNavigate()
+  const screen = useScreen()
 
   const onPrint: React.MouseEventHandler<
     React.ComponentRef<typeof Button>
@@ -43,8 +46,72 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
     }
     setOpen({ open: !open })
   }
+
+  if (screen !== 'lg')
+    return (
+      <Table className="rounded-xl bg-background">
+        <TableBody className="[&_td>*]:text-center">
+          {table?.map(({ payment, cuote }, index) => (
+            <TableRow key={index} className="group">
+              <TableCell className="flex flex-col items-stretch gap-2 px-8 [&>*]:flex [&>*]:items-center">
+                <div className=" justify-end gap-2">
+                  <Badge>{index + 1}</Badge>
+                  <Switch
+                    checked={cuote?.pagada}
+                    className={'cursor-not-allowed'}
+                  ></Switch>
+                </div>
+                <ul className="list-outside list-disc flex-col !items-start">
+                  <li className='before:font-bold before:text-destructive before:content-["_-_"]'>
+                    <b>Fecha de cuota:</b>{' '}
+                    {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy') + '.'}
+                  </li>
+
+                  <li className='before:font-bold before:text-success before:content-["_+_"]'>
+                    <b>Fecha de pago:</b>
+                    {format(new Date(payment?.fecha_de_pago), 'dd/MM/yyyy') +
+                      '.'}
+                  </li>
+
+                  <li>
+                    <b>Valor pagado:</b> <b>$</b>{' '}
+                    {payment?.valor_del_pago?.toFixed(2) + '.'}
+                  </li>
+
+                  {cuote?.valor_de_mora > 0 && (
+                    <li>
+                      <b>Fecha de Mora:</b>{' '}
+                      {format(
+                        new Date(cuote?.fecha_de_aplicacion_de_mora),
+                        'dd/MM/yyyy'
+                      ) + '.'}
+                    </li>
+                  )}
+
+                  {cuote?.valor_de_mora > 0 && (
+                    <li>
+                      <b>Mora:</b> <b>$</b>{' '}
+                      {cuote?.valor_de_mora?.toFixed(2) + '.'}
+                    </li>
+                  )}
+                </ul>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={5} className="flex justify-between font-bold">
+              <p>{text.total + ':'}</p>
+              <GetPay credit={credit} />
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    )
+
   return (
-    <Table className="hidden rounded-xl bg-background xl:table">
+    <Table className="rounded-xl bg-background">
       <TableHeader className="bg-muted [&_th]:text-center">
         <TableRow>
           <TableHead></TableHead>

From cd1ae6189c4c753ad325c874c56dc31c42d6d127 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 15:03:34 -0400
Subject: [PATCH 19/30] style: update size length of comment in creditById

---
 src/pages/_layout/credit_/$creditId.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index 4ed44f4..2238660 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -303,7 +303,8 @@ export function CreditById() {
               </span>
             </li>
             <li>
-              <b>{text.details.comment + ':'}</b> <p>{credit?.comentario}</p>
+              <b>{text.details.comment + ':'}</b>{' '}
+              <p className="text-sm md:text-base">{credit?.comentario}</p>
             </li>
           </ul>
           <Separator />

From 030348e14dfab347e397bb23f01b53e994a00878 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 15:49:35 -0400
Subject: [PATCH 20/30] style: fix table movile component for a credit id table
 page

---
 src/pages/_layout/credit_/-table.tsx | 97 ++++++++++++++++------------
 1 file changed, 54 insertions(+), 43 deletions(-)

diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index 3ec01af..6b4b624 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -49,56 +49,67 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
 
   if (screen !== 'lg')
     return (
-      <Table className="rounded-xl bg-background">
-        <TableBody className="[&_td>*]:text-center">
+      <Table className="rounded-xl bg-background ">
+        <TableBody className="divide-y-2">
           {table?.map(({ payment, cuote }, index) => (
-            <TableRow key={index} className="group">
-              <TableCell className="flex flex-col items-stretch gap-2 px-8 [&>*]:flex [&>*]:items-center">
-                <div className=" justify-end gap-2">
-                  <Badge>{index + 1}</Badge>
-                  <Switch
-                    checked={cuote?.pagada}
-                    className={'cursor-not-allowed'}
-                  ></Switch>
-                </div>
-                <ul className="list-outside list-disc flex-col !items-start">
-                  <li className='before:font-bold before:text-destructive before:content-["_-_"]'>
-                    <b>Fecha de cuota:</b>{' '}
+            <Table key={index}>
+              <TableHead>
+                <TableCell className="flex items-stretch justify-between gap-2 [&>*]:flex [&>*]:items-center">
+                  <p className='font-bold before:font-bold before:text-destructive before:content-["_-_"]'>
+                    {' '}
                     {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy') + '.'}
-                  </li>
+                  </p>
+                  <div className="justify-end gap-2">
+                    <Badge>{index + 1}</Badge>
+                    <Switch
+                      checked={cuote?.pagada}
+                      className={'cursor-not-allowed'}
+                    ></Switch>
+                  </div>
+                </TableCell>
+              </TableHead>
 
-                  <li className='before:font-bold before:text-success before:content-["_+_"]'>
-                    <b>Fecha de pago:</b>
-                    {format(new Date(payment?.fecha_de_pago), 'dd/MM/yyyy') +
-                      '.'}
-                  </li>
+              <TableBody>
+                <TableRow>
+                  <TableCell className="flex flex-col items-stretch gap-2 px-8">
+                    <ul className="flex list-outside list-disc flex-col !items-start">
+                      <li className='before:font-bold before:text-success before:content-["_+_"]'>
+                        <b>{text.payDate + ':'}</b>{' '}
+                        {format(
+                          new Date(payment?.fecha_de_pago),
+                          'dd/MM/yyyy'
+                        ) + '.'}
+                      </li>
 
-                  <li>
-                    <b>Valor pagado:</b> <b>$</b>{' '}
-                    {payment?.valor_del_pago?.toFixed(2) + '.'}
-                  </li>
+                      <li>
+                        <b>{text.payValue + ':'}</b> <b>$</b>{' '}
+                        {payment?.valor_del_pago?.toFixed(2) + '.'}
+                      </li>
 
-                  {cuote?.valor_de_mora > 0 && (
-                    <li>
-                      <b>Fecha de Mora:</b>{' '}
-                      {format(
-                        new Date(cuote?.fecha_de_aplicacion_de_mora),
-                        'dd/MM/yyyy'
-                      ) + '.'}
-                    </li>
-                  )}
+                      {cuote?.valor_de_mora > 0 && (
+                        <li>
+                          <b>{text.installmantsDate + ':'}</b>{' '}
+                          {format(
+                            new Date(cuote?.fecha_de_aplicacion_de_mora),
+                            'dd/MM/yyyy'
+                          ) + '.'}
+                        </li>
+                      )}
 
-                  {cuote?.valor_de_mora > 0 && (
-                    <li>
-                      <b>Mora:</b> <b>$</b>{' '}
-                      {cuote?.valor_de_mora?.toFixed(2) + '.'}
-                    </li>
-                  )}
-                </ul>
-              </TableCell>
-            </TableRow>
+                      {cuote?.valor_de_mora > 0 && (
+                        <li>
+                          <b>{text.payInstallmants + ':'}</b> <b>$</b>{' '}
+                          {cuote?.valor_de_mora?.toFixed(2) + '.'}
+                        </li>
+                      )}
+                    </ul>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
           ))}
         </TableBody>
+
         <TableFooter>
           <TableRow>
             <TableCell colSpan={5} className="flex justify-between font-bold">
@@ -126,7 +137,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
         {table?.map(({ payment, cuote }, index) => (
           <TableRow key={index} className="group">
             <TableCell className="relative flex w-20 items-center justify-center">
-              <p className="trasition h-full font-bold opacity-100 delay-150 duration-300 group-hover:opacity-0">
+              <p className="trasition h-full font-bold opacity-100 delay-150 duration-300 xl:group-hover:opacity-0">
                 {index + 1}
               </p>
               <Link

From 18fc016771440d342c2d7254a6a82cd55a36dd55 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 18:09:09 -0400
Subject: [PATCH 21/30] style: fix table movile component for a client table
 page

---
 src/pages/_layout/-column.tsx        |  93 ++++++++++++-
 src/pages/_layout/-table.tsx         | 199 +++++++++++++++++++++++++++
 src/pages/_layout/client.tsx         |  79 ++---------
 src/pages/_layout/credit_/-table.tsx |   4 +-
 4 files changed, 299 insertions(+), 76 deletions(-)
 create mode 100644 src/pages/_layout/-table.tsx

diff --git a/src/pages/_layout/-column.tsx b/src/pages/_layout/-column.tsx
index 2e971d8..bafe428 100644
--- a/src/pages/_layout/-column.tsx
+++ b/src/pages/_layout/-column.tsx
@@ -20,17 +20,103 @@ import {
 import { useState } from 'react'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useStatus } from '@/lib/context/layout'
-import { type TCLIENT_GET_BASE } from '@/api/clients'
+import type { TCLIENT_GET_BASE } from '@/api/clients'
 import { getIdById } from '@/lib/type/id'
 import { useToken } from '@/lib/context/login'
-import { TROLES } from '@/lib/type/rol'
+import type { TROLES } from '@/lib/type/rol'
 
 export type TClientTable = Omit<
   TCLIENT_GET_BASE,
   'nombres' | 'apellidos' | 'referencia_id'
 > &
   Record<'fullName' | 'referencia', string>
-export const columns: ColumnDef<TClientTable>[] = [
+
+export const movile: ColumnDef<TClientTable>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        id={'select-' + row.index}
+        className="mr-4"
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'fullName' as keyof TClientTable,
+    header: () => <p>{text.columns.fullName}</p>,
+    cell: ({ row }) => <p className="copitalize">{row.getValue('fullName')}</p>,
+  },
+  {
+    accessorKey: 'direccion' as keyof TClientTable,
+    header: () => <p>{text.columns.direction}</p>,
+    cell: ({ row }) => (
+      <p>{row.getValue('direccion' as keyof TClientTable) + '.'}</p>
+    ),
+  },
+  {
+    accessorKey: 'celular' as keyof TClientTable,
+    header: () => <p>{text.columns.phone}</p>,
+    cell: ({ row }) => (
+      <p className="lowercase">
+        {row.getValue('celular' as keyof TClientTable)}
+      </p>
+    ),
+  },
+  {
+    accessorKey: 'telefono' as keyof TClientTable,
+    header: () => <p>{text.columns.telephone}</p>,
+    cell: ({ row }) => (
+      <p className="lowercase">
+        {row.getValue('telefono' as keyof TClientTable)}
+      </p>
+    ),
+  },
+  {
+    accessorKey: 'numero_de_identificacion' as keyof TClientTable,
+    header: () => <p>{text.columns.id}</p>,
+    cell: ({ row }) => (
+      <p>{row.getValue('numero_de_identificacion' as keyof TClientTable)}</p>
+    ),
+  },
+  {
+    accessorKey: 'tipo_de_identificacion' as keyof TClientTable,
+    header: () => <p>{text.columns.idType}</p>,
+    cell: ({ row }) => {
+      const id: number = row.getValue(
+        'tipo_de_identificacion' as keyof TClientTable
+      )
+      if (!id) return
+      return <p>{getIdById({ id })?.nombre}</p>
+    },
+  },
+  {
+    accessorKey: 'referencia' as keyof TClientTable,
+    header: () => <p>{text.columns.ref}</p>,
+    cell: ({ row }) => (
+      <p className="">{row.getValue('referencia' as keyof TClientTable)}</p>
+    ),
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => <ClientActions row={row} />,
+  },
+]
+
+export const desktop: ColumnDef<TClientTable>[] = [
   {
     id: 'select',
     header: ({ table }) => (
@@ -258,6 +344,7 @@ const text = {
     firstName: 'Nombre',
     lastName: 'Apellidos',
     id: 'I.D.',
+    idType: 'Tipo de I.D.',
     phone: 'Celular',
     telephone: 'Telefono',
     ref: 'Referencia',
diff --git a/src/pages/_layout/-table.tsx b/src/pages/_layout/-table.tsx
new file mode 100644
index 0000000..0de1350
--- /dev/null
+++ b/src/pages/_layout/-table.tsx
@@ -0,0 +1,199 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { useScreen } from '@/lib/hook/useScreens'
+import { flexRender, type Table as TTable } from '@tanstack/react-table'
+import { TClientTable, desktop } from './-column'
+import clsx from 'clsx'
+import { Label } from '@/components/ui/label'
+
+/* eslint-disable-next-line */
+type TPaymentTable = {
+  table: TTable<TClientTable>
+}
+
+/* eslint-disable-next-line */
+export function ClientTable({ table }: TPaymentTable) {
+  const screen = useScreen()
+
+  if (screen !== 'lg')
+    return (
+      <Table>
+        <TableBody className="divide-y-2">
+          {table.getRowModel().rows?.map((row, index) => {
+            const select = row?.getVisibleCells()?.[0]
+            const fullName = row?.getVisibleCells()?.[1]
+            const direction = row?.getVisibleCells()?.[2]
+            const phone = row?.getVisibleCells()?.[3]
+            const telephone = row?.getVisibleCells()?.[4]
+            const id = row?.getVisibleCells()?.[5]
+            const idType = row?.getVisibleCells()?.[6]
+            const ref = row?.getVisibleCells()?.[7]
+            const action = row?.getVisibleCells()?.[8]
+            return (
+              <Table key={index}>
+                <TableHeader
+                  className={clsx('bg-muted', { 'rounded-t-xl': index === 0 })}
+                >
+                  <TableRow>
+                    <TableHead className="">
+                      <Label
+                        htmlFor={'select-' + row.index}
+                        className="items-between flex justify-between gap-2 [&>*]:flex [&>*]:items-center"
+                      >
+                        {flexRender(
+                          fullName?.column?.columnDef.cell,
+                          fullName?.getContext()
+                        )}
+                        <div className="space-x-2 px-4">
+                          {flexRender(
+                            action?.column?.columnDef.cell,
+                            action?.getContext()
+                          )}
+                          {flexRender(
+                            select?.column?.columnDef.cell,
+                            select?.getContext()
+                          )}
+                        </div>
+                      </Label>
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+
+                <TableBody>
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                  >
+                    <TableCell className="px-8">
+                      <ul className="flex list-outside list-disc flex-col !items-start [&>li]:flex [&>li]:gap-1">
+                        <li>
+                          <b>{'Celular: ' + ':'}</b>{' '}
+                          {flexRender(
+                            phone?.column?.columnDef.cell,
+                            phone?.getContext()
+                          )}
+                        </li>
+
+                        <li>
+                          <b>{'Telefono' + ':'}</b>{' '}
+                          {flexRender(
+                            telephone?.column?.columnDef.cell,
+                            telephone?.getContext()
+                          )}
+                        </li>
+
+                        <li>
+                          <b>{'Direccion' + ':'}</b>{' '}
+                          {flexRender(
+                            direction?.column?.columnDef.cell,
+                            direction?.getContext()
+                          )}
+                        </li>
+
+                        <li>
+                          <b>{'Tipo de ID' + ':'}</b>{' '}
+                          {flexRender(
+                            idType?.column?.columnDef.cell,
+                            idType?.getContext()
+                          )}
+                        </li>
+
+                        <li>
+                          <b>{'#ID' + ':'}</b>{' '}
+                          {flexRender(
+                            id?.column?.columnDef.cell,
+                            id?.getContext()
+                          )}
+                        </li>
+
+                        {ref?.getValue<string | undefined>() && (
+                          <li>
+                            <b>{'Referencia' + ':'}</b>{' '}
+                            {flexRender(
+                              ref?.column?.columnDef.cell,
+                              ref?.getContext()
+                            )}
+                          </li>
+                        )}
+                      </ul>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            )
+          })}
+        </TableBody>
+      </Table>
+    )
+
+  return (
+    <Table>
+      <TableHeader className="rounded-t-xl bg-muted">
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header, index, list) => {
+              return (
+                <TableHead
+                  key={header.id}
+                  className={clsx(
+                    'first:sticky first:left-0 last:sticky last:right-0',
+                    {
+                      'rounded-tl-xl': index === 0,
+                      'rounded-tr-xl': index === list?.length - 1,
+                    }
+                  )}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              )
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row) => (
+            <TableRow
+              key={row.id}
+              data-state={row.getIsSelected() && 'selected'}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell
+                  key={cell.id}
+                  className={clsx(
+                    'first:sticky first:left-0 last:sticky last:right-0'
+                  )}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={desktop.length} className="h-24 text-center">
+              {text.search[404]}
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
+
+const text = {
+  search: {
+    404: 'No se encontraron resultados',
+  },
+}
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 454d8be..7ab5070 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -1,16 +1,7 @@
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   ColumnFiltersState,
   SortingState,
   VisibilityState,
-  flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
@@ -45,7 +36,7 @@ import {
 } from '@/components/ui/select'
 import { type TCLIENT_GET_ALL, getClientsList } from '@/api/clients'
 import clsx from 'clsx'
-import { columns, type TClientTable } from '@/pages/_layout/-column'
+import { desktop, movile, type TClientTable } from '@/pages/_layout/-column'
 import { Separator } from '@/components/ui/separator'
 import { useClientByUsers } from '@/lib/context/client'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -61,6 +52,8 @@ import { deleteClientByIdOpt } from '@/pages/_layout/client/$clientId/delete'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { useToken } from '@/lib/context/login'
+import { ClientTable } from './-table'
+import { useScreen } from '@/lib/hook/useScreens'
 
 type TSearch = {
   userId: number
@@ -109,6 +102,7 @@ export function Clients() {
   const navigate = useNavigate()
   const { filter, setFilter } = useFilter()
   const { userId: ownerId } = Route.useSearch()
+  const screen = useScreen()
   const isUpdateClient = useIsMutating({
     status: 'success',
     mutationKey: updateClientByIdOpt.mutationKey,
@@ -162,7 +156,7 @@ export function Clients() {
 
   const table = useReactTable({
     data: clientsRes,
-    columns,
+    columns: screen !== 'lg' ? movile : desktop,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -310,7 +304,7 @@ export function Clients() {
                 </SelectContent>
               </Select>
               <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+                <DropdownMenuTrigger asChild className="hidden xl:block">
                   <Button variant="outline">
                     {text.dropdown.title}{' '}
                     <ChevronDown className="ml-2 h-4 w-4" />
@@ -335,65 +329,8 @@ export function Clients() {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="overflow-x-auto rounded-md bg-background ring-1 ring-border xl:block">
-              <Table>
-                <TableHeader className="bg-muted">
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <TableHead
-                            key={header.id}
-                            className={clsx(
-                              'first:sticky first:left-0 last:sticky last:right-0'
-                            )}
-                          >
-                            {header.isPlaceholder
-                              ? null
-                              : flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext()
-                                )}
-                          </TableHead>
-                        )
-                      })}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {table.getRowModel().rows?.length ? (
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={row.getIsSelected() && 'selected'}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell
-                            key={cell.id}
-                            className={clsx(
-                              'first:sticky first:left-0 last:sticky last:right-0'
-                            )}
-                          >
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))
-                  ) : (
-                    <TableRow>
-                      <TableCell
-                        colSpan={columns.length}
-                        className="h-24 text-center"
-                      >
-                        {text.search[404]}
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
+            <div className="rounded-xl bg-background ring-2 ring-border">
+              <ClientTable table={table} />
             </div>
             <div className="flex items-center justify-end space-x-2 py-4">
               <div className="space-x-2">
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index 6b4b624..781826b 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -53,7 +53,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
         <TableBody className="divide-y-2">
           {table?.map(({ payment, cuote }, index) => (
             <Table key={index}>
-              <TableHead>
+              <TableHeader>
                 <TableCell className="flex items-stretch justify-between gap-2 [&>*]:flex [&>*]:items-center">
                   <p className='font-bold before:font-bold before:text-destructive before:content-["_-_"]'>
                     {' '}
@@ -67,7 +67,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
                     ></Switch>
                   </div>
                 </TableCell>
-              </TableHead>
+              </TableHeader>
 
               <TableBody>
                 <TableRow>

From f078a65ef2375bc5140e932caedcb28752c218a5 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 18:29:27 -0400
Subject: [PATCH 22/30] style: fix table border movile component for a client
 and credit table page

---
 src/pages/_layout/-table.tsx            | 10 +++---
 src/pages/_layout/credit_/$creditId.tsx |  4 ++-
 src/pages/_layout/credit_/-table.tsx    | 41 +++++++++++++++----------
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/pages/_layout/-table.tsx b/src/pages/_layout/-table.tsx
index 0de1350..3da640e 100644
--- a/src/pages/_layout/-table.tsx
+++ b/src/pages/_layout/-table.tsx
@@ -37,11 +37,13 @@ export function ClientTable({ table }: TPaymentTable) {
             const action = row?.getVisibleCells()?.[8]
             return (
               <Table key={index}>
-                <TableHeader
-                  className={clsx('bg-muted', { 'rounded-t-xl': index === 0 })}
-                >
+                <TableHeader>
                   <TableRow>
-                    <TableHead className="">
+                    <TableHead
+                      className={clsx('bg-muted', {
+                        'rounded-t-xl': index === 0,
+                      })}
+                    >
                       <Label
                         htmlFor={'select-' + row.index}
                         className="items-between flex justify-between gap-2 [&>*]:flex [&>*]:items-center"
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index 2238660..2e91da4 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -315,7 +315,9 @@ export function CreditById() {
             </h2>
           )}
           {!!credit?.cuotas?.length && !!credit?.pagos?.length && (
-            <PaymentTable credit={credit} table={table} />
+            <div className="rounded-xl bg-background ring-2 ring-border">
+              <PaymentTable credit={credit} table={table} />
+            </div>
           )}
         </div>
       </_credit.Provider>
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index 781826b..bd8c393 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -19,6 +19,7 @@ import { Route } from '@/pages/_layout/credit_/$creditId'
 import { Switch } from '@/components/ui/switch'
 import { useScreen } from '@/lib/hook/useScreens'
 import { Badge } from '@/components/ui/badge'
+import clsx from 'clsx'
 
 /* eslint-disable-next-line */
 type TData = {
@@ -49,24 +50,32 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
 
   if (screen !== 'lg')
     return (
-      <Table className="rounded-xl bg-background ">
+      <Table>
         <TableBody className="divide-y-2">
           {table?.map(({ payment, cuote }, index) => (
             <Table key={index}>
               <TableHeader>
-                <TableCell className="flex items-stretch justify-between gap-2 [&>*]:flex [&>*]:items-center">
-                  <p className='font-bold before:font-bold before:text-destructive before:content-["_-_"]'>
-                    {' '}
-                    {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy') + '.'}
-                  </p>
-                  <div className="justify-end gap-2">
-                    <Badge>{index + 1}</Badge>
-                    <Switch
-                      checked={cuote?.pagada}
-                      className={'cursor-not-allowed'}
-                    ></Switch>
-                  </div>
-                </TableCell>
+                <TableRow>
+                  <TableHead
+                    className={clsx(
+                      'flex items-stretch justify-between gap-2 bg-muted [&>*]:flex [&>*]:items-center',
+                      { 'rounded-t-xl': index === 0 }
+                    )}
+                  >
+                    <p className='font-bold before:font-bold before:text-destructive before:content-["_-_"]'>
+                      {' '}
+                      {format(new Date(cuote?.fecha_de_pago), 'dd/MM/yyyy') +
+                        '.'}
+                    </p>
+                    <div className="justify-end gap-2">
+                      <Badge>{index + 1}</Badge>
+                      <Switch
+                        checked={cuote?.pagada}
+                        className={'cursor-not-allowed'}
+                      ></Switch>
+                    </div>
+                  </TableHead>
+                </TableRow>
               </TableHeader>
 
               <TableBody>
@@ -122,8 +131,8 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
     )
 
   return (
-    <Table className="rounded-xl bg-background">
-      <TableHeader className="bg-muted [&_th]:text-center">
+    <Table>
+      <TableHeader className="rounded-t-xl  bg-muted [&_th]:text-center">
         <TableRow>
           <TableHead></TableHead>
           <TableHead>{text.payDate}</TableHead>

From c2004e8885646328953fb5f1c76f6a5d3e4a190d Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 19:02:35 -0400
Subject: [PATCH 23/30] fix: disable all autofocus in form elements

---
 src/lib/hook/.gitkeep                           | 0
 src/pages/-info.tsx                             | 1 +
 src/pages/_layout/client/$clientId/update.tsx   | 1 +
 src/pages/_layout/client/new.tsx                | 1 +
 src/pages/_layout/credit/new.tsx                | 1 +
 src/pages/_layout/credit/pay.tsx                | 1 +
 src/pages/_layout/credit/print.tsx              | 1 +
 src/pages/_layout/credit_/$creditId/pay.tsx     | 1 +
 src/pages/_layout/credit_/$creditId/print.tsx   | 1 +
 src/pages/_layout/credit_/$creditId_/update.tsx | 2 ++
 src/pages/_layout/report.tsx                    | 1 +
 src/pages/_layout/user/$userId/update.tsx       | 1 +
 src/pages/_layout/user/new.tsx                  | 1 +
 src/pages/login.tsx                             | 4 +++-
 14 files changed, 16 insertions(+), 1 deletion(-)
 delete mode 100644 src/lib/hook/.gitkeep

diff --git a/src/lib/hook/.gitkeep b/src/lib/hook/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/-info.tsx b/src/pages/-info.tsx
index 7a178b5..c3f0f2d 100644
--- a/src/pages/-info.tsx
+++ b/src/pages/-info.tsx
@@ -224,6 +224,7 @@ export const MyUserInfo = memo(function () {
         </DialogDescription>
       </DialogHeader>
       <form
+        autoFocus={false}
         autoComplete="off"
         ref={form}
         onSubmit={onSubmit}
diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index d15a9a6..14b537c 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -263,6 +263,7 @@ export function UpdateClientById() {
         <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
         <ScrollBar orientation='vertical' />
         <form
+          autoFocus={false}
           autoComplete="off"
           ref={form}
           onSubmit={onSubmit}
diff --git a/src/pages/_layout/client/new.tsx b/src/pages/_layout/client/new.tsx
index b088825..be8e9ad 100644
--- a/src/pages/_layout/client/new.tsx
+++ b/src/pages/_layout/client/new.tsx
@@ -151,6 +151,7 @@ export function NewClient() {
         <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
         <ScrollBar orientation='vertical' />
           <form
+            autoFocus={false}
             autoComplete="off"
             ref={form}
             onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit/new.tsx b/src/pages/_layout/credit/new.tsx
index 56ec3ac..5f07511 100644
--- a/src/pages/_layout/credit/new.tsx
+++ b/src/pages/_layout/credit/new.tsx
@@ -282,6 +282,7 @@ export function NewCredit() {
         <ScrollArea className='h-[25rem] md:h-full'>
         <ScrollBar orientation='vertical' />
         <form
+          autoFocus={false}
           autoComplete="off"
           ref={form}
           onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit/pay.tsx b/src/pages/_layout/credit/pay.tsx
index bdc2772..49948a5 100644
--- a/src/pages/_layout/credit/pay.tsx
+++ b/src/pages/_layout/credit/pay.tsx
@@ -121,6 +121,7 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
         <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
       </DialogHeader>
       <form
+        autoFocus={false}
         autoComplete="off"
         ref={form}
         onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit/print.tsx b/src/pages/_layout/credit/print.tsx
index e49d4a6..3602223 100644
--- a/src/pages/_layout/credit/print.tsx
+++ b/src/pages/_layout/credit/print.tsx
@@ -158,6 +158,7 @@ export function PrintSelectedCredit() {
           </DialogDescription>
         </DialogHeader>
         <form
+          autoFocus={false}
           autoComplete="on"
           ref={form}
           onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit_/$creditId/pay.tsx b/src/pages/_layout/credit_/$creditId/pay.tsx
index 2bd7eda..d3e9890 100644
--- a/src/pages/_layout/credit_/$creditId/pay.tsx
+++ b/src/pages/_layout/credit_/$creditId/pay.tsx
@@ -122,6 +122,7 @@ export function PayCreditById() {
         <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'><p>{text.descriiption}</p></DialogDescription>
       </DialogHeader>
       <form
+        autoFocus={false}
         autoComplete="off"
         ref={form}
         onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit_/$creditId/print.tsx b/src/pages/_layout/credit_/$creditId/print.tsx
index aaab870..b561a62 100644
--- a/src/pages/_layout/credit_/$creditId/print.tsx
+++ b/src/pages/_layout/credit_/$creditId/print.tsx
@@ -86,6 +86,7 @@ export function PrintCreditById() {
         <DialogDescription className='text-muted-foreground'>{text.description}</DialogDescription>
       </DialogHeader>
       <form
+        autoFocus={false}
         autoComplete="on"
         ref={form}
         onSubmit={onSubmit}
diff --git a/src/pages/_layout/credit_/$creditId_/update.tsx b/src/pages/_layout/credit_/$creditId_/update.tsx
index b502cbb..5ce941b 100644
--- a/src/pages/_layout/credit_/$creditId_/update.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.tsx
@@ -311,6 +311,7 @@ export function UpdateCreditById() {
                 </CardHeader>
                 <CardContent>
                   <form
+                    autoFocus={false}
                     className="grid grid-cols-none md:grid-cols-2 xl:grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
                     id={'edit-credit'}
                     onChange={onChangeDetail}
@@ -596,6 +597,7 @@ export function UpdateCreditById() {
                               </AccordionTrigger>
                               <AccordionContent asChild>
                                 <form
+                                  autoFocus={false}
                                   className="grid grid-cols-none md:grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
                                   id={'edit-pay-' + index}
                                   onChange={onChangePaymentById(index)}
diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index 5ee0b21..c58b421 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -87,6 +87,7 @@ export function Report() {
             </AccordionTrigger>
             <AccordionContent className="space-y-2">
               <form
+                autoFocus={false}
                 ref={form?.[index]}
                 onSubmit={onSubmit(index)}
                 className="px-1 grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index ccd0540..ec54c42 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -252,6 +252,7 @@ export function UpdateUserById() {
           <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
+          autoFocus={false}
           autoComplete="off"
           ref={form}
           onSubmit={onSubmit}
diff --git a/src/pages/_layout/user/new.tsx b/src/pages/_layout/user/new.tsx
index e2dd477..999e1e4 100644
--- a/src/pages/_layout/user/new.tsx
+++ b/src/pages/_layout/user/new.tsx
@@ -150,6 +150,7 @@ export function NewUser() {
           <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
         <form
+          autoFocus={false}
           autoComplete="off"
           ref={form}
           onSubmit={onSubmit}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index c956454..8422b32 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -132,9 +132,11 @@ export function Login() {
           <Separator />
           <CardContent>
             <form
+              autoFocus={false}
               id="login"
               className="flex flex-col gap-4 [&>label>span]:font-bold"
-              {...{ ref, onSubmit }}
+              ref={ref}
+              onSubmit={onSubmit}
             >
               <Label>
                 <span>{text.username.label}</span>

From 393d139bdd7ed4285733ffb12ac6bf0391609d5f Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 22:15:22 -0400
Subject: [PATCH 24/30] style: less heigth in dialog view

---
 src/pages/-info.tsx                             | 6 +++++-
 src/pages/_layout/client/$clientId/update.tsx   | 4 ++--
 src/pages/_layout/client/new.tsx                | 4 ++--
 src/pages/_layout/credit/new.tsx                | 2 +-
 src/pages/_layout/credit/pay.tsx                | 2 +-
 src/pages/_layout/credit_/$creditId/pay.tsx     | 2 +-
 src/pages/_layout/credit_/$creditId_/update.tsx | 4 ++--
 src/pages/_layout/report.tsx                    | 2 +-
 src/pages/_layout/user/$userId/update.tsx       | 6 +++++-
 src/pages/_layout/user/new.tsx                  | 6 +++++-
 10 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/pages/-info.tsx b/src/pages/-info.tsx
index c3f0f2d..629f00b 100644
--- a/src/pages/-info.tsx
+++ b/src/pages/-info.tsx
@@ -33,6 +33,7 @@ import { Link } from '@tanstack/react-router'
 import { getCurrentUserOpt } from '@/pages/_layout'
 import { updateUserByIdOpt } from '@/pages/_layout/user/$userId/update'
 import { useToken } from '@/lib/context/login'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 /* eslint-disable-next-line */
 interface TPassowordVisibilityState {
@@ -223,6 +224,8 @@ export const MyUserInfo = memo(function () {
           {text.descriiption}
         </DialogDescription>
       </DialogHeader>
+      <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
+      <ScrollBar orientation='vertical' />
       <form
         autoFocus={false}
         autoComplete="off"
@@ -231,7 +234,7 @@ export const MyUserInfo = memo(function () {
         onChange={onChange}
         id="user-info"
         className={clsx(
-          'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 px-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+          'p-1 grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 px-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
           {
             '[&_*:disabled]:opacity-100':
               !!userId && rol?.rolName !== 'Administrador',
@@ -366,6 +369,7 @@ export const MyUserInfo = memo(function () {
           </div>
         </div>
       </form>
+      </ScrollArea>
       <DialogFooter className="flex-col justify-start gap-2 gap-2 md:flex-row">
         {!isSuccess ? (
           <>
diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index 14b537c..c3ddf20 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -260,7 +260,7 @@ export function UpdateClientById() {
             {text.description({ state: !checked })}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
+        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
         <ScrollBar orientation='vertical' />
         <form
           autoFocus={false}
@@ -270,7 +270,7 @@ export function UpdateClientById() {
           onChange={onChange}
           id="update-client"
           className={clsx(
-            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
+            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
             {
               '[&>label>span]:font-bold': checked,
             }
diff --git a/src/pages/_layout/client/new.tsx b/src/pages/_layout/client/new.tsx
index be8e9ad..11a6ffe 100644
--- a/src/pages/_layout/client/new.tsx
+++ b/src/pages/_layout/client/new.tsx
@@ -148,7 +148,7 @@ export function NewClient() {
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[25rem] md:h-full'>
+        <ScrollArea className='overflow-y-auto h-[50dvh] md:h-full'>
         <ScrollBar orientation='vertical' />
           <form
             autoFocus={false}
@@ -157,7 +157,7 @@ export function NewClient() {
             onSubmit={onSubmit}
             id="new-client"
             className={clsx(
-              'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label]:space-y-2',
+              'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label]:space-y-2',
               styles?.['custom-form']
             )}
           >
diff --git a/src/pages/_layout/credit/new.tsx b/src/pages/_layout/credit/new.tsx
index 5f07511..521746b 100644
--- a/src/pages/_layout/credit/new.tsx
+++ b/src/pages/_layout/credit/new.tsx
@@ -279,7 +279,7 @@ export function NewCredit() {
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='h-[25rem] md:h-full'>
+        <ScrollArea className='h-[60dvh] md:h-full'>
         <ScrollBar orientation='vertical' />
         <form
           autoFocus={false}
diff --git a/src/pages/_layout/credit/pay.tsx b/src/pages/_layout/credit/pay.tsx
index 49948a5..16a2653 100644
--- a/src/pages/_layout/credit/pay.tsx
+++ b/src/pages/_layout/credit/pay.tsx
@@ -127,7 +127,7 @@ const onSuccess: ((data: TPAYMENT_POST, variables: TPAYMENT_POST_BODY, context:
         onSubmit={onSubmit}
         id="pay-credit"
         className={clsx(
-          'px-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
+          'p-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
           styles?.["custom-form"]
         )}
       >
diff --git a/src/pages/_layout/credit_/$creditId/pay.tsx b/src/pages/_layout/credit_/$creditId/pay.tsx
index d3e9890..b491d3e 100644
--- a/src/pages/_layout/credit_/$creditId/pay.tsx
+++ b/src/pages/_layout/credit_/$creditId/pay.tsx
@@ -128,7 +128,7 @@ export function PayCreditById() {
         onSubmit={onSubmit}
         id="pay-credit"
         className={clsx(
-          'px-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
+          'p-1 grid-rows-subgrid grid gap-3 grid-cols-none md:grid-cols-2 gap-y-4 [&>label]:space-y-2',
           styles?.["custom-form"]
         )}
       >
diff --git a/src/pages/_layout/credit_/$creditId_/update.tsx b/src/pages/_layout/credit_/$creditId_/update.tsx
index 5ce941b..b47c129 100644
--- a/src/pages/_layout/credit_/$creditId_/update.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.tsx
@@ -312,7 +312,7 @@ export function UpdateCreditById() {
                 <CardContent>
                   <form
                     autoFocus={false}
-                    className="grid grid-cols-none md:grid-cols-2 xl:grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
+                    className="p-1 grid grid-cols-none md:grid-cols-2 xl:grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
                     id={'edit-credit'}
                     onChange={onChangeDetail}
                     onSubmit={onSubmit}
@@ -598,7 +598,7 @@ export function UpdateCreditById() {
                               <AccordionContent asChild>
                                 <form
                                   autoFocus={false}
-                                  className="grid grid-cols-none md:grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
+                                  className="p-1 grid grid-cols-none md:grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
                                   id={'edit-pay-' + index}
                                   onChange={onChangePaymentById(index)}
                                   onSubmit={onCuoteSubmit(index)}
diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index c58b421..0c529f4 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -90,7 +90,7 @@ export function Report() {
                 autoFocus={false}
                 ref={form?.[index]}
                 onSubmit={onSubmit(index)}
-                className="px-1 grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
+                className="p-1 grid grid-cols-none md:grid-cols-2 gap-4 md:px-4 xl:px-4 py-2 [&>label:last-child]:col-span-full [&>label>span]:font-bold [&>label]:space-y-2"
                 id={'report' + id}
               >
                 {parametros.map(({ nombre, id, tipo_dato, obligatorio }) => (
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index ec54c42..edf78bc 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -31,6 +31,7 @@ import { useToken } from '@/lib/context/login'
 import { Link } from '@tanstack/react-router'
 import { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 export const updateUserByIdOpt = {
   mutationKey: ['update-user-by-id'],
@@ -251,6 +252,8 @@ export function UpdateUserById() {
           <Separator />
           <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
+        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
+        <ScrollBar orientation='vertical' />
         <form
           autoFocus={false}
           autoComplete="off"
@@ -259,7 +262,7 @@ export function UpdateUserById() {
           onChange={onChange}
           id="update-user"
           className={clsx(
-            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
             {
               '[&_*:disabled]:opacity-100':
                 !!userId && rol?.rolName !== 'Administrador',
@@ -391,6 +394,7 @@ export function UpdateUserById() {
             </div>
           </div>
         </form>
+        </ScrollArea>
         <DialogFooter className="justify-start gap-2 flex-col md:flex-row">
           {!isSuccess ? (
             <>
diff --git a/src/pages/_layout/user/new.tsx b/src/pages/_layout/user/new.tsx
index 999e1e4..d0135e7 100644
--- a/src/pages/_layout/user/new.tsx
+++ b/src/pages/_layout/user/new.tsx
@@ -29,6 +29,7 @@ import { useMutation } from '@tanstack/react-query'
 import { type TUSER_GET, type TUSER_POST_BODY, postUser } from '@/api/users'
 import { getRolByName, listRols } from '@/lib/type/rol'
 import { useStatus } from '@/lib/context/layout'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
 export const postUserOpt = {
   mutationKey: ['create-user'],
@@ -149,6 +150,8 @@ export function NewUser() {
           <Separator />
           <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
         </DialogHeader>
+        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
+        <ScrollBar orientation='vertical' />
         <form
           autoFocus={false}
           autoComplete="off"
@@ -156,7 +159,7 @@ export function NewUser() {
           onSubmit={onSubmit}
           id="new-client-form"
           className={clsx(
-            'px-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2',
+            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2',
             styles?.['custom-form']
           )}
         >
@@ -249,6 +252,7 @@ export function NewUser() {
             </div>
           </div>
         </form>
+        </ScrollArea>
         <DialogFooter className="justify-end gap-2 flex-col md:flex-row">
           <Button variant="default" form="new-client-form" type="submit">
             {text.button.update}

From d3d3f9ed0323f5fe5f326a832017137f258b43b0 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sat, 20 Apr 2024 22:31:21 -0400
Subject: [PATCH 25/30] style: fix Error component in movile view

---
 src/pages/_layout/client.tsx                    | 2 +-
 src/pages/_layout/credit.tsx                    | 2 +-
 src/pages/_layout/credit_/$creditId.tsx         | 2 +-
 src/pages/_layout/credit_/$creditId_/update.tsx | 2 +-
 src/pages/_layout/report.tsx                    | 2 +-
 src/pages/_layout/user.tsx                      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 7ab5070..344c9af 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -407,7 +407,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index ce1d05a..7b6f193 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -766,7 +766,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index 2e91da4..c9cd913 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -412,7 +412,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit_/$creditId_/update.tsx b/src/pages/_layout/credit_/$creditId_/update.tsx
index b47c129..4763e79 100644
--- a/src/pages/_layout/credit_/$creditId_/update.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.tsx
@@ -772,7 +772,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/report.tsx b/src/pages/_layout/report.tsx
index 0c529f4..fa15838 100644
--- a/src/pages/_layout/report.tsx
+++ b/src/pages/_layout/report.tsx
@@ -181,7 +181,7 @@ export function Error() {
   const onClick: React.MouseEventHandler< React.ComponentRef< typeof Button > > = () => {
     history.back()
   }
-  return <div className='flex items-center h-full [&>svg]:w-32 [&>svg]:stroke-destructive [&>svg]:h-32 items-center justify-center gap-4 [&_h1]:text-2xl'>
+  return <div className='flex flex-col md:flex-row items-center h-full [&>svg]:w-32 [&>svg]:stroke-destructive [&>svg]:h-32 items-center justify-center gap-4 [&_h1]:text-2xl'>
       <Annoyed  className='animate-bounce' />
       <div className='space-y-2'>
         <h1 className='font-bold'>{text.error}</h1>
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index ec631df..8212bbf 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -622,7 +622,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex flex-col md:flex-row h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>

From 5de75429a8f0b4ff41cb293e70175a0469366dc7 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sun, 21 Apr 2024 01:22:24 -0400
Subject: [PATCH 26/30] style: fix Pending  component for a mavile view

---
 src/pages/-info.tsx                           | 279 +++++++++---------
 src/pages/_layout/client.tsx                  |  68 ++++-
 src/pages/_layout/credit.tsx                  |  14 +-
 src/pages/_layout/credit_/$creditId.tsx       |  93 ++++--
 .../_layout/credit_/$creditId_/update.tsx     |  90 +++---
 src/pages/_layout/credit_/-table.tsx          |   2 +-
 src/pages/_layout/user.tsx                    |  22 +-
 7 files changed, 345 insertions(+), 223 deletions(-)

diff --git a/src/pages/-info.tsx b/src/pages/-info.tsx
index 629f00b..a7d33fa 100644
--- a/src/pages/-info.tsx
+++ b/src/pages/-info.tsx
@@ -224,151 +224,151 @@ export const MyUserInfo = memo(function () {
           {text.descriiption}
         </DialogDescription>
       </DialogHeader>
-      <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
-      <ScrollBar orientation='vertical' />
-      <form
-        autoFocus={false}
-        autoComplete="off"
-        ref={form}
-        onSubmit={onSubmit}
-        onChange={onChange}
-        id="user-info"
-        className={clsx(
-          'p-1 grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 px-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
-          {
-            '[&_*:disabled]:opacity-100':
-              !!userId && rol?.rolName !== 'Administrador',
-          }
-        )}
-      >
-        <Label className="!col-span-1">
-          <span>{text.form.firstName.label}</span>
-          {!isSuccess ? (
-            <Skeleton className="h-10 w-full" />
-          ) : (
-            <Input
-              required
-              name={'firstName' as TFormName}
-              type="text"
-              placeholder={text.form.firstName.placeholder}
-              defaultValue={userRes?.nombre.split(' ')?.at(0)}
-              onChange={onChangeName('firstName')}
-              disabled={!!userId && rol?.rolName !== 'Administrador'}
-              pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-            />
-          )}
-        </Label>
-        <Label className="!col-span-1">
-          <span>{text.form.lastName.label} </span>
-          {!isSuccess ? (
-            <Skeleton className="h-10 w-full" />
-          ) : (
-            <Input
-              required
-              name={'lastName' as TFormName}
-              type="text"
-              placeholder={text.form.lastName.placeholder}
-              defaultValue={userRes?.nombre.split(' ')?.at(1)}
-              onChange={onChangeName('lastName')}
-              disabled={!!userId && rol?.rolName !== 'Administrador'}
-              pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-            />
+      <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+        <ScrollBar orientation="vertical" />
+        <form
+          autoFocus={false}
+          autoComplete="off"
+          ref={form}
+          onSubmit={onSubmit}
+          onChange={onChange}
+          id="user-info"
+          className={clsx(
+            'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 px-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+            {
+              '[&_*:disabled]:opacity-100':
+                !!userId && rol?.rolName !== 'Administrador',
+            }
           )}
-        </Label>
-        <Label>
-          <span>{text.form.rol.label} </span>
-          {!isSuccess ? (
-            <Skeleton className="h-10 w-full" />
-          ) : (
-            <Select
-              required
-              name={'rol' as TFormName}
-              defaultValue={
-                '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
-              }
-              disabled={!!userId && rol?.rolName !== 'Administrador'}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder={text.form.rol.placeholder} />
-              </SelectTrigger>
-              <SelectContent className="[&_*]:cursor-pointer">
-                {listRols()?.map(({ id, nombre }) => (
-                  <SelectItem key={id} value={'' + id}>
-                    {nombre}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-        </Label>
-        <div>
-          <Label htmlFor="user-password">
-            <span>{text.form.password.current.label} </span>
+        >
+          <Label className="!col-span-1">
+            <span>{text.form.firstName.label}</span>
+            {!isSuccess ? (
+              <Skeleton className="h-10 w-full" />
+            ) : (
+              <Input
+                required
+                name={'firstName' as TFormName}
+                type="text"
+                placeholder={text.form.firstName.placeholder}
+                defaultValue={userRes?.nombre.split(' ')?.at(0)}
+                onChange={onChangeName('firstName')}
+                disabled={!!userId && rol?.rolName !== 'Administrador'}
+                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+              />
+            )}
           </Label>
-          <div className="flex flex-row-reverse items-center gap-x-2">
+          <Label className="!col-span-1">
+            <span>{text.form.lastName.label} </span>
             {!isSuccess ? (
-              <>
-                <Skeleton className="h-10 w-10" />
-                <Skeleton className="h-10 w-full" />
-              </>
+              <Skeleton className="h-10 w-full" />
             ) : (
-              <>
-                <Button
-                  type="button"
-                  className="w-fit p-1.5"
-                  onClick={onClick('password')}
-                  variant={!visibility.password ? 'outline' : 'default'}
-                >
-                  {!visibility.password ? <Eye /> : <EyeOff />}
-                </Button>
-                <Input
-                  id="user-password"
-                  name={'password' as TFormName}
-                  type={!visibility.password ? 'password' : 'text'}
-                  placeholder={text.form.password.current.placeholder}
-                  defaultValue={password?.password}
-                  onChange={onChangePassword}
-                  pattern="^.{6,}$"
-                />
-              </>
+              <Input
+                required
+                name={'lastName' as TFormName}
+                type="text"
+                placeholder={text.form.lastName.placeholder}
+                defaultValue={userRes?.nombre.split(' ')?.at(1)}
+                onChange={onChangeName('lastName')}
+                disabled={!!userId && rol?.rolName !== 'Administrador'}
+                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+              />
             )}
-          </div>
-        </div>
-        <div>
-          <Label htmlFor="user-new">
-            <span>{text.form.password.new.label} </span>
           </Label>
-          <div className="flex flex-row-reverse items-center gap-x-2">
+          <Label>
+            <span>{text.form.rol.label} </span>
             {!isSuccess ? (
-              <>
-                <Skeleton className="h-10 w-10" />
-                <Skeleton className="h-10 w-full" />
-              </>
+              <Skeleton className="h-10 w-full" />
             ) : (
-              <>
-                <Button
-                  type="button"
-                  className="w-fit p-1.5"
-                  onClick={onClick('confirmation')}
-                  variant={!visibility.confirmation ? 'outline' : 'default'}
-                >
-                  {!visibility.confirmation ? <Eye /> : <EyeOff />}
-                </Button>
-                <Input
-                  id="user-new"
-                  name={'newPassword' as TFormName}
-                  required={!!password?.password}
-                  type={!visibility.confirmation ? 'password' : 'text'}
-                  placeholder={text.form.password.new.placeholder}
-                  defaultValue={password?.confirmation}
-                  onChange={onChangePassword}
-                  pattern={password?.password}
-                />
-              </>
+              <Select
+                required
+                name={'rol' as TFormName}
+                defaultValue={
+                  '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
+                }
+                disabled={!!userId && rol?.rolName !== 'Administrador'}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={text.form.rol.placeholder} />
+                </SelectTrigger>
+                <SelectContent className="[&_*]:cursor-pointer">
+                  {listRols()?.map(({ id, nombre }) => (
+                    <SelectItem key={id} value={'' + id}>
+                      {nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             )}
+          </Label>
+          <div>
+            <Label htmlFor="user-password">
+              <span>{text.form.password.current.label} </span>
+            </Label>
+            <div className="flex flex-row-reverse items-center gap-x-2">
+              {!isSuccess ? (
+                <>
+                  <Skeleton className="h-10 w-10" />
+                  <Skeleton className="h-10 w-full" />
+                </>
+              ) : (
+                <>
+                  <Button
+                    type="button"
+                    className="w-fit p-1.5"
+                    onClick={onClick('password')}
+                    variant={!visibility.password ? 'outline' : 'default'}
+                  >
+                    {!visibility.password ? <Eye /> : <EyeOff />}
+                  </Button>
+                  <Input
+                    id="user-password"
+                    name={'password' as TFormName}
+                    type={!visibility.password ? 'password' : 'text'}
+                    placeholder={text.form.password.current.placeholder}
+                    defaultValue={password?.password}
+                    onChange={onChangePassword}
+                    pattern="^.{6,}$"
+                  />
+                </>
+              )}
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="user-new">
+              <span>{text.form.password.new.label} </span>
+            </Label>
+            <div className="flex flex-row-reverse items-center gap-x-2">
+              {!isSuccess ? (
+                <>
+                  <Skeleton className="h-10 w-10" />
+                  <Skeleton className="h-10 w-full" />
+                </>
+              ) : (
+                <>
+                  <Button
+                    type="button"
+                    className="w-fit p-1.5"
+                    onClick={onClick('confirmation')}
+                    variant={!visibility.confirmation ? 'outline' : 'default'}
+                  >
+                    {!visibility.confirmation ? <Eye /> : <EyeOff />}
+                  </Button>
+                  <Input
+                    id="user-new"
+                    name={'newPassword' as TFormName}
+                    required={!!password?.password}
+                    type={!visibility.confirmation ? 'password' : 'text'}
+                    placeholder={text.form.password.new.placeholder}
+                    defaultValue={password?.confirmation}
+                    onChange={onChangePassword}
+                    pattern={password?.password}
+                  />
+                </>
+              )}
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
       </ScrollArea>
       <DialogFooter className="flex-col justify-start gap-2 gap-2 md:flex-row">
         {!isSuccess ? (
@@ -384,9 +384,14 @@ export const MyUserInfo = memo(function () {
                 to={'/user/$userId/delete'}
                 params={{ userId }}
                 search={{ name: userRes.nombre }}
-                className="me-auto"
+                className="xl:me-auto"
               >
-                <Button variant="destructive" form="delete-user" type="submit">
+                <Button
+                  className="w-full"
+                  variant="destructive"
+                  form="delete-user"
+                  type="submit"
+                >
                   {text.button.delete}
                 </Button>
               </Link>
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 344c9af..0a002ca 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -260,7 +260,7 @@ export function Clients() {
               <Select value={filter} onValueChange={onValueChange}>
                 <SelectTrigger
                   title="Filtro de busqueda"
-                  className="ms-auto w-auto"
+                  className="ms-auto hidden w-auto xl:block"
                 >
                   <SelectValue placeholder={text.select.placeholder} />
                 </SelectTrigger>
@@ -365,32 +365,76 @@ export function Pending() {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
-        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-8 w-24 md:w-36" />
         <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="ms-auto h-10 w-20 md:w-24" />
+        <Skeleton className="h-10 w-20 md:w-24" />
       </div>
       <Separator />
       <div className="flex items-center gap-2">
-        <Skeleton className="h-10 w-24" />
-        <Skeleton className="h-10 w-24" />
-        <Skeleton className="ms-auto h-8 w-32" />
+        <Skeleton className="hidden h-6 md:w-56 xl:block" />
+        <Skeleton className="ms-auto hidden h-8 w-32 xl:block" />
         <Skeleton className="h-8 w-32" />
       </div>
       <div className="px-4">
-        <table className="w-full border-separate border-spacing-2 rounded-md ring-4 ring-transparent">
-          {Array.from({ length: ROW })?.map((_, index) => (
-            <tr key={index}>
+        <table className="hidden w-full border-separate border-spacing-2 divide-y-2 rounded-xl bg-background ring-2 ring-muted xl:table">
+          {Array.from({ length: ROW })?.map((_, row) => (
+            <tr key={row}>
               {Array.from({ length: COL })?.map((_, index) => (
-                <td key={index} className="first:w-12 last:w-16">
+                <td key={index} className={clsx('first:w-12 last:w-16')}>
                   {' '}
-                  <Skeleton className="h-9 w-full" />{' '}
+                  <Skeleton className={clsx('h-9 w-full')} />{' '}
                 </td>
               ))}
             </tr>
           ))}
         </table>
+
+        <div className="divide-y-2 rounded-xl ring-2 ring-muted xl:hidden">
+          {Array.from({ length: ROW })?.map((_, row) => (
+            <div key={row} className="w-full bg-background">
+              <div
+                className={clsx('flex items-center gap-2 bg-muted px-4 py-2 ', {
+                  'rounded-t-xl': row === 0,
+                })}
+              >
+                <Skeleton className="h-6 w-24 !bg-background" />
+                <Skeleton className="ms-auto h-3 w-12 !bg-background" />
+                <Skeleton className="h-4 w-4 !bg-background" />
+              </div>
+
+              <div className="flex flex-col gap-1 px-8 py-2 [&>*]:flex [&>*]:gap-2">
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-20" />{' '}
+                  <Skeleton className="h-6 w-20" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-16" />{' '}
+                  <Skeleton className="h-6 w-24" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-28" />{' '}
+                  <Skeleton className="h-6 w-12" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-32" />{' '}
+                  <Skeleton className="h-6 w-12" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-24" />{' '}
+                  <Skeleton className="h-6 w-16" />{' '}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
       <div className="flex items-center gap-2">
-        <Skeleton className="h-8 w-48" />
         <Skeleton className="ms-auto h-10 w-24" />
         <Skeleton className="h-10 w-24" />
       </div>
@@ -407,7 +451,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex h-full flex-col  items-center items-center justify-center gap-4 md:flex-row [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index 7b6f193..bc04191 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -714,14 +714,18 @@ export function Pending() {
     <>
       <div className="space-y-4">
         <div className="flex items-center gap-2">
-          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-8 w-24 md:w-48" />
           <Skeleton className="h-8 w-8 rounded-full" />
-          <Skeleton className="ms-auto h-10 w-24" />
+          <Skeleton className="ms-auto h-10 w-20 md:w-24" />
         </div>
         <Separator />
-        <div className="flex flex-wrap">
+        <div className="flex items-center">
+          <Skeleton className="hidden h-6 md:w-56 xl:block" />
+          <Skeleton className="h-8 w-40 xl:ms-auto" />
+        </div>
+        <div className="flex flex-wrap gap-4 [&>*]:flex-1 md:[&>*]:basis-2/5">
           {Array.from({ length: LENGTH })?.map((_, index) => (
-            <div className="basis-1/2  p-4" key={index}>
+            <div key={index}>
               <Card
                 className={clsx(
                   'justify-streetch grid h-full items-end shadow-lg'
@@ -766,7 +770,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex h-full flex-col  items-center items-center justify-center gap-4 md:flex-row [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index c9cd913..f11b825 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -330,63 +330,71 @@ export function Pending() {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="h-8 w-24 md:w-48" />
         <Skeleton className="ms-auto h-10 w-10" />
         <Skeleton className="h-10 w-10" />
-        <Skeleton className="h-10 w-24" />
-        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-20 md:w-24" />
+        <Skeleton className="hidden h-10 w-20 md:w-24 xl:block" />
       </div>
       <Separator />
-      <Skeleton className="h-8 w-64" />
+      <Skeleton className="h-8 w-40 md:w-64" />
       <div className="space-y-4 px-4 [&>div:last-child]:flex-col [&>div]:flex [&>div]:gap-2">
         <div className="flex items-end">
           {' '}
-          <Skeleton className="h-6 w-24" /> <Skeleton className="h-8 w-24" />{' '}
+          <Skeleton className="h-6 w-24 md:w-20" />{' '}
+          <Skeleton className="h-8 w-24 md:w-16" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-36" /> <Skeleton className="h-6 w-24" />{' '}
+          <Skeleton className="h-6 w-36 md:w-24" />{' '}
+          <Skeleton className="h-6 w-24 md:w-20" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-10" />{' '}
+          <Skeleton className="h-6 w-32 md:w-20" />{' '}
+          <Skeleton className="h-6 w-10" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-16" />{' '}
+          <Skeleton className="h-6 w-32 md:w-20" />{' '}
+          <Skeleton className="h-6 w-16 md:w-12" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-36" /> <Skeleton className="h-6 w-24" />{' '}
+          <Skeleton className="h-6 w-36 md:w-24" />{' '}
+          <Skeleton className="h-6 w-24 md:w-20" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-10" />{' '}
+          <Skeleton className="h-6 w-32 md:w-20" />{' '}
+          <Skeleton className="h-6 w-10" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-36" /> <Skeleton className="h-6 w-24" />{' '}
+          <Skeleton className="h-6 w-36 md:w-24" />{' '}
+          <Skeleton className="h-6 w-24 md:w-20" />{' '}
         </div>
         <div>
           {' '}
-          <Skeleton className="h-6 w-36" /> <Skeleton className="h-6 w-24" />{' '}
+          <Skeleton className="h-6 w-36 md:w-20" />{' '}
+          <Skeleton className="h-6 w-24 md:w-20" />{' '}
         </div>
         <div>
           {' '}
           <Skeleton className="h-6 w-24" /> <Skeleton className="h-6 w-24" />{' '}
         </div>
         <div>
-          <Skeleton className="h-6 w-36" />
-          <Skeleton className="mx-4 h-6 w-[50rem]" />
-          <Skeleton className="mx-4 h-6 w-[50rem]" />
-          <Skeleton className="mx-4 h-6 w-[12rem]" />
+          <Skeleton className="h-6 w-36 md:w-24" />
+          <Skeleton className="mx-4 h-6 w-full" />
+          <Skeleton className="mx-4 h-6 w-full" />
+          <Skeleton className="mx-4 h-6 w-full" />
         </div>
       </div>
       <Separator />
-      <Skeleton className="h-8 w-64" />
-      <div className="px-4">
-        <table className="w-full border-separate border-spacing-2 rounded-md ring-4 ring-transparent">
+      <Skeleton className="md:40 h-8 w-64" />
+
+      <div className="divide-y-2 rounded-xl ring-2 ring-muted">
+        <table className="hidden w-full border-separate border-spacing-2 divide-y-2 rounded-xl bg-background ring-2 ring-muted xl:table">
           {Array.from({ length: ROW })?.map((_, index) => (
             <tr key={index}>
               {Array.from({ length: COL })?.map((_, index) => (
@@ -398,6 +406,49 @@ export function Pending() {
             </tr>
           ))}
         </table>
+
+        <div className="divide-y-2 rounded-xl ring-2 ring-muted xl:hidden">
+          {Array.from({ length: ROW })?.map((_, row) => (
+            <div key={row} className="w-full bg-background">
+              <div
+                className={clsx('flex items-center gap-2 bg-muted px-4 py-2 ', {
+                  'rounded-t-xl': row === 0,
+                })}
+              >
+                <Skeleton className="h-6 w-24 !bg-background" />
+                <Skeleton className="ms-auto h-6 w-6 rounded-full !bg-background" />
+                <Skeleton className="h-6 w-12 rounded-full !bg-background" />
+              </div>
+
+              <div className="flex flex-col gap-1 px-8 py-2 [&>*]:flex [&>*]:gap-2">
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-28" />{' '}
+                  <Skeleton className="h-6 w-12" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-32" />{' '}
+                  <Skeleton className="h-6 w-12" />{' '}
+                </div>
+                <div>
+                  {' '}
+                  <Skeleton className="h-6 w-24" />{' '}
+                  <Skeleton className="h-6 w-16" />{' '}
+                </div>
+              </div>
+            </div>
+          ))}
+          <div
+            className={clsx(
+              'flex items-center gap-2 rounded-b-xl bg-muted px-4 py-2'
+            )}
+          >
+            <Skeleton className="h-4 w-24 !bg-background" />
+            <Skeleton className="ms-auto h-6 w-16 !bg-background" />
+            <Skeleton className="h-6 w-16 !bg-background" />
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -412,7 +463,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex h-full flex-col  items-center items-center justify-center gap-4 md:flex-row [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit_/$creditId_/update.tsx b/src/pages/_layout/credit_/$creditId_/update.tsx
index 4763e79..e955ba7 100644
--- a/src/pages/_layout/credit_/$creditId_/update.tsx
+++ b/src/pages/_layout/credit_/$creditId_/update.tsx
@@ -271,8 +271,8 @@ export function UpdateCreditById() {
           <_client.Provider value={client}>
             <Navigate to={Route.to} />
             <div className="space-y-4">
-              <div className="flex gap-2 items-center">
-                <h1 className="text-2xl md:text-3xl font-bold">{text.title}</h1>
+              <div className="flex items-center gap-2">
+                <h1 className="text-2xl font-bold md:text-3xl">{text.title}</h1>
                 <Dialog open={open} onOpenChange={onOpenChange}>
                   <Button
                     className="ms-auto"
@@ -282,7 +282,7 @@ export function UpdateCreditById() {
                   >
                     {text.button.update}
                   </Button>
-                  <Link to={'../'} className='hidden md:block'>
+                  <Link to={'../'} className="hidden md:block">
                     <Button
                       variant="outline"
                       className="hover:ring hover:ring-primary"
@@ -297,8 +297,8 @@ export function UpdateCreditById() {
               <Separator />
               <Card className="duration-400 shadow-lg transition delay-150 hover:shadow-xl">
                 <CardHeader>
-                  <div className="flex flex-row justify-between items-center">
-                    <CardTitle className="text-xl md:text-2xl font-bold">
+                  <div className="flex flex-row items-center justify-between">
+                    <CardTitle className="text-xl font-bold md:text-2xl">
                       {text.form.details.title}
                     </CardTitle>
                     <Switch
@@ -312,7 +312,7 @@ export function UpdateCreditById() {
                 <CardContent>
                   <form
                     autoFocus={false}
-                    className="p-1 grid grid-cols-none md:grid-cols-2 xl:grid-cols-3 gap-4 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
+                    className="grid grid-cols-none gap-4 p-1 md:grid-cols-2 xl:grid-cols-3 [&>label:last-child]:col-span-full [&>label>div>span]:font-bold [&>label>span]:font-bold [&>label]:space-y-2"
                     id={'edit-credit'}
                     onChange={onChangeDetail}
                     onSubmit={onSubmit}
@@ -331,7 +331,15 @@ export function UpdateCreditById() {
                             ? client?.nombres + ' ' + client?.apellidos
                             : undefined
                         }
-                        pattern={`(${clients?.map(({ nombres, apellidos }) => ( nombres + " " + apellidos )?.replace(/\s+/g, '\\s+'))?.join('|')})`}
+                        pattern={`(${clients
+                          ?.map(
+                            ({ nombres, apellidos }) =>
+                              (nombres + ' ' + apellidos)?.replace(
+                                /\s+/g,
+                                '\\s+'
+                              )
+                          )
+                          ?.join('|')})`}
                       />
                       <datalist id="credit-clients">
                         {clients?.map(({ nombres, apellidos }, index) => (
@@ -363,7 +371,15 @@ export function UpdateCreditById() {
                             : undefined
                         }
                         placeholder={text.form.details.ref.placeholder}
-                        pattern={`(${clients?.map(({ nombres, apellidos }) => ( nombres + " " + apellidos )?.replace(/\s+/g, '\\s+'))?.join('|')})`}
+                        pattern={`(${clients
+                          ?.map(
+                            ({ nombres, apellidos }) =>
+                              (nombres + ' ' + apellidos)?.replace(
+                                /\s+/g,
+                                '\\s+'
+                              )
+                          )
+                          ?.join('|')})`}
                       />
                     </Label>
                     <Label>
@@ -449,7 +465,9 @@ export function UpdateCreditById() {
                         defaultValue={
                           creditChange?.cobrador_id ? user?.nombre : undefined
                         }
-                        pattern={`(${users?.map(({ nombre }) => nombre?.replace(/\s+/g, '\\s+'))?.join('|')})`}
+                        pattern={`(${users
+                          ?.map(({ nombre }) => nombre?.replace(/\s+/g, '\\s+'))
+                          ?.join('|')})`}
                       />
                       <datalist id="credit-user">
                         {users?.map(({ nombre }, index) => (
@@ -542,7 +560,7 @@ export function UpdateCreditById() {
                 !!creditChange?.cuotas?.length && (
                   <Card className="duration-400 shadow-lg transition delay-150 hover:shadow-xl">
                     <CardHeader>
-                      <CardTitle className="text-xl md:text-2xl font-bold">
+                      <CardTitle className="text-xl font-bold md:text-2xl">
                         {text.form.pay.title}
                       </CardTitle>
                     </CardHeader>
@@ -598,7 +616,7 @@ export function UpdateCreditById() {
                               <AccordionContent asChild>
                                 <form
                                   autoFocus={false}
-                                  className="p-1 grid grid-cols-none md:grid-cols-2 items-end gap-4 px-4 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
+                                  className="grid grid-cols-none items-end gap-4 p-1 px-4 md:grid-cols-2 [&>label:last-child]:col-span-full [&>label>div]:flex [&>label>div]:items-center [&>label>div]:justify-between [&>label>div]:gap-2 [&>label]:space-y-2 [&>label_span]:font-bold"
                                   id={'edit-pay-' + index}
                                   onChange={onChangePaymentById(index)}
                                   onSubmit={onCuoteSubmit(index)}
@@ -674,73 +692,73 @@ export function Pending() {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
-        <Skeleton className="h-8 w-56" />
-        <Skeleton className="ms-auto h-10 w-24" />
-        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-8 w-20 md:w-56" />
+        <Skeleton className="ms-auto h-10 w-20 md:w-24" />
+        <Skeleton className="h-10 w-20 md:w-24" />
       </div>
       <Separator />
       <Card>
         <CardHeader className="items-between flex">
           <div className="flex flex-row justify-between">
-            <Skeleton className="h-8 w-52" />
-            <Skeleton className="ms-auto h-10 w-16" />
+            <Skeleton className="h-8 w-40 md:w-52" />
+            <Skeleton className="ms-auto h-8 w-16 rounded-full" />
           </div>
         </CardHeader>
-        <CardContent className="grid grid-cols-3 gap-4 [&>div]:flex [&>div]:flex-col [&>div]:gap-2">
+        <CardContent className="grid grid-cols-none gap-4 md:grid-cols-2 xl:grid-cols-3 [&>div]:flex [&>div]:flex-col [&>div]:gap-2">
           <div>
             {' '}
             <Skeleton className="h-6 w-36" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
           <div>
             {' '}
             <Skeleton className="h-6 w-24" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
           <div>
             {' '}
             <Skeleton className="h-6 w-32" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
           <div>
             {' '}
             <Skeleton className="h-6 w-24" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
           <div>
             {' '}
             <Skeleton className="h-6 w-36" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
           <div>
             {' '}
             <Skeleton className="h-6 w-32" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
-          <div className="row-start-3">
+          <div className="xl:row-start-3">
             {' '}
             <Skeleton className="h-6 w-24 " />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
-          <div className="row-start-3">
+          <div className="xl:row-start-3">
             {' '}
             <Skeleton className="h-6 w-24 " />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
-          <div className="row-start-4">
+          <div className="xl:row-start-4">
             {' '}
-            <Skeleton className="row-start-5 h-6 w-24" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-6 w-24 xl:row-start-5" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
-          <div className="row-start-4">
+          <div className="xl:row-start-4">
             {' '}
-            <Skeleton className="row-start-5 h-6 w-32" />{' '}
-            <Skeleton className="h-10 w-full" />{' '}
+            <Skeleton className="h-6 w-32 xl:row-start-5" />{' '}
+            <Skeleton className="h-8 w-full" />{' '}
           </div>
-          <div className="col-span-full row-start-5">
+          <div className="col-span-full xl:row-start-5">
             {' '}
             <Skeleton className=" h-6 w-24" />{' '}
-            <Skeleton className="h-32 w-full" />{' '}
+            <Skeleton className="h-32 w-full md:h-24" />{' '}
           </div>
         </CardContent>
       </Card>
@@ -772,7 +790,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex flex-col md:flex-row  h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex h-full flex-col  items-center items-center justify-center gap-4 md:flex-row [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index bd8c393..897fc0b 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -120,7 +120,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
         </TableBody>
 
         <TableFooter>
-          <TableRow>
+          <TableRow className="rounded-b-xl">
             <TableCell colSpan={5} className="flex justify-between font-bold">
               <p>{text.total + ':'}</p>
               <GetPay credit={credit} />
diff --git a/src/pages/_layout/user.tsx b/src/pages/_layout/user.tsx
index 8212bbf..d70000c 100644
--- a/src/pages/_layout/user.tsx
+++ b/src/pages/_layout/user.tsx
@@ -571,22 +571,22 @@ export function Pending() {
     <>
       <div className="space-y-4">
         <div className="flex items-center gap-2">
-          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-8 w-24 md:w-48" />
           <Skeleton className="h-8 w-8 rounded-full" />
-          <Skeleton className="ms-auto h-10 w-24" />
-          <Skeleton className="h-10 w-24" />
+          <Skeleton className="ms-auto h-10 w-20 md:w-24" />
+          <Skeleton className="h-10 w-20 md:w-24" />
         </div>
         <Separator />
         <div className="flex items-center">
-          <Skeleton className="h-6 w-56" />
-          <Skeleton className="ms-auto h-8 w-40" />
+          <Skeleton className="hidden h-6 md:w-56 xl:block" />
+          <Skeleton className="h-8 w-40 xl:ms-auto" />
         </div>
-        <div className="flex flex-wrap gap-4 px-2">
+        <div className="flex flex-wrap gap-4 px-2 [&>*]:flex-1">
           {Array.from({ length: LENGTH })?.map((_, index) => (
             <Card
               key={index}
               className={clsx(
-                'justify-streetch grid h-full items-end shadow-lg'
+                'justify-streetch inline-grid items-end shadow-lg'
               )}
             >
               <CardHeader>
@@ -594,15 +594,15 @@ export function Pending() {
               </CardHeader>
               <CardContent>
                 <div className="flex items-center gap-4">
-                  <Skeleton className="h-20 w-20 rounded-full" />
+                  <Skeleton className="h-16 w-16 rounded-full" />
                   <div className="space-y-2">
-                    <Skeleton className="h-6 w-48" />
                     <Skeleton className="h-6 w-32" />
+                    <Skeleton className="h-6 w-24" />
                   </div>
                 </div>
               </CardContent>
               <CardFooter className="flex items-center gap-2">
-                <Skeleton className="h-6 w-32" />
+                <Skeleton className="h-6 w-28" />
               </CardFooter>
             </Card>
           ))}
@@ -622,7 +622,7 @@ export function Error() {
     history.back()
   }
   return (
-    <div className="flex flex-col md:flex-row h-full items-center items-center justify-center gap-4 [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
+    <div className="flex h-full flex-col items-center items-center justify-center gap-4 md:flex-row [&>svg]:h-32 [&>svg]:w-32 [&>svg]:stroke-destructive [&_h1]:text-2xl">
       <Annoyed className="animate-bounce" />
       <div className="space-y-2">
         <h1 className="font-bold">{text.error}</h1>

From 2a2b394d14c868e50020f46af2aa5ca19622b057 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sun, 21 Apr 2024 01:39:08 -0400
Subject: [PATCH 27/30] style: fix length heigth in dialog component for a
 movile view

---
 src/pages/-info.tsx              |   2 +-
 src/pages/_layout/credit/new.tsx | 562 ++++++++++++++++---------------
 2 files changed, 292 insertions(+), 272 deletions(-)

diff --git a/src/pages/-info.tsx b/src/pages/-info.tsx
index a7d33fa..5fba0ed 100644
--- a/src/pages/-info.tsx
+++ b/src/pages/-info.tsx
@@ -224,7 +224,7 @@ export const MyUserInfo = memo(function () {
           {text.descriiption}
         </DialogDescription>
       </DialogHeader>
-      <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+      <ScrollArea className="h-[50dvh] overflow-y-auto md:h-full">
         <ScrollBar orientation="vertical" />
         <form
           autoFocus={false}
diff --git a/src/pages/_layout/credit/new.tsx b/src/pages/_layout/credit/new.tsx
index 521746b..ed6a939 100644
--- a/src/pages/_layout/credit/new.tsx
+++ b/src/pages/_layout/credit/new.tsx
@@ -271,304 +271,324 @@ export function NewCredit() {
   return (
     <>
       {!open && <Navigate to={'../'} replace />}
-      <DialogContent className="md:max-w-4xl max-w-2xl">
+      <DialogContent className="max-w-2xl md:max-w-4xl">
         <DialogHeader>
-          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">
+            {text.title}
+          </DialogTitle>
           <Separator />
-          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
+          <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
             {text.descriiption}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='h-[60dvh] md:h-full'>
-        <ScrollBar orientation='vertical' />
-        <form
-          autoFocus={false}
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          id="new-credit"
-          className={clsx(
-            'p-1 grid-rows-subgrid grid xl:grid-cols-3 md:grid-cols-2 grid-cols-none md:items-end gap-3 gap-y-4 [&>label]:space-y-2',
-            styles?.['custom-form'],
-            {
-              '[&_*:disabled]:opacity-100': !!curruntUserId && rol?.rolName !== 'Administrador',
-            }
-          )}
-        >
-          <Label className="xl:!col-span-1">
-            <span>{text.form.cliente.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <>
-                {' '}
-                <Input
-                  required
-                  name={'client' as TFormName}
-                  type="text"
-                  placeholder={text.form.cliente.placeholder}
-                  list="credit-clients"
-                  defaultValue={
-                    client
-                      ? client?.nombres + ' ' + client?.apellidos
-                      : undefined
-                  }
-                  pattern={`(${clientsRes?.map(({ nombres, apellidos }) => ( nombres + " " + apellidos )?.replace(/\s+/g, '\\s+'))?.join('|')})`}
-                />
-                <datalist id="credit-clients">
-                  {clientsRes?.map(({ nombres, apellidos }, index) => (
-                    <option key={index} value={nombres + ' ' + apellidos} />
-                  ))}
-                </datalist>{' '}
-              </>
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.date.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <DatePicker
-                name={'fecha_de_aprobacion' as TFormName}
-                label={text.form.date.placeholder}
-                className="!border-1 !border-ring"
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.ref.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                name={'ref' as TFormName}
-                list="credit-clients"
-                type="text"
-                placeholder={text.form.ref.placeholder}
-                defaultValue={ref ? ref?.nombres + ref?.apellidos : undefined}
-                pattern={`(${clientsRes?.map(({ nombres, apellidos }) => ( nombres + " " + apellidos )?.replace(/\s+/g, '\\s+'))?.join('|')})`}
-              />
+        <ScrollArea className="h-[50dvh] md:h-full">
+          <ScrollBar orientation="vertical" />
+          <form
+            autoFocus={false}
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            id="new-credit"
+            className={clsx(
+              'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 md:grid-cols-2 md:items-end xl:grid-cols-3 [&>label]:space-y-2',
+              styles?.['custom-form'],
+              {
+                '[&_*:disabled]:opacity-100':
+                  !!curruntUserId && rol?.rolName !== 'Administrador',
+              }
             )}
-          </Label>
-          <Label className="xl:row-start-2">
-            <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
-              <span className='after:text-red-500 after:content-["_*_"]'>
-                {text.form.amount.label}{' '}
-              </span>
+          >
+            <Label className="xl:!col-span-1">
+              <span>{text.form.cliente.label} </span>
               {!okUsers && !okClients ? (
-                <Skeleton className="h-6 w-8 rounded-full" />
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <Badge>$</Badge>
+                <>
+                  {' '}
+                  <Input
+                    required
+                    name={'client' as TFormName}
+                    type="text"
+                    placeholder={text.form.cliente.placeholder}
+                    list="credit-clients"
+                    defaultValue={
+                      client
+                        ? client?.nombres + ' ' + client?.apellidos
+                        : undefined
+                    }
+                    pattern={`(${clientsRes
+                      ?.map(
+                        ({ nombres, apellidos }) =>
+                          (nombres + ' ' + apellidos)?.replace(/\s+/g, '\\s+')
+                      )
+                      ?.join('|')})`}
+                  />
+                  <datalist id="credit-clients">
+                    {clientsRes?.map(({ nombres, apellidos }, index) => (
+                      <option key={index} value={nombres + ' ' + apellidos} />
+                    ))}
+                  </datalist>{' '}
+                </>
               )}
-            </div>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                min={1}
-                step={1}
-                // defaultValue={amount}
-                onChange={onChangeValue('amount')}
-                name={'monto' as TFormName}
-                type="number"
-                placeholder={text.form.amount.placeholder}
-              />
-            )}
-          </Label>
-          <Label htmlFor="credit-cuote" className="xl:row-start-2">
-            <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
-              <span className='after:text-red-500 after:content-["_*_"]'>
-                {text.form.interest.label}{' '}
-              </span>
+            </Label>
+            <Label>
+              <span>{text.form.date.label} </span>
               {!okUsers && !okClients ? (
-                <Skeleton className="h-6 w-8 rounded-full" />
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <Badge>%</Badge>
+                <DatePicker
+                  name={'fecha_de_aprobacion' as TFormName}
+                  label={text.form.date.placeholder}
+                  className="!border-1 !border-ring"
+                />
               )}
-            </div>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                id="credit-cuote"
-                required
-                min={1}
-                max={100}
-                step={1}
-                name={'tasa_de_interes' as TFormName}
-                // defaultValue={interest}
-                onChange={onChangeValue('interest')}
-                type="number"
-                placeholder={text.form.interest.placeholder}
-              />
-            )}
-          </Label>
-          <Label htmlFor="credit-pay" className="xl:row-start-2">
-            <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
-              <span className='after:text-red-500 after:content-["_*_"]'>
-                {text.form.cuote.label}{' '}
-              </span>
+            </Label>
+            <Label>
+              <span>{text.form.ref.label} </span>
               {!okUsers && !okClients ? (
-                <Skeleton className="h-6 w-8 rounded-full" />
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <Badge>#</Badge>
-              )}
-            </div>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                id="credit-pay"
-                required
-                min={1}
-                max={25}
-                step={1}
-                name={'numero_de_cuotas' as TFormName}
-                // defaultValue={coute}
-                onChange={onChangeValue('coute')}
-                type="number"
-                placeholder={text.form.cuote.placeholder}
-              />
-            )}
-          </Label>
-          <Label className='xl:row-start-3 [&>span]:after:text-red-500 [&>span]:after:content-["_*_"]'>
-            <span>{text.form.frecuency.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Select
-                required
-                name={'frecuencia_del_credito_id' as TFormName}
-                defaultValue={
-                  '' + getFrecuencyByName({ frecuencyName: 'Mensual' })?.id
-                }
-              >
-                <SelectTrigger className="!border-1 w-full !border-ring">
-                  <SelectValue placeholder={text.form.frecuency.placeholder} />
-                </SelectTrigger>
-                <SelectContent className="[&_*]:cursor-pointer">
-                  {listFrecuencys()?.map(({ id, nombre }, index) => (
-                    <SelectItem key={index} value={'' + id}>
-                      {nombre}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
-          </Label>
-          <Label className="xl:row-start-3">
-            <span>{text.form.user.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <>
                 <Input
-                  required
-                  name={'user' as TFormName}
+                  name={'ref' as TFormName}
+                  list="credit-clients"
                   type="text"
-                  placeholder={text.form.user.placeholder}
-                  list="credit-user"
-                  defaultValue={user ? user?.nombre : undefined}
-                  disabled={!!curruntUserId && rol?.rolName !== 'Administrador'}
-                  pattern={`(${usersRes?.map(({ nombre }) => nombre?.replace(/\s+/g, '\\s+'))?.join('|')})`}
+                  placeholder={text.form.ref.placeholder}
+                  defaultValue={ref ? ref?.nombres + ref?.apellidos : undefined}
+                  pattern={`(${clientsRes
+                    ?.map(
+                      ({ nombres, apellidos }) =>
+                        (nombres + ' ' + apellidos)?.replace(/\s+/g, '\\s+')
+                    )
+                    ?.join('|')})`}
                 />
-                <datalist id="credit-user">
-                  {usersRes?.map(({ nombre, id }) => (
-                    <option key={id} value={nombre} />
-                  ))}
-                </datalist>{' '}
-              </>
-            )}
-          </Label>
-          <Label htmlFor="credit-installments" className="xl:row-start-4">
-            <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
-              <span className='after:text-red-500 after:content-["_*_"]'>
-                {text.form.installments.label}{' '}
-              </span>
+              )}
+            </Label>
+            <Label className="xl:row-start-2">
+              <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
+                <span className='after:text-red-500 after:content-["_*_"]'>
+                  {text.form.amount.label}{' '}
+                </span>
+                {!okUsers && !okClients ? (
+                  <Skeleton className="h-6 w-8 rounded-full" />
+                ) : (
+                  <Badge>$</Badge>
+                )}
+              </div>
               {!okUsers && !okClients ? (
-                <div>
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  min={1}
+                  step={1}
+                  // defaultValue={amount}
+                  onChange={onChangeValue('amount')}
+                  name={'monto' as TFormName}
+                  type="number"
+                  placeholder={text.form.amount.placeholder}
+                />
+              )}
+            </Label>
+            <Label htmlFor="credit-cuote" className="xl:row-start-2">
+              <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
+                <span className='after:text-red-500 after:content-["_*_"]'>
+                  {text.form.interest.label}{' '}
+                </span>
+                {!okUsers && !okClients ? (
                   <Skeleton className="h-6 w-8 rounded-full" />
+                ) : (
+                  <Badge>%</Badge>
+                )}
+              </div>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  id="credit-cuote"
+                  required
+                  min={1}
+                  max={100}
+                  step={1}
+                  name={'tasa_de_interes' as TFormName}
+                  // defaultValue={interest}
+                  onChange={onChangeValue('interest')}
+                  type="number"
+                  placeholder={text.form.interest.placeholder}
+                />
+              )}
+            </Label>
+            <Label htmlFor="credit-pay" className="xl:row-start-2">
+              <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
+                <span className='after:text-red-500 after:content-["_*_"]'>
+                  {text.form.cuote.label}{' '}
+                </span>
+                {!okUsers && !okClients ? (
                   <Skeleton className="h-6 w-8 rounded-full" />
-                </div>
+                ) : (
+                  <Badge>#</Badge>
+                )}
+              </div>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <RadioGroup
-                  name={'tipo_de_mora' as TFormName}
+                <Input
+                  id="credit-pay"
+                  required
+                  min={1}
+                  max={25}
+                  step={1}
+                  name={'numero_de_cuotas' as TFormName}
+                  // defaultValue={coute}
+                  onChange={onChangeValue('coute')}
+                  type="number"
+                  placeholder={text.form.cuote.placeholder}
+                />
+              )}
+            </Label>
+            <Label className='xl:row-start-3 [&>span]:after:text-red-500 [&>span]:after:content-["_*_"]'>
+              <span>{text.form.frecuency.label} </span>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Select
+                  required
+                  name={'frecuencia_del_credito_id' as TFormName}
                   defaultValue={
-                    getMoraTypeByName({ moraTypeName: 'Porciento' })?.nombre
+                    '' + getFrecuencyByName({ frecuencyName: 'Mensual' })?.id
                   }
-                  onChange={onChangeType}
                 >
-                  <Label>
-                    <RadioGroupItem
-                      value={
-                        getMoraTypeByName({ moraTypeName: 'Valor fijo' })
-                          ?.nombre
-                      }
-                    />{' '}
-                    <Badge>$</Badge>{' '}
-                  </Label>
-                  <Label>
-                    <RadioGroupItem
-                      value={
-                        getMoraTypeByName({ moraTypeName: 'Porciento' })?.nombre
-                      }
-                    />{' '}
-                    <Badge>%</Badge>{' '}
-                  </Label>
-                </RadioGroup>
+                  <SelectTrigger className="!border-1 w-full !border-ring">
+                    <SelectValue
+                      placeholder={text.form.frecuency.placeholder}
+                    />
+                  </SelectTrigger>
+                  <SelectContent className="[&_*]:cursor-pointer">
+                    {listFrecuencys()?.map(({ id, nombre }, index) => (
+                      <SelectItem key={index} value={'' + id}>
+                        {nombre}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
-            </div>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                id="credit-installments"
-                required
-                min={1}
-                max={installmants?.type === 'Porciento' ? 100 : undefined}
-                step={installmants?.type === 'Porciento' ? 1 : 1}
-                name={'valor_de_mora' as TFormName}
-                type="number"
-                defaultValue={installmants.value}
-                placeholder={
-                  text.form.installments.placeholder?.[installmants.type]
-                }
-              />
-            )}
-          </Label>
-          <Label className="xl:row-start-4">
-            <span>{text.form.aditionalDays.label} </span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                min={0}
-                max={25}
-                name={'dias_adicionales' as TFormName}
-                type="number"
-                placeholder={text.form.aditionalDays.placeholder}
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.comment.label}</span>
-            {!okUsers && !okClients ? (
-              <Skeleton className="h-32 w-full" />
-            ) : (
-              <Textarea
-                rows={5}
-                name={'comentario' as TFormName}
-                placeholder={text.form.comment.placeholder}
-              />
-            )}
-          </Label>
-        </form>
+            </Label>
+            <Label className="xl:row-start-3">
+              <span>{text.form.user.label} </span>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <>
+                  <Input
+                    required
+                    name={'user' as TFormName}
+                    type="text"
+                    placeholder={text.form.user.placeholder}
+                    list="credit-user"
+                    defaultValue={user ? user?.nombre : undefined}
+                    disabled={
+                      !!curruntUserId && rol?.rolName !== 'Administrador'
+                    }
+                    pattern={`(${usersRes
+                      ?.map(({ nombre }) => nombre?.replace(/\s+/g, '\\s+'))
+                      ?.join('|')})`}
+                  />
+                  <datalist id="credit-user">
+                    {usersRes?.map(({ nombre, id }) => (
+                      <option key={id} value={nombre} />
+                    ))}
+                  </datalist>{' '}
+                </>
+              )}
+            </Label>
+            <Label htmlFor="credit-installments" className="xl:row-start-4">
+              <div className="flex items-center justify-between gap-2 [&>div]:flex [&>div]:items-center [&>div]:gap-2 [&_label]:flex [&_label]:cursor-pointer [&_label]:items-center [&_label]:gap-2">
+                <span className='after:text-red-500 after:content-["_*_"]'>
+                  {text.form.installments.label}{' '}
+                </span>
+                {!okUsers && !okClients ? (
+                  <div>
+                    <Skeleton className="h-6 w-8 rounded-full" />
+                    <Skeleton className="h-6 w-8 rounded-full" />
+                  </div>
+                ) : (
+                  <RadioGroup
+                    name={'tipo_de_mora' as TFormName}
+                    defaultValue={
+                      getMoraTypeByName({ moraTypeName: 'Porciento' })?.nombre
+                    }
+                    onChange={onChangeType}
+                  >
+                    <Label>
+                      <RadioGroupItem
+                        value={
+                          getMoraTypeByName({ moraTypeName: 'Valor fijo' })
+                            ?.nombre
+                        }
+                      />{' '}
+                      <Badge>$</Badge>{' '}
+                    </Label>
+                    <Label>
+                      <RadioGroupItem
+                        value={
+                          getMoraTypeByName({ moraTypeName: 'Porciento' })
+                            ?.nombre
+                        }
+                      />{' '}
+                      <Badge>%</Badge>{' '}
+                    </Label>
+                  </RadioGroup>
+                )}
+              </div>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  id="credit-installments"
+                  required
+                  min={1}
+                  max={installmants?.type === 'Porciento' ? 100 : undefined}
+                  step={installmants?.type === 'Porciento' ? 1 : 1}
+                  name={'valor_de_mora' as TFormName}
+                  type="number"
+                  defaultValue={installmants.value}
+                  placeholder={
+                    text.form.installments.placeholder?.[installmants.type]
+                  }
+                />
+              )}
+            </Label>
+            <Label className="xl:row-start-4">
+              <span>{text.form.aditionalDays.label} </span>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  min={0}
+                  max={25}
+                  name={'dias_adicionales' as TFormName}
+                  type="number"
+                  placeholder={text.form.aditionalDays.placeholder}
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.comment.label}</span>
+              {!okUsers && !okClients ? (
+                <Skeleton className="h-32 w-full" />
+              ) : (
+                <Textarea
+                  rows={5}
+                  name={'comentario' as TFormName}
+                  placeholder={text.form.comment.placeholder}
+                />
+              )}
+            </Label>
+          </form>
         </ScrollArea>
-        <DialogFooter className="!items-start md:items-center md:!justify-between flex-col gap-2 md:flex-row">
+        <DialogFooter className="flex-col !items-start gap-2 md:flex-row md:items-center md:!justify-between">
           <ul
             className={clsx(
-              'transition delay-150 duration-500 [&>li]:list-inside [&>li]:list-disc [&_span]:font-bold',
+              'flex w-full flex-row justify-between transition delay-150 duration-500 md:flex-col md:justify-start md:[&>li]:list-inside md:[&>li]:list-disc [&_span]:font-bold',
               {
                 'opacity-0':
                   !interest ||
@@ -590,7 +610,7 @@ export function NewCredit() {
               {'$' + getAmountCuote({ interest, amount, coute })}.{' '}
             </li>
           </ul>
-          <div className="md:space-x-2 w-full md:w-fit flex flex-col gap-2 md:flex-row">
+          <div className="flex w-full flex-col gap-2 md:w-fit md:flex-row md:space-x-2">
             {!okUsers && !okClients ? (
               <>
                 <Skeleton className="inline-block h-12 w-24" />

From d325043c8dfa0a305373c264df96b8bf21e8d6f1 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sun, 21 Apr 2024 02:20:43 -0400
Subject: [PATCH 28/30] style: fix Pending component by users roles for a
 movile view

---
 src/pages/_layout.tsx                   |  3 ++
 src/pages/_layout/-table.tsx            | 52 +++++++++++++++----------
 src/pages/_layout/client.tsx            | 31 ++++++++++-----
 src/pages/_layout/credit.tsx            |  5 ++-
 src/pages/_layout/credit_/$creditId.tsx |  9 +++--
 5 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 5891355..fe4130f 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -459,6 +459,9 @@ export function Layout() {
             >
               <MenuSquare />
             </Button>
+            <Button onClick={onBack} variant="ghost" className="p-1 xl:hidden">
+              <ArrowLeftCircle />
+            </Button>
             <Link to={'./notification'}>
               {({ isActive }) => (
                 <Button
diff --git a/src/pages/_layout/-table.tsx b/src/pages/_layout/-table.tsx
index 3da640e..207345f 100644
--- a/src/pages/_layout/-table.tsx
+++ b/src/pages/_layout/-table.tsx
@@ -11,6 +11,7 @@ import { flexRender, type Table as TTable } from '@tanstack/react-table'
 import { TClientTable, desktop } from './-column'
 import clsx from 'clsx'
 import { Label } from '@/components/ui/label'
+import { useToken } from '@/lib/context/login'
 
 /* eslint-disable-next-line */
 type TPaymentTable = {
@@ -20,6 +21,7 @@ type TPaymentTable = {
 /* eslint-disable-next-line */
 export function ClientTable({ table }: TPaymentTable) {
   const screen = useScreen()
+  const { rol } = useToken()
 
   if (screen !== 'lg')
     return (
@@ -52,16 +54,18 @@ export function ClientTable({ table }: TPaymentTable) {
                           fullName?.column?.columnDef.cell,
                           fullName?.getContext()
                         )}
-                        <div className="space-x-2 px-4">
-                          {flexRender(
-                            action?.column?.columnDef.cell,
-                            action?.getContext()
-                          )}
-                          {flexRender(
-                            select?.column?.columnDef.cell,
-                            select?.getContext()
-                          )}
-                        </div>
+                        {rol?.rolName === 'Administrador' && (
+                          <div className="space-x-2 px-4">
+                            {flexRender(
+                              action?.column?.columnDef.cell,
+                              action?.getContext()
+                            )}
+                            {flexRender(
+                              select?.column?.columnDef.cell,
+                              select?.getContext()
+                            )}
+                          </div>
+                        )}
                       </Label>
                     </TableHead>
                   </TableRow>
@@ -140,13 +144,16 @@ export function ClientTable({ table }: TPaymentTable) {
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id}>
             {headerGroup.headers.map((header, index, list) => {
+              if (rol?.rolName !== 'Administrador' && index === 0) return
               return (
                 <TableHead
                   key={header.id}
                   className={clsx(
                     'first:sticky first:left-0 last:sticky last:right-0',
                     {
-                      'rounded-tl-xl': index === 0,
+                      'rounded-tl-xl':
+                        (rol?.rolName === 'Administrador' && index === 0) ||
+                        (rol?.rolName !== 'Administrador' && index === 1),
                       'rounded-tr-xl': index === list?.length - 1,
                     }
                   )}
@@ -170,16 +177,19 @@ export function ClientTable({ table }: TPaymentTable) {
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
             >
-              {row.getVisibleCells().map((cell) => (
-                <TableCell
-                  key={cell.id}
-                  className={clsx(
-                    'first:sticky first:left-0 last:sticky last:right-0'
-                  )}
-                >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              ))}
+              {row.getVisibleCells().map((cell, index) => {
+                if (rol?.rolName !== 'Administrador' && index === 0) return
+                return (
+                  <TableCell
+                    key={cell.id}
+                    className={clsx(
+                      'first:sticky first:left-0 last:sticky last:right-0'
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                )
+              })}
             </TableRow>
           ))
         ) : (
diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index 0a002ca..b44c4fb 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -362,17 +362,22 @@ export function Clients() {
 
 /* eslint-disable-next-line */
 export function Pending() {
+  const { rol } = useToken()
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
         <Skeleton className="h-8 w-24 md:w-36" />
         <Skeleton className="h-8 w-8 rounded-full" />
         <Skeleton className="ms-auto h-10 w-20 md:w-24" />
-        <Skeleton className="h-10 w-20 md:w-24" />
+        {rol?.rolName === 'Administrador' && (
+          <Skeleton className="h-10 w-20 md:w-24" />
+        )}
       </div>
       <Separator />
       <div className="flex items-center gap-2">
-        <Skeleton className="hidden h-6 md:w-56 xl:block" />
+        {rol?.rolName === 'Administrador' && (
+          <Skeleton className="hidden h-6 md:w-56 xl:block" />
+        )}
         <Skeleton className="ms-auto hidden h-8 w-32 xl:block" />
         <Skeleton className="h-8 w-32" />
       </div>
@@ -380,12 +385,18 @@ export function Pending() {
         <table className="hidden w-full border-separate border-spacing-2 divide-y-2 rounded-xl bg-background ring-2 ring-muted xl:table">
           {Array.from({ length: ROW })?.map((_, row) => (
             <tr key={row}>
-              {Array.from({ length: COL })?.map((_, index) => (
-                <td key={index} className={clsx('first:w-12 last:w-16')}>
-                  {' '}
-                  <Skeleton className={clsx('h-9 w-full')} />{' '}
-                </td>
-              ))}
+              {Array.from({ length: COL })?.map((_, index) => {
+                if (rol?.rolName !== 'Administrador' && index === 0) return
+                return (
+                  <td
+                    key={index}
+                    className={clsx('last:w-16', { 'first:w-12': index === 0 })}
+                  >
+                    {' '}
+                    <Skeleton className={clsx('h-9 w-full')} />{' '}
+                  </td>
+                )
+              })}
             </tr>
           ))}
         </table>
@@ -400,7 +411,9 @@ export function Pending() {
               >
                 <Skeleton className="h-6 w-24 !bg-background" />
                 <Skeleton className="ms-auto h-3 w-12 !bg-background" />
-                <Skeleton className="h-4 w-4 !bg-background" />
+                {rol?.rolName === 'Administrador' && (
+                  <Skeleton className="h-4 w-4 !bg-background" />
+                )}
               </div>
 
               <div className="flex flex-col gap-1 px-8 py-2 [&>*]:flex [&>*]:gap-2">
diff --git a/src/pages/_layout/credit.tsx b/src/pages/_layout/credit.tsx
index bc04191..98b8e5f 100644
--- a/src/pages/_layout/credit.tsx
+++ b/src/pages/_layout/credit.tsx
@@ -710,6 +710,7 @@ export const PrintCredit = forwardRef<HTMLDivElement, TPrintCredit>(function (
 
 /* eslint-disable-next-line */
 export function Pending() {
+  const { rol } = useToken()
   return (
     <>
       <div className="space-y-4">
@@ -749,7 +750,9 @@ export function Pending() {
                 <CardFooter className="flex items-center gap-2">
                   <Skeleton className="h-6 w-32" />
                   <Skeleton className="ms-auto h-10 w-11" />
-                  <Skeleton className="h-10 w-11" />
+                  {rol?.rolName === 'Administrador' && (
+                    <Skeleton className="h-10 w-11" />
+                  )}
                 </CardFooter>
               </Card>
             </div>
diff --git a/src/pages/_layout/credit_/$creditId.tsx b/src/pages/_layout/credit_/$creditId.tsx
index f11b825..7417cb8 100644
--- a/src/pages/_layout/credit_/$creditId.tsx
+++ b/src/pages/_layout/credit_/$creditId.tsx
@@ -327,13 +327,16 @@ export function CreditById() {
 
 /* eslint-disable-next-line */
 export function Pending() {
+  const { rol } = useToken()
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
         <Skeleton className="h-8 w-24 md:w-48" />
-        <Skeleton className="ms-auto h-10 w-10" />
-        <Skeleton className="h-10 w-10" />
-        <Skeleton className="h-10 w-20 md:w-24" />
+        <Skeleton className="ms-auto h-10 w-16" />
+        {rol?.rolName === 'Administrador' && <Skeleton className="h-10 w-16" />}
+        {rol?.rolName === 'Administrador' && (
+          <Skeleton className="h-10 w-20 md:w-24" />
+        )}
         <Skeleton className="hidden h-10 w-20 md:w-24 xl:block" />
       </div>
       <Separator />

From ca2da292eeec33abc948b831dc8a5ce343bf6471 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sun, 21 Apr 2024 02:25:56 -0400
Subject: [PATCH 29/30] fix: fix styles

---
 src/pages/_layout/client.tsx         |  4 ++--
 src/pages/_layout/credit_/-table.tsx | 19 ++++++-------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/pages/_layout/client.tsx b/src/pages/_layout/client.tsx
index b44c4fb..d365f0a 100644
--- a/src/pages/_layout/client.tsx
+++ b/src/pages/_layout/client.tsx
@@ -260,7 +260,7 @@ export function Clients() {
               <Select value={filter} onValueChange={onValueChange}>
                 <SelectTrigger
                   title="Filtro de busqueda"
-                  className="ms-auto hidden w-auto xl:block"
+                  className="ms-auto hidden w-auto xl:flex"
                 >
                   <SelectValue placeholder={text.select.placeholder} />
                 </SelectTrigger>
@@ -304,7 +304,7 @@ export function Clients() {
                 </SelectContent>
               </Select>
               <DropdownMenu>
-                <DropdownMenuTrigger asChild className="hidden xl:block">
+                <DropdownMenuTrigger asChild className="hidden xl:flex">
                   <Button variant="outline">
                     {text.dropdown.title}{' '}
                     <ChevronDown className="ml-2 h-4 w-4" />
diff --git a/src/pages/_layout/credit_/-table.tsx b/src/pages/_layout/credit_/-table.tsx
index 897fc0b..63b82b9 100644
--- a/src/pages/_layout/credit_/-table.tsx
+++ b/src/pages/_layout/credit_/-table.tsx
@@ -91,7 +91,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
                       </li>
 
                       <li>
-                        <b>{text.payValue + ':'}</b> <b>$</b>{' '}
+                        <b>{text.payValue + ':'}</b> ${' '}
                         {payment?.valor_del_pago?.toFixed(2) + '.'}
                       </li>
 
@@ -107,7 +107,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
 
                       {cuote?.valor_de_mora > 0 && (
                         <li>
-                          <b>{text.payInstallmants + ':'}</b> <b>$</b>{' '}
+                          <b>{text.payInstallmants + ':'}</b> ${' '}
                           {cuote?.valor_de_mora?.toFixed(2) + '.'}
                         </li>
                       )}
@@ -175,10 +175,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
               </ul>
             </TableCell>
             <TableCell>
-              <p>
-                <b>$</b>
-                {payment?.valor_del_pago?.toFixed(2)}
-              </p>
+              <p>${payment?.valor_del_pago?.toFixed(2)}</p>
             </TableCell>
             <TableCell>
               <p>
@@ -193,9 +190,7 @@ export function PaymentTable({ table, credit }: TPaymentTable) {
             <TableCell>
               <p>
                 {cuote?.valor_de_mora > 0 ? (
-                  <>
-                    <b>$</b> {cuote?.valor_de_mora?.toFixed(2)}
-                  </>
+                  <>$ {cuote?.valor_de_mora?.toFixed(2)}</>
                 ) : (
                   '-'
                 )}
@@ -230,14 +225,12 @@ function GetPay({ credit }: { credit: TCREDIT_GET }) {
 
   return (
     <p>
-      <b>$</b>
+      $
       {credit.pagos
         .map(({ valor_del_pago }) => valor_del_pago)
         .reduce((prev, acc) => (acc += prev))
         ?.toFixed(2)}
-      <b>&#8193;/&#8193;</b>
-      <b>$</b>
-      {credit?.monto}
+      <b>&#8193;/&#8193;</b>${credit?.monto}
     </p>
   )
 }

From 4079db901bd19a4ff663cad589b9045e45094545 Mon Sep 17 00:00:00 2001
From: alnavarrop99 <anavarro.develop99@gmail.com>
Date: Sun, 21 Apr 2024 02:45:30 -0400
Subject: [PATCH 30/30] fix: remove dealy charge in update client and update
 styles in pending dialog component

---
 src/pages/_layout/client/$clientId/update.tsx | 391 +++++++++---------
 src/pages/_layout/user/$userId/update.tsx     | 289 ++++++-------
 2 files changed, 349 insertions(+), 331 deletions(-)

diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index c3ddf20..85cb947 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -41,7 +41,7 @@ import { queryClient } from '@/pages/__root'
 import { Skeleton } from '@/components/ui/skeleton'
 import styles from '@/styles/global.module.css'
 import { useToken } from '@/lib/context/login'
-import { redirect } from '@tanstack/react-router'
+// import { redirect } from '@tanstack/react-router'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { ScrollBar } from '@/components/ui/scroll-area'
 
@@ -58,13 +58,15 @@ export const getClientByIdOpt = ({ clientId }: { clientId: string }) => ({
 export const Route = createFileRoute('/_layout/client/$clientId/update')({
   component: UpdateClientById,
   loader: async ({ params }) => {
-    const { rol, userId } = useToken.getState()
     const data = queryClient.ensureQueryData(
       queryOptions(getClientByIdOpt(params))
     )
-    const ownerId = (await data)?.owner.id
-    if (ownerId !== userId && rol?.rolName !== 'Administrador')
-      throw redirect({ to: '/client' })
+
+    // TOOD: change this of site infer in the charge
+    // const { rol, userId } = useToken.getState()
+    // const ownerId = (await data)?.owner.id
+    // if (ownerId !== userId && rol?.rolName !== 'Administrador')
+    //   throw redirect({ to: '/client' })
 
     return { client: defer(data) }
   },
@@ -91,7 +93,7 @@ export function UpdateClientById() {
   const init = useRef(client)
 
   useEffect(() => {
-    if (!clientRes) throw Error()
+    if (!clientRes && isError) throw Error()
   }, [isError])
 
   const onSuccess = (data: TCLIENT_POST) => {
@@ -256,197 +258,202 @@ export function UpdateClientById() {
             {text.title({ state: !checked })}
           </DialogTitle>
           <Separator />
-          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
+          <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
             {text.description({ state: !checked })}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
-        <ScrollBar orientation='vertical' />
-        <form
-          autoFocus={false}
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          onChange={onChange}
-          id="update-client"
-          className={clsx(
-            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
-            {
-              '[&>label>span]:font-bold': checked,
-            }
-          )}
-        >
-          <Label>
-            <span>{text.form.firstName.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'nombres' as TFormName}
-                type="text"
-                defaultValue={clientRes?.nombres}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-                placeholder={
-                  checked ? text.form.firstName.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.lastName.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'apellidos' as TFormName}
-                type="text"
-                defaultValue={clientRes?.apellidos}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-                placeholder={
-                  checked ? text.form.lastName.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.id.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'numero_de_identificacion' as TFormName}
-                type="text"
-                defaultValue={clientRes?.numero_de_identificacion}
-                placeholder={checked ? text.form.id.placeholder : undefined}
-                pattern="[A-Za-z0-9]{6,12}"
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.typeId.label} </span>
-            {!isSuccess || !clientRes ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Select
-                defaultValue={
-                  '' + getIdById({ id: clientRes?.tipo_de_identificacion })?.id
-                }
-                disabled={!checked}
-                required
-                name={'tipo_de_identificacion' as TFormName}
-              >
-                <SelectTrigger className={clsx('w-full')}>
-                  <SelectValue placeholder={text.form.typeId.placeholder} />
-                </SelectTrigger>
-                <SelectContent className="[&_*]:cursor-pointer">
-                  {listIds()?.map(({ id, nombre }, index) => (
-                    <SelectItem key={index} value={'' + id}>
-                      {nombre}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.phone.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'celular' as TFormName}
-                type="tel"
-                defaultValue={clientRes?.celular}
-                pattern="(?:\+57|0)[0-9]{8}"
-                placeholder={checked ? text.form.phone.placeholder : undefined}
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.telephone.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'telefono' as TFormName}
-                type="tel"
-                defaultValue={clientRes?.telefono}
-                pattern="(?:\+57|0)[0-9]{6,7}"
-                placeholder={
-                  checked ? text.form.telephone.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.direction.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'direccion' as TFormName}
-                type="text"
-                defaultValue={clientRes?.direccion}
-                placeholder={
-                  checked ? text.form.direction.placeholder : undefined
-                }
-              />
+        <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+          <ScrollBar orientation="vertical" />
+          <form
+            autoFocus={false}
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            onChange={onChange}
+            id="update-client"
+            className={clsx(
+              'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 md:grid-cols-2 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
+              {
+                '[&>label>span]:font-bold': checked,
+              }
             )}
-          </Label>
-          <Label>
-            <span>{text.form.ref.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <>
+          >
+            <Label>
+              <span>{text.form.firstName.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
                 <Input
+                  required
                   disabled={!checked}
-                  name={'referencia' as TFormName}
-                  list="client-referent"
+                  name={'nombres' as TFormName}
                   type="text"
-                  defaultValue={ref?.fullName}
-                  placeholder={checked ? text.form.ref.placeholder : undefined}
-                  pattern={`(${clients
-                    ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
-                    ?.join('|')})`}
+                  defaultValue={clientRes?.nombres}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                  placeholder={
+                    checked ? text.form.firstName.placeholder : undefined
+                  }
                 />
-                <datalist id="client-referent">
-                  {clients?.map(({ fullName }, index) => (
-                    <option key={index} value={fullName} />
-                  ))}
-                </datalist>
-              </>
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.comment.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-28 w-full" />
-            ) : (
-              <Textarea
-                rows={5}
-                name={'comentarios' as TFormName}
-                placeholder={text.form.comment.placeholder}
-                defaultValue={clientRes?.comentarios}
-                disabled={!checked}
-              />
-            )}
-          </Label>
-        </form>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.lastName.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'apellidos' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.apellidos}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                  placeholder={
+                    checked ? text.form.lastName.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.id.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'numero_de_identificacion' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.numero_de_identificacion}
+                  placeholder={checked ? text.form.id.placeholder : undefined}
+                  pattern="[A-Za-z0-9]{6,12}"
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.typeId.label} </span>
+              {!isSuccess || !clientRes ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Select
+                  defaultValue={
+                    '' +
+                    getIdById({ id: clientRes?.tipo_de_identificacion })?.id
+                  }
+                  disabled={!checked}
+                  required
+                  name={'tipo_de_identificacion' as TFormName}
+                >
+                  <SelectTrigger className={clsx('w-full')}>
+                    <SelectValue placeholder={text.form.typeId.placeholder} />
+                  </SelectTrigger>
+                  <SelectContent className="[&_*]:cursor-pointer">
+                    {listIds()?.map(({ id, nombre }, index) => (
+                      <SelectItem key={index} value={'' + id}>
+                        {nombre}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.phone.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'celular' as TFormName}
+                  type="tel"
+                  defaultValue={clientRes?.celular}
+                  pattern="(?:\+57|0)[0-9]{8}"
+                  placeholder={
+                    checked ? text.form.phone.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.telephone.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'telefono' as TFormName}
+                  type="tel"
+                  defaultValue={clientRes?.telefono}
+                  pattern="(?:\+57|0)[0-9]{6,7}"
+                  placeholder={
+                    checked ? text.form.telephone.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.direction.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'direccion' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.direccion}
+                  placeholder={
+                    checked ? text.form.direction.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.ref.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <>
+                  <Input
+                    disabled={!checked}
+                    name={'referencia' as TFormName}
+                    list="client-referent"
+                    type="text"
+                    defaultValue={ref?.fullName}
+                    placeholder={
+                      checked ? text.form.ref.placeholder : undefined
+                    }
+                    pattern={`(${clients
+                      ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
+                      ?.join('|')})`}
+                  />
+                  <datalist id="client-referent">
+                    {clients?.map(({ fullName }, index) => (
+                      <option key={index} value={fullName} />
+                    ))}
+                  </datalist>
+                </>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.comment.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-28 w-full" />
+              ) : (
+                <Textarea
+                  rows={5}
+                  name={'comentarios' as TFormName}
+                  placeholder={text.form.comment.placeholder}
+                  defaultValue={clientRes?.comentarios}
+                  disabled={!checked}
+                />
+              )}
+            </Label>
+          </form>
         </ScrollArea>
-        <DialogFooter className="!justify-between gap-2 flex-row">
+        <DialogFooter className="flex-row !justify-between gap-2">
           <div
             className={clsx('flex items-center gap-2 font-bold italic', {
               invisible: !userId || rol?.rolName !== 'Administrador',
@@ -454,8 +461,8 @@ export function UpdateClientById() {
           >
             {!isSuccess ? (
               <>
-                <Skeleton className="h-10 w-12" />
-                <Skeleton className="h-10 w-16" />
+                <Skeleton className="h-6 w-16 rounded-full md:h-8 md:w-12" />
+                <Skeleton className="h-6 w-16 rounded-full md:h-8 md:w-14" />
               </>
             ) : (
               <>
@@ -473,8 +480,8 @@ export function UpdateClientById() {
           <div className="space-x-2">
             {!isSuccess ? (
               <>
-                <Skeleton className="inline-block h-12 w-24" />
-                <Skeleton className="inline-block h-12 w-24" />
+                <Skeleton className="inline-block h-10 w-20 md:h-12 md:w-24" />
+                <Skeleton className="inline-block h-10 w-20 md:h-12 md:w-24" />
               </>
             ) : (
               <>
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index edf78bc..7908815 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -29,7 +29,14 @@ import { SpinLoader } from '@/components/ui/loader'
 import { queryClient } from '@/pages/__root'
 import { useToken } from '@/lib/context/login'
 import { Link } from '@tanstack/react-router'
-import { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
@@ -248,161 +255,165 @@ export function UpdateUserById() {
       {!open && <Navigate to={'../../'} />}
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">
+            {text.title}
+          </DialogTitle>
           <Separator />
-          <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
+          <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
+            {text.descriiption}
+          </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
-        <ScrollBar orientation='vertical' />
-        <form
-          autoFocus={false}
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          onChange={onChange}
-          id="update-user"
-          className={clsx(
-            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
-            {
-              '[&_*:disabled]:opacity-100':
-                !!userId && rol?.rolName !== 'Administrador',
-            }
-          )}
-        >
-          <Label className="!col-span-1">
-            <span>{text.form.firstName.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                name={'firstName' as TFormName}
-                type="text"
-                placeholder={text.form.firstName.placeholder}
-                defaultValue={userRes?.nombre.split(' ')?.at(0)}
-                onChange={onChangeName('firstName')}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-              />
-            )}
-          </Label>
-          <Label className="!col-span-1">
-            <span>{text.form.lastName.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                name={'lastName' as TFormName}
-                type="text"
-                placeholder={text.form.lastName.placeholder}
-                defaultValue={userRes?.nombre.split(' ')?.at(1)}
-                onChange={onChangeName('lastName')}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.rol.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Select
-                required
-                name={'rol' as TFormName}
-                defaultValue={
-                  '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder={text.form.rol.placeholder} />
-                </SelectTrigger>
-                <SelectContent className="[&_*]:cursor-pointer">
-                  {listRols()?.map(({ id, nombre }) => (
-                    <SelectItem key={id} value={'' + id}>
-                      {nombre}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+        <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+          <ScrollBar orientation="vertical" />
+          <form
+            autoFocus={false}
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            onChange={onChange}
+            id="update-user"
+            className={clsx(
+              'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+              {
+                '[&_*:disabled]:opacity-100':
+                  !!userId && rol?.rolName !== 'Administrador',
+              }
             )}
-          </Label>
-          <div>
-            <Label htmlFor="user-password">
-              <span>{text.form.password.current.label} </span>
+          >
+            <Label className="!col-span-1">
+              <span>{text.form.firstName.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  name={'firstName' as TFormName}
+                  type="text"
+                  placeholder={text.form.firstName.placeholder}
+                  defaultValue={userRes?.nombre.split(' ')?.at(0)}
+                  onChange={onChangeName('firstName')}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                />
+              )}
             </Label>
-            <div className="flex flex-row-reverse items-center gap-x-2">
+            <Label className="!col-span-1">
+              <span>{text.form.lastName.label} </span>
               {!isSuccess ? (
-                <>
-                  <Skeleton className="h-10 w-10" />
-                  <Skeleton className="h-10 w-full" />
-                </>
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <>
-                  <Button
-                    type="button"
-                    className="w-fit p-1.5"
-                    onClick={onClick('password')}
-                    variant={!visibility.password ? 'outline' : 'default'}
-                  >
-                    {!visibility.password ? <Eye /> : <EyeOff />}
-                  </Button>
-                  <Input
-                    id="user-password"
-                    name={'password' as TFormName}
-                    type={!visibility.password ? 'password' : 'text'}
-                    placeholder={text.form.password.current.placeholder}
-                    defaultValue={password?.password}
-                    onChange={onChangePassword}
-                    pattern="^.{6,}$"
-                  />
-                </>
+                <Input
+                  required
+                  name={'lastName' as TFormName}
+                  type="text"
+                  placeholder={text.form.lastName.placeholder}
+                  defaultValue={userRes?.nombre.split(' ')?.at(1)}
+                  onChange={onChangeName('lastName')}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                />
               )}
-            </div>
-          </div>
-          <div>
-            <Label htmlFor="user-new">
-              <span>{text.form.password.new.label} </span>
             </Label>
-            <div className="flex flex-row-reverse items-center gap-x-2">
+            <Label>
+              <span>{text.form.rol.label} </span>
               {!isSuccess ? (
-                <>
-                  <Skeleton className="h-10 w-10" />
-                  <Skeleton className="h-10 w-full" />
-                </>
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <>
-                  <Button
-                    type="button"
-                    className="w-fit p-1.5"
-                    onClick={onClick('confirmation')}
-                    variant={!visibility.confirmation ? 'outline' : 'default'}
-                  >
-                    {!visibility.confirmation ? <Eye /> : <EyeOff />}
-                  </Button>
-                  <Input
-                    id="user-new"
-                    name={'newPassword' as TFormName}
-                    required={!!password?.password}
-                    type={!visibility.confirmation ? 'password' : 'text'}
-                    placeholder={text.form.password.new.placeholder}
-                    defaultValue={password?.confirmation}
-                    onChange={onChangePassword}
-                    pattern={password?.password}
-                  />
-                </>
+                <Select
+                  required
+                  name={'rol' as TFormName}
+                  defaultValue={
+                    '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={text.form.rol.placeholder} />
+                  </SelectTrigger>
+                  <SelectContent className="[&_*]:cursor-pointer">
+                    {listRols()?.map(({ id, nombre }) => (
+                      <SelectItem key={id} value={'' + id}>
+                        {nombre}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
+            </Label>
+            <div>
+              <Label htmlFor="user-password">
+                <span>{text.form.password.current.label} </span>
+              </Label>
+              <div className="flex flex-row-reverse items-center gap-x-2">
+                {!isSuccess ? (
+                  <>
+                    <Skeleton className="h-10 w-10" />
+                    <Skeleton className="h-10 w-full" />
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      className="w-fit p-1.5"
+                      onClick={onClick('password')}
+                      variant={!visibility.password ? 'outline' : 'default'}
+                    >
+                      {!visibility.password ? <Eye /> : <EyeOff />}
+                    </Button>
+                    <Input
+                      id="user-password"
+                      name={'password' as TFormName}
+                      type={!visibility.password ? 'password' : 'text'}
+                      placeholder={text.form.password.current.placeholder}
+                      defaultValue={password?.password}
+                      onChange={onChangePassword}
+                      pattern="^.{6,}$"
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+            <div>
+              <Label htmlFor="user-new">
+                <span>{text.form.password.new.label} </span>
+              </Label>
+              <div className="flex flex-row-reverse items-center gap-x-2">
+                {!isSuccess ? (
+                  <>
+                    <Skeleton className="h-10 w-10" />
+                    <Skeleton className="h-10 w-full" />
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      className="w-fit p-1.5"
+                      onClick={onClick('confirmation')}
+                      variant={!visibility.confirmation ? 'outline' : 'default'}
+                    >
+                      {!visibility.confirmation ? <Eye /> : <EyeOff />}
+                    </Button>
+                    <Input
+                      id="user-new"
+                      name={'newPassword' as TFormName}
+                      required={!!password?.password}
+                      type={!visibility.confirmation ? 'password' : 'text'}
+                      placeholder={text.form.password.new.placeholder}
+                      defaultValue={password?.confirmation}
+                      onChange={onChangePassword}
+                      pattern={password?.password}
+                    />
+                  </>
+                )}
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
         </ScrollArea>
-        <DialogFooter className="justify-start gap-2 flex-col md:flex-row">
+        <DialogFooter className="flex-col justify-start gap-2 md:flex-row">
           {!isSuccess ? (
             <>
               {currentUserId === +userId && (
-                <Skeleton className="me-auto h-12 w-40" />
+                <Skeleton className="me-auto h-12 w-full md:w-40" />
               )}
-              <Skeleton className="h-12 w-24" />
-              <Skeleton className="h-12 w-24" />
+              <Skeleton className="h-12 w-full md:w-24" />
+              <Skeleton className="h-12 w-full md:w-24" />
             </>
           ) : (
             <>