frontend basic

ui/package.json

@@ -10,9 +10,11 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "sass": "^1.77.1",
+    "vanilla-framework": "^4.11.0"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.4",
@@ -29,4 +31,4 @@
   "overrides": {
     "rollup": "npm:@rollup/wasm-node@*"
   }
-}
+}

ui/src/app/certificate_requests/page.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useState } from "react"
+import { CertificateRequestsTable } from "./table"
+
+export default function CertificateRequests() {
+    return (
+        <CertificateRequestsTable />
+    )
+}

ui/src/app/certificate_requests/table.tsx

@@ -0,0 +1,49 @@
+import { Dispatch, SetStateAction, useContext } from "react"
+import { AsideContext } from "../nav"
+
+
+export function CertificateRequestsTable() {
+    const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)
+    return (
+        <div className="p-panel">
+            <div className="p-panel__header">
+                <h4 className="p-panel__title">Certificate Requests</h4>
+                <div className="p-panel__controls">
+                    <button className="u-no-margin--bottom" onClick={() => setAsideIsOpen(true)}>Add New CSR</button>
+                </div>
+            </div>
+            <div className="p-panel__content">
+                <div className="u-fixed-width">
+                    <table aria-label="Certificate Requests Table" className="p-main-table">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Details</th>
+                                <th>CSR Status</th>
+                                <th>Sign/Reject</th>
+                                <th>Delete</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+                                <td className="" data-test-column="id">1</td>
+                                <td className="u-overflow--visible" data-test-column="details">
+                                    <p>CN: example.com</p>
+                                    <p>SAN: example.com, 127.0.0.1, 1.2.3.4.5.56</p>
+                                </td>
+                                <td className="" data-test-column="status">outstanding</td>
+                                <td className="" data-test-column="action">
+                                    <button>Sign</button>
+                                    <button>Reject</button>
+                                </td>
+                                <td className="" data-test-column="delete">
+                                    <button>Delete CSR</button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}