fix(ui): Increase bar chart height according to the number of students

package.json

@@ -37,6 +37,7 @@
     "clsx": "2.1.0",
     "dayjs": "1.11.10",
     "lucide-react": "0.312.0",
+    "luxon": "3.4.4",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",
     "react-dom": "18.2.0",
@@ -55,6 +56,7 @@
     "@faker-js/faker": "8.3.1",
     "@playwright/test": "1.41.1",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/luxon": "3.4.2",
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",

src/screens/course-page/laboratories/dialogs/create-laboratory/CreateLaboratoryForm.tsx

@@ -13,6 +13,7 @@ import { createLaboratoryService } from "@/services/laboratories/create-laborato
 import { LaboratoryBaseInfo } from "@/types/entities/laboratory-entities";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { DateTime } from "luxon";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useParams } from "react-router-dom";
@@ -114,6 +115,21 @@ export const CreateLaboratoryForm = ({
   });
 
   const onSubmit = async (values: z.infer<typeof createLaboratorySchema>) => {
+    // Add the timezone of Colombia to the dates. This is done because
+    // the database expects the dates to have a timezone, otherwise it
+    // will default to UTC 0 making the times different form the ones
+    // selected by the teacher
+    const formattedOpeningDate = DateTime.fromISO(values.openingDate)
+      .setZone("America/Bogota")
+      .toFormat("yyyy-MM-dd'T'HH:mm:ssZZ");
+
+    const formattedDueDate = DateTime.fromISO(values.dueDate)
+      .setZone("America/Bogota")
+      .toFormat("yyyy-MM-dd'T'HH:mm:ssZZ");
+
+    values.openingDate = formattedOpeningDate;
+    values.dueDate = formattedDueDate;
+
     createLaboratoryMutation({
       courseUUID,
       ...values

src/screens/edit-laboratory/components/LaboratoryDetails.tsx

@@ -6,9 +6,11 @@ import {
   Laboratory,
   LaboratoryBaseInfo
 } from "@/types/entities/laboratory-entities";
+import { removeTimeZoneFromIsoDate } from "@/utils/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Save } from "lucide-react";
+import { DateTime } from "luxon";
 import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -75,9 +77,17 @@ interface CreateLaboratoryFormProps {
 export const LaboratoryDetails = ({
   laboratoryDetails
 }: CreateLaboratoryFormProps) => {
-  // Remove empty timezone from dates
-  const openingDate = laboratoryDetails.opening_date.slice(0, -4);
-  const dueDate = laboratoryDetails.due_date.slice(0, -4);
+  // Parse the dates to the timezone of Colombia
+  const openingDate = DateTime.fromISO(laboratoryDetails.opening_date)
+    .setZone("America/Bogota")
+    .toISO();
+
+  const dueDate = DateTime.fromISO(laboratoryDetails.due_date)
+    .setZone("America/Bogota")
+    .toISO();
+
+  const openingDateWithNoTimeZone = removeTimeZoneFromIsoDate(openingDate!);
+  const dueDateWithNoTimeZone = removeTimeZoneFromIsoDate(dueDate!);
 
   // Global laboratory state
   const { laboratoryStateDispatcher } = useContext(EditLaboratoryContext);
@@ -89,8 +99,8 @@ export const LaboratoryDetails = ({
     defaultValues: {
       ...laboratoryDetails,
       rubricUUID: laboratoryDetails.rubricUUID,
-      openingDate,
-      dueDate
+      openingDate: openingDateWithNoTimeZone,
+      dueDate: dueDateWithNoTimeZone
     }
   });
 
@@ -105,16 +115,24 @@ export const LaboratoryDetails = ({
       toast.error(error.message);
     },
     onSuccess: (_, { name, opening_date, due_date, rubric_uuid }) => {
-      const openingDateWithDefaultTimeZone = `${opening_date}:00Z`;
-      const dueDateWithDefaultTimeZone = `${due_date}:00Z`;
+      // Set the dates to the default timezone (UTC 0). This is done because
+      // the dates are stored in the database as UTC 0, so we need to convert
+      // them to the default timezone to sync the cache with the database
+      const openingDateWithDefaultTZ = DateTime.fromISO(opening_date)
+        .setZone("UTC")
+        .toISO();
+
+      const dueDateWithDefaultTZ = DateTime.fromISO(due_date)
+        .setZone("UTC")
+        .toISO();
 
       // Update laboratory state
       laboratoryStateDispatcher({
         type: EditLaboratoryActionType.UPDATE_LABORATORY_DATA,
         payload: {
           name,
-          opening_date: openingDateWithDefaultTimeZone,
-          due_date: dueDateWithDefaultTimeZone,
+          opening_date: openingDateWithDefaultTZ!,
+          due_date: dueDateWithDefaultTZ!,
           rubricUUID: rubric_uuid
         }
       });
@@ -130,8 +148,8 @@ export const LaboratoryDetails = ({
             // Keep the UUID and blocks
             ...oldData,
             name,
-            opening_date: openingDateWithDefaultTimeZone,
-            due_date: dueDateWithDefaultTimeZone,
+            opening_date: openingDateWithDefaultTZ,
+            due_date: dueDateWithDefaultTZ,
             rubric_uuid
           };
         }
@@ -145,11 +163,23 @@ export const LaboratoryDetails = ({
   const handleSubmit = async (data: z.infer<typeof editLaboratoryScheme>) => {
     const { name, rubricUUID, openingDate, dueDate } = data;
 
+    // Add the timezone of Colombia to the dates. This is done because
+    // the database expects the dates to have a timezone, otherwise it
+    // will default to UTC 0 making the times different form the ones
+    // selected by the teacher
+    const formattedOpeningDate = DateTime.fromISO(openingDate)
+      .setZone("America/Bogota")
+      .toFormat("yyyy-MM-dd'T'HH:mm:ssZZ");
+
+    const formattedDueDate = DateTime.fromISO(dueDate)
+      .setZone("America/Bogota")
+      .toFormat("yyyy-MM-dd'T'HH:mm:ssZZ");
+
     updateLaboratoryMutation({
       laboratoryUUID: laboratoryDetails.uuid,
       name,
-      due_date: dueDate,
-      opening_date: openingDate,
+      due_date: formattedDueDate,
+      opening_date: formattedOpeningDate,
       rubric_uuid: rubricUUID
     });
   };
@@ -242,7 +272,7 @@ export const LaboratoryDetails = ({
                 <FormLabel>Rubric</FormLabel>
                 <Select
                   onValueChange={field.onChange}
-                  defaultValue={field.value || undefined}
+                  defaultValue={field.value ?? undefined}
                 >
                   <FormControl>
                     <SelectTrigger>

src/utils/utils.ts

@@ -1,6 +1,7 @@
 import { downloadLanguageTemplateService } from "@/services/languages/download-language-template.service";
 import { getSubmissionArchiveService } from "@/services/submissions/get-submission-archive.service";
 import { submissionUpdate } from "@/types/entities/submission-entities";
+import { DateTime } from "luxon";
 import { toast } from "sonner";
 
 export const copyToClipboard = async (text: string): Promise<boolean> => {
@@ -93,3 +94,8 @@ export function parseSubmissionSSEUpdate(data: string): submissionUpdate {
     testsOutput: parsedData.tests_output
   };
 }
+
+// This function removes the timezone and seconds from an ISO date
+export function removeTimeZoneFromIsoDate(date: string) {
+  return DateTime.fromISO(date).toFormat("yyyy-MM-dd'T'HH:mm");
+}