Add CRUD for other entities

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addSignalBotAction } from "../../_actions/signal";
+
+export const Create: FC = () => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(
+    addSignalBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalCreate
+      title="Create Signal Connection"
+      entity="signal"
+      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>
+    </InternalCreate>
+  );
+};

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { SignalBot } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteSignalBotAction } from "../../_actions/signal";
+
+type DetailProps = {
+  row: SignalBot;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`Signal Connection: ${row.name}`}
+    entity="signal"
+    id={row.id}
+    deleteAction={deleteSignalBotAction}
+  >
+    <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>
+  </InternalDetail>
+);

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

@@ -0,0 +1,24 @@
+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];
+
+  if (!id) return null;
+
+  const row = await db
+    .selectFrom("SignalBot")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Detail row={row} />;
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { SignalBot } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateSignalBotAction } from "../../_actions/signal";
+
+type EditProps = {
+  row: SignalBot;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateSignalBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Signal Connection: ${row.name}`}
+      entity="signal"
+      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>
+    </InternalEdit>
+  );
+};

apps/bridge-frontend/app/(main)/signal/[[...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("SignalBot")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Edit row={row} />;
+}

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

@@ -2,13 +2,16 @@
 
 import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
 
+const entity = "signal";
+const table = "SignalBot";
+
 export const addSignalBotAction = async (
   currentState: any,
   formData: FormData,
 ) => {
   return addAction({
-    entity: "signal",
-    table: "SignalBot",
+    entity,
+    table,
     fields: ["name", "description"],
     currentState,
     formData,
@@ -20,18 +23,14 @@ export const updateSignalBotAction = async (
   formData: FormData,
 ) => {
   return updateAction({
-    entity: "signal",
-    table: "SignalBot",
+    entity,
+    table,
     fields: ["name"],
     currentState,
     formData,
   });
 };
 
-export const updateSignalBotAction = async (id: string) => {
-  return deleteAction({
-    entity: "facebook",
-    table: "FacebookBot",
-    id,
-  });
+export const deleteSignalBotAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
 };

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

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

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

@@ -1,9 +0,0 @@
-import { Detail } from "@/app/_components/Detail";
-
-export default function Page() {
-  return (
-    <Detail title="Signal Detail" entity="signal">
-      <p>Cool</p>
-    </Detail>
-  );
-}

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

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

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addUserAction } from "../../_actions/users";
+
+export const Create: FC = () => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(addUserAction, initialState);
+
+  return (
+    <InternalCreate
+      title="Create User"
+      entity="users"
+      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>
+    </InternalCreate>
+  );
+};

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

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

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { User } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteUserAction } from "../../_actions/users";
+
+type DetailProps = {
+  row: User;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`User: ${row.name}`}
+    entity="users"
+    id={row.id}
+    deleteAction={deleteUserAction}
+  >
+    <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+      <Grid item xs={12}>
+        <DisplayTextField name="name" label="Name" value={row.name} />
+      </Grid>
+    </Grid>
+  </InternalDetail>
+);

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

@@ -0,0 +1,24 @@
+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];
+
+  if (!id) return null;
+
+  const row = await db
+    .selectFrom("User")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Detail row={row} />;
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { User } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateUserAction } from "../../_actions/users";
+
+type EditProps = {
+  row: User;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(updateUserAction, initialState);
+
+  return (
+    <InternalEdit
+      title={`Edit User: ${row.name}`}
+      entity="users"
+      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>
+    </InternalEdit>
+  );
+};

apps/bridge-frontend/app/(main)/users/[[...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("User")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Edit row={row} />;
+}

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

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

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addVoiceLineAction } from "../../_actions/voice";
+
+export const Create: FC = () => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(
+    addVoiceLineAction,
+    initialState,
+  );
+
+  return (
+    <InternalCreate
+      title="Create Voice Connection"
+      entity="voice"
+      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>
+    </InternalCreate>
+  );
+};

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { VoiceLine } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteVoiceLineAction } from "../../_actions/voice";
+
+type DetailProps = {
+  row: VoiceLine;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`Voice Line: ${row.name}`}
+    entity="voice"
+    id={row.id}
+    deleteAction={deleteVoiceLineAction}
+  >
+    <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>
+  </InternalDetail>
+);

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

@@ -0,0 +1,24 @@
+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];
+
+  if (!id) return null;
+
+  const row = await db
+    .selectFrom("VoiceLine")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Detail row={row} />;
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { VoiceLine } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateVoiceLineAction } from "../../_actions/voice";
+
+type EditProps = {
+  row: VoiceLine;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateVoiceLineAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Voice Line: ${row.name}`}
+      entity="voice"
+      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>
+    </InternalEdit>
+  );
+};

