From ea12e01eedb7f0dceaaf1b21787fb244468de786 Mon Sep 17 00:00:00 2001
From: KoCoder <me@kocoder.xyz>
Date: Thu, 4 Jun 2026 17:31:50 +0200
Subject: [PATCH] New: Table with List of redirections

---
 src/components/shortener/listRedirections.tsx | 47 +++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/shortener/listRedirections.tsx b/src/components/shortener/listRedirections.tsx
index 3a3e1d4..3bec49d 100644
--- a/src/components/shortener/listRedirections.tsx
+++ b/src/components/shortener/listRedirections.tsx
@@ -1,12 +1,14 @@
 import { For, Match, Switch } from "solid-js";
 import { listURLRedirections } from "~/gen/proto/shorten/v1/shorten-ShortenService_connectquery";
+import type { URLRedirection } from "~/gen/proto/shorten/v1/shorten_pb";
 import { useConnectQuery } from "~/integrations/connect-query/solid";
 
 const ListRedirections = () => {
   const query = useConnectQuery(listURLRedirections);
 
   return (
-    <div>
+    <div class="bg-card p-4">
+      <h2 class="p-2 my-2">List of Redirections</h2>
       <Switch fallback={<div>Loading...</div>}>
         <Match when={query.isError}>
           <div>Error: {query.error?.message}</div>
@@ -15,13 +17,50 @@ const ListRedirections = () => {
           <div>Loading...</div>
         </Match>
         <Match when={query.data}>
-          <For each={query.data?.urlRedirections}>
-            {(item) => <div>{item.url}</div>}
-          </For>
+          <table class="border w-full border-collapse p-2">
+            <thead>
+              <tr>
+                <td class="border p-2">Short Code</td>
+                <td class="border p-2">URL</td>
+                <td class="border p-2">Active</td>
+                <td class="border p-2">Created At</td>
+                <td class="border p-2">Expires At</td>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={query.data?.urlRedirections}>
+                {(item) => <Redirection item={item} />}
+              </For>
+            </tbody>
+          </table>
         </Match>
       </Switch>
     </div>
   );
 };
 
+const Redirection = (props: { item: URLRedirection }) => {
+  return (
+    <tr>
+      <td class="border p-2">{props.item.shortCode}</td>
+      <td class="border p-2">{props.item.url}</td>
+      <td class="border p-2">{props.item.isActive ? "Yes" : "No"}</td>
+      <td class="border p-2">
+        {props.item.createdAt
+          ? new Date(
+              Number(props.item.createdAt.seconds) * 1000,
+            ).toLocaleDateString()
+          : ""}
+      </td>
+      <td class="border p-2">
+        {props.item.createdAt
+          ? new Date(
+              Number(props.item.expiresAt.seconds) * 1000,
+            ).toLocaleDateString()
+          : ""}
+      </td>
+    </tr>
+  );
+};
+
 export default ListRedirections;