feat(dasboard): batch payments alpha tag

apps/dashboard/app/url.ts

@@ -1,16 +1,16 @@
 interface UrlInfo {
   title: string
-  protected: boolean
+  badge?: string
 }
 
 export const URLS: Record<string, UrlInfo> = {
-  "/": { title: "Home", protected: true },
-  "/transactions": { title: "Transactions", protected: true },
-  "/security": { title: "Security", protected: true },
-  "/security/email/add": { title: "Add Email", protected: true },
-  "/security/email/verify": { title: "Verify Email", protected: true },
-  "/api-keys": { title: "API Keys", protected: true },
-  "/callback": { title: "Callback", protected: true },
-  "/security/2fa/add": { title: "Add 2FA to Account", protected: true },
-  "/batch-payments": { title: "Batch Payments", protected: true },
+  "/": { title: "Home" },
+  "/transactions": { title: "Transactions" },
+  "/security": { title: "Security" },
+  "/security/email/add": { title: "Add Email" },
+  "/security/email/verify": { title: "Verify Email" },
+  "/api-keys": { title: "API Keys" },
+  "/callback": { title: "Callback" },
+  "/security/2fa/add": { title: "Add 2FA to Account" },
+  "/batch-payments": { title: "Batch Payments", badge: "Alpha" },
 }

apps/dashboard/components/heading.tsx

@@ -5,30 +5,45 @@ import { usePathname } from "next/navigation"
 
 import { URLS } from "@/app/url"
 
-export function getTitle(path: string): string {
+export function getTitle(path: string): {
+  title: string
+  badge?: string
+} {
   const urlInfo = URLS[path]
   if (urlInfo) {
-    return urlInfo.title
+    return urlInfo
+  }
+  return {
+    title: "Path not found",
   }
-  return "Path not found"
 }
 
 const Heading = () => {
   const pathName = usePathname()
-  const title = getTitle(pathName)
+  const pageInfo = getTitle(pathName)
+
   return (
     <Box
       sx={{
         display: "flex",
         my: 2,
         gap: 1,
-        flexDirection: { xs: "column", sm: "row" },
-        alignItems: { xs: "start", sm: "center" },
+        alignItems: { sm: "center" },
         flexWrap: "wrap",
         justifyContent: "space-between",
       }}
     >
-      <Typography level="h2">{title}</Typography>
+      <Typography level="h2">{pageInfo.title}</Typography>
+      <Typography
+        sx={{
+          color: "grey",
+          fontSize: "1em",
+          marginTop: "0.8em",
+        }}
+        level="h4"
+      >
+        {pageInfo.badge}
+      </Typography>
     </Box>
   )
 }

apps/dashboard/components/side-bar/index.tsx

@@ -121,6 +121,7 @@ const Sidebar: React.FC = () => {
             label="Batch Payments"
             isCurrentPath={isCurrentPath}
             dataTestid="sidebar-batch-payments-link"
+            badge="Alpha"
           />
         </List>
       </Box>

apps/dashboard/components/side-bar/navigation-links.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import Link from "next/link"
 import ListItem from "@mui/joy/ListItem"
 import ListItemButton from "@mui/joy/ListItemButton"
-import { Typography } from "@mui/joy"
+import { Badge, Typography } from "@mui/joy"
 
 import { closeSidebar } from "./../utils"
 
@@ -12,6 +12,7 @@ interface NavigationLinkProps {
   label: string
   isCurrentPath: (href: string) => boolean
   dataTestid: string
+  badge?: string
 }
 
 export const NavigationLink: React.FC<NavigationLinkProps> = ({
@@ -20,6 +21,7 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
   label,
   isCurrentPath,
   dataTestid,
+  badge,
 }) => (
   <Link data-testid={dataTestid} href={href}>
     <ListItem>
@@ -44,7 +46,24 @@ export const NavigationLink: React.FC<NavigationLinkProps> = ({
         }}
       >
         {icon}
-        <Typography level="title-md">{label}</Typography>
+        <Typography level="title-md">
+          {badge ? (
+            <Badge
+              sx={{
+                ".MuiBadge-badge": {
+                  backgroundColor: "var(--primaryColor)",
+                  borderColor: "transparent",
+                  transform: "translate(46.5px, -9px)",
+                },
+              }}
+              badgeContent={badge}
+            >
+              {label}
+            </Badge>
+          ) : (
+            label
+          )}
+        </Typography>
       </ListItemButton>
     </ListItem>
   </Link>