Add CRUD for other entities

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]]/_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)/webhooks/[[...segment]]/_components/WebhooksList.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { FC } from "react";
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "@/app/_components/List";
+
+type WebhooksListProps = {
+  rows: any[];
+};
+
+export const WebhooksList: FC<WebhooksListProps> = ({ rows }) => {
+  const columns: GridColDef[] = [
+    {
+      field: "id",
+      headerName: "ID",
+      flex: 1,
+    },
+    {
+      field: "phoneNumber",
+      headerName: "Phone Number",
+      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(),
+      flex: 1,
+    },
+  ];
+
+  return (
+    <List title="Webhooks" entity="webhooks" rows={rows} columns={columns} />
+  );
+};

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)/webhooks/[[...segment]]/page.tsx

@@ -0,0 +1,11 @@
+import { WebhooksList } from "./_components/WebhooksList";
+import { db } from "@/app/_lib/database";
+
+export const dynamic = "force-dynamic";
+
+export default async function Page() {
+  const rows = await db.selectFrom("Webhook").selectAll().execute();
+  console.log(rows);
+
+  return <WebhooksList rows={rows} />;
+}