.

client/src/app/quotes/components/QuoteResume.tsx

@@ -29,6 +29,9 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@/ui";
 import { useToast } from "@/ui/use-toast";
 import { t } from "i18next";
@@ -39,8 +42,8 @@ import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
 import { QuoteStatusEditor } from "./editors";
 
 type QuoteResumeProps = {
-  quoteId: string;
+  quoteId?: string;
-  className: string;
+  className?: string;
 };
 
 export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
@@ -52,7 +55,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
   const { mutate: setStatusMutation } = useSetStatus(quoteId);
   const { download, ...downloadProps } = useDownloader();
 
-  const handleOnChangeStatus = (quoteId: string, newStatus: string) => {
+  const handleOnChangeStatus = (_: string, newStatus: string) => {
     setStatusMutation(
       { newStatus },
 
@@ -104,6 +107,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
               {`${t("quotes.list.preview.quote")} #${data.reference}`}
             </CardTitle>
             <CardDescription className='flex items-center gap-1 mr-auto text-foreground'>
+              <QuoteStatusEditor quote={data} onChangeStatus={handleOnChangeStatus} />
               <Button
                 size='sm'
                 variant='outline'
@@ -118,23 +122,38 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
                   {t("quotes.list.columns.actions.edit")}
                 </span>
               </Button>
-              <QuoteStatusEditor quote={data} onChangeStatus={handleOnChangeStatus} />
 
-              <Button size='sm' variant='outline' className='h-8 gap-1' onClick={handleDownload}>
+              <Tooltip>
-                <DownloadIcon className='h-3.5 w-3.5' />
+                <TooltipTrigger asChild>
-                <span className='sr-only lg:not-sr-only lg:whitespace-nowrap'>
+                  <Button
-                  {t("quotes.list.preview.download_quote")}
+                    size='sm'
-                </span>
+                    variant='outline'
-              </Button>
+                    className='h-8 gap-1'
-              <DropdownMenu>
+                    onClick={handleDownload}
-                <DropdownMenuTrigger asChild>
+                  >
-                  <Button size='icon' variant='outline' className='w-8 h-8'>
+                    <DownloadIcon className='h-3.5 w-3.5 ' />
-                    <MoreVertical className='h-3.5 w-3.5' />
+                    <span className='sr-only'>{t("quotes.list.preview.download_quote")}</span>
-                    <span className='sr-only'>More</span>
                   </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("quotes.list.preview.download_quote")}</TooltipContent>
+              </Tooltip>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button size='icon' variant='outline' className='w-8 h-8'>
+                        <MoreVertical className='h-3.5 w-3.5' />
+                        <span className='sr-only'>{t("common.more")}</span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("common.more")}</TooltipContent>
+                  </Tooltip>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align='end'>
-                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem className='not-sr-only 2xl:sr-only'>
+                    <DownloadIcon className='h-3.5 w-3.5 mr-2' />
+                    <span>{t("quotes.list.preview.download_quote")}</span>
+                  </DropdownMenuItem>
                   <DropdownMenuItem>Export</DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem>Trash</DropdownMenuItem>

client/src/app/quotes/components/QuotesDataTable.tsx

@@ -17,9 +17,6 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -271,13 +268,8 @@ export const QuotesDataTable = ({
 
   return (
     <>
-      <ResizablePanelGroup direction='horizontal' className='flex items-stretch flex-1 gap-4'>
+      <div className='flex flex-col items-stretch flex-1 gap-4 xl:flex-row'>
-        <ResizablePanel
+        <div id={tableId} className='flex items-stretch flex-1'>
-          id={tableId}
-          order={0}
-          defaultSize={preview ? 65 : 100}
-          className='flex items-stretch flex-1'
-        >
           <DataTable
             table={table}
             paginationOptions={{ visible: true }}
@@ -287,20 +279,15 @@ export const QuotesDataTable = ({
           >
             <DataTableToolbar table={table} />
           </DataTable>
-        </ResizablePanel>
+        </div>
-        {preview && <ResizableHandle withHandle />}
+
         {preview && (
-          <ResizablePanel
+          <div id={previewId} className='flex items-stretch'>
-            id={previewId}
-            order={1}
-            defaultSize={35}
-            className='flex items-stretch flex-1'
-          >
             <QuoteResume quoteId={activeRow?.original.id} />
             {/*<QuotePDFPreview quote={activeRow?.original} className='flex-1' />*/}
-          </ResizablePanel>
+          </div>
         )}
-      </ResizablePanelGroup>
+      </div>
       <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
     </>
   );

client/src/app/quotes/components/editors/QuoteStatusEditor.tsx

@@ -59,7 +59,9 @@ export const QuoteStatusEditor = ({
       <DialogTrigger asChild>
         <Button size='sm' variant='outline' className='h-8 gap-1'>
           <RefreshCwIcon className='h-3.5 w-3.5' />
-          <span className='sr-only md:not-sr-only md:whitespace-nowrap'>Cambiar estado</span>
+          <span className='sr-only md:not-sr-only md:whitespace-nowrap'>
+            {t("quotes.quote_status_editor.trigger_button")}
+          </span>
         </Button>
       </DialogTrigger>
       <DialogContent>

client/src/app/quotes/hooks/useQuotes.tsx

@@ -151,7 +151,7 @@ export const useQuotes = () => {
       });
     },
 
-    useSetStatus: (id: string) => {
+    useSetStatus: (id?: string) => {
       const queryClient = useQueryClient();
 
       return useMutation<void, TDataSourceError, ISetStatusQuote_Request_DTO>({

client/src/components/DataTable/DataTableToolbar/DataTableToolbar.tsx

@@ -38,13 +38,17 @@ export function DataTableToolbar<TData>({
           placeholder={t("common.filter_placeholder")}
           value={globalFilter}
           onChange={(event) => setGlobalFilter(String(event.target.value))}
-          className={cn("h-8", fullWidthFilter ? "w-full" : "w-3/12 lg:w-6/12")}
+          className={cn("h-8 w-full transition-all")}
         />
 
         {isFiltered && (
-          <Button variant='ghost' onClick={() => resetGlobalFilter()} className='h-8 px-2 lg:px-3'>
+          <Button
+            variant='outline'
+            onClick={() => resetGlobalFilter()}
+            className='h-8 px-2 transition-all lg:px-3'
+          >
+            <XIcon className='w-4 h-4 mr-2' />
             {t("common.reset_filter")}
-            <XIcon className='w-4 h-4 ml-2' />
           </Button>
         )}
       </div>

client/src/locales/en.json

@@ -14,6 +14,7 @@
       "upload": "Upload",
       "continue": "Continue",
       "close": "Close",
+      "more": "More",
       "add": "Add",
       "sort_asc": "Asc",
       "sort_asc_description": "In ascending order. Click to sort descending order.",
@@ -29,7 +30,7 @@
       "go_to_next_page": "Go to next page",
       "go_to_last_page": "Go to last page",
       "filter_placeholder": "Type here to filter...",
-      "reset_filter": "Remove the results filter",
+      "reset_filter": "Reset filter",
       "error": "Error",
       "actions": "Actions",
       "open_menu": "Open menu",
@@ -198,6 +199,7 @@
         "toast_article_added": "Catalog item added:"
       },
       "quote_status_editor": {
+        "remove the res": "Change quote status",
         "title": "Change quote status",
         "status": {
           "draft": {

client/src/locales/es.json

@@ -14,6 +14,7 @@
       "upload": "Cargar",
       "continue": "Continuar",
       "close": "Cerrar",
+      "more": "More",
       "add": "Añadir",
       "sort_asc": "Asc",
       "sort_asc_description": "En order ascendente. Click para ordenar descendentemente.",
@@ -194,6 +195,7 @@
         "toast_article_added": "Artículo del catálogo añadido:"
       },
       "quote_status_editor": {
+        "trigger_button": "Cambiar el estado",
         "title": "Cambiar el estado de la cotización",
         "status": {
           "draft": {