.

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

@@ -1,4 +1,4 @@
-import { Badge, Card, CardContent } from "@/ui";
+import { Badge, Button, Card, CardContent } from "@/ui";
 
 import { DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
 
@@ -9,6 +9,7 @@ import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/cont
 import { ColumnDef } 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";
 
@@ -31,7 +32,6 @@ export const QuotesDataTable = () => {
         accessor: "date",
         header: () => <>{t("quotes.list.columns.date")}</>,
         cell: ({ table, row: { index, original }, column, getValue }) => {
-          console.log(original.date);
           const quoteDate = UTCDateValue.create(original.date);
           return quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-";
         },
@@ -42,8 +42,17 @@ export const QuotesDataTable = () => {
         id: "customer_information" as const,
         accessorKey: "customer_information",
         header: () => <>{t("quotes.list.columns.customer_information")}</>,
-        cell: ({ renderValue }: { renderValue: () => any }) => (
+        cell: ({ row: { original } }) => (
-          <div className='font-semibold'>{renderValue()}</div>
+          <div className='text-ellipsis'>
+            {original.customer_information.split("\n").map((item, index) => {
+              return (
+                <span className={index === 0 ? "font-semibold" : "font-medium"}>
+                  {item}
+                  <br />
+                </span>
+              );
+            })}
+          </div>
         ),
         enableResizing: false,
         size: 10,
@@ -76,6 +85,24 @@ export const QuotesDataTable = () => {
         enableResizing: false,
         size: 20,
       },
+      {
+        id: "edit-acion",
+        header: () => null,
+        cell: ({ row, table }: { row: Row<TData>; table: Table<TData> }) => (
+          <Button
+            variant='secondary'
+            onClick={(e) => {
+              e.preventDefault();
+              navigate(`/quotes/edit/${row.original.id}`, { relative: "path", replace: true });
+            }}
+          >
+            <Trans i18nKey={"common.edit"} />
+            <span className='sr-only'>, {row.original.id}</span>
+          </Button>
+        ),
+        enableResizing: false,
+        size: 20,
+      },
     ],
     []
   );

client/src/locales/es.json

@@ -31,7 +31,8 @@
       "duplicate_rows_tooltip": "Duplica las fila(s) seleccionadas(s)",
       "pick_date": "Elige una fecha",
       "required_field": "Este campo es obligatorio",
-      "unsaved_changes_prompt": "Los últimos cambios no se han guardado. Si continúas, se perderán"
+      "unsaved_changes_prompt": "Los últimos cambios no se han guardado. Si continúas, se perderán",
+      "edit": "Editar"
     },
     "main_menu": {
       "home": "Inicio",
@@ -134,9 +135,9 @@
             "placeholder": ""
           },
           "customer_information": {
-            "label": "Cliente",
+            "label": "Datos del cliente",
-            "desc": "Datos del cliente de esta cotización",
+            "desc": "Escriba el nombre del cliente en la primera línea, la direccion en la segunda y el código postal y ciudad en la tercera.",
-            "placeholder": "Nombre\nDirección\n..."
+            "placeholder": "Nombre y apellidos\nCalle y número\nCódigo postal y ciudad..."
           },
           "payment_method": {
             "label": "Forma de pago",

client/src/ui/textarea.tsx

@@ -1,24 +1,23 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-export interface TextareaProps
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
+);
-Textarea.displayName = "Textarea"
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };

shared/package.json

@@ -14,6 +14,8 @@
     "joi": "^17.12.3",
     "joi-phone-number": "^5.1.1",
     "shallow-equal-object": "^1.1.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {