Create/detail updates

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@create/_components/Create.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { useFormState } from "react-dom";
+import { useRouter } from "next/navigation";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addFacebookBotAction } from "../../_actions/facebook";
+
+export const Create: FC = () => {
+  const router = useRouter();
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(
+    addFacebookBotAction,
+    initialState,
+  );
+
+  useEffect(() => {
+    if (formState.success) {
+      router.back();
+    }
+  }, [formState.success, router]);
+
+  return (
+    <InternalCreate
+      title="Create Facebook Bot"
+      entity="facebook"
+      formAction={formAction}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        <Grid item xs={12}>
+          <TextField name="name" label="Name" required formState={formState} />
+        </Grid>
+        <Grid item xs={12}>
+          <TextField
+            name="description"
+            label="Description"
+            formState={formState}
+            lines={3}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appId"
+            label="App ID"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appSecret"
+            label="App Secret"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageId"
+            label="Page ID"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageAccessToken"
+            label="Page Access Token"
+            required
+            formState={formState}
+            helperText="Get it from Facebook Developer Console"
+          />
+        </Grid>
+      </Grid>
+    </InternalCreate>
+  );
+};

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@create/page.tsx

@@ -0,0 +1,5 @@
+import { Create } from "./_components/Create";
+
+export default function Page() {
+  return <Create />;
+}

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@detail/_components/Detail.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField, Select } from "ui";
+import { FacebookBot } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+
+type DetailProps = {
+  row: FacebookBot;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`Facebook Bot: ${row.name}`}
+    entity="facebook"
+    id={row.id}
+  >
+    <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+      <Grid item xs={12}>
+        <DisplayTextField name="name" label="Name" value={row.name} />
+      </Grid>
+      <Grid item xs={12}>
+        <DisplayTextField
+          name="description"
+          label="Description"
+          lines={3}
+          value={row.description}
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField name="appId" label="App ID" value={row.appId} />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField
+          name="appSecret"
+          label="App Secret"
+          value={row.appSecret}
+          copyable
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField name="pageId" label="Page ID" value={row.pageId} />
+      </Grid>
+      <Grid item xs={6}>
+        <DisplayTextField
+          name="pageAccessToken"
+          label="Page Access Token"
+          value={row.pageAccessToken}
+        />
+      </Grid>
+    </Grid>
+  </InternalDetail>
+);

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@detail/page.tsx

@@ -0,0 +1,19 @@
+import { db } from "@/app/_lib/database";
+import { Detail } from "./_components/Detail";
+
+export const dynamic = "force-dynamic";
+
+type Props = {
+  params: { segment: string[] };
+};
+
+export default async function Page({ params: { segment } }: Props) {
+  const id = segment[0];
+  const row = await db
+    .selectFrom("FacebookBot")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  return <Detail row={row} />;
+}

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/_actions/facebook.ts

@@ -0,0 +1,28 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { db } from "@/app/_lib/database";
+
+export const addFacebookBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  const newBot = {
+    name: formData.get("name")?.toString() ?? null,
+    description: formData.get("description")?.toString() ?? null,
+    appId: formData.get("appId")?.toString() ?? null,
+    appSecret: formData.get("appSecret")?.toString() ?? null,
+    pageId: formData.get("pageId")?.toString() ?? null,
+    pageAccessToken: formData.get("pageAccessToken")?.toString() ?? null,
+  };
+
+  await db.insertInto("FacebookBot").values(newBot).execute();
+
+  revalidatePath("/facebook");
+
+  return {
+    ...currentState,
+    values: newBot,
+    success: true,
+  };
+};

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/_components/FacebookBotsList.tsx

