feat: api keys in dashboard

apps/dashboard/app/api-keys/page.tsx

@@ -0,0 +1,45 @@
+import { getServerSession } from "next-auth"
+import { Box, Link, Typography } from "@mui/joy"
+
+import { authOptions } from "@/app/api/auth/[...nextauth]/route"
+import ContentContainer from "@/components/content-container"
+import ApiKeysList from "@/components/api-keys/list"
+import ApiKeyCreate from "@/components/api-keys/create"
+
+export default async function Home() {
+  const session = await getServerSession(authOptions)
+  return (
+    <ContentContainer>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          rowGap: "1em",
+          alignItems: "flex-start",
+          maxWidth: "90em",
+          margin: "0 auto",
+          width: "100%",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            maxWidth: "90em",
+            margin: "0 auto",
+            width: "100%",
+          }}
+        >
+          <Typography>
+            Your API Keys that can be used to access the{" "}
+            <Link href="https://dev.blink.sv/">Blink API</Link>
+          </Typography>
+          <ApiKeyCreate />
+        </Box>
+        <ApiKeysList />
+      </Box>
+    </ContentContainer>
+  )
+}

apps/dashboard/app/url.ts

@@ -9,4 +9,5 @@ export const URLS: Record<string, UrlInfo> = {
   "/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 },
 }

apps/dashboard/components/api-keys/create.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { Box, Button, Modal, ModalClose, Sheet, Typography } from "@mui/joy"
+import AddIcon from "@mui/icons-material/Add"
+import { useState } from "react"
+
+const ApiKeyCreate = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="outlined" color="primary">
+        {<AddIcon />}
+      </Button>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            maxWidth: 600,
+            borderRadius: "md",
+            p: 3,
+            boxShadow: "lg",
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            alignItems: "flex-start",
+          }}
+        >
+          <ModalClose variant="plain" sx={{ alignSelf: "flex-end" }} />
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              component="h2"
+              id="modal-title"
+              level="h4"
+              textColor="inherit"
+              fontWeight="lg"
+            >
+              Create API Key
+            </Typography>
+          </Box>
+          <Typography id="modal-desc" textColor="text.tertiary" textAlign="left">
+            Create an API Key to use with your Blink Account.
+          </Typography>
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={async () => {
+              setOpen(false)
+            }}
+            sx={{
+              width: "100%",
+            }}
+          >
+            Create
+          </Button>
+        </Sheet>
+      </Modal>
+    </>
+  )
+}
+
+export default ApiKeyCreate

apps/dashboard/components/api-keys/list.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import Table from "@mui/joy/Table"
+
+const ApiKeysList = () => {
+  return (
+    <Table aria-label="basic table">
+      <thead>
+        <tr>
+          <th style={{ width: "40%" }}>Dessert (100g serving)</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Frozen yoghurt</td>
+          <td>159</td>
+          <td>6</td>
+          <td>24</td>
+          <td>4</td>
+        </tr>
+        <tr>
+          <td>Ice cream sandwich</td>
+          <td>237</td>
+          <td>9</td>
+          <td>37</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Eclair</td>
+          <td>262</td>
+          <td>16</td>
+          <td>24</td>
+          <td>6</td>
+        </tr>
+        <tr>
+          <td>Cupcake</td>
+          <td>305</td>
+          <td>3.7</td>
+          <td>67</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Gingerbread</td>
+          <td>356</td>
+          <td>16</td>
+          <td>49</td>
+          <td>3.9</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default ApiKeysList

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

@@ -6,8 +6,9 @@ import Sheet from "@mui/joy/Sheet"
 import Divider from "@mui/material/Divider"
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"
 import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"
-import { usePathname } from "next/navigation"
 import SecurityIcon from "@mui/icons-material/Security"
+import KeyIcon from "@mui/icons-material/Key"
+import { usePathname } from "next/navigation"
 
 import Logo from "./../logo"
 import { SidebarStyles } from "./side-bar-style"
@@ -92,7 +93,13 @@ const Sidebar: React.FC = () => {
           <NavigationLink
             href="/security"
             icon={<SecurityIcon />}
-            label="security"
+            label="Security"
+            isCurrentPath={isCurrentPath}
+          />
+          <NavigationLink
+            href="/api-keys"
+            icon={<KeyIcon />}
+            label="API Keys"
             isCurrentPath={isCurrentPath}
           />
         </List>