Edit and actions updates

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
 import { Button, Dialog } from "ui";
@@ -9,6 +9,7 @@ interface CreateProps {
   title: string;
   entity: string;
   formAction: any;
+  formState: any;
   children: any;
 }
 
@@ -16,10 +17,17 @@ export const Create: FC<CreateProps> = ({
   title,
   entity,
   formAction,
+  formState,
   children,
 }) => {
   const router = useRouter();
 
+  useEffect(() => {
+    if (formState.success) {
+      router.back();
+    }
+  }, [formState.success, router]);
+
   return (
     <Dialog
       open

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

@@ -1,46 +1,97 @@
 "use client";
 
-import { FC } from "react";
-import { Grid } from "@mui/material";
+import { FC, useState } from "react";
+import { Box, Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { Dialog, Button } from "ui";
+import { Dialog, Button, colors, typography } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
   id: string;
   children: any;
+  deleteAction?: Function;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
+export const Detail: FC<DetailProps> = ({
+  title,
+  entity,
+  id,
+  children,
+  deleteAction,
+}) => {
   const router = useRouter();
+  const { almostBlack } = colors;
+  const { bodyLarge } = typography;
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+
+  const continueDeleteAction = async () => {
+    await deleteAction?.(id);
+    setShowDeleteConfirmation(false);
+    router.push(`/${entity}`);
+  };
 
   return (
-    <Dialog
-      open
-      title={title}
-      onClose={() => router.push(`/${entity}`)}
-      buttons={
-        <Grid container justifyContent="space-between">
-          <Grid item container xs="auto" spacing={2}>
+    <>
+      <Dialog
+        open
+        title={title}
+        onClose={() => router.push(`/${entity}`)}
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item container xs="auto" spacing={2}>
+              {deleteAction && (
+                <Grid item>
+                  <Button
+                    text="Delete"
+                    kind="destructive"
+                    onClick={() => setShowDeleteConfirmation(true)}
+                  />
+                </Grid>
+              )}
+              <Grid item>
+                <Button
+                  text="Edit"
+                  kind="secondary"
+                  href={`/${entity}/${id}/edit`}
+                />
+              </Grid>
+            </Grid>
             <Grid item>
-              <Button text="Delete" kind="destructive" />
+              <Button text="Done" kind="primary" href={`/${entity}`} />
+            </Grid>
+          </Grid>
+        }
+      >
+        {children}
+      </Dialog>
+      <Dialog
+        open={showDeleteConfirmation}
+        size="xs"
+        title="Really delete?"
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item>
+              <Button
+                text="Cancel"
+                kind="secondary"
+                onClick={() => setShowDeleteConfirmation(false)}
+              />
             </Grid>
             <Grid item>
               <Button
-                text="Edit"
-                kind="secondary"
-                href={`/${entity}/${id}/edit`}
+                text="Delete"
+                kind="destructive"
+                onClick={continueDeleteAction}
               />
             </Grid>
           </Grid>
-          <Grid item>
-            <Button text="Done" kind="primary" href={`/${entity}`} />
-          </Grid>
-        </Grid>
-      }
-    >
-      {children}
-    </Dialog>
+        }
+      >
+        <Box sx={{ ...bodyLarge, color: almostBlack }}>
+          Are you sure you want to delete this record?
+        </Box>
+      </Dialog>
+    </>
   );
 };

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>
   );
 };

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

@@ -3,6 +3,7 @@
 import { FC, PropsWithChildren, useState } from "react";
 import { Grid } from "@mui/material";
 import { CssBaseline } from "@mui/material";
+import { SessionProvider } from "next-auth/react";
 import { css, Global } from "@emotion/react";
 import { fonts } from "@/app/_styles/theme";
 import { Sidebar } from "./Sidebar";
@@ -17,7 +18,7 @@ export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
   `;
 
   return (
-    <>
+    <SessionProvider>
       <Global styles={globalCSS} />
       <CssBaseline />
       <Grid container direction="row">
@@ -29,6 +30,6 @@ export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
           {children as any}
         </Grid>
       </Grid>
-    </>
+    </SessionProvider>
   );
 };

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

@@ -4,7 +4,6 @@ import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
 import { List as InternalList, Button } from "ui";
-import { colors } from "ui";
 
 interface ListProps {
   title: string;
@@ -15,7 +14,6 @@ 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}`);
@@ -28,7 +26,7 @@ export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
       columns={columns}
       onRowClick={onRowClick}
       buttons={
-        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
+        <Button text="Create" kind="primary" href={`/${entity}/create`} />
       }
     />
   );

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

@@ -21,7 +21,6 @@ export const ServiceLayout = ({
   const id = length > 0 && !isCreate ? segment[0] : null;
   const isDetail = length === 1 && !!id && !isCreate && !isEdit;
 
-  console.log({ isCreate, isEdit, isDetail, id });
   return (
     <>
       {children}

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

@@ -24,9 +24,9 @@ import {
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
-import { fonts } from "@/app/_styles/theme";
+import { typography, fonts } from "@/app/_styles/theme";
 import LinkLogo from "@/public/link-logo-small.png";
-// import { useSession, signOut } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
 
 const openWidth = 270;
 const closedWidth = 70;
@@ -99,7 +99,7 @@ const MenuItem = ({
               position: "absolute",
               top: "-27px",
               left: "3px",
-              border: "solid 1px #fff",
+              border: "1px solid #fff",
               borderColor: "transparent transparent transparent #fff",
               borderRadius: "60px",
               rotate: "-35deg",
@@ -157,8 +157,9 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const pathname = usePathname();
   const { poppins } = fonts;
-  // const { data: session } = useSession();
-  //  const username = session?.user?.name || "User";
+  const { bodyLarge } = typography;
+  const { data: session } = useSession();
+  const user = session?.user;
 
   //  const logout = () => {
   //    signOut({ callbackUrl: "/login" });
@@ -352,6 +353,39 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
             />
           </List>
         </Grid>
+        <Grid
+          item
+          container
+          direction="row"
+          alignItems="center"
+          spacing={1}
+          sx={{
+            borderTop: "1px solid #ffffff33",
+            pt: 0.5,
+          }}
+        >
+          {user?.image && (
+            <Grid item>
+              <Box sx={{ width: 20, height: 20 }}>
+                <img
+                  src={user?.image ?? ""}
+                  alt="Profile image"
+                  style={{ width: "100%" }}
+                />
+              </Box>
+            </Grid>
+          )}
+          <Grid item>
+            <Box
+              sx={{
+                ...bodyLarge,
+                color: "white",
+              }}
+            >
+              {user?.name}
+            </Box>
+          </Grid>
+        </Grid>
       </Grid>
     </Drawer>
   );