tx group by date

1 files changed, 39 insertions, 20 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 6303037a1..b11888320 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -14,10 +14,10 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { State } from "./index.js";
-import { format } from "date-fns";
+import { format, isToday } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -32,6 +32,16 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
 
 export function ReadyView({ transactions }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
+  const txByDate = transactions.reduce((prev, cur) => {
+    const d = cur.when.t_ms === "never"
+      ? ""
+      : format(cur.when.t_ms, "dd/MM/yyyy")
+    if (!prev[d]) {
+      prev[d] = []
+    }
+    prev[d].push(cur)
+    return prev
+  }, {} as Record<string, typeof transactions>)
   return (
     <div class="px-4 mt-4">
       <div class="sm:flex sm:items-center">
@@ -50,25 +60,34 @@ export function ReadyView({ transactions }: State.Ready): VNode {
             </tr>
           </thead>
           <tbody>
-            {transactions.map((item, idx) => {
-              return (
-                <tr key={idx}>
-                  <td class="relative py-2 pl-2 pr-2 text-sm ">
-                    <div class="font-medium text-gray-900">{item.when.t_ms === "never"
-                      ? ""
-                      : format(item.when.t_ms, "dd/MM/yyyy HH:mm:ss")}</div>
-                  </td>
-                  <td class="px-3 py-3.5 text-sm text-gray-500">{item.negative ? "-" : ""}
-                    {item.amount ? (
-                      `${Amounts.stringifyValue(item.amount)} ${item.amount.currency
-                      }`
-                    ) : (
-                      <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
-                    )}</td>
-                  <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td>
-                  <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
+            {Object.entries(txByDate).map(([date, txs], idx) => {
+              return <Fragment>
+                <tr class="border-t border-gray-200">
+                  <th colSpan={4} scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-3">
+                    {date}
+                  </th>
                 </tr>
-              );
+                {txs.map(item => {
+                  return (<tr key={idx}>
+                    <td class="relative py-2 pl-2 pr-2 text-sm ">
+                      <div class="font-medium text-gray-900">{item.when.t_ms === "never"
+                        ? ""
+                        : format(item.when.t_ms, "HH:mm:ss")}</div>
+                    </td>
+                    <td data-negative={item.negative ? "true" : "false"}
+                      class="px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
+                      {item.negative ? "-" : ""}
+                      {item.amount ? (
+                        `${Amounts.stringifyValue(item.amount)} ${item.amount.currency
+                        }`
+                      ) : (
+                        <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
+                      )}</td>
+                    <td class="px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td>
+                    <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
+                  </tr>)
+                })}
+              </Fragment>
             })}
           </tbody>
         </table>