Generalize WIP

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

@@ -0,0 +1,56 @@
+"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 { generateCreateAction } from "@/app/_lib/actions";
+import { serviceConfig } from "@/app/_lib/config";
+
+type CreateProps = {
+  service: string;
+};
+
+export const Create: FC<CreateProps> = ({ service }) => {
+  const {
+    [service]: { entity, table, displayName, createFields: fields },
+  } = serviceConfig;
+  const createFieldNames = fields.map((val) => val.name);
+  const createAction = generateCreateAction({ entity, table, fields });
+  const initialState = {
+    message: null,
+    errors: {},
+    values: createFieldNames.reduce((acc, key) => {
+      // @ts-expect-error
+      acc[key] = fields[key].defaultValue;
+      return acc;
+    }, {}),
+  };
+  console.log("initialState", initialState);
+  const [formState, formAction] = useFormState(createAction, initialState);
+
+  return (
+    <InternalCreate
+      title={`Create ${displayName}`}
+      entity={entity}
+      formAction={formAction}
+      formState={formState}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {fields.map((field) => (
+          <Grid item xs={field.size ?? 6}>
+            <TextField
+              key={field.name}
+              name={field.name}
+              label={field.label}
+              required={field.required ?? false}
+              formState={formState}
+              helperText={field.helperText}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </InternalCreate>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { Create } from "./_components/Create";
+
+type PageProps = {
+  params: { service: string };
+};
+
+export default function Page({ params: { service } }: PageProps) {
+  return <Create service={service} />;
+}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { DisplayTextField } from "ui";
+import { Selectable } from "kysely";
+import { Database } from "@/app/_lib/database";
+import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { generateDeleteAction } from "@/app/_lib/actions";
+import { serviceConfig } from "@/app/_lib/config";
+
+type DetailProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Detail: FC<DetailProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, displayFields: fields },
+  } = serviceConfig;
+  const deleteAction = generateDeleteAction({ entity, table });
+
+  return (
+    <InternalDetail
+      title={`${displayName}: ${row.name}`}
+      entity={entity}
+      id={row.id as string}
+      deleteAction={deleteAction}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {fields.map((field) => (
+          <Grid item xs={6} key={field.name}>
+            <DisplayTextField
+              name={field.name}
+              label={field.label}
+              lines={field.lines ?? 1}
+              value={row[field.name] as string}
+              copyable={field.copyable ?? false}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </InternalDetail>
+  );
+};

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

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

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

@@ -0,0 +1,57 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Selectable } from "kysely";
+import { Database } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { generateUpdateAction } from "@/app/_lib/actions";
+import { serviceConfig } from "@/app/_lib/config";
+
+type EditProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Edit: FC<EditProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, updateFields: fields },
+  } = serviceConfig;
+  const updateFieldNames = fields.map((val) => val.name);
+  const updateAction = generateUpdateAction({ entity, table, fields });
+  const initialState = {
+    message: null,
+    errors: {},
+    values: Object.fromEntries(
+      Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
+    ),
+  };
+  console.log("initialState", initialState);
+  const [formState, formAction] = useFormState(updateAction, initialState);
+
+  return (
+    <InternalEdit
+      title={`Edit ${displayName}: ${row.name}`}
+      entity={entity}
+      formAction={formAction}
+      formState={formState}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {fields.map((field) => (
+          <Grid item xs={field.size ?? 6}>
+            <TextField
+              key={field.name}
+              name={field.name}
+              label={field.label}
+              required={field.required ?? false}
+              formState={formState}
+              helperText={field.helperText}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </InternalEdit>
+  );
+};

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

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

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

@@ -0,0 +1,66 @@
+"use server";
+
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+// write a function that returns the addRecordAction
+
+export function generateAddRecordAction(
+  entity: string,
+  table: string,
+  fields: string[],
+) {
+  // The returned function matches the signature of addRecordAction, but uses the parameters from the outer function.
+  return async (currentState: any, formData: FormData) => {
+    return addAction({
+      entity,
+      table,
+      fields,
+      currentState,
+      formData,
+    });
+  };
+}
+
+export const addRecordAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  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)/[...segment]/_components/List.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { FC } from "react";
+import { List as InternalList } from "@/app/_components/List";
+import type { Selectable } from "kysely";
+import { Database } from "@/app/_lib/database";
+import { serviceConfig } from "@/app/_lib/config";
+
+type ListProps = {
+  service: string;
+  rows: Selectable<keyof Database>[];
+};
+
+export const List: FC<ListProps> = ({ service, rows }) => {
+  const { displayName, entity, listColumns } = serviceConfig[service];
+
+  return (
+    <InternalList
+      title={displayName}
+      entity={entity}
+      rows={rows}
+      columns={listColumns}
+    />
+  );
+};

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

@@ -0,0 +1,32 @@
+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 === 2 && segment[1] === "create";
+  const isEdit = length === 3 && segment[2] === "edit";
+  const id = length > 1 && !isCreate ? segment[1] : null;
+  const isDetail = length === 2 && !!id && !isCreate && !isEdit;
+
+  return (
+    <>
+      {children}
+      {isDetail && detail}
+      {isEdit && edit}
+      {isCreate && create}
+    </>
+  );
+};

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

@@ -0,0 +1,19 @@
+// import { List } from "./_components/List";
+// import { db } from "@/app/_lib/database";
+// import { serviceConfig } from "@/app/_lib/config";
+
+type PageProps = {
+  params: {
+    service: string;
+  };
+};
+
+export default async function Page({ params: { service } }: PageProps) {
+  console.log({ service });
+
+  return <h1> Nice</h1>;
+  //  const config = serviceConfig[service];
+  //  const rows = await db.selectFrom(config.table).selectAll().execute();
+
+  //  return <List service={service} rows={rows} />;
+}

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

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

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

@@ -2,30 +2,29 @@
 
 import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
+import { WhatsappBot } from "@/app/_lib/database";
 import { List } from "@/app/_components/List";
 
 type WhatsappListProps = {
-  rows: any[];
+  rows: WhatsappBot[];
 };
 
 export const WhatsappList: FC<WhatsappListProps> = ({ rows }) => {
   const columns: GridColDef[] = [
     {
-      field: "id",
-      headerName: "ID",
+      field: "name",
+      headerName: "Name",
       flex: 1,
     },
     {
       field: "phoneNumber",
       headerName: "Phone Number",
-      flex: 2,
+      flex: 1,
     },
     {
-      field: "createdAt",
-      headerName: "Created At",
-      valueGetter: (params: any) =>
-        new Date(params.row?.createdAt).toLocaleString(),
-      flex: 1,
+      field: "description",
+      headerName: "Description",
+      flex: 2,
     },
     {
       field: "updatedAt",