.

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

@@ -6,23 +6,26 @@ import { DataTable } from "@/components";
 import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
 import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, Row, Table } from "@tanstack/react-table";
 import { t } from "i18next";
 import { useMemo } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { useQuotesList } from "../hooks";
+import { useQuotes } from "../hooks";
 
-export const QuotesDataTable = () => {
+export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
   const navigate = useNavigate();
   const { pagination, globalFilter, isFiltered } = useDataTableContext();
 
-  const { data, isPending, isError, error } = useQuotesList({
+  const { useList } = useQuotes();
+
+  const { data, isPending, isError, error } = useList({
     pagination: {
       pageIndex: pagination.pageIndex,
       pageSize: pagination.pageSize,
     },
-    searchTerm: globalFilter,
+    status,
+    quickSearchTerm: globalFilter,
   });
 
   const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(

client/src/app/quotes/edit.tsx

@@ -68,7 +68,24 @@ export const QuoteEdit = () => {
         precision: 2,
         currency_code: data?.currency_code,
       },
-      items: [],
+      items: [
+        {
+          subtotal_price: {
+            amount: undefined,
+            precision: 4,
+            currency_code: data?.currency_code,
+          },
+          discount: {
+            amount: undefined,
+            precision: 0,
+          },
+          total_price: {
+            amount: undefined,
+            precision: 4,
+            currency_code: data?.currency_code,
+          },
+        },
+      ],
     },
   });
 

client/src/app/quotes/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from "./useDetailColumns";
 export * from "./useQuotes";
-export * from "./useQuotesList";

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

@@ -1,4 +1,8 @@
-import { useOne, useSave } from "@/lib/hooks/useDataSource";
+import { UseListQueryResult, useList, useOne, useSave } from "@/lib/hooks/useDataSource";
+import {
+  IFilterItemDataProviderParam,
+  IGetListDataProviderParams,
+} from "@/lib/hooks/useDataSource/DataSource";
 import { TDataSourceError } from "@/lib/hooks/useDataSource/types";
 import { useDataSource } from "@/lib/hooks/useDataSource/useDataSource";
 import { useQueryKey } from "@/lib/hooks/useQueryKey";
@@ -6,21 +10,79 @@ import {
   ICreateQuote_Request_DTO,
   ICreateQuote_Response_DTO,
   IGetQuote_Response_DTO,
+  IListQuotes_Response_DTO,
+  IListResponse_DTO,
   IUpdateQuote_Request_DTO,
   IUpdateQuote_Response_DTO,
   UniqueID,
 } from "@shared/contexts";
 
+export type UseQuotesListParams = Omit<IGetListDataProviderParams, "filters" | "resource"> & {
+  status?: string;
+  enabled?: boolean;
+  queryOptions?: Record<string, unknown>;
+};
+
+export type UseQuotesListResponse = UseListQueryResult<
+  IListResponse_DTO<IListQuotes_Response_DTO>,
+  unknown
+>;
+
 export type UseQuotesGetParamsType = {
   enabled?: boolean;
   queryOptions?: Record<string, unknown>;
 };
 
+const quoteStatusFilter: Record<string, IFilterItemDataProviderParam> = {
+  draft: {
+    field: "status",
+    operator: "eq",
+    value: "draft",
+  },
+  archived: {
+    field: "status",
+    operator: "eq",
+    value: "archived",
+  },
+  active: {
+    field: "status",
+    operator: "eq",
+    value: "active",
+  },
+};
+
 export const useQuotes = () => {
   const dataSource = useDataSource();
   const keys = useQueryKey();
 
   return {
+    useList: (params: UseQuotesListParams): UseQuotesListResponse => {
+      const dataSource = useDataSource();
+      const keys = useQueryKey();
+
+      const {
+        pagination,
+        status = "draft",
+        quickSearchTerm = undefined,
+        enabled = true,
+        queryOptions,
+      } = params;
+
+      return useList({
+        queryKey: keys().data().resource("quotes").action("list").params(params).get(),
+        queryFn: () => {
+          return dataSource.getList({
+            resource: "quotes",
+            quickSearchTerm,
+            filters: status !== "all" ? Array.of(quoteStatusFilter[status]) : undefined,
+            pagination,
+          });
+        },
+        enabled,
+        queryOptions,
+      });
+    },
+
     useOne: (id?: string, params?: UseQuotesGetParamsType) =>
       useOne<IGetQuote_Response_DTO>({
         queryKey: keys().data().resource("quotes").action("one").id("").params().get(),
@@ -36,17 +98,16 @@ export const useQuotes = () => {
       useSave<ICreateQuote_Response_DTO, TDataSourceError, ICreateQuote_Request_DTO>({
         mutationKey: keys().data().resource("quotes").action("one").id("").params().get(),
         mutationFn: (data) => {
-          let { id, status } = data;
+          const { date } = data;
 
-          if (!id) {
+          const id = UniqueID.generateNewID().object.toString();
-            id = UniqueID.generateNewID().object.toString();
+          const status = "draft";
-            status = "draft";
-          }
 
           return dataSource.createOne({
             resource: "quotes",
             data: {
               ...data,
+              date: new Date(date).toISOString().slice(0, 10),
               status,
               id,
             },
@@ -58,14 +119,14 @@ export const useQuotes = () => {
       useSave<IUpdateQuote_Response_DTO, TDataSourceError, IUpdateQuote_Request_DTO>({
         mutationKey: keys().data().resource("quotes").action("one").id(id).params().get(),
         mutationFn: (data) => {
-          const { date: quoteDate } = data;
+          const { date } = data;
 
           return dataSource.updateOne({
             resource: "quotes",
             id,
             data: {
               ...data,
-              date: new Date(quoteDate).toISOString().slice(0, 10),
+              date: new Date(date).toISOString().slice(0, 10),
             },
           });
         },

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

@@ -1,39 +0,0 @@
-import { UseListQueryResult, useList } from "@/lib/hooks/useDataSource";
-import { useDataSource } from "@/lib/hooks/useDataSource/useDataSource";
-import { useQueryKey } from "@/lib/hooks/useQueryKey";
-import { IListQuotes_Response_DTO, IListResponse_DTO } from "@shared/contexts";
-
-export type UseQuotesListParams = {
-  pagination: {
-    pageIndex: number;
-    pageSize: number;
-  };
-  searchTerm?: string;
-  enabled?: boolean;
-  queryOptions?: Record<string, unknown>;
-};
-
-export type UseQuotesListResponse = UseListQueryResult<
-  IListResponse_DTO<IListQuotes_Response_DTO>,
-  unknown
->;
-
-export const useQuotesList = (params: UseQuotesListParams): UseQuotesListResponse => {
-  const dataSource = useDataSource();
-  const keys = useQueryKey();
-
-  const { pagination, searchTerm = undefined, enabled = true, queryOptions } = params;
-
-  return useList({
-    queryKey: keys().data().resource("quotes").action("list").params(params).get(),
-    queryFn: () => {
-      return dataSource.getList({
-        resource: "quotes",
-        quickSearchTerm: searchTerm,
-        pagination,
-      });
-    },
-    enabled,
-    queryOptions,
-  });
-};

client/src/app/quotes/list.tsx

@@ -2,7 +2,7 @@ import { DataTableProvider } from "@/lib/hooks";
 import { Trans } from "react-i18next";
 import { QuotesDataTable } from "./components";
 
-import { Button } from "@/ui";
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
 import { t } from "i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -16,14 +16,44 @@ export const QuotesList = () => {
           <h2 className='text-2xl font-bold tracking-tight'>
             <Trans i18nKey='quotes.list.title' />
           </h2>
-          <p className='text-muted-foreground'>descripción</p>
+          <p className='text-muted-foreground'>
+            <Trans i18nKey='quotes.list.subtitle' />
+          </p>
         </div>
         <div className='flex items-center space-x-2'>
           <Button onClick={() => navigate("/quotes/add")}>{t("quotes.create.title")}</Button>
         </div>
       </div>
 
-      <QuotesDataTable />
+      <Tabs defaultValue='all'>
+        <div className='flex items-center'>
+          <TabsList>
+            <TabsTrigger value='all'>
+              <Trans i18nKey='quotes.list.tabs.all' />
+            </TabsTrigger>
+            <TabsTrigger value='active'>Active</TabsTrigger>
+            <TabsTrigger value='draft'>
+              <Trans i18nKey='quotes.list.tabs.draft' />
+            </TabsTrigger>
+            <TabsTrigger value='archived' className='hidden sm:flex'>
+              <Trans i18nKey='quotes.list.tabs.archived' />
+            </TabsTrigger>
+          </TabsList>
+          <div className='flex items-center gap-2 ml-auto'></div>
+        </div>
+        <TabsContent value='all'>
+          <QuotesDataTable status='all' />
+        </TabsContent>
+        <TabsContent value='draft'>
+          <QuotesDataTable status='draft' />
+        </TabsContent>
+        <TabsContent value='archived'>
+          <QuotesDataTable status='archived' />
+        </TabsContent>
+        <TabsContent value='active'>
+          <QuotesDataTable status='active' />
+        </TabsContent>
+      </Tabs>
     </DataTableProvider>
   );
 };

client/src/lib/axios/setupInterceptors.ts

@@ -21,9 +21,9 @@ const onRequestError = (error: AxiosError): Promise<AxiosError> => {
 };
 
 const onResponse = (response: AxiosResponse): AxiosResponse => {
-  console.group("[response]");
+  /*console.group("[response]");
   console.dir(response);
-  console.groupEnd();
+  console.groupEnd();*/
 
   const config = response?.config;
   if (config.raw) {

client/src/locales/es.json

@@ -78,6 +78,12 @@
     "quotes": {
       "list": {
         "title": "Cotizaciones",
+        "subtitle": "",
+        "tabs": {
+          "all": "Todas",
+          "draft": "Borrador",
+          "archived": "Archivadas"
+        },
         "columns": {
           "date": "Fecha",
           "reference": "Referencia",