@@ -11,27 +11,19 @@ type FacebookBotsListProps = {
 export const FacebookBotsList: FC<FacebookBotsListProps> = ({ rows }) => {
   const columns: GridColDef[] = [
     {
-      field: "id",
-      headerName: "ID",
+      field: "name",
+      headerName: "Name",
       flex: 1,
     },
     {
-      field: "phoneNumber",
-      headerName: "Phone Number",
+      field: "description",
+      headerName: "Description",
       flex: 2,
     },
-    {
-      field: "createdAt",
-      headerName: "Created At",
-      valueGetter: (params: any) =>
-        new Date(params.row?.createdAt).toLocaleString(),
-      flex: 1,
-    },
     {
       field: "updatedAt",
       headerName: "Updated At",
-      valueGetter: (params: any) =>
-        new Date(params.row?.updatedAt).toLocaleString(),
+      valueGetter: (value: any) => new Date(value).toLocaleString(),
       flex: 1,
     },
   ];

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/layout.tsx

@@ -0,0 +1,3 @@
+import { ServiceLayout } from "@/app/_components/ServiceLayout";
+
+export default ServiceLayout;

apps/bridge-frontend/app/(main)/facebook/[id]/edit/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook view</h1>;
-}

apps/bridge-frontend/app/(main)/facebook/[id]/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook view</h1>;
-}

apps/bridge-frontend/app/(main)/facebook/new/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook Home</h1>;
-}

apps/bridge-frontend/app/_components/Create.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { Button, Dialog } from "ui";
+
+interface CreateProps {
+  title: string;
+  entity: string;
+  formAction: any;
+  children: any;
+}
+
+export const Create: FC<CreateProps> = ({
+  title,
+  entity,
+  formAction,
+  children,
+}) => {
+  const router = useRouter();
+
+  return (
+    <Dialog
+      open
+      title={title}
+      formAction={formAction}
+      onClose={() => router.push(`/${entity}`)}
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Button
+              text="Cancel"
+              kind="secondary"
+              onClick={() => router.push(`/${entity}`)}
+            />
+          </Grid>
+          <Grid item>
+            <Button text="Save" kind="primary" type="submit" />
+          </Grid>
+        </Grid>
+      }
+    >
+      {children}
+    </Dialog>
+  );
+};

apps/bridge-frontend/app/_components/Detail.tsx

@@ -1,35 +1,46 @@
 "use client";
 
 import { FC } from "react";
-import { Grid, Box, Dialog } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Dialog, Button } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
+  id: string;
   children: any;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
+export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
   const router = useRouter();
-  const { h3 } = typography;
 
   return (
     <Dialog
-      open={true}
+      open
+      title={title}
       onClose={() => router.push(`/${entity}`)}
-      fullScreen
-      sx={{ backgroundColor: "#ddd" }}
-    >
-      <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
-        <Grid container direction="column">
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item container xs="auto" spacing={2}>
             <Grid item>
-            <Box sx={h3}>{title}</Box>
+              <Button text="Delete" kind="destructive" />
             </Grid>
-          <Grid item>{children}</Grid>
+            <Grid item>
+              <Button
+                text="Edit"
+                kind="secondary"
+                href={`/${entity}/${id}/edit`}
+              />
             </Grid>
-      </Box>
+          </Grid>
+          <Grid item>
+            <Button text="Done" kind="primary" href={`/${entity}`} />
+          </Grid>
+        </Grid>
+      }
+    >
+      {children}
     </Dialog>
   );
 };

apps/bridge-frontend/app/_components/List.tsx

@@ -3,7 +3,8 @@
 import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
