Create/detail updates

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { Button, Dialog } from "ui";
+
+interface CreateProps {
+  title: string;
+  entity: string;
+  formAction: any;
+  children: any;
+}
+
+export const Create: FC<CreateProps> = ({
+  title,
+  entity,
+  formAction,
+  children,
+}) => {
+  const router = useRouter();
+
+  return (
+    <Dialog
+      open
+      title={title}
+      formAction={formAction}
+      onClose={() => router.push(`/${entity}`)}
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Button
+              text="Cancel"
+              kind="secondary"
+              onClick={() => router.push(`/${entity}`)}
+            />
+          </Grid>
+          <Grid item>
+            <Button text="Save" kind="primary" type="submit" />
+          </Grid>
+        </Grid>
+      }
+    >
+      {children}
+    </Dialog>
+  );
+};

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

@@ -1,35 +1,46 @@
 "use client";
 
 import { FC } from "react";
-import { Grid, Box, Dialog } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Dialog, Button } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
+  id: string;
   children: any;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
+export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
   const router = useRouter();
-  const { h3 } = typography;
 
   return (
     <Dialog
-      open={true}
+      open
+      title={title}
       onClose={() => router.push(`/${entity}`)}
-      fullScreen
-      sx={{ backgroundColor: "#ddd" }}
-    >
-      <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
-        <Grid container direction="column">
-          <Grid item>
-            <Box sx={h3}>{title}</Box>
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item container xs="auto" spacing={2}>
+            <Grid item>
+              <Button text="Delete" kind="destructive" />
+            </Grid>
+            <Grid item>
+              <Button
+                text="Edit"
+                kind="secondary"
+                href={`/${entity}/${id}/edit`}
+              />
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Button text="Done" kind="primary" href={`/${entity}`} />
           </Grid>
-          <Grid item>{children}</Grid>
         </Grid>
-      </Box>
+      }
+    >
+      {children}
     </Dialog>
   );
 };

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

@@ -3,7 +3,8 @@
 import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
-import { List as InternalList } from "ui";
+import { List as InternalList, Button } from "ui";
+import { colors } from "ui";
 
 interface ListProps {
   title: string;
@@ -14,6 +15,7 @@ interface ListProps {
 
 export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
   const router = useRouter();
+  const { mediumBlue } = colors;
 
   const onRowClick = (id: string) => {
     router.push(`/${entity}/${id}`);
@@ -25,6 +27,9 @@ export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
       rows={rows}
       columns={columns}
       onRowClick={onRowClick}
+      buttons={
+        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
+      }
     />
   );
 };

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

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