Add new routes, add no transaction message

apps/mobile/src/app/(home)/transactions/list.tsx

@@ -1,8 +1,8 @@
-import { ActivityIndicator, FlatList, View } from "react-native";
+import { ActivityIndicator, FlatList, Text, View } from "react-native";
 import { StatusBar } from "expo-status-bar";
 
-import { api } from "~/utils/api";
 import TransactionItem from "~/components/TransactionItem";
+import { api } from "~/utils/api";
 
 export default function Transactions() {
   const { data, isLoading, isFetching, refetch } =
@@ -27,6 +27,11 @@ export default function Transactions() {
           );
         }}
       />
+      {data?.length === 0 && (
+        <Text className="absolute w-full pt-24 text-center text-lg">
+          You haven&apos;t made any transaction yet.
+        </Text>
+      )}
 
       {isLoading && !data && (
         <View className="absolute h-full w-full flex-1 justify-center ">

apps/mobile/src/app/_layout.tsx

@@ -45,7 +45,7 @@ export default function RootLayout() {
               screenOptions={{
                 headerShown: false,
                 contentStyle: {
-                  backgroundColor: "#3d3d3d",
+                  backgroundColor: "#002124",
                 },
               }}
             >

apps/web/src/app/dashboard/page.tsx

@@ -3,9 +3,9 @@ import { UserButton } from "@clerk/nextjs";
 
 import { ModeToggle } from "~/components/ModeToggle";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import TransactionsTab from "../transactions/TransactionsTab";
+import UserTab from "../users/UserTab";
 import OverviewTab from "./OverviewTab";
-import TransactionsTab from "./TransactionsTab";
-import UserTab from "./UserTab";
 
 export const metadata: Metadata = {
   title: "Dashboard",

apps/web/src/app/transactions/[uuid]/page.tsx

@@ -0,0 +1,88 @@
+import type { Metadata } from "next";
+import { UserButton } from "@clerk/nextjs";
+import dayjs from "dayjs";
+
+import { ModeToggle } from "~/components/ModeToggle";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { serverAPIClient } from "~/utils/serverAPIClient";
+
+export const metadata: Metadata = {
+  title: "Transactions",
+  description: "Example transactions app built using the components.",
+};
+
+export default async function TransactionsPage({
+  params,
+}: {
+  params: { uuid: string };
+}) {
+  const transaction = (
+    await serverAPIClient().admin.recentTransactions({ limit: 100 })
+  ).find((transaction) => transaction.transaction.uuid === params.uuid);
+
+  if (!transaction) {
+    return;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="border-b">
+        <div className="flex h-16 items-center px-4">
+          <h1 className="bg-gradient-to-r from-green-400 to-blue-600 bg-clip-text text-3xl font-extrabold text-transparent">
+            The Bank
+          </h1>
+
+          <div className="ml-auto flex items-center space-x-4">
+            <UserButton />
+            <ModeToggle />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 space-y-4 p-8 pt-6">
+        <h2>Transaction uuid: {params.uuid}</h2>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">UUID</TableHead>
+
+              <TableHead>Title</TableHead>
+              <TableHead>Sender</TableHead>
+              <TableHead>Recipient</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead className="text-right">Value</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow key={transaction.transaction.uuid}>
+              <TableCell className="font-medium">
+                {transaction.transaction.uuid}
+              </TableCell>
+              <TableCell>{transaction.transaction.title}</TableCell>
+              <TableCell>
+                {transaction.sender?.firstName} {transaction.sender?.lastName}
+              </TableCell>
+              <TableCell>
+                {transaction.recipient?.firstName}{" "}
+                {transaction.recipient?.lastName}
+              </TableCell>
+              <TableCell>
+                {dayjs(transaction.transaction.createdAt).format("DD-MM-YYYY")}
+              </TableCell>
+              <TableCell className="text-right">
+                {transaction.transaction.value}$
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/dashboard/UserTab.tsx → apps/web/src/app/users/UserTab.tsx

@@ -1,6 +1,5 @@
 import dayjs from "dayjs";
 
-import { serverAPIClient } from "~/utils/serverAPIClient";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import {
   Table,
@@ -11,6 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
+import { serverAPIClient } from "~/utils/serverAPIClient";
 
 export default async function UserTab() {
   const users = await serverAPIClient().admin.allUsers();

apps/web/src/app/users/[id]/page.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import { UserButton } from "@clerk/nextjs";
+import dayjs from "dayjs";
+
+import { ModeToggle } from "~/components/ModeToggle";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { serverAPIClient } from "~/utils/serverAPIClient";
+
+export const metadata: Metadata = {
+  title: "Users",
+  description: "Example users app built using the components.",
+};
+
+export default async function UsersPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const user = (await serverAPIClient().admin.allUsers()).find(
+    (user) => user.id === +params.id,
+  );
+
+  if (!user) {
+    return;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="border-b">
+        <div className="flex h-16 items-center px-4">
+          <h1 className="bg-gradient-to-r from-green-400 to-blue-600 bg-clip-text text-3xl font-extrabold text-transparent">
+            The Bank
+          </h1>
+
+          <div className="ml-auto flex items-center space-x-4">
+            <UserButton />
+            <ModeToggle />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 space-y-4 p-8 pt-6">
+        <h2>User id: {params.id}</h2>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">ID</TableHead>
+              <TableHead>Clerk ID</TableHead>
+              <TableHead>First name</TableHead>
+              <TableHead>Last name</TableHead>
+              <TableHead className="text-right">Created At</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow key={user.clerkId}>
+              <TableCell className="font-medium">{user.id}</TableCell>
+              <TableCell>{user.clerkId}</TableCell>
+              <TableCell>{user.firstName}</TableCell>
+              <TableCell>{user.lastName}</TableCell>
+              <TableCell className="text-right">
+                {dayjs(user.createdAt).format("YYYY-MM-DD")}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}