apps/bridge-frontend/app/(main)/voice/[[...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("VoiceLine")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Edit row={row} />;
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addWebhookAction } from "../../_actions/webhooks";
+
+export const Create: FC = () => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(addWebhookAction, initialState);
+
+  return (
+    <InternalCreate
+      title="Create Webhook"
+      entity="webhooks"
+      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>
+    </InternalCreate>
+  );
+};

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { Webhook } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteWebhookAction } from "../../_actions/webhooks";
+
+type DetailProps = {
+  row: Webhook;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`Webhook: ${row.name}`}
+    entity="webhooks"
+    id={row.id}
+    deleteAction={deleteWebhookAction}
+  >
+    <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>
+  </InternalDetail>
+);

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

@@ -0,0 +1,24 @@
+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];
+
+  if (!id) return null;
+
+  const row = await db
+    .selectFrom("Webhook")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Detail row={row} />;
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Webhook } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateWebhookAction } from "../../_actions/webhooks";
+
+type EditProps = {
+  row: Webhook;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateWebhookAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Webhook: ${row.name}`}
+      entity="webhooks"
+      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>
+    </InternalEdit>
+  );
+};

apps/bridge-frontend/app/(main)/webhooks/[[...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("Webhook")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Edit row={row} />;
+}

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

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

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Create as InternalCreate } from "@/app/_components/Create";
+import { addWhatsappBotAction } from "../../_actions/whatsapp";
+
+export const Create: FC = () => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: {
+      name: "",
+      description: "",
+      one: "",
+    },
+  };
+  const [formState, formAction] = useFormState(
+    addWhatsappBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalCreate
+      title="Create WhatsApp Connection"
+      entity="whatsapp"
+      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>
+    </InternalCreate>
+  );
+};

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { WhatsappBot } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteWhatsappBotAction } from "../../_actions/whatsapp";
+
+type DetailProps = {
+  row: WhatsappBot;
+};
+
+export const Detail: FC<DetailProps> = ({ row }) => (
+  <InternalDetail
+    title={`WhatsApp Connection: ${row.name}`}
+    entity="whatsapp"
+    id={row.id}
+    deleteAction={deleteWhatsappBotAction}
+  >
+    <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>
+  </InternalDetail>
+);

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

@@ -0,0 +1,24 @@
+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];
+
+  if (!id) return null;
+
+  const row = await db
+    .selectFrom("WhatsappBot")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Detail row={row} />;
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { WhatsappBot } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateWhatsappBotAction } from "../../_actions/whatsapp";
+
+type EditProps = {
+  row: WhatsappBot;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateWhatsappBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Whatsapp Connection: ${row.name}`}
+      entity="whatsapp"
+      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>
+    </InternalEdit>
+  );
+};

apps/bridge-frontend/app/(main)/whatsapp/[[...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("WhatsappBot")
+    .selectAll()
+    .where("id", "=", id)
+    .executeTakeFirst();
+
+  if (!row) return null;
+
+  return <Edit row={row} />;
+}

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

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

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

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

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

@@ -1,6 +0,0 @@
-// import { db } from "@/app/_lib/database";
-
-export default async function Page() {
-  const rows = []; // await db.selectFrom("WhatsAppBot").
-  return <h1>Whatsapp View</h1>;
-}

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

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

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

@@ -29,22 +29,6 @@ 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;
@@ -85,17 +69,33 @@ export interface Database {
   WhatsappBot: {
     id: GeneratedAlways<string>;
     name: string;
+    description: string;
     phoneNumber: string;
     createdBy: string;
     createdAt: Date;
     updatedAt: Date;
   };
 
-  FacebookBot: FacebookBotTable;
+  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>;
+  };
 
   VoiceLine: {
     id: GeneratedAlways<string>;
     name: string;
+    description: string;
     createdBy: string;
     createdAt: Date;
     updatedAt: Date;
@@ -104,6 +104,7 @@ export interface Database {
   SignalBot: {
     id: GeneratedAlways<string>;
     name: string;
+    description: string;
     phoneNumber: string;
     createdBy: string;
     createdAt: Date;
@@ -113,13 +114,19 @@ export interface Database {
   Webhook: {
     id: GeneratedAlways<string>;
     name: string;
+    description: string;
     createdBy: string;
     createdAt: Date;
     updatedAt: Date;
   };
 }
 
-export type FacebookBot = Selectable<FacebookBotTable>;
+export type FacebookBot = Selectable<Database["FacebookBot"]>;
+export type SignalBot = Selectable<Database["SignalBot"]>;
+export type WhatsappBot = Selectable<Database["WhatsappBot"]>;
+export type VoiceLine = Selectable<Database["VoiceLine"]>;
+export type Webhook = Selectable<Database["Webhook"]>;
+export type User = Selectable<Database["User"]>;
 
 export const db = new KyselyAuth<Database>({
   dialect: new PostgresDialect({