Add create people

Signed-off-by: gearnode <bryan@frimin.fr>
2025-02-12 16:39:31 -08:00
parent 29258e65ff
commit 5864e092e6
15 changed files with 1126 additions and 170 deletions
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -29,6 +29,7 @@ const FrameworkListPage = lazy(() => import("./pages/FrameworkListPage"));
 const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage"));
 const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
+const CreatePeoplePage = lazy(() => import("./pages/CreatePeoplePage"));

 function App() {
  return (
@@ -67,6 +68,16 @@ function App() {
                        </Suspense>
                      }
                    />
+                    <Route
+                      path="/peoples/create"
+                      element={
+                        <Suspense>
+                          <ErrorBoundaryWithLocation>
+                            <CreatePeoplePage />
+                          </ErrorBoundaryWithLocation>
+                        </Suspense>
+                      }
+                    />
                    <Route
                      path="/vendors"
                      element={
--- a/apps/console/src/components/ui/select.tsx
+++ b/apps/console/src/components/ui/select.tsx
@@ -0,0 +1,91 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown className="h-4 w-4 opacity-50" />
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} 
--- a/apps/console/src/pages/CreatePeoplePage.tsx
+++ b/apps/console/src/pages/CreatePeoplePage.tsx
@@ -0,0 +1,180 @@
+import { Suspense, useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import {
+  graphql,
+  PreloadedQuery,
+  usePreloadedQuery,
+  useQueryLoader,
+  useMutation,
+  ConnectionHandler,
+  useRelayEnvironment,
+} from "react-relay";
+import { Helmet } from "react-helmet-async";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { CreatePeoplePageQuery as CreatePeoplePageQueryType } from "./__generated__/CreatePeoplePageQuery.graphql";
+
+const createPeoplePageQuery = graphql`
+  query CreatePeoplePageQuery {
+    node(id: "AZSfP_xAcAC5IAAAAAAltA") {
+      id
+      ... on Organization {
+        name
+      }
+    }
+  }
+`;
+
+const createPeopleMutation = graphql`
+  mutation CreatePeoplePageCreatePeopleMutation($input: CreatePeopleInput!) {
+    createPeople(input: $input) {
+      id
+      fullName
+      primaryEmailAddress
+      kind
+    }
+  }
+`;
+
+function CreatePeoplePageContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<CreatePeoplePageQueryType>;
+}) {
+  const navigate = useNavigate();
+  const environment = useRelayEnvironment();
+  const data = usePreloadedQuery(createPeoplePageQuery, queryRef);
+  const [createPeople, isCreatingPeople] = useMutation(createPeopleMutation);
+  const [kind, setKind] = useState<'EMPLOYEE' | 'CONTRACTOR' | 'VENDOR'>('EMPLOYEE');
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+
+    createPeople({
+      variables: {
+        input: {
+          organizationId: data.node.id,
+          fullName: formData.get('fullName') as string,
+          primaryEmailAddress: formData.get('primaryEmailAddress') as string,
+          kind,
+        },
+      },
+      onCompleted() {
+        // Invalidate the peoples list query
+        environment.commitUpdate((store) => {
+          const organization = store.get(data.node.id);
+          if (organization) {
+            organization.invalidateRecord();
+          }
+        });
+        
+        navigate('/peoples');
+      },
+    });
+  };
+
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <Helmet>
+        <title>Create People - Probo Console</title>
+      </Helmet>
+
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Create People</h1>
+          <p className="text-sm text-muted-foreground">
+            Add a new person to your organization.
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>People Information</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="kind">Kind</Label>
+                <Select
+                  value={kind}
+                  onValueChange={(value) => setKind(value as typeof kind)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a kind" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="EMPLOYEE">Employee</SelectItem>
+                    <SelectItem value="CONTRACTOR">Contractor</SelectItem>
+                    <SelectItem value="VENDOR">Vendor</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="fullName">Full Name</Label>
+                <Input
+                  id="fullName"
+                  name="fullName"
+                  placeholder="John Doe"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="primaryEmailAddress">Email Address</Label>
+                <Input
+                  id="primaryEmailAddress"
+                  name="primaryEmailAddress"
+                  type="email"
+                  placeholder="john@example.com"
+                  required
+                />
+              </div>
+
+              <div className="flex justify-end gap-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate('/peoples')}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isCreatingPeople}>
+                  {isCreatingPeople ? "Creating..." : "Create People"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export default function CreatePeoplePage() {
+  const [queryRef, loadQuery] = useQueryLoader<CreatePeoplePageQueryType>(createPeoplePageQuery);
+
+  useEffect(() => {
+    loadQuery({});
+  }, [loadQuery]);
+
+  if (!queryRef) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={null}>
+      <CreatePeoplePageContent queryRef={queryRef} />
+    </Suspense>
+  );
+} 
--- a/apps/console/src/pages/PeopleListPage.tsx
+++ b/apps/console/src/pages/PeopleListPage.tsx
@@ -11,6 +11,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { CircleUser, Globe, Shield } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Link } from "react-router";
 import { Helmet } from "react-helmet-async";
 import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generated__/PeopleListPageQuery.graphql";

@@ -21,13 +22,15 @@ const PeopleListPageQuery = graphql`
    node(id: "AZSfP_xAcAC5IAAAAAAltA") {
      id
      ... on Organization {
-        peoples(first: $first, after: $after, last: $last, before: $before) {
+        peoples(first: $first, after: $after, last: $last, before: $before)
+          @connection(key: "PeopleListPageQuery_peoples") {
          edges {
            node {
              id
              fullName
              primaryEmailAddress
              additionalEmailAddresses
+              kind
              createdAt
              updatedAt
            }
@@ -85,10 +88,19 @@ function PeopleListPageContent({
  return (
    <div className="p-6 space-y-6">
      <div className="space-y-1">
-        <h2 className="text-2xl font-semibold tracking-tight">Peoples</h2>
-        <p className="text-sm text-muted-foreground">
-          Keep track of your company's workforce and their progress towards completing tasks assigned to them.
-        </p>
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-semibold tracking-tight">People</h2>
+            <p className="text-sm text-muted-foreground">
+              Manage your organization's people.
+            </p>
+          </div>
+          <Button asChild>
+            <Link to="/peoples/create">
+              Create People
+            </Link>
+          </Button>
+        </div>
      </div>
      <div className="space-y-2">
        {peoples.map((person) => (
@@ -107,7 +119,8 @@ function PeopleListPageContent({
            </div>
            <div className="flex items-center gap-4">
              <Badge variant="secondary" className="font-medium">
-                Admin
+                {person?.kind === 'EMPLOYEE' ? 'Employee' : 
+                 person?.kind === 'CONTRACTOR' ? 'Contractor' : 'Vendor'}
              </Badge>
              <div className="flex gap-1">
                <CircleUser className="h-4 w-4 text-muted-foreground" />
--- a/apps/console/src/pages/generated/CreatePeoplePageCreatePeopleMutation.graphql.ts
+++ b/apps/console/src/pages/generated/CreatePeoplePageCreatePeopleMutation.graphql.ts
@@ -0,0 +1,120 @@
+/**
+ * @generated SignedSource<<c8acfac5384ba48fe05ca8f73f32a8c5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type PeopleKind = "CONTRACTOR" | "EMPLOYEE" | "VENDOR";
+export type CreatePeopleInput = {
+  fullName: string;
+  kind: PeopleKind;
+  organizationId: string;
+  primaryEmailAddress: string;
+};
+export type CreatePeoplePageCreatePeopleMutation$variables = {
+  input: CreatePeopleInput;
+};
+export type CreatePeoplePageCreatePeopleMutation$data = {
+  readonly createPeople: {
+    readonly fullName: string;
+    readonly id: string;
+    readonly kind: PeopleKind;
+    readonly primaryEmailAddress: string;
+  };
+};
+export type CreatePeoplePageCreatePeopleMutation = {
+  response: CreatePeoplePageCreatePeopleMutation$data;
+  variables: CreatePeoplePageCreatePeopleMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "People",
+    "kind": "LinkedField",
+    "name": "createPeople",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "id",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "fullName",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "primaryEmailAddress",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "kind",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "CreatePeoplePageCreatePeopleMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "CreatePeoplePageCreatePeopleMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "6438f79d9a2e3d3e5cfcc98c4107e512",
+    "id": null,
+    "metadata": {},
+    "name": "CreatePeoplePageCreatePeopleMutation",
+    "operationKind": "mutation",
+    "text": "mutation CreatePeoplePageCreatePeopleMutation(\n  $input: CreatePeopleInput!\n) {\n  createPeople(input: $input) {\n    id\n    fullName\n    primaryEmailAddress\n    kind\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "55f9379fac4d33ca3b2c21acf80094de";
+
+export default node;
--- a/apps/console/src/pages/generated/CreatePeoplePageQuery.graphql.ts
+++ b/apps/console/src/pages/generated/CreatePeoplePageQuery.graphql.ts
@@ -0,0 +1,118 @@
+/**
+ * @generated SignedSource<<1440fead35c1cf239edc5574dcdf9dc3>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreatePeoplePageQuery$variables = Record<PropertyKey, never>;
+export type CreatePeoplePageQuery$data = {
+  readonly node: {
+    readonly id: string;
+    readonly name?: string;
+  };
+};
+export type CreatePeoplePageQuery = {
+  response: CreatePeoplePageQuery$data;
+  variables: CreatePeoplePageQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "kind": "Literal",
+    "name": "id",
+    "value": "AZSfP_xAcAC5IAAAAAAltA"
+  }
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v2 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "CreatePeoplePageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v1/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "CreatePeoplePageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v1/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "e3812048d135626b79aa289d77ecd630",
+    "id": null,
+    "metadata": {},
+    "name": "CreatePeoplePageQuery",
+    "operationKind": "query",
+    "text": "query CreatePeoplePageQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      name\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "629fdb563382b22be4a6c1f17fafda96";
+
+export default node;
--- a/apps/console/src/pages/generated/PeopleListPageQuery.graphql.ts
+++ b/apps/console/src/pages/generated/PeopleListPageQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2b0f0d83fcebe25d4dfe1209c757c792>>
+ * @generated SignedSource<<c0df862d094bf6825bbda32ecda36bdd>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -9,6 +9,7 @@
 // @ts-nocheck

 import { ConcreteRequest } from 'relay-runtime';
+export type PeopleKind = "CONTRACTOR" | "EMPLOYEE" | "VENDOR";
 export type PeopleListPageQuery$variables = {
  after?: any | null | undefined;
  before?: any | null | undefined;
@@ -26,6 +27,7 @@ export type PeopleListPageQuery$data = {
          readonly createdAt: any;
          readonly fullName: string;
          readonly id: string;
+          readonly kind: PeopleKind;
          readonly primaryEmailAddress: string;
          readonly updatedAt: any;
        };
@@ -80,148 +82,148 @@ v5 = {
  "storageKey": null
 },
 v6 = {
-  "kind": "InlineFragment",
-  "selections": [
-    {
-      "alias": null,
-      "args": [
-        {
-          "kind": "Variable",
-          "name": "after",
-          "variableName": "after"
-        },
-        {
-          "kind": "Variable",
-          "name": "before",
-          "variableName": "before"
-        },
-        {
-          "kind": "Variable",
-          "name": "first",
-          "variableName": "first"
-        },
-        {
-          "kind": "Variable",
-          "name": "last",
-          "variableName": "last"
-        }
-      ],
-      "concreteType": "PeopleConnection",
-      "kind": "LinkedField",
-      "name": "peoples",
-      "plural": false,
-      "selections": [
-        {
-          "alias": null,
-          "args": null,
-          "concreteType": "PeopleEdge",
-          "kind": "LinkedField",
-          "name": "edges",
-          "plural": true,
-          "selections": [
-            {
-              "alias": null,
-              "args": null,
-              "concreteType": "People",
-              "kind": "LinkedField",
-              "name": "node",
-              "plural": false,
-              "selections": [
-                (v5/*: any*/),
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "fullName",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "primaryEmailAddress",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "additionalEmailAddresses",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "createdAt",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "updatedAt",
-                  "storageKey": null
-                }
-              ],
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "cursor",
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
-        },
-        {
-          "alias": null,
-          "args": null,
-          "concreteType": "PageInfo",
-          "kind": "LinkedField",
-          "name": "pageInfo",
-          "plural": false,
-          "selections": [
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "hasNextPage",
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "hasPreviousPage",
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "startCursor",
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "endCursor",
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
-        }
-      ],
-      "storageKey": null
-    }
-  ],
-  "type": "Organization",
-  "abstractKey": null
-};
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "__typename",
+  "storageKey": null
+},
+v7 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "PeopleEdge",
+    "kind": "LinkedField",
+    "name": "edges",
+    "plural": true,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "People",
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v5/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "fullName",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "primaryEmailAddress",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "additionalEmailAddresses",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "kind",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "updatedAt",
+            "storageKey": null
+          },
+          (v6/*: any*/)
+        ],
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "cursor",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  },
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "PageInfo",
+    "kind": "LinkedField",
+    "name": "pageInfo",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "hasNextPage",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "hasPreviousPage",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "startCursor",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "endCursor",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+],
+v8 = [
+  {
+    "kind": "Variable",
+    "name": "after",
+    "variableName": "after"
+  },
+  {
+    "kind": "Variable",
+    "name": "before",
+    "variableName": "before"
+  },
+  {
+    "kind": "Variable",
+    "name": "first",
+    "variableName": "first"
+  },
+  {
+    "kind": "Variable",
+    "name": "last",
+    "variableName": "last"
+  }
+];
 return {
  "fragment": {
    "argumentDefinitions": [
@@ -243,7 +245,23 @@ return {
        "plural": false,
        "selections": [
          (v5/*: any*/),
-          (v6/*: any*/)
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": "peoples",
+                "args": null,
+                "concreteType": "PeopleConnection",
+                "kind": "LinkedField",
+                "name": "__PeopleListPageQuery_peoples_connection",
+                "plural": false,
+                "selections": (v7/*: any*/),
+                "storageKey": null
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
        ],
        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
      }
@@ -270,31 +288,62 @@ return {
        "name": "node",
        "plural": false,
        "selections": [
-          {
-            "alias": null,
-            "args": null,
-            "kind": "ScalarField",
-            "name": "__typename",
-            "storageKey": null
-          },
+          (v6/*: any*/),
          (v5/*: any*/),
-          (v6/*: any*/)
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": null,
+                "args": (v8/*: any*/),
+                "concreteType": "PeopleConnection",
+                "kind": "LinkedField",
+                "name": "peoples",
+                "plural": false,
+                "selections": (v7/*: any*/),
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": (v8/*: any*/),
+                "filters": null,
+                "handle": "connection",
+                "key": "PeopleListPageQuery_peoples",
+                "kind": "LinkedHandle",
+                "name": "peoples"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
        ],
        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
      }
    ]
  },
  "params": {
-    "cacheID": "0074149682b4e4a31aa559fe8431d567",
+    "cacheID": "480538011d1eccb9405f2d495417fc8d",
    "id": null,
-    "metadata": {},
+    "metadata": {
+      "connection": [
+        {
+          "count": null,
+          "cursor": null,
+          "direction": "bidirectional",
+          "path": [
+            "node",
+            "peoples"
+          ]
+        }
+      ]
+    },
    "name": "PeopleListPageQuery",
    "operationKind": "query",
-    "text": "query PeopleListPageQuery(\n  $first: Int\n  $after: CursorKey\n  $last: Int\n  $before: CursorKey\n) {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      peoples(first: $first, after: $after, last: $last, before: $before) {\n        edges {\n          node {\n            id\n            fullName\n            primaryEmailAddress\n            additionalEmailAddresses\n            createdAt\n            updatedAt\n          }\n          cursor\n        }\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query PeopleListPageQuery(\n  $first: Int\n  $after: CursorKey\n  $last: Int\n  $before: CursorKey\n) {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      peoples(first: $first, after: $after, last: $last, before: $before) {\n        edges {\n          node {\n            id\n            fullName\n            primaryEmailAddress\n            additionalEmailAddresses\n            kind\n            createdAt\n            updatedAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          hasNextPage\n          hasPreviousPage\n          startCursor\n          endCursor\n        }\n      }\n    }\n  }\n}\n"
  }
 };
 })();

-(node as any).hash = "5ca962add045876503cb7290d20b9f8b";
+(node as any).hash = "cc8b466dc73007c5590ba2e8ffc6def3";

 export default node;