-
+
+ {/* Tab bar */}
+
+ {[{ id: "proxy", label: "Proxy Traffic" }, { id: "admin", label: "Admin Activity" }].map((tab) => (
+
+ {tab.label}
+
+ ))}
+
+
+ {activeTab === "proxy" && (
+ <>
+
+
+
+
+
+ )}
+
+ {activeTab === "admin" && (
+
+ )}
-
);
}
diff --git a/services/frontend/app/dashboard/error.tsx b/services/frontend/app/dashboard/error.tsx
new file mode 100644
index 00000000..2fc1b181
--- /dev/null
+++ b/services/frontend/app/dashboard/error.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { Button } from "@heroui/react";
+
+export default function Error({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ return (
+
+
Something went wrong
+
{error.message}
+
+
+ );
+}
diff --git a/services/frontend/app/dashboard/loading.tsx b/services/frontend/app/dashboard/loading.tsx
new file mode 100644
index 00000000..ceed12ef
--- /dev/null
+++ b/services/frontend/app/dashboard/loading.tsx
@@ -0,0 +1,9 @@
+export default function Loading() {
+ return (
+
+ );
+}
diff --git a/services/frontend/app/grants/error.tsx b/services/frontend/app/grants/error.tsx
new file mode 100644
index 00000000..2fc1b181
--- /dev/null
+++ b/services/frontend/app/grants/error.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { Button } from "@heroui/react";
+
+export default function Error({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ return (
+
+
Something went wrong
+
{error.message}
+
+
+ );
+}
diff --git a/services/frontend/app/grants/loading.tsx b/services/frontend/app/grants/loading.tsx
new file mode 100644
index 00000000..ceed12ef
--- /dev/null
+++ b/services/frontend/app/grants/loading.tsx
@@ -0,0 +1,9 @@
+export default function Loading() {
+ return (
+
+ );
+}
diff --git a/services/frontend/app/join/page.tsx b/services/frontend/app/join/page.tsx
index 1656af42..c86e23d1 100644
--- a/services/frontend/app/join/page.tsx
+++ b/services/frontend/app/join/page.tsx
@@ -4,6 +4,14 @@ import { useSession } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
+interface Preview {
+ orgID: string;
+ orgName: string;
+ expiresAt: string;
+ maxUses: number;
+ useCount: number;
+}
+
function JoinPageInner() {
const router = useRouter();
const params = useSearchParams();
@@ -11,18 +19,33 @@ function JoinPageInner() {
const code = params.get("code") ?? "";
- const [status, setStatus] = useState<"idle" | "joining" | "done" | "error">("idle");
- const [message, setMessage] = useState
();
+ const [preview, setPreview] = useState(null);
+ const [status, setStatus] = useState<"loading" | "confirm" | "joining" | "done" | "error">(() => code ? "loading" : "error");
+ const [message, setMessage] = useState(() => code ? undefined : "No invite code provided.");
+ const [now] = useState(Date.now);
useEffect(() => {
- if (!code) {
- setStatus("error");
- setMessage("No invite code provided.");
- return;
- }
+ if (!code) return;
- if (status !== "idle") return;
+ fetch(`/api/invite-preview?code=${encodeURIComponent(code)}`)
+ .then(async (r) => {
+ const data = await r.json().catch(() => null);
+ if (!r.ok) {
+ setStatus("error");
+ setMessage(data?.error || "Invalid or expired invite.");
+ return;
+ }
+ setPreview(data as Preview);
+ setStatus("confirm");
+ })
+ .catch(() => {
+ setStatus("error");
+ setMessage("Could not load invite details. Please try again.");
+ });
+ }, [code]);
+ function handleAccept() {
+ if (status !== "confirm") return;
setStatus("joining");
fetch("/api/admin/orgs/join", {
@@ -45,19 +68,66 @@ function JoinPageInner() {
setStatus("error");
setMessage("Unexpected error. Please try again.");
});
- // Only run once when code is available
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [code]);
+ }
+
+ function expiresLabel(iso: string) {
+ const diff = new Date(iso).getTime() - now;
+ if (diff < 0) return "Expired";
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+ if (days === 0) return "Expires today";
+ return `Expires in ${days} day${days !== 1 ? "s" : ""}`;
+ }
return (
+ {status === "loading" && (
+ <>
+
+
Loading invite…
+
+ )}
+
+ {status === "confirm" && preview && (
+ <>
+
+
+
You're invited to join
+
{preview.orgName}
+
+
+
+ {preview.useCount} / {preview.maxUses === 0 ? "∞" : preview.maxUses} uses
+
+
+ {expiresLabel(preview.expiresAt)}
+
+
+
+
+
+
+ )}
+
{status === "joining" && (
<>
Accepting invite…
)}
+
{status === "done" && (
<>
✓
@@ -65,11 +135,12 @@ function JoinPageInner() {
Redirecting to dashboard…
)}
+
{status === "error" && (
<>
✗
Invite failed
-
{message}
+
{message || "Invalid or expired invite."}
-
+
);
diff --git a/services/frontend/app/platform/users/error.tsx b/services/frontend/app/platform/users/error.tsx
new file mode 100644
index 00000000..2fc1b181
--- /dev/null
+++ b/services/frontend/app/platform/users/error.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { Button } from "@heroui/react";
+
+export default function Error({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ return (
+
+
Something went wrong
+
{error.message}
+
+
+
Something went wrong
+
{error.message}
+
+