feat(schedule): update schedule mobile view with user timezone offset (…

…#2313)

* feat(schedule): update schedule mobile view with user timezone offset

* fix: formatting

client/src/modules/Schedule/components/MobileItemCard/MobileItemCard.tsx

@@ -4,10 +4,19 @@ import { SwapRightOutlined } from '@ant-design/icons';
 import { coloredDateRenderer } from 'components/Table';
 import { renderTagWithStyle, statusRenderer } from '../TableView/renderers';
 import Link from 'next/link';
+import { ScheduleSettings } from 'modules/Schedule/hooks/useScheduleSettings';
+import dayjs from 'dayjs';
 
 const { Title } = Typography;
 
-export const MobileItemCard = ({ item }: { item: CourseScheduleItemDto }) => {
+export const MobileItemCard = ({
+  item,
+  timezone,
+}: {
+  item: CourseScheduleItemDto;
+  timezone: ScheduleSettings['timezone'];
+}) => {
+  const timezoneOffset = `(UTC ${dayjs().tz(timezone).format('Z')})`;
   return (
     <div style={{ padding: '12px 0px', backgroundColor: 'white', borderBottom: '1px groove' }}>
       <Row gutter={12} wrap={false}>
@@ -21,17 +30,20 @@ export const MobileItemCard = ({ item }: { item: CourseScheduleItemDto }) => {
       <Row gutter={12} wrap={false}>
         <Col flex="1">{statusRenderer(item.status)}</Col>
         <Col flex="0 0 auto">
-          {coloredDateRenderer('UTC', 'MMM D HH:mm', 'start', 'Recommended date for studying')(item.startDate, item)}
+          {coloredDateRenderer(timezone, 'MMM D HH:mm', 'start', 'Recommended date for studying')(item.startDate, item)}
           {item.endDate && (
             <>
               {' '}
               <SwapRightOutlined />{' '}
             </>
           )}
           {item.endDate &&
-            coloredDateRenderer('UTC', 'MMM D HH:mm', 'end', 'Recommended date for studying')(item.endDate, item)}
+            coloredDateRenderer(timezone, 'MMM D HH:mm', 'end', 'Recommended date for studying')(item.endDate, item)}
         </Col>
       </Row>
+      <Row justify={'end'} color="secondary">
+        {timezoneOffset}
+      </Row>
     </div>
   );
 };

client/src/modules/Schedule/components/TableView/TableView.tsx

@@ -279,7 +279,7 @@ export function TableView({ data, settings, statusFilter = ALL_TAB_KEY, mobileVi
   ) : (
     <>
       {filteredData.map(item => (
-        <MobileItemCard item={item} key={generateUniqueRowKey(item)} />
+        <MobileItemCard item={item} key={generateUniqueRowKey(item)} timezone={settings.timezone} />
       ))}
     </>
   );