diff --git a/client/src/app/quotes/components/QuotePDFPreview.tsx b/client/src/app/quotes/components/QuotePDFPreview.tsx index 383e150..1d626b1 100644 --- a/client/src/app/quotes/components/QuotePDFPreview.tsx +++ b/client/src/app/quotes/components/QuotePDFPreview.tsx @@ -57,12 +57,8 @@ export const QuotePDFPreview = ({ return ( - - - - - - + + @@ -85,7 +81,7 @@ export const QuotePDFPreview = ({ onClick={(e) => { e.preventDefault(); printJS({ - printable: file, + printable: file?.data, type: "pdf", showModal: false, modalMessage: "Cargando...", diff --git a/client/src/app/quotes/components/QuotesDataTable.tsx b/client/src/app/quotes/components/QuotesDataTable.tsx index 8cfae73..1520ba5 100644 --- a/client/src/app/quotes/components/QuotesDataTable.tsx +++ b/client/src/app/quotes/components/QuotesDataTable.tsx @@ -1,17 +1,40 @@ import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components"; import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar"; import { useDataTable, useDataTableContext } from "@/lib/hooks"; -import { Badge, Button, Card, CardContent } from "@/ui"; +import { + Badge, + Button, + Card, + CardContent, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/ui"; import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts"; import { ColumnDef, Row } from "@tanstack/react-table"; import { t } from "i18next"; +import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react"; import { useMemo, useState } from "react"; import { Trans } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useQuotes } from "../hooks"; import { QuotePDFPreview } from "./QuotePDFPreview"; -export const QuotesDataTable = ({ status = "all" }: { status?: string }) => { +export const QuotesDataTable = ({ + status = "all", + preview = false, +}: { + status?: string; + preview?: boolean; +}) => { const navigate = useNavigate(); const { pagination, globalFilter, isFiltered } = useDataTableContext(); const [focusedQuote, setFocusedQuote] = useState(undefined); @@ -34,17 +57,20 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => { header: () => <>{t("quotes.list.columns.date")}, cell: ({ row: { original } }) => { const quoteDate = UTCDateValue.create(original.date); - return quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-"; + return ( +
+ {quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-"} +
+ ); }, enableResizing: false, - size: 10, }, { id: "customer_information" as const, accessorKey: "customer_information", header: () => <>{t("quotes.list.columns.customer_information")}, cell: ({ row: { original } }) => ( -
+
{original.customer_information.split("\n").map((item, index) => { return ( {
), enableResizing: false, - size: 10, + size: 640, }, { id: "reference" as const, accessorKey: "reference", header: () => <>{t("quotes.list.columns.reference")}, + cell: ({ row: { original } }) => ( +
{original.reference}
+ ), enableResizing: false, - size: 10, }, { id: "status" as const, @@ -77,7 +105,6 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any cell: ({ renderValue }: { renderValue: () => any }) => {renderValue()}, enableResizing: false, - size: 10, }, { id: "total_price" as const, @@ -90,25 +117,53 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => { ); }, enableResizing: false, - size: 20, }, { - id: "edit-acion", + id: "row-actions", header: () => null, cell: ({ row }: { row: Row }) => ( - +
+ + + + + +

+ +

+
+
+ + + + + + + Edit + Export + + Trash + + +
), enableResizing: false, - size: 20, }, ], // eslint-disable-next-line react-hooks/exhaustive-deps @@ -159,17 +214,23 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => { } return ( -
- - - - - -
+ + + + + + + {preview && } + {preview && ( + + + + )} + ); }; diff --git a/client/src/app/quotes/list.tsx b/client/src/app/quotes/list.tsx index 282e8c0..0cce78b 100644 --- a/client/src/app/quotes/list.tsx +++ b/client/src/app/quotes/list.tsx @@ -2,12 +2,15 @@ import { DataTableProvider } from "@/lib/hooks"; import { Trans } from "react-i18next"; import { QuotesDataTable } from "./components"; -import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui"; +import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from "@/ui"; +import { useToggle } from "@wojtekmaj/react-hooks"; import { t } from "i18next"; +import { InfoIcon } from "lucide-react"; import { useNavigate } from "react-router-dom"; export const QuotesList = () => { const navigate = useNavigate(); + const [enabledPreview, toggleEnabledPreview] = useToggle(false); return ( @@ -27,33 +30,45 @@ export const QuotesList = () => {
+ Status - - - + + + -
+
+ + + Quote preview + +
- + - + - + - +
diff --git a/client/src/lib/hooks/useDataTable/useDataTable.tsx b/client/src/lib/hooks/useDataTable/useDataTable.tsx index 42b059e..b11e73d 100644 --- a/client/src/lib/hooks/useDataTable/useDataTable.tsx +++ b/client/src/lib/hooks/useDataTable/useDataTable.tsx @@ -192,9 +192,9 @@ export function useDataTable({ debugColumns: false, defaultColumn: { - size: 5, //starting column size - minSize: 0, //enforced during column resizing - maxSize: 96, //enforced during column resizing + size: 96, //starting column size + minSize: 96, //enforced during column resizing + maxSize: 500, //enforced during column resizing }, }); diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 126eaa6..2a568dd 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -113,7 +113,10 @@ "reference": "Reference", "status": "Status", "customer_information": "Customer", - "total_price": "Imp. total" + "total_price": "Imp. total", + "actions": { + "edit": "Edit quote" + } }, "preview": { "quote": "Quote",