From c7a261f76dd4c712d3b4b080da8a617c9bc858a3 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Fri, 19 Jan 2024 16:28:14 -0300
Subject: [PATCH] Add mobile support for week view

---
 frontend/src/app/tasks/components/TaskBox.tsx | 16 +++++--
 frontend/src/app/tasks/week/page.tsx          | 42 ++++++++++++++-----
 frontend/src/ui/Sidebar/Sidebar.tsx           |  2 +-
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/tasks/components/TaskBox.tsx b/frontend/src/app/tasks/components/TaskBox.tsx
index 8ff9fb2ef..def03675e 100644
--- a/frontend/src/app/tasks/components/TaskBox.tsx
+++ b/frontend/src/app/tasks/components/TaskBox.tsx
@@ -42,11 +42,21 @@ const timeDifference = ({ startTime, endTime }: { startTime: string; endTime: st
 
 export const SimpleTaskBox = ({ task }: SimpleTaskBoxProps) => {
   return (
-    <TaskWrapper component="li" display="flex" flexDirection="column">
-      <Typography textColor="#1E2AA5">
+    <TaskWrapper
+      sx={{ maxWidth: { xs: '250px', sm: 'auto' } }}
+      width="100%"
+      display="flex"
+      flexDirection="column"
+    >
+      <Typography
+        sx={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}
+        textColor="#1E2AA5"
+      >
         {task.projectName} - {task.customerName}
       </Typography>
-      <Typography textColor="#1E2AA5">{task.taskType}</Typography>
+      <Typography textColor="#1E2AA5" sx={{ display: { xs: 'none', sm: 'block' } }}>
+        {task.taskType}
+      </Typography>
       <Typography textColor="#1E2AA5" fontWeight="bold">
         {task.startTime}-{task.endTime} ({timeDifference(task)})
       </Typography>
diff --git a/frontend/src/app/tasks/week/page.tsx b/frontend/src/app/tasks/week/page.tsx
index 46fc81198..cb1615d9c 100644
--- a/frontend/src/app/tasks/week/page.tsx
+++ b/frontend/src/app/tasks/week/page.tsx
@@ -43,7 +43,7 @@ export default async function WeekView() {
   )
 
   return (
-    <Stack direction="row" alignItems="stretch" height="100%">
+    <Stack sx={{ flexDirection: { xs: 'column', sm: 'row' } }} alignItems="stretch" height="100%">
       {dateRange.map((date) => {
         const formattedDate = format(date, 'eeee, do')
         const dateTasks = groupedTasks[format(date, 'yyyy-MM-dd')]
@@ -53,21 +53,34 @@ export default async function WeekView() {
             sx={{
               backgroundColor: isSameDay(date, today) ? ' #E6EFF8' : '#fff',
               flex: '1',
-              ':first-of-type': {
-                borderLeft: '1px solid #C4C6D0'
-              },
               borderTop: '1px solid #C4C6D0',
-              borderBottom: '1px solid #C4C6D0',
+              borderBottom: { xs: 'none', sm: '1px solid #C4C6D0' },
               borderRight: '1px solid #C4C6D0',
+              borderLeft: { xs: '1px solid #C4C6D0', sm: 'none' },
               display: 'flex',
-              flexDirection: 'column',
-              minHeight: 'calc(100vh - 79px)',
-              gap: '8px'
+              flexDirection: { xs: 'row', sm: 'column' },
+              minHeight: { xs: 'auto', sm: 'calc(100vh - 79px)' },
+              minWidth: { xs: 'calc(100vw - 16px)', sm: 'auto' },
+              alignItems: { xs: 'stretch', sm: 'initial' },
+              overflow: 'auto',
+              gap: '8px',
+              ':last-of-type': {
+                borderBottom: '1px solid #C4C6D0',
+                borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
+              }
             }}
             component="ul"
             key={formattedDate}
           >
-            <Box padding="22px 16px" borderBottom="1px solid #C4C6D0">
+            <Box
+              sx={{
+                padding: '22px 16px',
+                width: { xs: '160px', sm: 'auto' },
+                minWidth: { xs: '160px', sm: 'auto' },
+                borderBottom: { xs: 'none', sm: '1px solid #C4C6D0' },
+                borderRight: { xs: '1px solid #C4C6D0', sm: 'none' }
+              }}
+            >
               <Typography fontWeight="600">{formattedDate}</Typography>
               <Typography fontWeight="600" textColor="#004c92">
                 {dateTasks?.time ? convertMinutesToTime(dateTasks.time) : '0h 0m'}
@@ -76,7 +89,16 @@ export default async function WeekView() {
 
             {dateTasks?.tasks.map((task) => {
               return (
-                <Box sx={{ padding: '0px 8px' }} key={task.id}>
+                <Box
+                  sx={{
+                    padding: { xs: '8px 0', sm: '0px 8px' },
+                    display: 'flex',
+                    minWidth: { xs: 'fit-content', sm: 'auto' },
+                    alignItems: 'center'
+                  }}
+                  component="li"
+                  key={task.id}
+                >
                   <SimpleTaskBox task={task} />
                 </Box>
               )
diff --git a/frontend/src/ui/Sidebar/Sidebar.tsx b/frontend/src/ui/Sidebar/Sidebar.tsx
index 8e3f2337d..8c310d978 100644
--- a/frontend/src/ui/Sidebar/Sidebar.tsx
+++ b/frontend/src/ui/Sidebar/Sidebar.tsx
@@ -25,7 +25,7 @@ export const Sidebar = ({ expanded, toggleSidebar }: SidebarProps) => {
         width: { xs: '100vw', sm: expanded ? 336 : 73 },
         transition: { xs: 'height 0.6s', sm: 'width 0.6s' },
         position: 'fixed',
-        zIndex: 1,
+        zIndex: 999,
         top: 0,
         left: 0,
         bgcolor: '#001C37',