Metamigo -> Bridge

2024-04-21 09:44:30 +02:00 · 2024-04-21 09:44:30 +02:00 · a445762a37
commit a445762a37
parent 242f3cf6b8
145 changed files with 396 additions and 16668 deletions
--- a/apps/bridge-frontend/app/_actions/bots.ts
+++ b/apps/bridge-frontend/app/_actions/bots.ts
--- a/apps/bridge-frontend/app/_components/DeleteDialog.tsx
+++ b/apps/bridge-frontend/app/_components/DeleteDialog.tsx
@ -0,0 +1,31 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { typography } from "@/app/_styles/theme";
+
+interface DeleteDialogProps {
+  title: string;
+  entity: string;
+  children: any;
+}
+
+export const DeleteDialog: FC<DeleteDialogProps> = ({ title, entity, children }) => {
+  const router = useRouter();
+
+  const { h3 } = typography;
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>
+          {children}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
--- a/apps/bridge-frontend/app/_components/Detail.tsx
+++ b/apps/bridge-frontend/app/_components/Detail.tsx
@ -0,0 +1,30 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { typography } from "@/app/_styles/theme";
+
+interface DetailProps {
+  title: string;
+  entity: string;
+  children: any;
+}
+
+export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
+  const router = useRouter();
+  const { h3 } = typography;
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>
+          {children}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
--- a/apps/bridge-frontend/app/_components/Edit.tsx
+++ b/apps/bridge-frontend/app/_components/Edit.tsx
@ -0,0 +1,30 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { typography } from "@/app/_styles/theme";
+
+interface EditProps {
+  title: string;
+  entity: string;
+  children: any;
+}
+
+export const Edit: FC<EditProps> = ({ title, entity, children }) => {
+  const router = useRouter();
+  const { h3 } = typography;
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>
+          {children}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
--- a/apps/bridge-frontend/app/_components/InternalLayout.tsx
+++ b/apps/bridge-frontend/app/_components/InternalLayout.tsx
@ -0,0 +1,38 @@
+"use client";
+
+import { FC, PropsWithChildren, useState } from "react";
+import { Grid } from "@mui/material";
+import { Sidebar } from "./Sidebar";
+import { CssBaseline } from "@mui/material";
+import { css, Global } from "@emotion/react";
+import { fonts } from "@/app/_styles/theme";
+
+type LayoutProps = PropsWithChildren<{
+  docs?: any;
+}>;
+
+export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
+  const [open, setOpen] = useState(true);
+  const { roboto } = fonts;
+  const globalCSS = css`
+    * {
+      font-family: ${roboto.style.fontFamily};
+    }
+  `;
+
+  return (
+    <>
+      <Global styles={globalCSS} />
+      <CssBaseline />
+      <Grid container direction="row">
+        <Sidebar open={open} setOpen={setOpen} />
+        <Grid
+          item
+          sx={{ ml: open ? "270px" : "100px", width: "100%", height: "100vh" }}
+        >
+          {children as any}
+        </Grid>
+      </Grid>
+    </>
+  );
+};
--- a/apps/bridge-frontend/app/_components/List.tsx
+++ b/apps/bridge-frontend/app/_components/List.tsx
@ -0,0 +1,86 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
+import { useRouter } from "next/navigation";
+import { typography } from "@/app/_styles/theme";
+
+interface ListProps {
+  title: string;
+  entity: string;
+  rows: any;
+  columns: GridColDef<any>[];
+}
+
+export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
+  const router = useRouter();
+  const { h3 } = typography;
+
+  const onRowClick = (id: string) => {
+    router.push(`/${entity}/${id}`);
+  };
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{
+              backgroundColor: "#ddd",
+              border: 0,
+              width: "100%",
+              height: "100vh",
+              ".MuiDataGrid-row": {
+                cursor: "pointer",
+                "&:hover": {
+                  backgroundColor: "#1982fc33 !important",
+                  fontWeight: "bold",
+                },
+              },
+              ".MuiDataGrid-row:nth-of-type(1n)": {
+                backgroundColor: "#f3f3f3",
+              },
+              ".MuiDataGrid-row:nth-of-type(2n)": {
+                backgroundColor: "#fff",
+              },
+              ".MuiDataGrid-columnHeaderTitle": {
+                color: "#333",
+                fontWeight: "bold",
+                fontSize: 11,
+                margin: "0 auto",
+              },
+              ".MuiDataGrid-columnHeader": {
+                backgroundColor: "#ccc",
+                border: 0,
+                borderBottom: "3px solid #ddd",
+              },
+            }}
+          >
+            <DataGridPro
+              rows={rows}
+              columns={columns}
+              density="compact"
+              pagination
+              initialState={{
+                pagination: { paginationModel: { pageSize: 25 } },
+              }}
+              pageSizeOptions={[5, 10, 25]}
+              paginationMode="client"
+              sx={{ height: "100vh" }}
+              //              rowBuffer={30}
+              rowHeight={46}
+              scrollbarSize={0}
+              disableVirtualization
+              disableColumnMenu
+              onRowClick={(row: any) => onRowClick(row.id)}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
--- a/apps/bridge-frontend/app/_components/Sidebar.tsx
+++ b/apps/bridge-frontend/app/_components/Sidebar.tsx
@ -0,0 +1,350 @@
+"use client";
+
+import { FC } from "react";
+import {
+  Box,
+  Grid,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListItemSecondaryAction,
+  Drawer,
+} from "@mui/material";
+import {
+  ExpandCircleDown as ExpandCircleDownIcon,
+  AccountCircle as AccountCircleIcon,
+  Chat as ChatIcon,
+  PermPhoneMsg as PhoneIcon,
+  WhatsApp as WhatsAppIcon,
+  Facebook as FacebookIcon,
+} from "@mui/icons-material";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { fonts } from "@/app/_styles/theme";
+import LinkLogo from "@/public/link-logo-small.png";
+// import { useSession, signOut } from "next-auth/react";
+
+const openWidth = 270;
+const closedWidth = 100;
+
+const MenuItem = ({
+  name,
+  href,
+  Icon,
+  iconSize,
+  inset = false,
+  selected = false,
+  open = true,
+  badge,
+  target = "_self",
+}: any) => (
+  <Link href={href} target={target}>
+    <ListItemButton
+      sx={{
+        p: 0,
+        mb: 1,
+        bl: iconSize === 0 ? "1px solid white" : "inherit",
+      }}
+      selected={selected}
+    >
+      {iconSize > 0 ? (
+        <ListItemIcon
+          sx={{
+            color: `white`,
+            minWidth: 0,
+            mr: 2,
+            textAlign: "center",
+            margin: open ? "0 8 0 0" : "0 auto",
+          }}
+        >
+          <Box
+            sx={{
+              width: iconSize,
+              height: iconSize,
+              mr: 0.5,
+              mt: "-4px",
+            }}
+          >
+            <Icon />
+          </Box>
+        </ListItemIcon>
+      ) : (
+        <Box
+          sx={{
+            width: 30,
+            height: "28px",
+            position: "relative",
+            ml: "9px",
+            mr: "1px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "1px",
+              height: "56px",
+              backgroundColor: "white",
+              position: "absolute",
+              left: "3px",
+              top: "-10px",
+            }}
+          />
+          <Box
+            sx={{
+              width: "42px",
+              height: "42px",
+              position: "absolute",
+              top: "-27px",
+              left: "3px",
+              border: "solid 1px #fff",
+              borderColor: "transparent transparent transparent #fff",
+              borderRadius: "60px",
+              rotate: "-35deg",
+            }}
+          />
+        </Box>
+      )}
+      {open && (
+        <ListItemText
+          inset={inset}
+          primary={
+            <Typography
+              variant="body1"
+              sx={{
+                fontSize: 16,
+                fontWeight: "bold",
+                border: 0,
+                textAlign: "left",
+                color: "white",
+              }}
+            >
+              {name}
+            </Typography>
+          }
+        />
+      )}
+      {badge && badge > 0 ? (
+        <ListItemSecondaryAction>
+          <Typography
+            color="textSecondary"
+            variant="body1"
+            className="badge"
+            sx={{
+              backgroundColor: "#FFB620",
+              color: "black !important",
+              borderRadius: 10,
+              px: 1,
+              fontSize: 12,
+              fontWeight: "bold",
+            }}
+          >
+            {badge}
+          </Typography>
+        </ListItemSecondaryAction>
+      ) : null}
+    </ListItemButton>
+  </Link>
+);
+
+interface SidebarProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
+  const pathname = usePathname();
+  const { poppins } = fonts;
+  // const { data: session } = useSession();
+  //  const username = session?.user?.name || "User";
+
+  //  const logout = () => {
+  //    signOut({ callbackUrl: "/login" });
+  //  };
+
+  return (
+    <Drawer
+      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
+      variant="permanent"
+      anchor="left"
+      open={open}
+      PaperProps={{
+        sx: {
+          width: open ? openWidth : closedWidth,
+          border: 0,
+          overflow: "visible",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: 20,
+          right: open ? -8 : -16,
+          color: "#1C75FD",
+          rotate: open ? "90deg" : "-90deg",
+        }}
+        onClick={() => {
+          setOpen!(!open);
+        }}
+      >
+        <ExpandCircleDownIcon
+          sx={{
+            width: 30,
+            height: 30,
+            background: "white",
+            borderRadius: 500,
+          }}
+        />
+      </Box>
+      <Grid
+        container
+        direction="column"
+        justifyContent="space-between"
+        wrap="nowrap"
+        spacing={0}
+        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
+      >
+        <Grid item container>
+          <Grid item sx={{ width: open ? "40px" : "100%" }}>
+            <Box
+              sx={{
+                width: "40px",
+                height: "40px",
+                margin: open ? "0" : "0 auto",
+              }}
+            >
+              <Image
+                src={LinkLogo}
+                alt="Link logo"
+                width={40}
+                height={40}
+                style={{
+                  objectFit: "cover",
+                  filter: "grayscale(100) brightness(100)",
+                }}
+              />
+            </Box>
+            .
+          </Grid>
+          {open && (
+            <Grid item>
+              <Typography
+                variant="h2"
+                sx={{
+                  fontSize: 26,
+                  color: "white",
+                  fontWeight: 700,
+                  mt: 1,
+                  ml: 0.5,
+                  fontFamily: poppins.style.fontFamily,
+                }}
+              >
+                CDR Bridge
+              </Typography>
+            </Grid>
+          )}
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{
+              height: "0.5px",
+              width: "100%",
+              backgroundColor: "#666",
+              mb: 1,
+            }}
+          />
+        </Grid>
+        <Grid
+          item
+          container
+          direction="column"
+          sx={{
+            mt: "6px",
+            overflow: "scroll",
+            scrollbarWidth: "none",
+            msOverflowStyle: "none",
+            "&::-webkit-scrollbar": { display: "none" },
+          }}
+          flexGrow={1}
+        >
+          <List
+            component="nav"
+            sx={{
+              a: {
+                textDecoration: "none",
+
+                ".MuiListItemButton-root": {
+                  p: 1,
+                  borderRadius: 2,
+                  "&:hover": {
+                    background: "#555",
+                  },
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#999 !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+                ".Mui-selected": {
+                  background: "#444",
+                  color: "#fff !important",
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#fff !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+              },
+            }}
+          >
+            <MenuItem
+              name="Whatsapp"
+              href="/whatsapp"
+              selected={pathname.endsWith("/whatsapp")}
+              Icon={WhatsAppIcon}
+              iconSize={20}
+            />
+            <MenuItem
+              name="Signal"
+              href="/signal"
+              selected={pathname.startsWith("/signal")}
+              Icon={ChatIcon}
+              iconSize={20}
+            />
+            <MenuItem
+              name="Facebook"
+              href="/facebook"
+              selected={pathname.startsWith("/facebook")}
+              Icon={FacebookIcon}
+              iconSize={20}
+            />
+            <MenuItem
+              name="Voice"
+              href="/voice"
+              selected={pathname.startsWith("/voice")}
+              Icon={PhoneIcon}
+              iconSize={20}
+            />
+            <MenuItem
+              name="Users"
+              href="/users"
+              selected={pathname.startsWith("/users")}
+              Icon={AccountCircleIcon}
+              iconSize={20}
+            />
+          </List>
+        </Grid>
+      </Grid>
+    </Drawer>
+  );
+};
--- a/apps/bridge-frontend/app/_lib/authentication.ts
+++ b/apps/bridge-frontend/app/_lib/authentication.ts
@ -0,0 +1,15 @@
+import NextAuth from "next-auth"
+import GoogleProvider from "next-auth/providers/google"
+import { KyselyAdapter } from "@auth/kysely-adapter"
+import { db } from "./database";
+
+export const authOptions = NextAuth({
+  // @ts-ignore
+  adapter: KyselyAdapter(db),
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+    }),
+  ],
+})
--- a/apps/bridge-frontend/app/_lib/database.ts
+++ b/apps/bridge-frontend/app/_lib/database.ts
@ -0,0 +1,89 @@
+import { PostgresDialect } from "kysely";
+import { Pool } from "pg";
+import { KyselyAuth } from "@auth/kysely-adapter";
+import { CamelCasePlugin } from "kysely";
+import type { GeneratedAlways } from "kysely";
+
+interface Database {
+  User: {
+    id: string;
+    name: string | null;
+    email: string;
+    emailVerified: Date | null;
+    image: string | null;
+  };
+
+  Account: {
+    id: GeneratedAlways<string>;
+    userId: string;
+    type: "oidc" | "oauth" | "email" | "webauthn";
+    provider: string;
+    providerAccountId: string;
+    refresh_token: string | undefined;
+    access_token: string | undefined;
+    expires_at: number | undefined;
+    token_type: Lowercase<string> | undefined;
+    scope: string | undefined;
+    id_token: string | undefined;
+    session_state: string | undefined;
+  };
+
+  Session: {
+    id: GeneratedAlways<string>;
+    userId: string;
+    sessionToken: string;
+    expires: Date;
+  };
+
+  VerificationToken: {
+    identifier: string;
+    token: string;
+    expires: Date;
+  };
+
+  WhatsAppBot: {
+    id: GeneratedAlways<string>;
+    name: string;
+    phoneNumber: string;
+    createdBy: string;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+
+  FacebookBot: {
+    id: GeneratedAlways<string>;
+    name: string;
+    createdBy: string;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+
+  VoiceBot: {
+    id: GeneratedAlways<string>;
+    name: string;
+    createdBy: string;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+
+  SignalBot: {
+    id: GeneratedAlways<string>;
+    name: string;
+    phoneNumber: string;
+    createdBy: string;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+}
+
+export const db = new KyselyAuth<Database>({
+  dialect: new PostgresDialect({
+    pool: new Pool({
+      host: process.env.DATABASE_HOST,
+      database: process.env.DATABASE_NAME,
+      user: process.env.DATABASE_USER,
+      password: process.env.DATABASE_PASSWORD,
+    }),
+  }),
+  plugins: [new CamelCasePlugin()],
+});
--- a/apps/bridge-frontend/app/_lib/facebook.ts
+++ b/apps/bridge-frontend/app/_lib/facebook.ts
@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Service } from "./service";
+
+const getAllBots = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const getOneBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const sendMessage = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const receiveMessages = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const registerBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const resetBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const requestCode = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const unverifyBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const refreshBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const createBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const deleteBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const handleWebhook = async (req: NextRequest) => {
+  console.log({ req });
+
+  const { searchParams } = req.nextUrl;
+  const token = searchParams.get("hub.verify_token");
+
+  if (token !== process.env.FB_VERIFY_TOKEN) {
+    //    return NextResponse.error("Invalid token", { status: 403 });
+  }
+
+  if (searchParams.get("hub.mode") === "subscribe") {
+    const challenge = searchParams.get("hub.challenge");
+    console.log(token);
+    console.log(challenge);
+
+    return new Response(challenge, { status: 200 }) as NextResponse;
+  }
+
+  return NextResponse.json({ response: "ok" });
+};
+
+export const Facebook: Service = {
+  getAllBots,
+  getOneBot,
+  sendMessage,
+  receiveMessages,
+  registerBot,
+  resetBot,
+  requestCode,
+  unverifyBot,
+  refreshBot,
+  createBot,
+  deleteBot,
+  handleWebhook,
+};
--- a/apps/bridge-frontend/app/_lib/routing.ts
+++ b/apps/bridge-frontend/app/_lib/routing.ts
@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Service } from "./service";
+import { Facebook } from "./facebook";
+
+const services: Record<string, Service> = {
+  facebook: Facebook,
+  none: NextResponse.error() as any,
+};
+
+const getService = (req: NextRequest): Service => {
+  const service = req.nextUrl.searchParams.get("service") ?? "none";
+  return services[service];
+};
+
+export const getAllBots = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.getAllBots(req);
+
+export const getOneBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.getOneBot(req);
+
+export const sendMessage = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.sendMessage(req);
+
+export const receiveMessages = async (
+  req: NextRequest,
+): Promise<NextResponse> => getService(req)?.receiveMessages(req);
+
+export const registerBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.registerBot(req);
+
+export const resetBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.resetBot(req);
+
+export const requestCode = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.requestCode(req);
+
+export const unverifyBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.unverifyBot(req);
+
+export const refreshBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.refreshBot(req);
+
+export const createBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.createBot(req);
+
+export const deleteBot = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.deleteBot(req);
+
+export const handleWebhook = async (req: NextRequest): Promise<NextResponse> =>
+  getService(req)?.handleWebhook(req);
--- a/apps/bridge-frontend/app/_lib/service.ts
+++ b/apps/bridge-frontend/app/_lib/service.ts
@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export interface Service {
+  getAllBots: (req: NextRequest) => Promise<NextResponse>;
+  getOneBot: (req: NextRequest) => Promise<NextResponse>;
+  sendMessage: (req: NextRequest) => Promise<NextResponse>;
+  receiveMessages: (req: NextRequest) => Promise<NextResponse>;
+  registerBot: (req: NextRequest) => Promise<NextResponse>;
+  resetBot: (req: NextRequest) => Promise<NextResponse>;
+  requestCode: (req: NextRequest) => Promise<NextResponse>;
+  unverifyBot: (req: NextRequest) => Promise<NextResponse>;
+  refreshBot: (req: NextRequest) => Promise<NextResponse>;
+  createBot: (req: NextRequest) => Promise<NextResponse>;
+  deleteBot: (req: NextRequest) => Promise<NextResponse>;
+  handleWebhook: (req: NextRequest) => Promise<NextResponse>;
+}
--- a/apps/bridge-frontend/app/_lib/signal.ts
+++ b/apps/bridge-frontend/app/_lib/signal.ts
@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Service } from "./service";
+
+const getAllBots = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const getOneBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const sendMessage = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const receiveMessages = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const registerBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const resetBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const requestCode = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const unverifyBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const refreshBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const createBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const deleteBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+export const Signal: Service = {
+  getAllBots,
+  getOneBot,
+  sendMessage,
+  receiveMessages,
+  registerBot,
+  resetBot,
+  requestCode,
+  unverifyBot,
+  refreshBot,
+  createBot,
+  deleteBot,
+};
--- a/apps/bridge-frontend/app/_lib/voice.ts
+++ b/apps/bridge-frontend/app/_lib/voice.ts
@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Service } from "./service";
+
+const getAllBots = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const getOneBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const sendMessage = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const receiveMessages = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const registerBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const resetBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const requestCode = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const unverifyBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const refreshBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const createBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const deleteBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+export const Voice: Service = {
+  getAllBots,
+  getOneBot,
+  sendMessage,
+  receiveMessages,
+  registerBot,
+  resetBot,
+  requestCode,
+  unverifyBot,
+  refreshBot,
+  createBot,
+  deleteBot,
+};
--- a/apps/bridge-frontend/app/_lib/whatsapp.ts
+++ b/apps/bridge-frontend/app/_lib/whatsapp.ts
@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Service } from "./service";
+
+const getAllBots = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const getOneBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const sendMessage = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const receiveMessages = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const registerBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const resetBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const requestCode = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const unverifyBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const refreshBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const createBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+const deleteBot = async (req: NextRequest) => {
+  console.log({ req });
+
+  return NextResponse.json({ response: "ok" });
+};
+
+export const Whatsapp: Service = {
+  getAllBots,
+  getOneBot,
+  sendMessage,
+  receiveMessages,
+  registerBot,
+  resetBot,
+  requestCode,
+  unverifyBot,
+  refreshBot,
+  createBot,
+  deleteBot,
+};
--- a/apps/bridge-frontend/app/_styles/theme.ts
+++ b/apps/bridge-frontend/app/_styles/theme.ts
@ -0,0 +1,112 @@
+import { Roboto, Playfair_Display, Poppins } from "next/font/google";
+
+const roboto = Roboto({
+  weight: ["400"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const playfair = Playfair_Display({
+  weight: ["900"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const poppins = Poppins({
+  weight: ["400", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const fonts = {
+  roboto,
+  playfair,
+  poppins,
+};
+
+export const colors: any = {
+  lightGray: "#ededf0",
+  mediumGray: "#e3e5e5",
+  darkGray: "#33302f",
+  mediumBlue: "#4285f4",
+  green: "#349d7b",
+  lavender: "#a5a6f6",
+  darkLavender: "#5d5fef",
+  pink: "#fcddec",
+  cdrLinkOrange: "#ff7115",
+  coreYellow: "#fac942",
+  helpYellow: "#fff4d5",
+  dwcDarkBlue: "#191847",
+  hazyMint: "#ecf7f8",
+  leafcutterElectricBlue: "#4d6aff",
+  leafcutterLightBlue: "#fafbfd",
+  waterbearElectricPurple: "#332c83",
+  waterbearLightSmokePurple: "#eff3f8",
+  bumpedPurple: "#212058",
+  mutedPurple: "#373669",
+  warningPink: "#ef5da8",
+  lightPink: "#fff0f7",
+  lightGreen: "#f0fff3",
+  lightOrange: "#fff5f0",
+  beige: "#f6f2f1",
+  almostBlack: "#33302f",
+  white: "#ffffff",
+};
+
+export const typography: any = {
+  h1: {
+    fontFamily: playfair.style.fontFamily,
+    fontSize: 45,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h2: {
+    fontFamily: poppins.style.fontFamily,
+    fontSize: 35,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h3: {
+    fontFamily: poppins.style.fontFamily,
+    fontWeight: 400,
+    fontSize: 27,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h4: {
+    fontFamily: poppins.style.fontFamily,
+    fontWeight: 700,
+    fontSize: 18,
+  },
+  h5: {
+    fontFamily: roboto.style.fontFamily,
+    fontWeight: 700,
+    fontSize: 16,
+    lineHeight: "24px",
+    textTransform: "uppercase",
+    textAlign: "center",
+    margin: 1,
+  },
+  h6: {
+    fontFamily: roboto.style.fontFamily,
+    fontWeight: 400,
+    fontSize: 14,
+    textAlign: "center",
+  },
+  p: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 17,
+    lineHeight: "26.35px",
+    fontWeight: 400,
+    margin: 0,
+  },
+  small: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 13,
+    lineHeight: "18px",
+    fontWeight: 400,
+    margin: 0,
+  },
+};
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/receive/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/receive/route.ts
@ -0,0 +1 @@
+export { receiveMessages as GET } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/register/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/register/route.ts
@ -0,0 +1 @@
+export { registerBot as POST } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/request-code/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/request-code/route.ts
@ -0,0 +1 @@
+export { requestCode as POST } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/reset-session/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/reset-session/route.ts
@ -0,0 +1 @@
+export { resetBot as POST } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/route.ts
@ -0,0 +1 @@
+export { getOneBot as GET } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/[token]/send/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/[token]/send/route.ts
@ -0,0 +1 @@
+export { sendMessage as POST } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/bots/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/bots/route.ts
@ -0,0 +1 @@
+export { getAllBots as GET } from "@/app/_lib/routing";
--- a/apps/bridge-frontend/app/api/[service]/webhooks/route.ts
+++ b/apps/bridge-frontend/app/api/[service]/webhooks/route.ts
@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const handleRequest = async (req: NextRequest, res: NextResponse) => {
+
+  return NextResponse.json({ message: "ok" });
+};
+
+export { handleRequest as GET, handleRequest as POST };
--- a/apps/bridge-frontend/app/api/auth/[...nextauth]/route.ts
+++ b/apps/bridge-frontend/app/api/auth/[...nextauth]/route.ts
@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "@/app/_lib/authentication";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
--- a/apps/bridge-frontend/app/facebook/[id]/edit/page.tsx
+++ b/apps/bridge-frontend/app/facebook/[id]/edit/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Facebook view</h1>;
+}
--- a/apps/bridge-frontend/app/facebook/[id]/page.tsx
+++ b/apps/bridge-frontend/app/facebook/[id]/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Facebook view</h1>;
+}
--- a/apps/bridge-frontend/app/facebook/new/page.tsx
+++ b/apps/bridge-frontend/app/facebook/new/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Facebook Home</h1>;
+}
--- a/apps/bridge-frontend/app/facebook/page.tsx
+++ b/apps/bridge-frontend/app/facebook/page.tsx
@ -0,0 +1,46 @@
+"use client";
+
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "ui";
+
+export default function Page() {
+  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,
+    },
+  ];
+
+  const rows = [
+    {
+      id: 10,
+      phoneNumber: "1234567890",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ];
+
+  return (
+    <List title="Facebook" entity="facebook" rows={rows} columns={columns} />
+  );
+}
--- a/apps/bridge-frontend/app/favicon.ico
+++ b/apps/bridge-frontend/app/favicon.ico
--- a/apps/bridge-frontend/app/layout.tsx
+++ b/apps/bridge-frontend/app/layout.tsx
@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { InternalLayout } from "./_components/InternalLayout";
+import { LicenseInfo } from "@mui/x-license";
+
+LicenseInfo.setLicenseKey(
+  "7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=",
+);
+
+export const metadata: Metadata = {
+  title: "CDR Bridge",
+  description: "",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <InternalLayout>{children}</InternalLayout>
+      </body>
+    </html>
+  );
+}
--- a/apps/bridge-frontend/app/page.module.css
+++ b/apps/bridge-frontend/app/page.module.css
@ -0,0 +1,230 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+  text-wrap: balance;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: "";
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
--- a/apps/bridge-frontend/app/page.tsx
+++ b/apps/bridge-frontend/app/page.tsx
@ -0,0 +1,4 @@
+export default function Page() {
+  return <h1>Home</h1>;
+}
+
--- a/apps/bridge-frontend/app/signal/[id]/page.tsx
+++ b/apps/bridge-frontend/app/signal/[id]/page.tsx
@ -0,0 +1,9 @@
+import { Detail } from "@/app/_components/Detail";
+
+export default function Page() {
+  return (
+    <Detail title="Signal Detail" entity="signal">
+      <p>Cool</p>
+    </Detail>
+  );
+}
--- a/apps/bridge-frontend/app/signal/new/page.tsx
+++ b/apps/bridge-frontend/app/signal/new/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Signal new</h1>;
+}
--- a/apps/bridge-frontend/app/signal/page.tsx
+++ b/apps/bridge-frontend/app/signal/page.tsx
@ -0,0 +1,46 @@
+"use client";
+
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "ui";
+
+export default function Page() {
+  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,
+    },
+  ];
+
+  const rows = [
+    {
+      id: 10,
+      phoneNumber: "1234567890",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ];
+
+  return (
+    <List title="Signal Bots" entity="signal" rows={rows} columns={columns} />
+  );
+}
--- a/apps/bridge-frontend/app/users/page.tsx
+++ b/apps/bridge-frontend/app/users/page.tsx
@ -0,0 +1,44 @@
+"use client";
+
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "ui";
+
+export default function Page() {
+  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,
+    },
+  ];
+
+  const rows = [
+    {
+      id: 10,
+      phoneNumber: "1234567890",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ];
+
+  return <List title="Users" entity="users" rows={rows} columns={columns} />;
+}
--- a/apps/bridge-frontend/app/voice/[id]/edit/page.tsx
+++ b/apps/bridge-frontend/app/voice/[id]/edit/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Voice Edit</h1>;
+}
--- a/apps/bridge-frontend/app/voice/[id]/page.tsx
+++ b/apps/bridge-frontend/app/voice/[id]/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Voice detail</h1>;
+}
--- a/apps/bridge-frontend/app/voice/new/page.tsx
+++ b/apps/bridge-frontend/app/voice/new/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Voice Home</h1>;
+}
--- a/apps/bridge-frontend/app/voice/page.tsx
+++ b/apps/bridge-frontend/app/voice/page.tsx
@ -0,0 +1,46 @@
+"use client";
+
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "ui";
+
+export default function Page() {
+  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,
+    },
+  ];
+
+  const rows = [
+    {
+      id: 10,
+      phoneNumber: "1234567890",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+  ];
+
+  return (
+    <List title="Voice bots" entity="users" rows={rows} columns={columns} />
+  );
+}
--- a/apps/bridge-frontend/app/whatsapp/[id]/edit/page.tsx
+++ b/apps/bridge-frontend/app/whatsapp/[id]/edit/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Whatsapp edit</h1>;
+}
--- a/apps/bridge-frontend/app/whatsapp/[id]/page.tsx
+++ b/apps/bridge-frontend/app/whatsapp/[id]/page.tsx
@ -0,0 +1,6 @@
+import { db } from "@/app/_lib/database";
+
+export default async function Page() {
+  const rows = await db.selectFrom("WhatsAppBot").
+  return <h1>Whatsapp View</h1>;
+}
--- a/apps/bridge-frontend/app/whatsapp/new/page.tsx
+++ b/apps/bridge-frontend/app/whatsapp/new/page.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Whatsapp new</h1>;
+}
--- a/apps/bridge-frontend/app/whatsapp/page.tsx
+++ b/apps/bridge-frontend/app/whatsapp/page.tsx
@ -0,0 +1,45 @@
+"use client";
+
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { List } from "ui";
+import { db } from "@/app/_lib/database";
+
+export default async function Page() {
+  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,
+    },
+  ];
+
+  const rows = await db.selectFrom("WhatsAppBot").selectAll().execute();
+
+  return (
+    <List
+      title="Whatsapp Bots"
+      rows={rows}
+      columns={columns}
+      onRowClick={() => {}}
+    />
+  );
+}
				`@ -0,0 +1 @@`
				`export { receiveMessages as GET } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { registerBot as POST } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { requestCode as POST } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { resetBot as POST } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { getOneBot as GET } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { sendMessage as POST } from "@/app/_lib/routing";`
				`@ -0,0 +1 @@`
				`export { getAllBots as GET } from "@/app/_lib/routing";`