added transaction details in view

JulienR1 · Nov 30, 2023 · c9bc0e7 · c9bc0e7
1 parent da5cb8a
commit c9bc0e7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/web/src/modules/categories/schemas.ts b/web/src/modules/categories/schemas.ts
@@ -8,6 +8,7 @@ export const Color = z
   );
 
 export const CategorySchema = z.object({
+  id: z.number(),
   label: z
     .string({ invalid_type_error: "Format invalide" })
     .min(1, "Saisir un nom"),

diff --git a/web/src/modules/dashboards/panels/history/history-panel.tsx b/web/src/modules/dashboards/panels/history/history-panel.tsx
@@ -1,17 +1,12 @@
-import { useDashboard } from "@modules/dashboards/dashboard-provider";
+import { dateFormatter, moneyFormatter } from "@/resources/formatters";
+import { useDashboard } from "@modules/dashboards";
 import { fetchTransactions } from "@modules/transactions";
 import { useLocation } from "@solidjs/router";
 import { Card, Icon, NoContent, Skeleton, Table, TableRow } from "@ui";
 import { Component, For, Show, Suspense, createResource } from "solid-js";
 
 type HistoryPanelProps = {};
 
-const dateFormatter = new Intl.DateTimeFormat("fr-CA", {});
-const moneyFormatter = new Intl.NumberFormat("fr-CA", {
-  style: "currency",
-  currency: "CAD",
-});
-
 export const HistoryPanel: Component<HistoryPanelProps> = (props) => {
   const location = useLocation();
   const dashboard = useDashboard();

diff --git a/web/src/modules/transactions/detailed-transaction.tsx b/web/src/modules/transactions/detailed-transaction.tsx
@@ -1,5 +1,14 @@
+import { dateFormatter, moneyFormatter } from "@/resources/formatters";
 import { A, useLocation, useParams } from "@solidjs/router";
-import { Accordion, Card, Icon, NoContent, Skeleton, useAccordion } from "@ui";
+import {
+  Accordion,
+  Card,
+  Details,
+  Icon,
+  NoContent,
+  Skeleton,
+  useAccordion,
+} from "@ui";
 import {
   Component,
   Show,
@@ -51,7 +60,42 @@ export const DetailedTransaction: Component<DetailedTransactionProps> = (
     }
   });
 
-  const dashboardLocation = location.pathname.replace(/transactions\/\d+/, "");
+  const dashboardLocation = location.pathname
+    .replace(/transactions\/\d+/, "")
+    .replace(/\/$/, "");
+
+  const transactionDetails = () => {
+    const t = transaction();
+    if (!t) {
+      return {};
+    }
+
+    return {
+      Montant: moneyFormatter.format(t.amount),
+      Catégorie: () => (
+        <span class="flex items-center gap-1">
+          {t.category.label}
+          <span style={{ color: t.category.color }}>
+            <Icon name={t.category.icon} size="base" />
+          </span>
+        </span>
+      ),
+      Date: dateFormatter.format(t.timestamp),
+      Coupable: t.user.firstname + " " + t.user.lastname,
+    };
+  };
+
+  const transactionLinks = () => {
+    const t = transaction();
+    if (!t) {
+      return {};
+    }
+
+    return {
+      Catégorie: `${dashboardLocation}/categories/${t.category.id}`,
+      Coupable: `${dashboardLocation}/profiles/${t.user.id}`,
+    };
+  };
 
   return (
     <Suspense
@@ -75,7 +119,7 @@ export const DetailedTransaction: Component<DetailedTransactionProps> = (
           controls={generalAccordionControls}
         >
           <div class="max-w-[430px] overflow-hidden lg:max-w-[800px]">
-            <pre class="text-xs">{JSON.stringify(transaction(), null, 2)}</pre>
+            <Details data={transactionDetails()} links={transactionLinks()} />
           </div>
         </Accordion>