place holder landing pages

2026-03-04 17:56: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
        };
    });