screen width height and overflow parameters correctly adjusted for al…

…l devices

apps/dashboard-app/actions/workflows/workflow.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import {createWorkflow, editWorkflow, getNodesByWorkflowId, getWorkflowsByUserId, publishWorkflow, createNode, editNode, deleteNode} from '@repo/prisma-db/repo/workflow';
+import {createWorkflow, editWorkflow, getNodesByWorkflowId, getWorkflowsByUserId, publishWorkflow, createNode, editNode, deleteNode, deleteWorkflow} from '@repo/prisma-db/repo/workflow';
 import {logger} from '@repo/winston-logger/index';
 
 export const createWorkflowAction = async ({name,description,userId}:any) => {
@@ -25,6 +25,11 @@ export const publishFlow = async (workflowId:string, state:boolean) => {
     await publishWorkflow(workflowId,state);  
 }
 
+export const deleteFlow= async (workflowId:string) => {
+    logger.info('Deleting workflow',workflowId);
+    await deleteWorkflow(workflowId);  
+}
+
 export const getNodes = async (workflowId:string) => {
     const workflow = await getNodesByWorkflowId(workflowId);
     const name = workflow?.name || 'Untitled';

apps/dashboard-app/app/(dashboard)/financial/_components/FinancialPage.tsx

@@ -1,22 +1,61 @@
 'use client'
-import React, { useState }  from 'react'
+import React, { useEffect, useState }  from 'react'
 import { financeItems } from '../../../../lib/constant'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@repo/ui/molecules/shadcn/Tabs'
 import Overview from './Overview'
 import Account from './Account'
 import Transactions from './Transactions'
 import Settings from './Settings'
-import { FilterIcon } from 'lucide-react'
 import MonthlyBudget from './MonthlyBudget'
 import BudgetPlan from './BudgetPlan'
 import FinancialGoals from './FinancialGoals'
+import { useMedia } from "react-use";
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@repo/ui/molecules/shadcn/Select'
+import { useRouter } from 'next/navigation'
 
 const FinancialPage = () => {
+  const isMobile = useMedia("(max-width: 1324px)", false);
+  const [selectedValue, setSelectedValue] = useState('Overview')
+  const router = useRouter()
+
+  const handleSelect = (value:any) => {
+    setSelectedValue(value)
+  }
+
+
+  if (isMobile){
+    return (
+      <div className='flex flex-col'>
+        <Select onValueChange={handleSelect}>
+          <SelectTrigger className='my-4 mx-8 w-[200px]'>
+            <div>{selectedValue}</div>
+          </SelectTrigger>
+          <SelectContent className='w-[200px]'>
+            {financeItems.map((item:any) =>(
+              <SelectItem key={item.title} value={item.title}>
+                <div className='flex items-center justify-start gap-4 w-[200px]'>
+                  <item.icon/>
+                  <div>{item.title}</div>
+                </div>
+              </SelectItem>
+            ))}
+
+          </SelectContent>
+        </Select>
+        {selectedValue === 'Overview' && <Overview/>}
+        {selectedValue === 'Account' && <Account/>} 
+        {selectedValue === 'Transactions' && <Transactions/>}
+        {selectedValue === 'Monthly Budget' && <MonthlyBudget/>}
+        {selectedValue === 'Budget Plan' && <BudgetPlan/>}
+        {selectedValue === 'Financial Goals' && <FinancialGoals/>}
+        {selectedValue === 'settings' && <Settings/>}
+      </div>
+    )
+  }
 
-  const [showFilters , setShowFilters] = useState(false)
   return (
-    <Tabs className='w-full mx-4   ' defaultValue='overview'>
-      <TabsList className='w-full flex items-center justify-start flex-wrap rounded-none my-4 gap-4 bg-inherit'>
+    <Tabs className='mx-4 ' defaultValue='overview'>
+      <TabsList className='flex items-center justify-start flex-wrap rounded-none my-4 gap-4 bg-inherit'>
         {financeItems.map((item:any) =>(
             <TabsTrigger key={item.title} value={item.title} className='flex gap-1 border-b-2 shadow-md shadow-white/10 ' >
               <item.icon/>

apps/dashboard-app/app/(dashboard)/financial/_components/NotionTable.tsx

@@ -55,7 +55,7 @@ const NotionTable = ({dbId}:any) => {
 
   return (
     <>
-        <div className="overflow-x-auto flex items-center justify-center ">
+        <div className="overflow-x-auto  ">
             <DataTable columns={databaseKeys} data={database} />
         </div>
     </>

apps/dashboard-app/app/(dashboard)/layout.tsx

@@ -5,11 +5,11 @@ import NavbarClient  from "../../components/NavbarClient";
 export default async function Layout({children}:{children: React.ReactNode}){
 
     return (
-        <div className="flex min-h-screen">
+        <div className="flex min-h-screen max-h-screen overflow-y-hidden">
             <LeftSidebarClient/>
-            <div className="flex flex-col w-full ">
+            <div className="flex flex-col w-full max-w-full overflow-x-hidden">
                 <NavbarClient />
-                <div className="flex ">
+                <div className="flex max-w-full overflow-auto ">
                     {children}
                 </div>
             </div>

apps/dashboard-app/app/(dashboard)/workflows/_components/Workflow.tsx

@@ -3,34 +3,57 @@
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@repo/ui/molecules/shadcn/Card'
 import { Label } from '@repo/ui/molecules/shadcn/Label'
 import { Switch } from '@repo/ui/molecules/shadcn/Switch'
-import Link from 'next/link'
 import React, { useState } from 'react'
-import { publishFlow } from '../../../../actions/workflows/workflow'
+import { deleteFlow, publishFlow } from '../../../../actions/workflows/workflow'
+import ConfirmDialog from '@repo/ui/molecules/common/ConfirmDialog'
+import { TrashIcon } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@repo/ui/molecules/shadcn/Button'
 
 const Workflow = ({workflow}:any) => {
 
     const [toggle,setToggle] = useState(workflow.publish)
+    const router = useRouter();
 
     const onToggle = async () =>{
         setToggle(!toggle)
         await publishFlow(workflow.id,!toggle)
     }
+
+    const handleDelete = async (id:string) => {
+        await deleteFlow(id);
+        router.refresh();
+    }
+
   return (
     <Card className=''>
-        <Link href={`/dashboard/workflows/editor/${workflow.id}`}>
-            <CardHeader className='  '>
-                <CardTitle>{workflow.name}</CardTitle>
+            <CardHeader className=''>
+                <CardTitle className='flex items-center justify-between'>
+                    <div>{workflow.name}</div>
+                    <ConfirmDialog 
+                        alertActionFunction={()=>handleDelete(workflow.id)} 
+                        alertTitle='Delete Workflow' 
+                        alertDescription='Are you sure you want to delete this workflow?'
+                        buttonDiv={<TrashIcon className='cursor-pointer'/>}
+                        alertActionText='Delete'
+                        /> 
+                </CardTitle>
                 <CardDescription>{workflow.description}</CardDescription>
             </CardHeader>
             <CardContent className=''>
 
             </CardContent>
-        </Link>
         <CardFooter>
-            <Label htmlFor='airplane-mode'>
-                {toggle? 'On': 'Off'}
-            </Label>
-            <Switch id='airplane-mode' onClick={onToggle} defaultChecked={workflow.publish!} />
+            <div className='w-full flex items-center justify-between'>
+                <div className='flex items-center'>
+                    <Label htmlFor='airplane-mode'>
+                        {toggle? 'On': 'Off'}
+                    </Label>
+                    <Switch id='airplane-mode' onClick={onToggle} defaultChecked={workflow.publish!} />
+                </div>
+                <Button className='text-xl px-10 ' onClick={()=>router.push(`/workflows/editor/${workflow.id}`)}>Edit</Button>
+                <div></div>
+            </div>
         </CardFooter>
     </Card>
   )

apps/dashboard-app/app/(dashboard)/workflows/_components/Workflows.tsx

@@ -17,7 +17,7 @@ const Workflows = () => {
             setWorkflows(flows);
         }
         fetchWorkflows()
-    },[])
+    },[userId])
   return (
     <div className='grid grid-cols-1 sm:grid-cols2 md:grid-cols-3 w-full p-10 overflow-y-auto gap-4'>
         {workflows?.map((workflow:any) => (

apps/dashboard-app/app/(dashboard)/workflows/editor/[editorId]/_components/Nodes.tsx

@@ -8,11 +8,12 @@ import { Card,CardHeader,CardTitle,CardFooter,CardDescription,CardContent } from
 import { useParams, useRouter } from 'next/navigation';
 import { deleteNodeInWorkflow, editFlow, getNodes, publishFlow } from '../../../../../../actions/workflows/workflow';
 import { EditorContext } from '../../../../../../providers/editor-provider';
-import { ArrowBigDownDash, Edit2Icon, RecycleIcon, TrashIcon } from 'lucide-react';
+import { ArrowBigDownDash, Edit2Icon, TrashIcon } from 'lucide-react';
 import NodeSheet from './NodeSheet';
 import { Input } from '@repo/ui/molecules/shadcn/Input';
 import { Switch } from '@repo/ui/molecules/shadcn/Switch';
 import { Label } from '@repo/ui/molecules/shadcn/Label';
+import ConfirmDialog from '@repo/ui/molecules/common/ConfirmDialog';
 
 const Nodes = () => {
   const { editorId } = useParams()
@@ -54,6 +55,11 @@ const Nodes = () => {
     router.refresh();
   }
 
+  const handleDelete = async (id:string) => {
+    await deleteNodeInWorkflow(id);
+    router.refresh();
+  }
+
   if (loading) return (<div>Loading...</div>)
 
   return (
@@ -76,8 +82,14 @@ const Nodes = () => {
                 <Card className='min-w-[40%] flex flex-col items-start justify-center'>
                     <CardHeader className='w-full'>
                         <CardTitle className='flex items-center justify-between'>
-                            {editor.trigger.name} 
-                            <TrashIcon onClick={()=> {deleteNodeInWorkflow(editor.trigger.id);router.refresh()}}/> 
+                            {editor.trigger.name}
+                            <ConfirmDialog 
+                                alertActionFunction={()=>handleDelete(editor.trigger.id)} 
+                                alertTitle='Delete Node' 
+                                alertDescription='Are you sure you want to delete this node?'
+                                buttonDiv={<TrashIcon/>}
+                                alertActionText='Delete'
+                                />    
                         </CardTitle>
                         <CardDescription>{editor.trigger.description}</CardDescription>
                     </CardHeader>
@@ -103,7 +115,13 @@ const Nodes = () => {
                 <CardHeader className='w-full'>
                         <CardTitle className='flex items-center justify-between'>
                             {action.name} 
-                            <TrashIcon onClick={()=> {deleteNodeInWorkflow(action.id);router.refresh()}}/> 
+                            <ConfirmDialog 
+                                alertActionFunction={()=>handleDelete(action.id)} 
+                                alertTitle='Delete Node' 
+                                alertDescription='Are you sure you want to delete this node?'
+                                buttonDiv={<TrashIcon/>}
+                                alertActionText='Delete'
+                                /> 
                         </CardTitle>
                         <CardDescription>{action.description}</CardDescription>
                     </CardHeader>

apps/dashboard-app/package.json

@@ -25,6 +25,7 @@
     "react": "^18",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
+    "react-use": "^17.5.0",
     "reactflow": "^11.11.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",