Merge pull request #415 from COS301-SE-2024/fix/web/minor-fixes

Refactor PDF download button in OccupancyModal component
COS301-SE-2024 · Oct 1, 2024 · a839016 · a839016
2 parents 93e3d8b + 24f89a0
commit a839016
Show file tree

Hide file tree

Showing 11 changed files with 427 additions and 214 deletions.
diff --git a/frontend/occupi-web/bun.lockb b/frontend/occupi-web/bun.lockb
diff --git a/frontend/occupi-web/package.json b/frontend/occupi-web/package.json
@@ -41,6 +41,7 @@
     "@types/jest": "^29.5.12",
     "@types/prop-types": "^15.7.12",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-datepicker": "^7.0.0",
     "@types/react-grid-layout": "^1.3.5",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.2",
@@ -70,6 +71,7 @@
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-cookies": "^0.1.1",
+    "react-datepicker": "^7.4.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-test-backend": "^16.0.1",

diff --git a/frontend/occupi-web/src/components/ProfileComponent/ProfileComponent.test.tsx b/frontend/occupi-web/src/components/ProfileComponent/ProfileComponent.test.tsx
@@ -27,6 +27,5 @@ describe("ProfileComponent", () => {
       expect(avatarDivs.length).toBeGreaterThan(0);
       const avatarDiv = avatarDivs[0].querySelector(".avatar");
       expect(avatarDiv).toBeDefined();
-      expect(avatarDiv?.classList.contains("online")).toBe(true);
     });
   });
diff --git a/frontend/occupi-web/src/components/ProfileComponent/ProfileComponent.tsx b/frontend/occupi-web/src/components/ProfileComponent/ProfileComponent.tsx
@@ -40,7 +40,7 @@ const ProfileComponent = ({
 
   return (
     <div data-testid="profile" className="flex items-center space-x-4">
-      <div className="avatar online">
+      <div className="avatar ">
         <div className="w-24 rounded-full">
           <img src={profileImage} alt="Profile" />
         </div>

diff --git a/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx b/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx
@@ -24,7 +24,7 @@ const BookingLevelCalendar = () => {
       const daysInMonth = new Date(year, month + 1, 0).getDate();
 
       const fetchPromises = [];
-      for (let day = 0; day <= daysInMonth + 1; day++) {  // Fetch one extra day
+      for (let day = 1; day <= daysInMonth + 1; day++) {  // Fetch one extra day
         const date = new Date(year, month, day);
         const formattedDate = date.toISOString().split('T')[0];
         fetchPromises.push(
@@ -92,7 +92,7 @@ const BookingLevelCalendar = () => {
 
   const renderCalendar = () => {
     const daysInMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0).getDate();
-    const firstDayOfMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1).getDay();
+    const firstDayOfMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 2).getDay();
     const days = [];
 
     for (let i = 1; i < firstDayOfMonth; i++) {

diff --git a/frontend/occupi-web/src/components/modal/Modal.tsx b/frontend/occupi-web/src/components/modal/Modal.tsx
@@ -151,61 +151,103 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
 
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Overview</Text>
-          <Text style={styles.text}>Name: {reportData?.userName}</Text>
-          <Text style={styles.text}>Email: {reportData?.userEmail}</Text>
+          <View style={styles.table}>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableCell}>Name:</Text>
+              <Text style={styles.tableCell}>{reportData?.userName}</Text>
+            </View>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableCell}>Email:</Text>
+              <Text style={styles.tableCell}>{reportData?.userEmail}</Text>
+            </View>
+          </View>
         </View>
 
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Work Ratio</Text>
-          <Text style={styles.text}>
-            Overall Work Ratio: {reportData?.workRatio.ratio.toFixed(2)}
-          </Text>
-          {reportData?.workRatio.days.map((day, index) => (
-            <Text key={index} style={styles.text}>
-              {day.weekday}: {day.ratio.toFixed(2)}
-            </Text>
-          ))}
+          <View style={styles.table}>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableHeader}>Day</Text>
+              <Text style={styles.tableHeader}>Ratio</Text>
+            </View>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableCell}>Overall</Text>
+              <Text style={styles.tableCell}>
+                {reportData?.workRatio.ratio.toFixed(2)}
+              </Text>
+            </View>
+            {reportData?.workRatio.days.map((day, index) => (
+              <View key={index} style={styles.tableRow}>
+                <Text style={styles.tableCell}>{day.weekday}</Text>
+                <Text style={styles.tableCell}>{day.ratio.toFixed(2)}</Text>
+              </View>
+            ))}
+          </View>
         </View>
 
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Arrival & Departure Times</Text>
-          <Text style={styles.text}>
-            Overall Average Arrival:{" "}
-            {reportData?.arrivalDeparture.overallavgArrival}
-          </Text>
-          <Text style={styles.text}>
-            Overall Average Departure:{" "}
-            {reportData?.arrivalDeparture.overallavgDeparture}
-          </Text>
-          {reportData?.arrivalDeparture.days.map((day, index) => (
-            <Text key={index} style={styles.text}>
-              {day.weekday}: Arrival - {day.avgArrival}, Departure -{" "}
-              {day.avgDeparture}
-            </Text>
-          ))}
+          <View style={styles.table}>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableHeader}>Day</Text>
+              <Text style={styles.tableHeader}>Arrival</Text>
+              <Text style={styles.tableHeader}>Departure</Text>
+            </View>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableCell}>Overall</Text>
+              <Text style={styles.tableCell}>
+                {reportData?.arrivalDeparture.overallavgArrival}
+              </Text>
+              <Text style={styles.tableCell}>
+                {reportData?.arrivalDeparture.overallavgDeparture}
+              </Text>
+            </View>
+            {reportData?.arrivalDeparture.days.map((day, index) => (
+              <View key={index} style={styles.tableRow}>
+                <Text style={styles.tableCell}>{day.weekday}</Text>
+                <Text style={styles.tableCell}>{day.avgArrival}</Text>
+                <Text style={styles.tableCell}>{day.avgDeparture}</Text>
+              </View>
+            ))}
+          </View>
         </View>
 
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Daily Hours</Text>
-          {reportData?.dailyHours.map((day, index) => (
-            <Text key={index} style={styles.text}>
-              {day.date}: {day.totalHours.toFixed(2)} hours
-            </Text>
-          ))}
+          <View style={styles.table}>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableHeader}>Date</Text>
+              <Text style={styles.tableHeader}>Total Hours</Text>
+            </View>
+            {reportData?.dailyHours.map((day, index) => (
+              <View key={index} style={styles.tableRow}>
+                <Text style={styles.tableCell}>{day.date}</Text>
+                <Text style={styles.tableCell}>
+                  {day.totalHours.toFixed(2)}
+                </Text>
+              </View>
+            ))}
+          </View>
         </View>
 
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Peak Office Hours</Text>
-          {reportData?.peakHours.days.map((day, index) => (
-            <Text key={index} style={styles.text}>
-              {day.weekday}: {day.hours.join(", ")}
-            </Text>
-          ))}
+          <View style={styles.table}>
+            <View style={styles.tableRow}>
+              <Text style={styles.tableHeader}>Day</Text>
+              <Text style={styles.tableHeader}>Hours</Text>
+            </View>
+            {reportData?.peakHours.days.map((day, index) => (
+              <View key={index} style={styles.tableRow}>
+                <Text style={styles.tableCell}>{day.weekday}</Text>
+                <Text style={styles.tableCell}>{day.hours.join(", ")}</Text>
+              </View>
+            ))}
+          </View>
         </View>
       </Page>
     </Document>
   );
