Edit and actions updates

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

@@ -1,15 +1,13 @@
 "use client";
 
-import { FC, useEffect } from "react";
+import { FC } 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: {},
@@ -24,17 +22,12 @@ export const Create: FC = () => {
     initialState,
   );
 
-  useEffect(() => {
-    if (formState.success) {
-      router.back();
-    }
-  }, [formState.success, router]);
-
   return (
     <InternalCreate
-      title="Create Facebook Bot"
+      title="Create Facebook Connection"
       entity="facebook"
       formAction={formAction}
+      formState={formState}
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
         <Grid item xs={12}>

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

@@ -2,9 +2,10 @@
 
 import { FC } from "react";
 import { Grid } from "@mui/material";
-import { DisplayTextField, Select } from "ui";
+import { DisplayTextField } from "ui";
 import { FacebookBot } from "@/app/_lib/database";
 import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteFacebookBotAction } from "../../_actions/facebook";
 
 type DetailProps = {
   row: FacebookBot;
@@ -12,9 +13,10 @@ type DetailProps = {
 
 export const Detail: FC<DetailProps> = ({ row }) => (
   <InternalDetail
-    title={`Facebook Bot: ${row.name}`}
+    title={`Facebook Connection: ${row.name}`}
     entity="facebook"
     id={row.id}
+    deleteAction={deleteFacebookBotAction}
   >
     <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
       <Grid item xs={12}>

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

@@ -8,12 +8,17 @@ type Props = {
 };
 
 export default async function Page({ params: { segment } }: Props) {
-  const id = segment[0];
+  const id = segment?.[0];
+
+  if (!id) return null;
+
   const row = await db
     .selectFrom("FacebookBot")
     .selectAll()
     .where("id", "=", id)
     .executeTakeFirst();
 
+  if (!row) return null;
+
   return <Detail row={row} />;
 }

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { FacebookBot } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateFacebookBotAction } from "../../_actions/facebook";
+
+type EditProps = {
+  row: FacebookBot;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateFacebookBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Facebook Connection: ${row.name}`}
+      entity="facebook"
+      formAction={formAction}
+      formState={formState}
+    >
+      <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="token"
+            label="Token"
+            disabled
+            formState={formState}
+            refreshable
+            helperText="Token used to authenticate requests from Link"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="verifyToken"
+            label="Verify Token"
+            disabled
+            formState={formState}
+            refreshable
+            helperText="Token used to authenticate requests from Facebook"
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <TextField
+            name="appId"
+            label="App ID"
+            required
+            formState={formState}
+            helperText="App ID of your approved Facebook application"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appSecret"
+            label="App Secret"
+            required
+            formState={formState}
+            helperText="App Secret of your approved Facebook application"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageId"
+            label="Page ID"
+            required
+            formState={formState}
+            helperText="Page ID of the Facebook page that will receive messages"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageAccessToken"
+            label="Page Access Token"
+            required
+            formState={formState}
+            helperText="Access Token of the Facbook page that will receive messages"
+          />
+        </Grid>
+      </Grid>
+    </InternalEdit>
+  );
+};

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

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

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

@@ -1,28 +1,50 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
-import { db } from "@/app/_lib/database";
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "facebook";
+const table = "FacebookBot";
 
 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,
-  };
+  return addAction({
+    entity,
+    table,
+    fields: [
+      "name",
+      "description",
+      "appId",
+      "appSecret",
+      "pageId",
+      "pageAccessToken",
+    ],
+    currentState,
+    formData,
+  });
+};
+
+export const updateFacebookBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: [
+      "name",
+      "description",
+      "appId",
+      "appSecret",
+      "pageId",
+      "pageAccessToken",
+    ],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteFacebookBotAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
 };

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

@@ -30,7 +30,7 @@ export const FacebookBotsList: FC<FacebookBotsListProps> = ({ rows }) => {
 
   return (
     <List
-      title="Facebook Bots"
+      title="Facebook Connections"
       entity="facebook"
       rows={rows}
       columns={columns}

apps/bridge-frontend/app/(main)/signal/_actions/signal.ts

@@ -0,0 +1,37 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+export const addSignalBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return addAction({
+    entity: "signal",
+    table: "SignalBot",
+    fields: ["name", "description"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateSignalBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity: "signal",
+    table: "SignalBot",
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateSignalBotAction = async (id: string) => {
+  return deleteAction({
+    entity: "facebook",
+    table: "FacebookBot",
+    id,
+  });
+};

apps/bridge-frontend/app/(main)/signal/_components/SignalBotsList.tsx

@@ -37,6 +37,11 @@ export const SignalBotsList: FC<SignalBotsListProps> = ({ rows }) => {
   ];
 
   return (
-    <List title="Signal Bots" entity="signal" rows={rows} columns={columns} />
+    <List
+      title="Signal Connections"
+      entity="signal"
+      rows={rows}
+      columns={columns}
+    />
   );
 };

apps/bridge-frontend/app/(main)/users/_actions/users.ts

@@ -0,0 +1,33 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "users";
+const table = "User";
+
+export const addUserAction = async (currentState: any, formData: FormData) => {
+  return addAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateUserAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteUserAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
+};

apps/bridge-frontend/app/(main)/voice/_actions/voice.ts

@@ -0,0 +1,36 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "voice";
+const table = "VoiceLine";
+
+export const addVoiceLineAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return addAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateVoiceLineAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteVoiceLineAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
+};

apps/bridge-frontend/app/(main)/voice/_components/VoiceBotsList.tsx

@@ -36,5 +36,12 @@ export const VoiceBotsList: FC<VoiceBotsListProps> = ({ rows }) => {
     },
   ];
 
-  return <List title="Voice Bots" entity="voice" rows={rows} columns={columns} />;
+  return (
+    <List
+      title="Voice Connections"
+      entity="voice"
+      rows={rows}
+      columns={columns}
+    />
+  );
 };

apps/bridge-frontend/app/(main)/webhooks/_actions/webhooks.ts

@@ -0,0 +1,36 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "webhooks";
+const table = "Webhook";
+
+export const addWebhookAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return addAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateWebhookAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteWebhookAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
+};

apps/bridge-frontend/app/(main)/whatsapp/_actions/whatsapp.ts

@@ -0,0 +1,36 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "whatsapp";
+const table = "WhatsappBot";
+
+export const addWhatsappBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return addAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const updateWhatsappBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: ["name"],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteWhatsappBotAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
+};

apps/bridge-frontend/app/(main)/whatsapp/_components/WhatsappList.tsx

@@ -38,7 +38,7 @@ export const WhatsappList: FC<WhatsappListProps> = ({ rows }) => {
 
   return (
     <List
-      title="WhatsApp Bots"
+      title="WhatsApp Connections"
       entity="whatsapp"
       rows={rows}
       columns={columns}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { Button, Dialog } from "ui";
@@ -9,6 +9,7 @@ interface CreateProps {
   title: string;
   entity: string;
   formAction: any;
+  formState: any;
   children: any;
 }
 
@@ -16,10 +17,17 @@ export const Create: FC<CreateProps> = ({
   title,
   entity,
   formAction,
+  formState,
   children,
 }) => {
   const router = useRouter();
 
+  useEffect(() => {
+    if (formState.success) {
+      router.back();
+    }
+  }, [formState.success, router]);
+
   return (
     <Dialog
       open

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

@@ -1,46 +1,97 @@
 "use client";
 
-import { FC } from "react";
-import { Grid } from "@mui/material";
+import { FC, useState } from "react";
+import { Box, Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { Dialog, Button } from "ui";
+import { Dialog, Button, colors, typography } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
   id: string;
   children: any;
+  deleteAction?: Function;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
+export const Detail: FC<DetailProps> = ({
+  title,
+  entity,
+  id,
+  children,
+  deleteAction,
+}) => {
   const router = useRouter();
+  const { almostBlack } = colors;
+  const { bodyLarge } = typography;
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+
+  const continueDeleteAction = async () => {
+    await deleteAction?.(id);
+    setShowDeleteConfirmation(false);
+    router.push(`/${entity}`);
+  };
 
   return (
-    <Dialog
-      open
-      title={title}
-      onClose={() => router.push(`/${entity}`)}
-      buttons={
-        <Grid container justifyContent="space-between">
-          <Grid item container xs="auto" spacing={2}>
+    <>
+      <Dialog
+        open
+        title={title}
+        onClose={() => router.push(`/${entity}`)}
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item container xs="auto" spacing={2}>
+              {deleteAction && (
+                <Grid item>
+                  <Button
+                    text="Delete"
+                    kind="destructive"
+                    onClick={() => setShowDeleteConfirmation(true)}
+                  />
+                </Grid>
+              )}
+              <Grid item>
+                <Button
+                  text="Edit"
+                  kind="secondary"
+                  href={`/${entity}/${id}/edit`}
+                />
+              </Grid>
+            </Grid>
             <Grid item>
-              <Button text="Delete" kind="destructive" />
+              <Button text="Done" kind="primary" href={`/${entity}`} />
+            </Grid>
+          </Grid>
+        }
+      >
+        {children}
+      </Dialog>
+      <Dialog
+        open={showDeleteConfirmation}
+        size="xs"
+        title="Really delete?"
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item>
+              <Button
+                text="Cancel"
+                kind="secondary"
+                onClick={() => setShowDeleteConfirmation(false)}
+              />
             </Grid>
             <Grid item>
               <Button
-                text="Edit"
-                kind="secondary"
-                href={`/${entity}/${id}/edit`}
+                text="Delete"
+                kind="destructive"
+                onClick={continueDeleteAction}
               />
             </Grid>
           </Grid>
-          <Grid item>
-            <Button text="Done" kind="primary" href={`/${entity}`} />
-          </Grid>
-        </Grid>
-      }
-    >
-      {children}
-    </Dialog>
+        }
+      >
+        <Box sx={{ ...bodyLarge, color: almostBlack }}>
+          Are you sure you want to delete this record?
+        </Box>
+      </Dialog>
+    </>
   );
 };

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

@@ -1,30 +1,55 @@
 "use client";
 
-import { FC } from "react";
-import { Grid, Box } from "@mui/material";
+import { FC, useEffect } from "react";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Button, Dialog } from "ui";
 
 interface EditProps {
   title: string;
   entity: string;
+  formAction: any;
+  formState: any;
   children: any;
 }
 
-export const Edit: FC<EditProps> = ({ title, entity, children }) => {
+export const Edit: FC<EditProps> = ({
+  title,
+  entity,
+  formState,
+  formAction,
+  children,
+}) => {
   const router = useRouter();
-  const { h3 } = typography;
+
+  useEffect(() => {
+    if (formState.success) {
+      router.push(`/${entity}`);
+    }
+  }, [formState.success, router]);
 
   return (
-    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
-      <Grid container direction="column">
-        <Grid item>
-          <Box sx={h3}>{title}</Box>
+    <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>
-        <Grid item>
-          {children}
-        </Grid>
-      </Grid>
-    </Box>
+      }
+    >
+      {children}
+    </Dialog>
   );
 };

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

@@ -3,6 +3,7 @@
 import { FC, PropsWithChildren, useState } from "react";
 import { Grid } from "@mui/material";
 import { CssBaseline } from "@mui/material";
+import { SessionProvider } from "next-auth/react";
 import { css, Global } from "@emotion/react";
 import { fonts } from "@/app/_styles/theme";
 import { Sidebar } from "./Sidebar";
@@ -17,7 +18,7 @@ export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
   `;
 
   return (
-    <>
+    <SessionProvider>
       <Global styles={globalCSS} />
       <CssBaseline />
       <Grid container direction="row">
@@ -29,6 +30,6 @@ export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
           {children as any}
         </Grid>
       </Grid>
-    </>
+    </SessionProvider>
   );
 };

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

@@ -4,7 +4,6 @@ import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
 import { List as InternalList, Button } from "ui";
-import { colors } from "ui";
 
 interface ListProps {
   title: string;
@@ -15,7 +14,6 @@ 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}`);
@@ -28,7 +26,7 @@ export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
       columns={columns}
       onRowClick={onRowClick}
       buttons={
-        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
+        <Button text="Create" kind="primary" href={`/${entity}/create`} />
       }
     />
   );

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

@@ -21,7 +21,6 @@ export const ServiceLayout = ({
   const id = length > 0 && !isCreate ? segment[0] : null;
   const isDetail = length === 1 && !!id && !isCreate && !isEdit;
 
-  console.log({ isCreate, isEdit, isDetail, id });
   return (
     <>
       {children}

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

@@ -24,9 +24,9 @@ import {
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
-import { fonts } from "@/app/_styles/theme";
+import { typography, fonts } from "@/app/_styles/theme";
 import LinkLogo from "@/public/link-logo-small.png";
-// import { useSession, signOut } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
 
 const openWidth = 270;
 const closedWidth = 70;
@@ -99,7 +99,7 @@ const MenuItem = ({
               position: "absolute",
               top: "-27px",
               left: "3px",
-              border: "solid 1px #fff",
+              border: "1px solid #fff",
               borderColor: "transparent transparent transparent #fff",
               borderRadius: "60px",
               rotate: "-35deg",
@@ -157,8 +157,9 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const pathname = usePathname();
   const { poppins } = fonts;
-  // const { data: session } = useSession();
-  //  const username = session?.user?.name || "User";
+  const { bodyLarge } = typography;
+  const { data: session } = useSession();
+  const user = session?.user;
 
   //  const logout = () => {
   //    signOut({ callbackUrl: "/login" });
@@ -352,6 +353,39 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
             />
           </List>
         </Grid>
+        <Grid
+          item
+          container
+          direction="row"
+          alignItems="center"
+          spacing={1}
+          sx={{
+            borderTop: "1px solid #ffffff33",
+            pt: 0.5,
+          }}
+        >
+          {user?.image && (
+            <Grid item>
+              <Box sx={{ width: 20, height: 20 }}>
+                <img
+                  src={user?.image ?? ""}
+                  alt="Profile image"
+                  style={{ width: "100%" }}
+                />
+              </Box>
+            </Grid>
+          )}
+          <Grid item>
+            <Box
+              sx={{
+                ...bodyLarge,
+                color: "white",
+              }}
+            >
+              {user?.name}
+            </Box>
+          </Grid>
+        </Grid>
       </Grid>
     </Drawer>
   );

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

@@ -0,0 +1,93 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { db, Database } from "./database";
+
+type AddActionArgs = {
+  entity: string;
+  table: keyof Database;
+  fields: string[];
+  currentState: any;
+  formData: FormData;
+};
+
+export const addAction = async ({
+  entity,
+  table,
+  fields,
+  currentState,
+  formData,
+}: AddActionArgs) => {
+  const newRecord = fields.reduce(
+    (acc: Record<string, string>, field: string) => {
+      // @ts-expect-error
+      acc[field] = formData.get(field)?.toString() ?? null;
+      return acc;
+    },
+    {},
+  );
+
+  await db.insertInto(table).values(newRecord).execute();
+
+  revalidatePath(`/${entity}`);
+
+  return {
+    ...currentState,
+    values: newRecord,
+    success: true,
+  };
+};
+
+type UpdateActionArgs = {
+  entity: string;
+  table: keyof Database;
+  fields: string[];
+  currentState: any;
+  formData: FormData;
+};
+
+export const updateAction = async ({
+  entity,
+  table,
+  fields,
+  currentState,
+  formData,
+}: UpdateActionArgs) => {
+  const id = currentState.values.id;
+  const updatedRecord = fields.reduce(
+    (acc: Record<string, string>, field: string) => {
+      // @ts-expect-error
+      acc[field] = formData.get(field)?.toString() ?? null;
+      return acc;
+    },
+    {},
+  );
+
+  await db
+    .updateTable(table)
+    .set(updatedRecord)
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  revalidatePath(`/${entity}/${id}`);
+
+  return {
+    ...currentState,
+    values: updatedRecord,
+    success: true,
+  };
+};
+
+type DeleteActionArgs = {
+  entity: string;
+  table: keyof Database;
+  id: string;
+};
+
+export const deleteAction = async ({ entity, table, id }: DeleteActionArgs) => {
+  await db.deleteFrom(table).where("id", "=", id).execute();
+
+  revalidatePath(`/${entity}`);
+
+  return true;
+};

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

@@ -1,5 +1,12 @@
 import { PostgresDialect, CamelCasePlugin } from "kysely";
-import type { GeneratedAlways, Generated, ColumnType } from "kysely";
+import type {
+  GeneratedAlways,
+  Generated,
+  ColumnType,
+  Selectable,
+  Insertable,
+  Updateable,
+} from "kysely";
 import { Pool, types } from "pg";
 import { KyselyAuth } from "@auth/kysely-adapter";
 
@@ -22,6 +29,22 @@ export const addGraphileJob = async (jobInfo: GraphileJob) => {
   // await db.insertInto("graphile_worker.jobs").values(jobInfo).execute();
 };
 
+interface FacebookBotTable {
+  id: GeneratedAlways<string>;
+  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>;
+}
+
 export interface Database {
   User: {
     id: string;
@@ -68,21 +91,7 @@ export interface Database {
     updatedAt: Date;
   };
 
-  FacebookBot: {
-    id: GeneratedAlways<string>;
-    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>;
-  };
+  FacebookBot: FacebookBotTable;
 
   VoiceLine: {
     id: GeneratedAlways<string>;
@@ -110,6 +119,8 @@ export interface Database {
   };
 }
 
+export type FacebookBot = Selectable<FacebookBotTable>;
+
 export const db = new KyselyAuth<Database>({
   dialect: new PostgresDialect({
     pool: new Pool({

packages/ui/components/Button.tsx

@@ -19,6 +19,12 @@ const buttonColors = {
   destructive: colors.brightRed,
 };
 
+const buttonHighlightColors = {
+  primary: colors.darkBlue,
+  secondary: colors.highlightGray,
+  destructive: colors.mediumRed,
+};
+
 export const InternalButton: FC<InternalButtonProps> = ({
   text,
   color,
@@ -41,6 +47,9 @@ export const InternalButton: FC<InternalButtonProps> = ({
       margin: 0,
       whiteSpace: "nowrap",
       textTransform: "none",
+      "&:hover": {
+        backgroundColor: buttonHighlightColors[kind ?? "secondary"],
+      },
     }}
   >
     {text}

packages/ui/components/Dialog.tsx

@@ -21,33 +21,49 @@ const DialogDetails: FC<DialogDetailsProps> = ({
   children,
   buttons,
 }) => {
-  const { h3 } = typography;
-  const { mediumGray, darkMediumGray } = colors;
+  const { h4 } = typography;
+  const { lightGray, mediumGray, darkMediumGray, white, almostBlack } = colors;
 
   return (
     <>
       <DialogTitle
         sx={{
           backgroundColor: mediumGray,
-          p: 3,
+          borderBottom: `1px solid ${darkMediumGray}`,
+          px: 3,
+          py: 2,
         }}
       >
         <Box
           sx={{
-            ...h3,
-            borderBottom: `1px solid ${darkMediumGray}`,
-            pb: 1.5,
+            ...h4,
+            color: almostBlack,
           }}
         >
           {title}
         </Box>
       </DialogTitle>
-      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
-        {children}
+      <DialogContent
+        sx={{
+          backgroundColor: lightGray,
+          p: 3,
+          borderTop: `1px solid ${white}`,
+          borderBottom: `1px solid ${darkMediumGray}`,
+        }}
+      >
+        <Box sx={{ color: "white", py: 3 }}>{children}</Box>
       </DialogContent>
       {buttons && (
-        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
-          {buttons}
+        <DialogActions sx={{ backgroundColor: mediumGray, p: 0 }}>
+          <Box
+            sx={{
+              p: 2,
+              borderTop: `1px solid ${white}`,
+              width: "100%",
+            }}
+          >
+            {buttons}
+          </Box>
         </DialogActions>
       )}
     </>
@@ -57,7 +73,8 @@ const DialogDetails: FC<DialogDetailsProps> = ({
 type DialogProps = {
   title: string;
   open: boolean;
-  onClose: Function;
+  onClose?: Function;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   formAction?: any;
   buttons?: React.ReactNode;
   children?: any;
@@ -66,6 +83,7 @@ type DialogProps = {
 export const Dialog: FC<DialogProps> = ({
   title,
   open,
+  size = "md",
   onClose,
   formAction,
   buttons,
@@ -76,7 +94,7 @@ export const Dialog: FC<DialogProps> = ({
       open={open}
       onClose={onClose as any}
       fullWidth
-      maxWidth="md"
+      maxWidth={size}
     >
       {formAction ? (
         <form action={formAction}>

packages/ui/components/DisplayTextField.tsx

@@ -46,14 +46,14 @@ export const DisplayTextField: FC<DisplayTextFieldProps> = ({
           WebkitTextFillColor: almostBlack,
         },
         "& .MuiFormLabel-root": {
-          fontSize: 20,
+          fontSize: 18,
           color: darkGray,
           minWidth: 0,
         },
       }}
       InputProps={{
         endAdornment: copyable ? (
-          <InputAdornment position="start">
+          <InputAdornment position="end">
             <IconButton
               onClick={() => copyToClipboard(value)}
               size="small"
@@ -67,7 +67,7 @@ export const DisplayTextField: FC<DisplayTextFieldProps> = ({
         disableUnderline: true,
         sx: {
           minWidth: 0,
-          fontSize: 18,
+          fontSize: 16,
           backgroundColor: "transparent",
           pt: "1px",
         },

packages/ui/components/TextField.tsx

@@ -1,10 +1,18 @@
 import { FC } from "react";
-import { TextField as InternalTextField } from "@mui/material";
+import {
+  TextField as InternalTextField,
+  InputAdornment,
+  IconButton,
+} from "@mui/material";
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { colors } from "../styles/theme";
 
 type TextFieldProps = {
   name: string;
   label: string;
   formState: Record<string, any>;
+  refreshable?: boolean;
+  disabled?: boolean;
   required?: boolean;
   lines?: number;
   helperText?: string;
@@ -14,25 +22,45 @@ export const TextField: FC<TextFieldProps> = ({
   name,
   label,
   formState,
+  refreshable = false,
+  disabled = false,
   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",
-      },
-    }}
-  />
-);
+}) => {
+  const { darkMediumGray } = colors;
+
+  return (
+    <InternalTextField
+      fullWidth
+      name={name}
+      label={label}
+      size="small"
+      disabled={disabled}
+      multiline={lines > 1}
+      rows={lines}
+      required={required}
+      defaultValue={formState.values[name]}
+      error={Boolean(formState.errors[name])}
+      helperText={formState.errors[name] ?? helperText}
+      InputProps={{
+        endAdornment: refreshable ? (
+          <InputAdornment position="end">
+            <IconButton
+              onClick={() => {}}
+              size="small"
+              color="primary"
+              sx={{ p: 0, color: darkMediumGray }}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </InputAdornment>
+        ) : null,
+
+        sx: {
+          backgroundColor: "#fff",
+        },
+      }}
+    />
+  );
+};

packages/ui/styles/theme.ts

@@ -29,8 +29,11 @@ export const colors: any = {
   lightGray: "#ededf0",
   mediumGray: "#e3e5e5",
   darkMediumGray: "#a3a5a5",
+  highlightGray: "#818383",
   darkGray: "#33302f",
+  veryDarkGray: "#25272A",
   mediumBlue: "#4285f4",
+  darkBlue: "#2063d2",
   green: "#349d7b",
   lavender: "#a5a6f6",
   darkLavender: "#5d5fef",
@@ -52,6 +55,7 @@ export const colors: any = {
   lightOrange: "#fff5f0",
   beige: "#f6f2f1",
   brightRed: "#ff0030",
+  mediumRed: "#bb0010",
   almostBlack: "#33302f",
   white: "#ffffff",
   black: "#000000",
@@ -82,7 +86,7 @@ export const typography: any = {
   h4: {
     fontFamily: poppins.style.fontFamily,
     fontWeight: 700,
-    fontSize: 18,
+    fontSize: 22,
   },
   h5: {
     fontFamily: roboto.style.fontFamily,