Merge pull request #83 from upendraTekdi/shiksha-2.0

Issue #PS-326 feat: Extra session card on dashboard, Cohort details card on dashboard and Cohort details card on dashboard (my timetable)
tekdi · May 8, 2024 · 2fb1d85 · 2fb1d85
2 parents 23fd514 + 3bce621
commit 2fb1d85
Show file tree

Hide file tree

Showing 8 changed files with 336 additions and 134 deletions.
diff --git a/src/components/ExtraSessionsCard.tsx b/src/components/ExtraSessionsCard.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Card, CardContent, Typography, Box } from '@mui/material';
+import EditOutlined from '@mui/icons-material/EditOutlined';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import { useTranslation } from 'react-i18next';
+import { truncateURL } from '@/utils/Helper';
+import { ExtraSessionsCardProps } from '@/utils/Interfaces';
+
+const ExtraSessionsCard: React.FC<ExtraSessionsCardProps> = ({
+  subject,
+  instructor,
+  dateAndTime,
+  meetingURL,
+  onEditClick,
+  onCopyClick,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box>
+      <Card
+        sx={{ border: '1px solid #ccc', borderRadius: '8px', margin: '15px' }}
+      >
+        <CardContent sx={{ alignItems: 'center' }}>
+          <Box display={'flex'} justifyContent={'space-between'}>
+            <Typography
+              margin={0}
+              fontSize={'16px'}
+              color={'black'}
+              fontFamily={'Poppins'}
+              fontWeight={'400'}
+            >
+              {subject} - {t('DASHBOARD.EXTRA_CLASS')}
+            </Typography>
+            {onEditClick && (
+              <EditOutlined
+                color="secondary"
+                fontSize="small"
+                onClick={onEditClick}
+              />
+            )}
+          </Box>
+          <Typography
+            color={'#7C766F'}
+            fontSize={'14px'}
+            fontWeight={'400'}
+            margin={0}
+          >
+            {instructor}
+          </Typography>
+          <Typography
+            margin={0}
+            color={'#7C766F'}
+            fontSize={'14px'}
+            fontWeight={'400'}
+          >
+            {dateAndTime}
+          </Typography>
+          <Box
+            margin={0}
+            color={'#0D599E'}
+            display={'flex'}
+            justifyContent={'space-between'}
+          >
+            <Typography>{truncateURL(meetingURL, 30)}</Typography>
+            {onCopyClick && (
+              <ContentCopyRoundedIcon
+                onClick={onCopyClick}
+                color="secondary"
+                fontSize="small"
+              />
+            )}
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default ExtraSessionsCard;
diff --git a/src/components/TimeTableCard.tsx b/src/components/TimeTableCard.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Card, CardContent, Typography, Grid, Box } from '@mui/material';
+import { TimeTableCardProps } from '@/utils/Interfaces';
+import ApartmentIcon from '@mui/icons-material/Apartment';
+
+const TimeTableCard: React.FC<TimeTableCardProps> = ({
+  subject,
+  instructor,
+  time,
+}) => {
+  return (
+    <Box>
+      <Card
+        sx={{ border: '1px solid #ccc', borderRadius: '8px', margin: '15px' }}
+      >
+        <CardContent sx={{ alignItems: 'center' }}>
+          <Grid container spacing={2} sx={{ alignItems: 'center' }}>
+            <Grid item xs={1.5}>
+              <ApartmentIcon />
+            </Grid>
+            <Grid item xs={6}>
+              <Typography
+                variant="h5"
+                sx={{ fontWeight: '400', fontSize: '16px' }}
+                component="div"
+              >
+                {subject}
+              </Typography>
+              <Typography
+                margin={0}
+                color={'#7C766F'}
+                fontSize={'14px'}
+                fontWeight={'400'}
+                variant="body2"
+              >
+                {instructor}
+              </Typography>
+            </Grid>
+            <Grid item xs={4.5}>
+              <Typography
+                margin={0}
+                color={'#7C766F'}
+                fontSize={'14px'}
+                fontWeight={'400'}
+                // variant="h5"
+                component="div"
+              >
+                {time}
+              </Typography>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default TimeTableCard;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -37,6 +37,8 @@ import { ATTENDANCE_ENUM } from '../utils/Helper';
 import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
 import Link from 'next/link';
 import OverviewCard from '@/components/OverviewCard';
+import ExtraSessionsCard from '@/components/ExtraSessionsCard';
+import TimeTableCard from '@/components/TimeTableCard';
 // import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
 interface State extends SnackbarOrigin {
@@ -382,6 +384,14 @@ const Dashboard: React.FC<DashboardProps> = () => {
     setState({ ...state, openModal: false });
   };
 
+  const handleEdit = () => {
+    //function for handle edit
+  };
+
+  const handleCopy = () => {
+    //  function for handle copy
+  };
+
   return (
     <Box minHeight="100vh" textAlign={'center'}>
       <Header />

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -60,7 +60,9 @@
     "PERCENT_ATTENDANCE": "{{percent_students}}% Attendance",
     "PRESENT_STUDENTS": "({{present_students}/{total_students}} present)",
     "OVERVIEW": "Overview",
-    "MORE_DETAILS": "More Details"
+    "MORE_DETAILS": "More Details",
+    "EXTRA_CLASS": "Extra class",
+    "CENTER_ATTENDANCE": "Center Attendance"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "Total No of Students: {{count}}",

diff --git a/src/translations/hi.json b/src/translations/hi.json
@@ -59,7 +59,9 @@
     "PERCENT_ATTENDANCE": "{{percent_students}}% उपस्थिति",
     "PRESENT_STUDENTS": "({{present_students}}/{{total_students}} मौजूद हैं)",
     "OVERVIEW": "अवलोकन",
-    "MORE_DETAILS": "अधिक विवरण"
+    "MORE_DETAILS": "अधिक विवरण",
+    "EXTRA_CLASS": "अतिरिक्त क्लास",
+    "CENTER_ATTENDANCE": "केंद्रीय उपस्थिति"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "कुल छात्रों की संख्या: {{count}}",

diff --git a/src/translations/mr.json b/src/translations/mr.json
@@ -57,7 +57,9 @@
     "PERCENT_ATTENDANCE": "{{percent_students}}% उपस्थिती",
     "PRESENT_STUDENTS": "({{present_students}}/{{total_students}} उपस्थित)",
     "OVERVIEW": "अवलोकन",
-    "MORE_DETAILS": "अधिक माहिती"
+    "MORE_DETAILS": "अधिक माहिती",
+    "EXTRA_CLASS": "अतिरिक्त कक्षा",
+    "CENTER_ATTENDANCE": "केंद्रीय उपस्थिती"
   },
   "ATTENDANCE": {
     "TOTAL_STUDENTS": "एकूण विद्यार्थी: {{count}}",

diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts
@@ -1,12 +1,43 @@
 export const ATTENDANCE_ENUM = {
-    PRESENT: 'present',
-    ABSENT: 'absent',
-    HALF_DAY: 'half-day',
-    NOT_MARKED: 'notmarked',
-    ON_LEAVE: 'on-leave'
-  };
-
-  export const MONTHS = [
+  PRESENT: 'present',
+  ABSENT: 'absent',
+  HALF_DAY: 'half-day',
+  NOT_MARKED: 'notmarked',
+  ON_LEAVE: 'on-leave',
+};
+
+export const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const formatDate = (dateString: string) => {
+  const [year, monthIndex, day] = dateString.split('-');
+  const month = MONTHS[parseInt(monthIndex, 10) - 1];
+  return `${day} ${month}, ${year}`;
+};
+
+export const getTodayDate = () => {
+  const currentDate = new Date();
+  const year = currentDate.getFullYear();
+  const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Adding 1 as month is zero-indexed
+  const day = String(currentDate.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+export const getMonthName = () => {
+  const currentDate = new Date();
+  const monthNames = [
     'January',
     'February',
     'March',
@@ -18,29 +49,13 @@ export const ATTENDANCE_ENUM = {
     'September',
     'October',
     'November',
-    'December'
+    'December',
   ];
-
-  export const formatDate = (dateString: string) => {
-    const [year, monthIndex, day] = dateString.split('-');
-    const month = MONTHS[parseInt(monthIndex, 10) - 1];
-    return `${day} ${month}, ${year}`;
-  };
-
-  export const getTodayDate = () => {
-    const currentDate = new Date();
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Adding 1 as month is zero-indexed
-    const day = String(currentDate.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  };
+  const monthIndex = currentDate.getMonth();
+  return monthNames[monthIndex];
+};
 
-  export const getMonthName = () => {
-    const currentDate = new Date();
-    const monthNames = [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
-    const monthIndex = currentDate.getMonth();
-    return monthNames[monthIndex];
-};
+// Function to truncate URL if it's too long
+export const truncateURL = (url: string, maxLength: number) => {
+  return url.length > maxLength ? url.substr(0, maxLength - 3) + '...' : url;
+};