place holder landing pages

2026-02-17 02:16:38 +00:00 · 2024-12-26 19:33:56 -05:00
parent de9725f310
commit b78e7a324d
22 changed files with 669 additions and 235 deletions
--- a/src/app/[orgId]/components/OrganizationLandingCard.tsx
+++ b/src/app/[orgId]/components/OrganizationLandingCard.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardContent,
+    CardFooter
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Users, Globe, Database, Cog, Settings, Waypoints, Combine } from "lucide-react";
+
+interface OrgStat {
+    label: string;
+    value: number;
+    icon: React.ReactNode;
+}
+
+type OrganizationLandingCardProps = {
+    overview: {
+        orgName: string;
+        stats: {
+            sites: number;
+            resources: number;
+            users: number;
+        };
+        userRole: string;
+        isAdmin: boolean;
+        isOwner: boolean;
+        orgId: string;
+    };
+};
+
+export default function OrganizationLandingCard(
+    props: OrganizationLandingCardProps
+) {
+    const [orgData] = useState(props);
+
+    const orgStats: OrgStat[] = [
+        {
+            label: "Sites",
+            value: orgData.overview.stats.sites,
+            icon: <Combine className="h-6 w-6" />
+        },
+        {
+            label: "Resources",
+            value: orgData.overview.stats.resources,
+            icon: <Waypoints className="h-6 w-6" />
+        },
+        {
+            label: "Users",
+            value: orgData.overview.stats.users,
+            icon: <Users className="h-6 w-6" />
+        }
+    ];
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center text-3xl font-bold">
+                    {orgData.overview.orgName}
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    {orgStats.map((stat, index) => (
+                        <div
+                            key={index}
+                            className="flex flex-col items-center p-4 bg-secondary rounded-lg"
+                        >
+                            {stat.icon}
+                            <span className="mt-2 text-2xl font-bold">
+                                {stat.value}
+                            </span>
+                            <span className="text-sm text-muted-foreground">
+                                {stat.label}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+                <div className="text-center text-lg">
+                    Your role:{" "}
+                    <span className="font-semibold">
+                        {orgData.overview.isOwner ? "Owner" : orgData.overview.userRole}
+                    </span>
+                </div>
+            </CardContent>
+            {orgData.overview.isAdmin && (
+                <CardFooter className="flex justify-center">
+                    <Link href={`/${orgData.overview.orgId}/settings`}>
+                        <Button size="lg" className="w-full md:w-auto">
+                            <Settings className="mr-2 h-4 w-4" />
+                            Organization Settings
+                        </Button>
+                    </Link>
+                </CardFooter>
+            )}
+        </Card>
+    );
+}
--- a/src/app/[orgId]/layout.tsx
+++ b/src/app/[orgId]/layout.tsx
@@ -1,6 +1,8 @@
 import { internal } from "@app/api";
 import { authCookieHeader } from "@app/api/cookies";
+import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
+import UserProvider from "@app/providers/UserProvider";
 import { GetOrgResponse } from "@server/routers/org";
 import { GetOrgUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
@@ -47,5 +49,9 @@ export default async function OrgLayout(props: {
        redirect(`/`);
    }

-    return <>{props.children}</>;
+    return (
+        <>
+            {props.children}
+        </>
+    );
 }
--- a/src/app/[orgId]/page.tsx
+++ b/src/app/[orgId]/page.tsx
@@ -1,10 +1,13 @@
-import { internal } from "@app/api";
-import { authCookieHeader } from "@app/api/cookies";
+import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
-import { GetOrgUserResponse } from "@server/routers/user";
-import { AxiosResponse } from "axios";
-import { redirect } from "next/navigation";
+import UserProvider from "@app/providers/UserProvider";
 import { cache } from "react";
+import OrganizationLandingCard from "./components/OrganizationLandingCard";
+import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
+import { internal } from "@app/api";
+import { AxiosResponse } from "axios";
+import { authCookieHeader } from "@app/api/cookies";
+import { redirect } from "next/navigation";

 type OrgPageProps = {
    params: Promise<{ orgId: string }>;
@@ -14,9 +17,55 @@ export default async function OrgPage(props: OrgPageProps) {
    const params = await props.params;
    const orgId = params.orgId;

+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    let redirectToSettings = false;
+    let overview: GetOrgOverviewResponse | undefined;
+    try {
+        const res = await internal.get<AxiosResponse<GetOrgOverviewResponse>>(
+            `/org/${orgId}/overview`,
+            await authCookieHeader()
+        );
+        overview = res.data.data;
+
+        if (overview.isAdmin || overview.isOwner) {
+            redirectToSettings = true;
+        }
+    } catch (e) {}
+
+    if (redirectToSettings) {
+        redirect(`/${orgId}/settings`);
+    }
+
    return (
        <>
-            <p>Welcome to {orgId} dashboard</p>
+            <div className="p-3">
+                {user && (
+                    <UserProvider user={user}>
+                        <ProfileIcon />
+                    </UserProvider>
+                )}
+
+                {overview && (
+                    <div className="w-full max-w-4xl mx-auto md:mt-32 mt-4">
+                        <OrganizationLandingCard
+                            overview={{
+                                orgId: overview.orgId,
+                                orgName: overview.orgName,
+                                stats: {
+                                    users: overview.numUsers,
+                                    sites: overview.numSites,
+                                    resources: overview.numResources
+                                },
+                                isAdmin: overview.isAdmin,
+                                isOwner: overview.isOwner,
+                                userRole: overview.userRoleName
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
        </>
    );
 }
--- a/src/app/[orgId]/settings/access/roles/page.tsx
+++ b/src/app/[orgId]/settings/access/roles/page.tsx
@@ -18,13 +18,10 @@ export default async function RolesPage(props: RolesPageProps) {

    let roles: ListRolesResponse["roles"] = [];
    const res = await internal
-        .get<AxiosResponse<ListRolesResponse>>(
-            `/org/${params.orgId}/roles`,
-            await authCookieHeader()
-        )
-        .catch((e) => {
-            console.error(e);
-        });
+        .get<
+            AxiosResponse<ListRolesResponse>
+        >(`/org/${params.orgId}/roles`, await authCookieHeader())
+        .catch((e) => {});

    if (res && res.status === 200) {
        roles = res.data.data.roles;
@@ -33,13 +30,10 @@ export default async function RolesPage(props: RolesPageProps) {
    let org: GetOrgResponse | null = null;
    const getOrg = cache(async () =>
        internal
-            .get<AxiosResponse<GetOrgResponse>>(
-                `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
-            .catch((e) => {
-                console.error(e);
-            })
+            .get<
+                AxiosResponse<GetOrgResponse>
+            >(`/org/${params.orgId}`, await authCookieHeader())
+            .catch((e) => {})
    );
    const orgRes = await getOrg();

--- a/src/app/[orgId]/settings/access/users/page.tsx
+++ b/src/app/[orgId]/settings/access/users/page.tsx
@@ -23,13 +23,10 @@ export default async function UsersPage(props: UsersPageProps) {

    let users: ListUsersResponse["users"] = [];
    const res = await internal
-        .get<AxiosResponse<ListUsersResponse>>(
-            `/org/${params.orgId}/users`,
-            await authCookieHeader()
-        )
-        .catch((e) => {
-            console.error(e);
-        });
+        .get<
+            AxiosResponse<ListUsersResponse>
+        >(`/org/${params.orgId}/users`, await authCookieHeader())
+        .catch((e) => {});

    if (res && res.status === 200) {
        users = res.data.data.users;
@@ -38,10 +35,9 @@ export default async function UsersPage(props: UsersPageProps) {
    let org: GetOrgResponse | null = null;
    const getOrg = cache(async () =>
        internal
-            .get<AxiosResponse<GetOrgResponse>>(
-                `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
+            .get<
+                AxiosResponse<GetOrgResponse>
+            >(`/org/${params.orgId}`, await authCookieHeader())
            .catch((e) => {
                console.error(e);
            })
@@ -58,7 +54,7 @@ export default async function UsersPage(props: UsersPageProps) {
            email: user.email,
            status: "Confirmed",
            role: user.isOwner ? "Owner" : user.roleName || "Member",
-            isOwner: user.isOwner || false,
+            isOwner: user.isOwner || false
        };
    });

--- a/src/app/[orgId]/settings/layout.tsx
+++ b/src/app/[orgId]/settings/layout.tsx
@@ -91,9 +91,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
        if (res && res.data.data.orgs) {
            orgs = res.data.data.orgs;
        }
-    } catch (e) {
-        console.error("Error fetching orgs", e);
-    }
+    } catch (e) {}

    return (
        <>
--- a/src/app/[orgId]/settings/resources/page.tsx
+++ b/src/app/[orgId]/settings/resources/page.tsx
@@ -19,20 +19,18 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
    try {
        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
            `/org/${params.orgId}/resources`,
-            await authCookieHeader(),
+            await authCookieHeader()
        );
        resources = res.data.data.resources;
-    } catch (e) {
-        console.error("Error fetching resources", e);
-    }
+    } catch (e) {}

    let org = null;
    try {
        const getOrg = cache(async () =>
            internal.get<AxiosResponse<GetOrgResponse>>(
                `/org/${params.orgId}`,
-                await authCookieHeader(),
-            ),
+                await authCookieHeader()
+            )
        );
        const res = await getOrg();
        org = res.data.data;
--- a/src/app/[orgId]/settings/share-links/page.tsx
+++ b/src/app/[orgId]/settings/share-links/page.tsx
@@ -24,9 +24,7 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
            await authCookieHeader()
        );
        tokens = res.data.data.accessTokens;
-    } catch (e) {
-        console.error("Error fetching tokens", e);
-    }
+    } catch (e) {}

    let org = null;
    try {
--- a/src/app/[orgId]/settings/sites/page.tsx
+++ b/src/app/[orgId]/settings/sites/page.tsx
@@ -15,12 +15,10 @@ export default async function SitesPage(props: SitesPageProps) {
    try {
        const res = await internal.get<AxiosResponse<ListSitesResponse>>(
            `/org/${params.orgId}/sites`,
-            await authCookieHeader(),
+            await authCookieHeader()
        );
        sites = res.data.data.sites;
-    } catch (e) {
-        console.error("Error fetching sites", e);
-    }
+    } catch (e) {}

    function formatSize(mb: number): string {
        if (mb >= 1024 * 1024) {
@@ -41,7 +39,7 @@ export default async function SitesPage(props: SitesPageProps) {
            mbOut: formatSize(site.megabytesOut || 0),
            orgId: params.orgId,
            type: site.type as any,
-            online: site.online,
+            online: site.online
        };
    });

--- a/src/app/auth/layout.tsx
+++ b/src/app/auth/layout.tsx
@@ -1,8 +1,12 @@
+import ProfileIcon from "@app/components/ProfileIcon";
+import { verifySession } from "@app/lib/auth/verifySession";
+import UserProvider from "@app/providers/UserProvider";
 import { Metadata } from "next";
+import { cache } from "react";

 export const metadata: Metadata = {
    title: `Auth - Pangolin`,
-    description: "",
+    description: ""
 };

 type AuthLayoutProps = {
@@ -10,8 +14,19 @@ type AuthLayoutProps = {
 };

 export default async function AuthLayout({ children }: AuthLayoutProps) {
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
    return (
        <>
+            {user && (
+                <UserProvider user={user}>
+                    <div>
+                        <ProfileIcon />
+                    </div>
+                </UserProvider>
+            )}
+
            <div className="w-full max-w-md mx-auto p-3 md:mt-32">
                {children}
            </div>
--- a/src/app/components/OrganizationLanding.tsx
+++ b/src/app/components/OrganizationLanding.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardContent,
+    CardDescription
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { ArrowRight, Plus } from "lucide-react";
+interface Organization {
+    id: string;
+    name: string;
+}
+
+interface OrganizationLandingProps {
+    organizations?: Organization[];
+    disableCreateOrg?: boolean;
+}
+
+export default function OrganizationLanding({
+    organizations = [],
+    disableCreateOrg = false
+}: OrganizationLandingProps) {
+    const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
+
+    const handleOrgClick = (orgId: string) => {
+        setSelectedOrg(orgId);
+    };
+
+    function getDescriptionText() {
+        if (organizations.length === 0) {
+            if (!disableCreateOrg) {
+                return "You are not currently a member of any organizations. Create an organization to get started.";
+            } else {
+                return "You are not currently a member of any organizations.";
+            }
+        }
+
+        return `You're a member of ${organizations.length} ${
+            organizations.length === 1 ? "organization" : "organizations"
+        }.`;
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Welcome to Pangolin</CardTitle>
+                <CardDescription>{getDescriptionText()}</CardDescription>
+            </CardHeader>
+            <CardContent>
+                {organizations.length === 0 ? (
+                    disableCreateOrg ? (
+                        <p className="text-center text-muted-foreground">
+                            You are not currently a member of any organizations.
+                        </p>
+                    ) : (
+                        <Link href="/setup">
+                            <Button
+                                className="w-full h-auto py-3 text-lg"
+                                size="lg"
+                            >
+                                <Plus className="mr-2 h-5 w-5" />
+                                Create an Organization
+                            </Button>
+                        </Link>
+                    )
+                ) : (
+                    <ul className="space-y-2">
+                        {organizations.map((org) => (
+                            <li key={org.id}>
+                                <Link href={`/${org.id}/settings`}>
+                                    <Button
+                                        variant="outline"
+                                        className={`flex items-center justify-between w-full h-auto py-3 ${
+                                            selectedOrg === org.id
+                                                ? "ring-2 ring-primary"
+                                                : ""
+                                        }`}
+                                    >
+                                        <div className="truncate">
+                                            {org.name}
+                                        </div>
+                                        <ArrowRight size={20} />
+                                    </Button>
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -24,9 +24,6 @@ export default async function RootLayout({
 }>) {
    const version = process.env.APP_VERSION;

-    const getUser = cache(verifySession);
-    const user = await getUser();
-
    return (
        <html suppressHydrationWarning>
            <body className={`${font.className}`}>
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -3,11 +3,11 @@ import Link from "next/link";
 export default async function NotFound() {
    return (
        <div className="w-full max-w-md mx-auto p-3 md:mt-32 text-center">
-            <h1 className="text-6xl font-bold text-gray-800 mb-4">404</h1>
-            <h2 className="text-2xl font-semibold text-gray-600 mb-4">
+            <h1 className="text-6xl font-bold mb-4">404</h1>
+            <h2 className="text-2xl font-semibold text-neutral-500 mb-4">
                Page Not Found
            </h2>
-            <p className="text-gray-500 mb-8">
+            <p className="text-neutral-500 dark:text-neutral-700 mb-8">
                Oops! The page you're looking for doesn't exist.
            </p>
        </div>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import { internal } from "@app/api";
 import { authCookieHeader } from "@app/api/cookies";
+import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
 import UserProvider from "@app/providers/UserProvider";
 import { ListOrgsResponse } from "@server/routers/org";
@@ -8,11 +9,15 @@ import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { cache } from "react";
+import OrganizationLanding from "./components/OrganizationLanding";

 export const dynamic = "force-dynamic";

 export default async function Page(props: {
-    searchParams: Promise<{ redirect: string | undefined, t: string | undefined }>;
+    searchParams: Promise<{
+        redirect: string | undefined;
+        t: string | undefined;
+    }>;
 }) {
    const params = await props.searchParams; // this is needed to prevent static optimization

@@ -42,39 +47,42 @@ export default async function Page(props: {
    try {
        const res = await internal.get<AxiosResponse<ListOrgsResponse>>(
            `/orgs`,
-            await authCookieHeader(),
+            await authCookieHeader()
        );

        if (res && res.data.data.orgs) {
            orgs = res.data.data.orgs;
        }
-    } catch (e) {
-        console.error(e);
-    }
+    } catch (e) {}

    if (!orgs.length) {
-        redirect("/setup");
+        if (
+            process.env.DISABLE_USER_CREATE_ORG === "false" ||
+            user.serverAdmin
+        ) {
+            redirect("/setup");
+        }
    }

    return (
        <>
-            <UserProvider user={user}>
-                <p>Logged in as {user.email}</p>
-            </UserProvider>
-
-            <div className="mt-4">
-                {orgs.map((org) => (
-                    <Link
-                        key={org.orgId}
-                        href={`/${org.orgId}/settings`}
-                        className="text-primary underline"
-                    >
-                        <div className="flex items-center">
-                            {org.name}
-                            <ArrowUpRight className="w-4 h-4" />
+            <div className="p-3">
+                {user && (
+                    <UserProvider user={user}>
+                        <div>
+                            <ProfileIcon />
                        </div>
-                    </Link>
-                ))}
+                    </UserProvider>
+                )}
+
+                <div className="w-full max-w-md mx-auto md:mt-32 mt-4">
+                    <OrganizationLanding
+                        organizations={orgs.map((org) => ({
+                            name: org.name,
+                            id: org.orgId
+                        }))}
+                    />
+                </div>
            </div>
        </>
    );
--- a/src/app/setup/layout.tsx
+++ b/src/app/setup/layout.tsx
@@ -1,4 +1,6 @@
+import ProfileIcon from "@app/components/ProfileIcon";
 import { verifySession } from "@app/lib/auth/verifySession";
+import UserProvider from "@app/providers/UserProvider";
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { cache } from "react";
@@ -29,6 +31,20 @@ export default async function SetupLayout({
    }

    return (
-        <div className="w-full max-w-2xl mx-auto p-3 md:mt-32">{children}</div>
+        <>
+            <div className="p-3">
+                {user && (
+                    <UserProvider user={user}>
+                        <div>
+                            <ProfileIcon />
+                        </div>
+                    </UserProvider>
+                )}
+
+                <div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
+                    {children}
+                </div>
+            </div>
+        </>
    );
 }