-import { List as InternalList } from "ui";
+import { List as InternalList, Button } from "ui";
+import { colors } from "ui";
 
 interface ListProps {
   title: string;
@@ -14,6 +15,7 @@ interface ListProps {
 
 export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
   const router = useRouter();
+  const { mediumBlue } = colors;
 
   const onRowClick = (id: string) => {
     router.push(`/${entity}/${id}`);
@@ -25,6 +27,9 @@ export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
       rows={rows}
       columns={columns}
       onRowClick={onRowClick}
+      buttons={
+        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
+      }
     />
   );
 };

apps/bridge-frontend/app/_components/ServiceLayout.tsx

@@ -0,0 +1,33 @@
+type ServiceLayoutProps = {
+  children: any;
+  detail: any;
+  edit: any;
+  create: any;
+  params: {
+    segment: string[];
+  };
+};
+
+export const ServiceLayout = ({
+  children,
+  detail,
+  edit,
+  create,
+  params: { segment },
+}: ServiceLayoutProps) => {
+  const length = segment?.length ?? 0;
+  const isCreate = length === 1 && segment[0] === "create";
+  const isEdit = length === 2 && segment[1] === "edit";
+  const id = length > 0 && !isCreate ? segment[0] : null;
+  const isDetail = length === 1 && !!id && !isCreate && !isEdit;
+
+  console.log({ isCreate, isEdit, isDetail, id });
+  return (
+    <>
+      {children}
+      {isDetail && detail}
+      {isEdit && edit}
+      {isCreate && create}
+    </>
+  );
+};

apps/bridge-frontend/app/_lib/database.ts

@@ -1,8 +1,14 @@
 import { PostgresDialect, CamelCasePlugin } from "kysely";
-import type { GeneratedAlways } from "kysely";
-import { Pool } from "pg";
+import type { GeneratedAlways, Generated, ColumnType } from "kysely";
+import { Pool, types } from "pg";
 import { KyselyAuth } from "@auth/kysely-adapter";
 
+type Timestamp = ColumnType<Date, Date | string>;
+
+types.setTypeParser(types.builtins.TIMESTAMPTZ, (val) =>
+  new Date(val).toISOString(),
+);
+
 type GraphileJob = {
   taskIdentifier: string;
   payload: Record<string, any>;
@@ -64,10 +70,18 @@ export interface Database {
 
   FacebookBot: {
     id: GeneratedAlways<string>;
-    name: string;
-    createdBy: string;
-    createdAt: Date;
-    updatedAt: Date;
+    name: string | null;
+    description: string | null;
+    token: string | null;
+    pageAccessToken: string | null;
+    appSecret: string | null;
+    verifyToken: string | null;
+    pageId: string | null;
+    appId: string | null;
+    userId: string | null;
+    isVerified: Generated<boolean>;
+    createdAt: GeneratedAlways<Timestamp>;
+    updatedAt: GeneratedAlways<Timestamp>;
   };
 
   VoiceLine: {

apps/bridge-frontend/database/migrations/0005-add-facebook.ts

@@ -6,11 +6,15 @@ export async function up(db: Kysely<any>): Promise<void> {
     .addColumn("id", "uuid", (col) =>
       col.primaryKey().defaultTo(sql`gen_random_uuid()`),
     )
-    .addColumn("phone_number", "text")
-    .addColumn("token", "text", (col) => col.unique().notNull())
-    .addColumn("user_id", "uuid")
+    .addColumn("name", "text")
     .addColumn("description", "text")
-    .addColumn("auth_info", "text")
+    .addColumn("token", "text")
+    .addColumn("page_access_token", "text")
+    .addColumn("app_secret", "text")
+    .addColumn("verify_token", "text")
+    .addColumn("page_id", "text")
+    .addColumn("app_id", "text")
+    .addColumn("user_id", "uuid")
     .addColumn("is_verified", "boolean", (col) =>
       col.notNull().defaultTo(false),
     )

packages/ui/components/Button.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+import { colors } from "../styles/theme";
+
+interface InternalButtonProps {
+  text: string;
+  color?: string;
+  kind?: "primary" | "secondary" | "destructive";
+  type?: string;
+  onClick?: any;
+}
+
+const buttonColors = {
+  primary: colors.mediumBlue,
+  secondary: colors.darkMediumGray,
+  destructive: colors.brightRed,
+};
+
+export const InternalButton: FC<InternalButtonProps> = ({
+  text,
+  color,
+  kind,
+  type = "button",
+  onClick,
+}) => (
+  <MUIButton
+    variant="contained"
+    disableElevation
+    onClick={onClick}
+    type={type}
+    href=""
+    sx={{
+      fontFamily: "Poppins, sans-serif",
+      fontWeight: 700,
+      borderRadius: 2,
+      backgroundColor: color ?? buttonColors[kind ?? "secondary"],
+      padding: "6px 30px",
+      margin: 0,
+      whiteSpace: "nowrap",
+      textTransform: "none",
+    }}
+  >
+    {text}
+  </MUIButton>
+);
+
+interface ButtonProps {
+  text: string;
+  color?: string;
+  kind?: "primary" | "secondary" | "destructive";
+  type?: string;
+  href?: string;
+  onClick?: any;
+}
+
+export const Button: FC<ButtonProps> = ({
+  text,
+  color,
+  type,
+  kind,
+  href,
+  onClick,
+}) =>
+  href ? (
+    <Link href={href} passHref>
+      <InternalButton
+        text={text}
+        color={color}
+        kind={kind}
+        type={type}
+        onClick={onClick}
+      />
+    </Link>
+  ) : (
+    <InternalButton
+      text={text}
+      color={color}
+      kind={kind}
+      type={type}
+      onClick={onClick}
+    />
+  );

packages/ui/components/Dialog.tsx

@@ -2,66 +2,93 @@
 
 import { FC } from "react";
 import {
-  Grid,
-  Button,
-  Dialog as MUIDialog,
+  Box,
+  Dialog as InternalDialog,
   DialogActions,
   DialogContent,
-  TextField,
-  Autocomplete,
+  DialogTitle,
 } from "@mui/material";
-import { typography } from "../styles/theme";
+import { typography, colors } from "../styles/theme";
 
-interface DialogProps {
+type DialogDetailsProps = {
+  title: string;
+  children: React.ReactNode;
+  buttons?: React.ReactNode;
+};
+
+const DialogDetails: FC<DialogDetailsProps> = ({
+  title,
+  children,
+  buttons,
+}) => {
+  const { h3 } = typography;
+  const { mediumGray, darkMediumGray } = colors;
+
+  return (
+    <>
+      <DialogTitle
+        sx={{
+          backgroundColor: mediumGray,
+          p: 3,
+        }}
+      >
+        <Box
+          sx={{
+            ...h3,
+            borderBottom: `1px solid ${darkMediumGray}`,
+            pb: 1.5,
+          }}
+        >
+          {title}
+        </Box>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
+        {children}
+      </DialogContent>
+      {buttons && (
+        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
+          {buttons}
+        </DialogActions>
+      )}
+    </>
+  );
+};
+
+type DialogProps = {
   title: string;
   open: boolean;
-  closeDialog: () => void;
+  onClose: Function;
+  formAction?: any;
+  buttons?: React.ReactNode;
   children?: any;
-}
+};
 
 export const Dialog: FC<DialogProps> = ({
   title,
   open,
-  closeDialog,
+  onClose,
+  formAction,
+  buttons,
   children,
 }) => {
   return (
-    <MUIDialog open={open} maxWidth="md" fullWidth>
-      <DialogContent>{children}</DialogContent>
-      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
-        <Grid container justifyContent="space-between">
-          <Grid item>
-            <Button
-              sx={{
-                backgroundColor: "white",
-                color: "#666",
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-              }}
-              onClick={() => {
-                closeDialog();
-              }}
+    <InternalDialog
+      open={open}
+      onClose={onClose as any}
+      fullWidth
+      maxWidth="md"
     >
-              Cancel
-            </Button>
-          </Grid>
-          <Grid item>
-            <Button
-              sx={{
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-                px: 3,
-              }}
-            >
-              Create Ticket
-            </Button>
-          </Grid>
-        </Grid>
-      </DialogActions>
-    </MUIDialog>
+      {formAction ? (
+        <form action={formAction}>
+          <DialogDetails title={title} buttons={buttons}>
+            {children}
+          </DialogDetails>
+        </form>
+      ) : (
+        <DialogDetails title={title} buttons={buttons}>
+          {children}
+        </DialogDetails>
+      )}
+    </InternalDialog>
   );
 };

packages/ui/components/DisplayTextField.tsx

@@ -0,0 +1,77 @@
+import { FC } from "react";
+import {
+  TextField as InternalTextField,
+  InputAdornment,
+  IconButton,
+} from "@mui/material";
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material";
+import { colors } from "../styles/theme";
+
+type DisplayTextFieldProps = {
+  name: string;
+  label: string;
+  value: string | number | null;
+  lines?: number;
+  helperText?: string;
+  copyable?: boolean;
+};
+
+export const DisplayTextField: FC<DisplayTextFieldProps> = ({
+  name,
+  label,
+  value,
+  lines = 1,
+  helperText,
+  copyable = false,
+}) => {
+  const { almostBlack, darkGray, darkMediumGray } = colors;
+
+  const copyToClipboard = (value: any) => {
+    navigator?.clipboard?.writeText(value.toString());
+  };
+
+  return (
+    <InternalTextField
+      variant="standard"
+      name={name}
+      label={label}
+      size="medium"
+      multiline={lines > 1}
+      rows={lines}
+      defaultValue={value === "" ? " " : value}
+      disabled
+      helperText={helperText}
+      sx={{
+        "& .MuiInputBase-input.Mui-disabled": {
+          WebkitTextFillColor: almostBlack,
+        },
+        "& .MuiFormLabel-root": {
+          fontSize: 20,
+          color: darkGray,
+          minWidth: 0,
+        },
+      }}
+      InputProps={{
+        endAdornment: copyable ? (
+          <InputAdornment position="start">
+            <IconButton
+              onClick={() => copyToClipboard(value)}
+              size="small"
+              color="primary"
+              sx={{ p: 0, color: darkMediumGray }}
+            >
+              <ContentCopyIcon />
+            </IconButton>
+          </InputAdornment>
+        ) : null,
+        disableUnderline: true,
+        sx: {
+          minWidth: 0,
+          fontSize: 18,
+          backgroundColor: "transparent",
+          pt: "1px",
+        },
+      }}
+    />
+  );
+};

packages/ui/components/List.tsx

@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { Grid, Box } from "@mui/material";
 import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
-import { typography } from "../styles/theme";
+import { typography, colors } from "../styles/theme";
 
 interface ListProps {
   title: string;
@@ -11,6 +11,7 @@ interface ListProps {
   columns: GridColDef<any>[];
   onRowClick?: (id: string) => void;
   buttons?: React.ReactNode;
+  paginate?: boolean;
 }
 
 export const List: FC<ListProps> = ({
@@ -19,49 +20,59 @@ export const List: FC<ListProps> = ({
   columns,
   onRowClick,
   buttons,
+  paginate = false,
 }) => {
   const { h3 } = typography;
+  const { mediumGray, lightGray, veryLightGray, mediumBlue, white, darkGray } =
+    colors;
 
   return (
-    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+    <Box sx={{ height: "100vh", backgroundColor: lightGray, p: 3 }}>
       <Grid container direction="column">
-        <Grid item container direction="row" justifyContent="space-between">
-          <Grid item>
+        <Grid
+          item
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Grid item xs="auto">
             <Box sx={h3}>{title}</Box>
           </Grid>
-          <Grid item>{buttons}</Grid>
+          <Grid item xs="auto">
+            {buttons}
+          </Grid>
         </Grid>
         <Grid item>
           <Box
             sx={{
               mt: 2,
-              backgroundColor: "#ddd",
+              backgroundColor: "transparent",
               border: 0,
               width: "100%",
               height: "calc(100vh - 100px)",
               ".MuiDataGrid-row": {
                 cursor: "pointer",
                 "&:hover": {
-                  backgroundColor: "#1982fc33 !important",
+                  backgroundColor: `${mediumBlue}22 !important`,
                   fontWeight: "bold",
                 },
               },
               ".MuiDataGrid-row:nth-of-type(1n)": {
-                backgroundColor: "#f3f3f3",
+                backgroundColor: white,
               },
               ".MuiDataGrid-row:nth-of-type(2n)": {
-                backgroundColor: "#fff",
+                backgroundColor: veryLightGray,
               },
               ".MuiDataGrid-columnHeaderTitle": {
-                color: "#333",
+                color: darkGray,
                 fontWeight: "bold",
                 fontSize: 11,
                 margin: "0 auto",
               },
               ".MuiDataGrid-columnHeader": {
-                backgroundColor: "#ccc",
+                backgroundColor: mediumGray,
                 border: 0,
-                borderBottom: "3px solid #ddd",
               },
             }}
           >
@@ -69,7 +80,9 @@ export const List: FC<ListProps> = ({
               rows={rows}
               columns={columns}
               density="compact"
-              pagination
+              pagination={paginate}
+              hideFooterRowCount={!paginate}
+              hideFooter={!paginate}
               initialState={{
                 pagination: { paginationModel: { pageSize: 25 } },
               }}

packages/ui/components/Select.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react";
+import { Select as InternalSelect } from "@mui/material";
+
+type SelectProps = {
+  name: string;
+  label: string;
+  formState: Record<string, any>;
+  children: React.ReactNode;
+};
+
+export const Select: FC<SelectProps> = ({
+  name,
+  label,
+  formState,
+  children,
+}) => (
+  <InternalSelect
+    fullWidth
+    name={name}
+    label={label}
+    variant="outlined"
+    size="small"
+    inputProps={{ id: name }}
+    defaultValue={formState.values[name] || ""}
+    sx={{
+      backgroundColor: "#fff",
+    }}
+  >
+    {children}
+  </InternalSelect>
+);

packages/ui/components/TextField.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { TextField as InternalTextField } from "@mui/material";
+
+type TextFieldProps = {
+  name: string;
+  label: string;
+  formState: Record<string, any>;
+  required?: boolean;
+  lines?: number;
+  helperText?: string;
+};
+
+export const TextField: FC<TextFieldProps> = ({
+  name,
+  label,
+  formState,
+  required = false,
+  lines = 1,
+  helperText,
+}) => (
+  <InternalTextField
+    fullWidth
+    name={name}
+    label={label}
+    size="small"
+    multiline={lines > 1}
+    rows={lines}
+    required={required}
+    defaultValue={formState.values[name]}
+    error={Boolean(formState.errors[name])}
+    helperText={formState.errors[name] ?? helperText}
+    InputProps={{
+      sx: {
+        backgroundColor: "#fff",
+      },
+    }}
+  />
+);

packages/ui/index.ts

@@ -5,4 +5,9 @@ LicenseInfo.setLicenseKey(
 );
 
 export { List } from "./components/List";
+export { Button } from "./components/Button";
+export { TextField } from "./components/TextField";
+export { DisplayTextField } from "./components/DisplayTextField";
+export { Select } from "./components/Select";
+export { Dialog } from "./components/Dialog";
 export { fonts, typography, colors } from "./styles/theme";

packages/ui/styles/theme.ts

@@ -25,8 +25,10 @@ export const fonts = {
 };
 
 export const colors: any = {
+  veryLightGray: "#f5f5f7",
   lightGray: "#ededf0",
   mediumGray: "#e3e5e5",
+  darkMediumGray: "#a3a5a5",
   darkGray: "#33302f",
   mediumBlue: "#4285f4",
   green: "#349d7b",
@@ -49,8 +51,10 @@ export const colors: any = {
   lightGreen: "#f0fff3",
   lightOrange: "#fff5f0",
   beige: "#f6f2f1",
+  brightRed: "#ff0030",
   almostBlack: "#33302f",
   white: "#ffffff",
+  black: "#000000",
 };
 
 export const typography: any = {