Roshan Task Page Improvement

amplify.yml

@@ -0,0 +1,22 @@
+version: 1
+backend:
+  phases:
+    build:
+      commands:
+        - nvm install 20
+        - nvm use 20
+        - npm ci --cache .npm --prefer-offline
+        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
+frontend:
+  phases:
+    build:
+      commands:
+        - npm run build
+  artifacts:
+    baseDirectory: .next
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - .next/cache/**/*
+      - .npm/**/*

amplify/data/resource.ts

@@ -15,6 +15,7 @@ const schema = a.schema({
       courses: a.hasMany("Course", "organizationId"),
       pathways: a.hasMany("Pathway", "organizationId"),
       admins: a.hasMany("User", "organizationId"),
+      tasks: a.hasMany("Tasks", "organizationId"),
     })
     .authorization((allow) => [allow.guest()]),
   User: a
@@ -66,13 +67,16 @@ const schema = a.schema({
       courses: a.hasMany("Course", "semesterId"),
     })
     .authorization((allow) => [allow.guest()]),
-
-  // Orginal Example
-  // Todo: a
-  //   .model({
-  //     content: a.string(),
-  //   })
-  //   .authorization((allow) => [allow.guest()]),
+  Tasks: a
+    .model({
+      TaskId: a.id(),
+      title: a.string(),
+      details: a.string(),
+      date: a.date(),
+      important: a.boolean(),
+      done: a.boolean(),
+    })
+    .authorization((allow) => [allow.guest()]),
 });
 
 export type Schema = ClientSchema<typeof schema>;
@@ -89,7 +93,7 @@ Go to your frontend source code. From your client-side code, generate a
 Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY
 WORK IN THE FRONTEND CODE FILE.)
 
-Using JavaScript or Next.js React Server Components, Middleware, Server 
+Using JavaScript or Next.js React Server Components, Middleware, Server
 Actions or Pages Router? Review how to generate Data clients for those use
 cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/
 =========================================================================*/

package.json

@@ -19,13 +19,15 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@hello-pangea/dnd": "^16.6.0",
     "@mui/icons-material": "^5.14.18",
-    "@mui/material": "^5.14.18",
+    "@mui/material": "^5.15.21",
     "@mui/material-nextjs": "^5.15.7",
+    "@mui/x-date-pickers": "^7.7.1",
     "aws-amplify": "^6.3.7",
+    "dayjs": "^1.11.11",
     "mui-nested-menu": "^3.3.0",
     "next": "latest",
     "react": "latest",

src/app/(home)/tasks/page.js

@@ -4,61 +4,65 @@
 import React, { useState, useMemo } from 'react';
 
 // Material UI imports
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 
 // Component Imports
 import Column from '../../../components/Layouts/TasksColumn';
-import TaskDialog from '@/components/Dialogs/TaskDialog';
 
 // Data Imports
-import { initialData } from '@/components/Data/initialData';
+import { initialTasks } from '@/components/Data/initialData';
 
 // Assuming DragDropContext will be used later
 import { DragDropContext } from '@hello-pangea/dnd';
+import TaskHeaderCard from "../../../components/Cards/TaskHeaderCard";
+import TaskCard from "../../../components/Cards/TaskCard";
 
-export default function Lists() {
-    // State management
-    const [open, setOpen] = useState(false);
-    const handlePlusClick = () => setOpen(true);
-    const handleTaskDialogClose = () => setOpen(false);
+import { Box } from "@mui/material";
+import DatePickerDialog from "@/components/Dialogs/DatePickerDialog";
+
+export default function Lists ()
+{
+    // State management    
+    const [tasks, setTasks] = useState(initialTasks);
 
     // Use theme from Material UI
     const theme = useTheme();
 
-    // Memoize data to avoid recomputation on every render
-    const data = useMemo(() => initialData, []);
+    const handleTaskDelete = (id) =>
+    {
+        setTasks(tasks.filter((t) => t.id !== id));
+        console.log('deleted');
+    }
+
+    const handleTaskAddClick = () =>
+    {
+        const newTask = {
+            id: tasks.length,
+            title: "",
+            details: "",
+            date: "",
+            important: false,
+            done: false
+        };
+        setTasks([...tasks, newTask]);
+        console.log('added a task');
+    }
 
     return (
         <>
-            {data.columnOrder.map((columnId) => {
-                const column = data.columns[columnId];
-                const tasks = column.tasksIds.map((taskId) => data.tasks[taskId]);
-                const title = column.title;
-
-                return (
-                    <Box key={columnId} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                        <TaskDialog open={open} handleClose={handleTaskDialogClose} />
-                        <Typography variant="h4">{title}</Typography>
-                        <Column tasks={tasks} title={title} />
-                        <IconButton
-                            onClick={handlePlusClick}
-                            sx={{
-                                position: 'fixed',
-                                bottom: '4%',
-                                right: '4%',
-                                fontSize: '40px',
-                                color: theme.palette.primary.main,
-                            }}
-                        >
-                            <AddCircleOutlineIcon />
-                        </IconButton>
-                    </Box>
-                );
-            })}
+            <TaskHeaderCard handleAddTask={handleTaskAddClick} />
+            <Box>
+                {
+                    tasks.map((t, index) =>
+                    {
+                        return (
+                            (index === tasks.length - 1) ?
+                                <TaskCard key={t.id} task={t} borderBottomRadius={'20px'} onDeleteClick={() => handleTaskDelete(t.id)} />
+                                : <TaskCard key={t.id} task={t} onDeleteClick={() => handleTaskDelete(t.id)} />
+                        )
+                    })
+                }
+            </Box>
         </>
     );
-}
+}