From 133cd6ac1e351860bd99a15931783c7e9f19a503 Mon Sep 17 00:00:00 2001 From: gearnode Date: Tue, 18 Feb 2025 10:05:11 +0100 Subject: [PATCH] Add people overview page Signed-off-by: gearnode --- apps/console/src/App.tsx | 19 +- apps/console/src/pages/PeopleListPage.tsx | 7 +- apps/console/src/pages/PeopleOverviewPage.tsx | 144 +++++++++++++++ .../PeopleOverviewPageQuery.graphql.ts | 164 ++++++++++++++++++ 4 files changed, 327 insertions(+), 7 deletions(-) create mode 100644 apps/console/src/pages/PeopleOverviewPage.tsx create mode 100644 apps/console/src/pages/__generated__/PeopleOverviewPageQuery.graphql.ts diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index a79f7b3c9..c87fc1da2 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -10,6 +10,7 @@ import ErrorBoundary from "./components/ErrorBoundary"; import { ErrorPage } from "./pages/ErrorPage"; import ConsoleLayout from "./layouts/ConsoleLayout"; import { RelayEnvironment } from "./RelayEnvironment"; +import PeopleOverviewPage from "@/pages/PeopleOverviewPage"; posthog.init(process.env.POSTHOG_KEY!, { api_host: process.env.POSTHOG_HOST, @@ -80,6 +81,16 @@ function App() { } /> + + + + + + } + /> - } - /> + } + /> - } - /> + } + />
{peoples.map((person) => ( -
@@ -180,7 +181,7 @@ function PeopleListPageContent({ Delete
-
+ ))}
diff --git a/apps/console/src/pages/PeopleOverviewPage.tsx b/apps/console/src/pages/PeopleOverviewPage.tsx new file mode 100644 index 000000000..69574b0a8 --- /dev/null +++ b/apps/console/src/pages/PeopleOverviewPage.tsx @@ -0,0 +1,144 @@ +"use client"; + +import { Card } from "@/components/ui/card"; +import { + graphql, + PreloadedQuery, + usePreloadedQuery, + useQueryLoader, +} from "react-relay"; +import { Suspense, useEffect } from "react"; +import type { PeopleOverviewPageQuery as PeopleOverviewPageQueryType } from "./__generated__/peopleOverviewPageQuery.graphql"; +import { useParams } from "react-router"; +import { Helmet } from "react-helmet-async"; +import { useBreadcrumb } from "@/contexts/BreadcrumbContext"; + +const peopleOverviewPageQuery = graphql` + query PeopleOverviewPageQuery($peopleId: ID!) { + node(id: $peopleId) { + ... on People { + id + fullName + primaryEmailAddress + createdAt + updatedAt + } + } + } +`; + +function PeopleOverviewPageContent({ + queryRef, +}: { + queryRef: PreloadedQuery; +}) { + const data = usePreloadedQuery(peopleOverviewPageQuery, queryRef); + const { setBreadcrumbSegment } = useBreadcrumb(); + + useEffect(() => { + if (data.node?.primaryEmailAddress) { + setBreadcrumbSegment('peoples/:id', data.node.primaryEmailAddress); + } + }, [data.node?.primaryEmailAddress, setBreadcrumbSegment]); + + return ( +
+
+
+

+ {data.node?.fullName} +

+

+ View and manage person details +

+
+ + +
+
+

Personal Information

+

+ Basic information about the person +

+
+ +
+
+ +

{data.node?.fullName}

+
+
+ +

{data.node?.primaryEmailAddress}

+
+
+
+ + + +
+
+

System Information

+

+ System-related information about the person +

+
+ +
+
+ +

{new Date(data.node?.createdAt).toLocaleString()}

+
+
+ +

{new Date(data.node?.updatedAt).toLocaleString()}

+
+
+
+ +
+
+ ); +} + +function PeopleOverviewPageFallback() { + return ( +
+
+
+
+
+
+ {[1, 2].map((i) => ( +
+ ))} +
+
+ ); +} + +export default function PeopleOverviewPage() { + const { peopleId } = useParams(); + const [queryRef, loadQuery] = useQueryLoader( + peopleOverviewPageQuery, + ); + + useEffect(() => { + loadQuery({ peopleId: peopleId! }); + }, [loadQuery, peopleId]); + + if (!queryRef) { + return ; + } + + return ( + <> + + People Overview - Probo Console + + }> + + + + ); +} \ No newline at end of file diff --git a/apps/console/src/pages/__generated__/PeopleOverviewPageQuery.graphql.ts b/apps/console/src/pages/__generated__/PeopleOverviewPageQuery.graphql.ts new file mode 100644 index 000000000..500a79255 --- /dev/null +++ b/apps/console/src/pages/__generated__/PeopleOverviewPageQuery.graphql.ts @@ -0,0 +1,164 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from 'relay-runtime'; +export type PeopleOverviewPageQuery$variables = { + peopleId: string; +}; +export type PeopleOverviewPageQuery$data = { + readonly node: { + readonly createdAt?: any; + readonly fullName?: string; + readonly id?: string; + readonly primaryEmailAddress?: string; + readonly updatedAt?: any; + }; +}; +export type PeopleOverviewPageQuery = { + response: PeopleOverviewPageQuery$data; + variables: PeopleOverviewPageQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "peopleId" + } +], +v1 = [ + { + "kind": "Variable", + "name": "id", + "variableName": "peopleId" + } +], +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v3 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "fullName", + "storageKey": null +}, +v4 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "primaryEmailAddress", + "storageKey": null +}, +v5 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "createdAt", + "storageKey": null +}, +v6 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "updatedAt", + "storageKey": null +}; +return { + "fragment": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Fragment", + "metadata": null, + "name": "PeopleOverviewPageQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "kind": "InlineFragment", + "selections": [ + (v2/*: any*/), + (v3/*: any*/), + (v4/*: any*/), + (v5/*: any*/), + (v6/*: any*/) + ], + "type": "People", + "abstractKey": null + } + ], + "storageKey": null + } + ], + "type": "Query", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": (v0/*: any*/), + "kind": "Operation", + "name": "PeopleOverviewPageQuery", + "selections": [ + { + "alias": null, + "args": (v1/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null + }, + (v2/*: any*/), + { + "kind": "InlineFragment", + "selections": [ + (v3/*: any*/), + (v4/*: any*/), + (v5/*: any*/), + (v6/*: any*/) + ], + "type": "People", + "abstractKey": null + } + ], + "storageKey": null + } + ] + }, + "params": { + "cacheID": "0cd0dd96cb7a84c2016bfe1f088f8245", + "id": null, + "metadata": {}, + "name": "PeopleOverviewPageQuery", + "operationKind": "query", + "text": "query PeopleOverviewPageQuery(\n $peopleId: ID!\n) {\n node(id: $peopleId) {\n __typename\n ... on People {\n id\n fullName\n primaryEmailAddress\n createdAt\n updatedAt\n }\n id\n }\n}\n" + } +}; +})(); + +(node as any).hash = "16b3f0915f69d8475d745b0c7f13b029"; + +export default node;