Fixed nested a tags (#346)

Author: CodeyBoi

src/app/admin/streck/strecklist-table.tsx

@@ -73,11 +73,11 @@ const StreckListTable = async ({
                   : streckList.transactions.every((t) => t.pricePer > 0)
                   ? 'deposit'
                   : 'unknown';
+              const link = `/admin/streck/view/${streckList.id}`;
               return (
-                <Link
-                  href={`/admin/streck/view/${streckList.id}`}
+                <div
                   key={streckList.id}
-                  className='table-row divide-x divide-y divide-solid whitespace-nowrap hover:bg-red-300/5 dark:divide-neutral-800'
+                  className='table-row divide-x divide-y divide-solid whitespace-nowrap hover:cursor-pointer hover:bg-red-300/5 dark:divide-neutral-800'
                 >
                   <div className='table-cell border-t px-2 align-middle dark:border-neutral-800'>
                     {listType === 'strecklist'
@@ -88,15 +88,18 @@ const StreckListTable = async ({
                       ? lang('Intäkt', 'Income')
                       : lang('Blandat', 'Mixed')}
                   </div>
-                  <div className='table-cell px-2 align-middle'>
+                  <Link href={link} className='table-cell px-2 align-middle'>
                     {dayjs(streckList.time).format(dateFormat)}
-                  </div>
-                  <div className='table-cell px-2 align-middle'>
+                  </Link>
+                  <Link href={link} className='table-cell px-2 align-middle'>
                     {numberAndFullName(streckList.createdBy)}
-                  </div>
-                  <div className='table-cell px-2 text-right align-middle'>
+                  </Link>
+                  <Link
+                    href={link}
+                    className='table-cell px-2 text-right align-middle'
+                  >
                     {streckList.totalChange}
-                  </div>
+                  </Link>
                   <Restricted permissions='manageStreck'>
                     <div className='table-cell'>
                       <Tooltip text={lang('Uppdatera', 'Edit')}>
@@ -159,7 +162,7 @@ const StreckListTable = async ({
                       </div>
                     )}
                   </Restricted>
-                </Link>
+                </div>
               );
             })}
           </div>

src/app/admin/streck/view/transactions-summary.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { api } from 'trpc/server';
+import { lang } from 'utils/language';
 
 interface TransactionsSummaryProps {
   start?: Date;
@@ -18,33 +19,38 @@ const TransactionsSummary = async ({
     take,
   });
 
+  let sum = 0;
+
+  const summary = transactions.items.map((item) => {
+    const summary = transactions.summary[item];
+    if (!summary) {
+      return null;
+    }
+    sum += summary.totalPrice;
+    return (
+      <tr key={item} className='divide-x divide-solid dark:divide-neutral-800'>
+        <td className='px-2'>{item}</td>
+        <td className='px-2 text-right'>{summary.amount}</td>
+        <td className='px-2 text-right'>{summary.totalPrice}</td>
+      </tr>
+    );
+  });
+
   return (
-    <div>
+    <div className='flex max-w-min flex-col gap-2'>
+      <h5>
+        {lang('Summa:', 'Sum:')} {sum}
+      </h5>
       <table className='table text-sm'>
         <thead>
           <tr className='text-left'>
-            <th className='px-1'>Artikel</th>
-            <th className='px-1'>Antal</th>
-            <th className='px-1'>Totalpris</th>
+            <th className='px-1'>{lang('Artikel', 'Item')}</th>
+            <th className='px-1'>{lang('Antal', 'Amount')}</th>
+            <th className='px-1'>{lang('Totalpris', 'Total price')}</th>
           </tr>
         </thead>
         <tbody className='gap-1 divide-y divide-solid dark:divide-neutral-800'>
-          {transactions.items.map((item) => {
-            const summary = transactions.summary[item];
-            if (!summary) {
-              return null;
-            }
-            return (
-              <tr
-                key={item}
-                className='divide-x divide-solid dark:divide-neutral-800'
-              >
-                <td className='px-2'>{item}</td>
-                <td className='px-2 text-right'>{summary.amount}</td>
-                <td className='px-2 text-right'>{summary.totalPrice}</td>
-              </tr>
-            );
-          })}
+          {summary}
         </tbody>
       </table>
     </div>