Edit and actions updates

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

@@ -1,30 +1,55 @@
 "use client";
 
-import { FC } from "react";
-import { Grid, Box } from "@mui/material";
+import { FC, useEffect } from "react";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Button, Dialog } from "ui";
 
 interface EditProps {
   title: string;
   entity: string;
+  formAction: any;
+  formState: any;
   children: any;
 }
 
-export const Edit: FC<EditProps> = ({ title, entity, children }) => {
+export const Edit: FC<EditProps> = ({
+  title,
+  entity,
+  formState,
+  formAction,
+  children,
+}) => {
   const router = useRouter();
-  const { h3 } = typography;
+
+  useEffect(() => {
+    if (formState.success) {
+      router.push(`/${entity}`);
+    }
+  }, [formState.success, router]);
 
   return (
-    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
-      <Grid container direction="column">
-        <Grid item>
-          <Box sx={h3}>{title}</Box>
+    <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>
-        <Grid item>
-          {children}
-        </Grid>
-      </Grid>
-    </Box>
+      }
+    >
+      {children}
+    </Dialog>
   );
 };