-
   const handleGenerateReport = async () => {
     setIsDownloading(true);
     try {
@@ -338,21 +380,22 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
                   Close
                 </Button>
                 {reportData ? (
-                  <Button className="bg-text_col_secondary_alt  ">
-                    <PDFDownloadLink
-                      className="text-text_col_alt bg-secondary-alt"
-                      document={generateReportPDF()}
-                      fileName={`${user.name}_Stats_Report.pdf`}
-                    >
-                      {/* {({ loading }) => (
-                        <React.Fragment>
-                          {loading
-                            ? "Report is loading..."
-                            : "Report ready to download"}
-                        </React.Fragment>
-                      )} */}
-                    </PDFDownloadLink>
-                  </Button>
+                  <PDFDownloadLink
+                    document={generateReportPDF()}
+                    fileName={`${user.name}_Stats_Report.pdf`}
+                  >
+                    <div className="mt-2 text-text_col">
+                    Download Report
+                    </div>
+                    {/* {({ loading }) => (
+              <Button
+                className="bg-text_col_secondary_alt text-text_col_alt"
+                isLoading={loading}
+              >
+                {loading ? "Preparing Report..." : "Download Report"}
+              </Button>
+            )} */}
+                  </PDFDownloadLink>
                 ) : (
                   <Button
                     className="text-text_col_alt bg-secondary_alt"
@@ -371,7 +414,7 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
   );
 }
 
-// Define PDF styles
+// Updated PDF styles
 const styles = StyleSheet.create({
   page: {
     padding: 30,
@@ -399,9 +442,32 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 18,
     marginBottom: 10,
+    fontWeight: "bold",
+  },
+  table: {
+    display: "flex",
+    width: "100%",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: "#bfbfbf",
+  },
+  tableRow: {
+    flexDirection: "row",
+  },
+  tableHeader: {
+    backgroundColor: "#f0f0f0",
+    fontWeight: "bold",
+    padding: 5,
+    flex: 1,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: "#bfbfbf",
   },
-  text: {
-    fontSize: 12,
-    marginBottom: 5,
+  tableCell: {
+    padding: 5,
+    flex: 1,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: "#bfbfbf",
   },
 });