added route + fix bugs

src/app/components/ClientPreview.tsx

@@ -147,7 +147,6 @@ const ClientPreview = ({
     return null
   }
 
-  console.log(content)
   return <EditorContent editor={editor} readOnly={true} content={content} />
 }
 

src/app/components/SideBarInterface.tsx

@@ -6,7 +6,7 @@ import AutofillFields from '@/components/autofillFields/AutofillFields'
 import Select from '@/components/select/Select'
 import { useAppState } from '@/hooks/useAppState'
 import { ImagePickerUtils } from '@/utils/imagePickerUtils'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 import { IClient, ICustomField } from '@/types/interfaces'
 import { Box, Stack } from '@mui/material'
 import Image from 'next/image'
@@ -34,13 +34,26 @@ const SideBarInterface: FC<IEditorInterface> = ({
     IClient | string | null
   >(defaultValue)
 
-  useEffect(() => {
+  const getNotifications = async (clientId: string) => {
+    const notifications = await fetch(
+      `api/notifications?token=${appState?.appState?.token}&clientId=${clientId}`,
+    )
+    return await notifications.json()
+  }
+
+  useMemo(() => {
     if (dropdownSelectedClient === defaultValue) {
       appState?.toggleReadOnly(false)
       appState?.setSelectedClient(null)
     } else {
-      appState?.toggleReadOnly(true)
-      appState?.setSelectedClient(dropdownSelectedClient as IClient)
+      ;(async () => {
+        appState?.toggleReadOnly(true)
+        appState?.setSelectedClient(dropdownSelectedClient as IClient)
+        const notifications = await getNotifications(
+          (dropdownSelectedClient as IClient).id,
+        )
+        appState?.setNotification(notifications)
+      })()
     }
   }, [dropdownSelectedClient])
 

src/components/NotificationsModal/index.tsx

@@ -48,6 +48,11 @@ const NotificationsModal = ({ settings }: NotificationsModalProps) => {
         }),
       })
       appState?.toggleNotificationsModal()
+      const newSettings = {
+        ...appState?.appState.settings,
+        notifications: formState,
+      }
+      appState?.setSettings(newSettings as ISettings)
     } catch (e) {
       console.error(e)
     }

src/components/display/DisplayTasksToggle.tsx

@@ -6,7 +6,6 @@ const DisplayTasksToggle = () => {
   const appState = useAppState()
 
   const handleClick = () => {
-    console.log(appState?.appState.originalTemplate)
     if (!appState?.appState.settings?.displayTasks) {
       if (appState?.appState.editor) {
         appState?.appState?.editor

src/components/tiptap/notificationWidget/NotificationWidget.tsx

@@ -1,10 +1,11 @@
 import { NodeViewWrapper } from '@tiptap/react'
-import { Stack, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import RedirectButton from '@/components/atoms/RedirectButton'
-import { PortalRoutes } from '@/types/copilotPortal'
-import React from 'react'
+import { AvailablePortalRoutes, PortalRoutes } from '@/types/copilotPortal'
+import React, { useState } from 'react'
 import { useAppData } from '@/hooks/useAppData'
 import { useAppState } from '@/hooks/useAppState'
+import { DragIndicatorRounded } from '@mui/icons-material'
 
 export const NotificationWidget = () => {
   const invoiceCount = useAppData('{{invoice.count}}')
@@ -13,10 +14,18 @@ export const NotificationWidget = () => {
   const contractCount = useAppData('{{contract.count}}')
   const appState = useAppState()
 
+  const [hovered, setHovered] = useState(false)
+
   return (
-    <NodeViewWrapper className='' data-drag-handle contentEditable={false}>
+    <NodeViewWrapper data-drag-handle contentEditable={false}>
       {appState?.appState.displayTasks && (
-        <div draggable='true' datatype='draggable-item'>
+        <div
+          draggable='true'
+          datatype='draggable-item'
+          onMouseOver={() => setHovered(true)}
+          onMouseOut={() => setHovered(false)}
+          style={{ position: 'relative', cursor: hovered ? 'pointer' : 'none' }}
+        >
           <Typography variant='h2' datatype='draggable-item'>
             You have {taskCount} tasks left to complete
           </Typography>
@@ -40,7 +49,7 @@ export const NotificationWidget = () => {
                       <NotificationComponent
                         key={key}
                         name={`Pay ${invoiceCount} invoices`}
-                        buttonName={`Go to ${PortalRoutes.Billing}`}
+                        route={PortalRoutes.Billing}
                       />
                     )
                   }
@@ -49,7 +58,7 @@ export const NotificationWidget = () => {
                       <NotificationComponent
                         key={key}
                         name={`Fill out ${formCount} forms`}
-                        buttonName={`Go to ${PortalRoutes.Forms}`}
+                        route={PortalRoutes.Forms}
                       />
                     )
                   }
@@ -58,14 +67,27 @@ export const NotificationWidget = () => {
                       <NotificationComponent
                         key={key}
                         name={`Sign ${contractCount} contract`}
-                        buttonName={`Go to ${PortalRoutes.Contracts}`}
+                        route={PortalRoutes.Contracts}
                       />
                     )
                   }
                 }
               },
             )}
           </Stack>
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '60%',
+              left: 10,
+              transform: 'translate(-50%, -50%)',
+              display:
+                hovered && !appState?.appState.readOnly ? 'block' : 'none',
+              opacity: 0.6,
+            }}
+          >
+            <DragIndicatorRounded />
+          </Box>
         </div>
       )}
     </NodeViewWrapper>
@@ -74,16 +96,16 @@ export const NotificationWidget = () => {
 
 const NotificationComponent = ({
   name,
-  buttonName,
+  route,
 }: {
   name: string
-  buttonName: string
+  route: PortalRoutes
 }) => {
   return (
     <Stack direction='row' justifyContent='space-between'>
       <Typography variant='body1'>{name}</Typography>
-      <RedirectButton route='contracts'>
-        <Typography variant='body1'>{buttonName}</Typography>
+      <RedirectButton route={route}>
+        <Typography variant='body1'>Go to {route}</Typography>
       </RedirectButton>
     </Stack>
   )

src/hooks/useAppData.tsx

@@ -48,7 +48,6 @@ export const AppDataProvider = ({ children }: PropsWithChildren) => {
         })
       }
     }
-    console.log(appState?.appState.notifications)
 
     const task = {
       count: