.

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

@@ -70,7 +70,19 @@ export const QuotesDataTable = ({
         id: "reference" as const,
         accessorKey: "reference",
         header: () => <>{t("quotes.list.columns.reference")}</>,
-        cell: ({ renderValue }) => <div className='text-left text-ellipsis'>{renderValue()}</div>,
+        cell: ({ row: { original }, renderValue }) => (
+          <Button
+            size='sm'
+            variant='link'
+            className='h-8 gap-1 text-left text-ellipsis'
+            onClick={(e) => {
+              e.preventDefault();
+              navigate(`/quotes/edit/${original.id}`, { relative: "path" });
+            }}
+          >
+            <div className=''>{renderValue()}</div>
+          </Button>
+        ),
         enableResizing: false,
       },
 

client/src/app/quotes/list.tsx

@@ -5,7 +5,7 @@ import { QuotesDataTable } from "./components";
 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 { InfoIcon, PlusIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export const QuotesList = () => {
@@ -24,7 +24,10 @@ export const QuotesList = () => {
           </p>
         </div>
         <div className='flex items-center space-x-2'>
-          <Button onClick={() => navigate("/quotes/add")}>{t("quotes.create.title")}</Button>
+          <Button onClick={() => navigate("/quotes/add")}>
+            <PlusIcon className='w-4 h-4 mr-2' />
+            {t("quotes.create.title")}
+          </Button>
         </div>
       </div>
 

client/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import { t } from "i18next";
 import styles from "./LoadingIndicator.module.css";
 import { LoadingSpinIcon } from "./LoadingSpinIcon";
 
@@ -13,7 +14,7 @@ export type LoadingIndicatorProps = {
 export const LoadingIndicator = ({
   active = true,
   look = "dark",
-  title = "Cargando...",
+  title = t("components.loading_indicator.title"),
   subtitle = "",
 }: LoadingIndicatorProps) => {
   const isDark = look === "dark";

client/src/components/LoadingOverlay/LoadingOverlay.module.css

@@ -1,8 +0,0 @@
-@tailwind components;
-
-@layer components {
-    .LoadingOverlay {
-        @apply fixed top-0 bottom-0 left-0 right-0 z-50 w-full h-screen overflow-hidden;
-        @apply flex justify-center bg-red-700 opacity-75;
-    }
-}

client/src/components/LoadingOverlay/LoadingOverlay.tsx

@@ -1,5 +1,5 @@
+import { t } from "i18next";
 import { LoadingIndicator } from "../LoadingIndicator";
-import styles from "./LoadingOverlay.module.css";
 
 export type LoadingOverlayProps = {
   title?: string;
@@ -7,13 +7,18 @@ export type LoadingOverlayProps = {
 };
 
 export const LoadingOverlay = ({
-  title = "Cargando",
+  title = t("components.loading_overlay.title"),
-  subtitle = "Esto puede tardar unos segundos. Por favor, no cierre esta página.",
+  subtitle = t("components.loading_overlay.subtitle"),
   ...props
 }: LoadingOverlayProps) => {
   return (
-    <div className={styles.LoadingOverlay} {...props}>
+    <div
-      <LoadingIndicator look='light' title={title} subtitle={subtitle} />
+      className={
+        "fixed top-0 bottom-0 left-0 right-0 z-50 w-full h-screen overflow-hidden flex justify-center bg-secondary-foreground/85"
+      }
+      {...props}
+    >
+      <LoadingIndicator look='dark' title={title} subtitle={subtitle} />
     </div>
   );
 };

client/src/index.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /* https://ui.jln.dev/ Teriyaki */
-@layer base {
+/*@layer base {
   :root {
     --background: 25 31% 100%;
     --foreground: 25 67% 4%;
@@ -21,8 +21,8 @@
     --secondary-foreground: 25 18% 30%;
     --accent: 25 23% 83%;
     --accent-foreground: 25 23% 23%;
-    --destructive: 0 72.2% 50.6%; /* 13 96% 20%; */
+    --destructive: 0 72.2% 50.6%; / * 13 96% 20%; * /
-    --destructive-foreground: 0 85.7% 97.3%; /* 13 96% 80%; */
+    --destructive-foreground: 0 85.7% 97.3%; / * 13 96% 80%; * /
     --ring: 25 31% 75%;
     --radius: 0.5rem;
   }
@@ -48,6 +48,54 @@
     --destructive-foreground: 0 0% 100%;
     --ring: 25 31% 75%;
   }
+}*/
+
+/* https://ui.jln.dev/ unicscode89-stripe */
+@layer base {
+  :root {
+    --background: 210 40% 96.08%;
+    --foreground: 334 55% 1%;
+    --muted: 214.29 31.82% 91.37%;
+    --muted-foreground: 334 9% 37%;
+    --popover: 334 62% 100%;
+    --popover-foreground: 334 55% 1%;
+    --card: 334 62% 100%;
+    --card-foreground: 334 55% 1%;
+    --border: 334 5% 95%;
+    --input: 334 5% 95%;
+    --primary: 242.93 100% 67.84%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 213.75 20.25% 69.02%;
+    --secondary-foreground: 334 0% 100%;
+    --accent: 214.29 31.82% 91.37%;
+    --accent-foreground: 334 20% 22%;
+    --destructive: 348.37 78.4% 49.02%;
+    --destructive-foreground: 18 0% 100%;
+    --ring: 228.33 94.74% 62.75%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.22 47.37% 11.18%;
+    --foreground: 334 34% 98%;
+    --muted: 215.38 16.32% 46.86%;
+    --muted-foreground: 334 0% 87.69%;
+    --popover: 217.24 32.58% 17.45%;
+    --popover-foreground: 334 34% 98%;
+    --card: 217.24 32.58% 17.45%;
+    --card-foreground: 334 34% 98%;
+    --border: 334 0% 32.31%;
+    --input: 215.29 25% 26.67%;
+    --primary: 227.56 53.78% 49.22%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 214.29 5.04% 27.25%;
+    --secondary-foreground: 334 0% 100%;
+    --accent: 222.22 47.37% 11.18%;
+    --accent-foreground: 226.73 0% 100%;
+    --destructive: 358.82 84.44% 64.71%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 227.56 53.78% 49.22%;
+  }
 }
 
 @layer base {

client/src/locales/en.json

@@ -52,6 +52,15 @@
       "duplicate": "Duplicate",
       "print": "Print"
     },
+    "components": {
+      "loading_indicator": {
+        "title": "Loading..."
+      },
+      "loading_overlay": {
+        "title": "Loading...",
+        "subtitle": "This may take a few seconds. Please do not close this page."
+      }
+    },
     "main_menu": {
       "home": "Home",
       "settings": "Settings",

client/src/locales/es.json

@@ -52,6 +52,15 @@
       "duplicate": "Duplicar",
       "print": "Imprimir"
     },
+    "components": {
+      "LoadingIndicator": {
+        "title": "Cargando..."
+      },
+      "loading_overlay": {
+        "title": "Cargando...",
+        "subtitle": "Esto puede tardar unos segundos. Por favor, no cierre esta página."
+      }
+    },
     "main_menu": {
       "home": "Inicio",
       "settings": "Ajustes",