feat: improve exchange card info

.env.sample

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_API_URL=http://localhost:4000/v1
 UMAMI_URL=<your-umami-url>
 UMAMI_WEBSITE_ID=<your-umami-website-id>
-PROD_DOMAIN=<your-production-domain>
+PROD_DOMAIN=<your-production-domain>

.gitignore

@@ -44,4 +44,4 @@ next-env.d.ts
 *storybook.log
 storybook-static
 
-certificates
+certificates

src/components/exchange/cards-section.tsx

@@ -8,15 +8,27 @@ import { useGetExchangeDate } from "@/lib/queries/exchange";
 import { twMerge } from "tailwind-merge";
 import { clsx } from "clsx";
 
+interface ShiftProps {
+  shift: string;
+  professor?: string;
+  timeslots: {
+    weekday: string;
+    start_hour: string;
+    end_hour: string;
+    room: string;
+    building: string;
+  }[];
+}
+
 interface ICardSectionProps {
   title?: string;
   drafts?: boolean;
   pending?: boolean;
   completed?: boolean;
   data?: {
     uc: string;
-    from: string;
-    to: string;
+    from: ShiftProps;
+    to: ShiftProps;
     state: string;
     exchange_id: string;
   }[];

src/components/exchange/exchange-state-content.tsx

@@ -1,7 +1,36 @@
+import { DateLocalizer, momentLocalizer } from "react-big-calendar";
+import moment from "moment";
+
 function isEqual({ n, x }: { n: number; x: number }) {
   return n === x;
 }
 
+const localizer = momentLocalizer(moment);
+
+export function formatWeekday(weekdayString: string): string {
+  const date = moment(weekdayString, "dddd").toDate();
+  return localizer.format(date, "ddd");
+}
+
+function firstAndLastName(fullName: string) {
+  const words = fullName.trim().split(/\s+/);
+  if (words.length === 1) return words[0];
+
+  return `${words[0]} ${words[words.length - 1]}`;
+}
+
+interface ShiftProps {
+  shift: string;
+  professor?: string;
+  timeslots: {
+    weekday: string;
+    start: string;
+    end: string;
+    room: string;
+    building: string;
+  }[];
+}
+
 export default function ExchangeStateContent({
   uc,
   from,
@@ -10,8 +39,8 @@ export default function ExchangeStateContent({
   status,
 }: {
   uc: string;
-  from: string;
-  to: string;
+  from: ShiftProps;
+  to: ShiftProps;
   shift: string;
   status: "pending" | "completed";
 }) {
@@ -34,19 +63,77 @@ export default function ExchangeStateContent({
     <div className="flex flex-col gap-4">
       <div className="flex w-full flex-col gap-2">
         <h2 className="font-semibold">Exchange request information</h2>
-        <div className="flex w-full gap-20">
-          <div className="flex flex-col justify-between gap-1">
-            <span className="text-gray-500">Curricular Unit</span>
-            <span className="text-gray-500">Shift type</span>
-            <span className="text-gray-500">Exchange</span>
+        <div className="grid w-fit grid-cols-[120px_1fr] gap-x-4 gap-y-3 text-sm">
+          <span className="text-gray-500">Curricular Unit</span>
+          <span className="font-medium text-black">{uc}</span>
+
+          <span className="text-gray-500">Shift type</span>
+          <span>{shift}</span>
+
+          <span className="text-gray-500">Exchange</span>
+          <div className="flex items-center gap-1">
+            <span>{from.shift}</span>
+            <span className="material-symbols-outlined text-sm">
+              arrow_forward
+            </span>
+            <span>{to.shift}</span>
           </div>
-          <div className="flex flex-col justify-between gap-1">
-            <span>{uc}</span>
-            <span>{shift}</span>
-            <div className="flex items-center gap-1">
-              <span>{from}</span>
-              <span className="material-symbols-outlined">arrow_forward</span>
-              <span>{to}</span>
+
+          {from.professor && to.professor && (
+            <>
+              <span className="text-gray-500">Professor</span>
+              <div className="flex items-center gap-1">
+                <span>{firstAndLastName(from.professor)}</span>
+                <span className="material-symbols-outlined text-sm">
+                  arrow_forward
+                </span>
+                <span>{firstAndLastName(to.professor)}</span>
+              </div>
+            </>
+          )}
+
+          <span className="text-gray-500">Time</span>
+          <div className="flex w-fit flex-row gap-2">
+            <div className="flex flex-col">
+              {from.timeslots.map((slot, index) => (
+                <span key={index} className="capitalize">
+                  {`${formatWeekday(slot.weekday)}: ${slot.start} - ${slot.end}`}
+                </span>
+              ))}
+            </div>
+
+            <span className="material-symbols-outlined self-center text-sm">
+              arrow_forward
+            </span>
+
+            <div className="flex flex-col">
+              {to.timeslots.map((slot, index) => (
+                <span key={index} className="capitalize">
+                  {`${formatWeekday(slot.weekday)}: ${slot.start} - ${slot.end}`}
+                </span>
+              ))}
+            </div>
+          </div>
+          <span className="text-gray-500">Room</span>
+          <div className="flex w-fit flex-row gap-2">
+            <div className="flex flex-col">
+              {from.timeslots.map((slot, index) => (
+                <span key={index} className="capitalize">
+                  {`CP${slot.building}-${slot.room}`}
+                </span>
+              ))}
+            </div>
+
+            <span className="material-symbols-outlined self-center text-sm">
+              arrow_forward
+            </span>
+
+            <div className="flex flex-col">
+              {to.timeslots.map((slot, index) => (
+                <span key={index} className="capitalize">
+                  {`CP${slot.building}-${slot.room}`}
+                </span>
+              ))}
             </div>
           </div>
         </div>

src/components/exchange/main-section.tsx

@@ -28,6 +28,14 @@ export interface IExchange {
       | "theoretical_practical"
       | "practical_laboratory"
       | "tutorial_guidance";
+    professor: string;
+    timeslots: {
+      weekday: string;
+      start: string;
+      end: string;
+      building: string;
+      room: string;
+    }[];
     number: number;
   };
   to: {
@@ -37,23 +45,54 @@ export interface IExchange {
       | "theoretical_practical"
       | "practical_laboratory"
       | "tutorial_guidance";
+    professor: string;
+    timeslots: {
+      weekday: string;
+      start: string;
+      end: string;
+      building: string;
+      room: string;
+    }[];
     number: number;
   };
   course: { id: string; name: string };
 }
 
 export default function MainSection() {
   const { data: response } = useGetExchanges();
-
   const exchanges = response?.data?.requests ?? [];
   const pending_exchanges = exchanges
     .filter((exchange: IExchange) => exchange.status === "pending")
     .map((exchange: IExchange) => ({
       id: exchange.id,
       uc: exchange.course.name,
       status: exchange.status,
-      from: `${getShortShiftType(exchange.from.type)}${exchange.from.number}`,
-      to: `${getShortShiftType(exchange.to.type)}${exchange.to.number}`,
+      from: {
+        shift: `${getShortShiftType(exchange.from.type)}${exchange.from.number}`,
+        professor: exchange.from.professor,
+        timeslots: exchange.from.timeslots.map((timeslot) => {
+          return {
+            weekday: timeslot.weekday,
+            start: timeslot.start,
+            end: timeslot.end,
+            room: timeslot.room,
+            building: timeslot.building,
+          };
+        }),
+      },
+      to: {
+        shift: `${getShortShiftType(exchange.to.type)}${exchange.to.number}`,
+        professor: exchange.to.professor,
+        timeslots: exchange.to.timeslots.map((timeslot) => {
+          return {
+            weekday: timeslot.weekday,
+            start: timeslot.start,
+            end: timeslot.end,
+            room: timeslot.room,
+            building: timeslot.building,
+          };
+        }),
+      },
       exchange_id: exchange.id,
     }));
 
@@ -63,11 +102,34 @@ export default function MainSection() {
       id: exchange.id,
       uc: exchange.course.name,
       status: exchange.status,
-      from: `${getShortShiftType(exchange.from.type)}${exchange.from.number}`,
-      to: `${getShortShiftType(exchange.to.type)}${exchange.to.number}`,
+      from: {
+        shift: `${getShortShiftType(exchange.from.type)}${exchange.from.number}`,
+        professor: exchange.from.professor,
+        timeslots: exchange.from.timeslots.map((timeslot) => {
+          return {
+            weekday: timeslot.weekday,
+            start: timeslot.start,
+            end: timeslot.end,
+            room: timeslot.room,
+            building: timeslot.building,
+          };
+        }),
+      },
+      to: {
+        shift: `${getShortShiftType(exchange.to.type)}${exchange.to.number}`,
+        professor: exchange.to.professor,
+        timeslots: exchange.to.timeslots.map((timeslot) => {
+          return {
+            weekday: timeslot.weekday,
+            start: timeslot.start,
+            end: timeslot.end,
+            room: timeslot.room,
+            building: timeslot.building,
+          };
+        }),
+      },
       exchange_id: exchange.id,
     }));
-
   return (
     <div className="flex w-full min-w-0 flex-col gap-8 lg:pr-4">
       <h1 className="text-2xl font-semibold">Shift Exchange Requests</h1>

src/components/exchange/utils/card.tsx

@@ -7,13 +7,25 @@ import { useDeleteExchange } from "@/lib/mutations/exchange";
 
 interface IExchangeCardProps {
   uc: string;
-  from: string;
-  to: string;
+  from: ShiftProps;
+  to: ShiftProps;
   pending?: boolean;
   completed?: boolean;
   exchange_id?: string;
 }
 
+interface ShiftProps {
+  shift: string;
+  professor?: string;
+  timeslots: {
+    weekday: string;
+    start_hour: string;
+    end_hour: string;
+    room: string;
+    building: string;
+  }[];
+}
+
 const getShift = (shift: string) => {
   return shift.replace(/[0-9]/g, "");
 };
@@ -41,9 +53,9 @@ export default function ExchangeCard({
         <div className="flex-col">
           <span className="line-clamp-1">{uc}</span>
           <div className="flex items-center gap-2">
-            <span>{from}</span>
+            <span>{from.shift}</span>
             <span className="material-symbols-outlined">arrow_forward</span>
-            <span>{to}</span>
+            <span>{to.shift}</span>
           </div>
         </div>
         <div className="flex items-center">
@@ -169,7 +181,7 @@ export default function ExchangeCard({
           uc={uc}
           from={from}
           to={to}
-          shift={getShift(from)}
+          shift={getShift(from.shift)}
           status={pending ? "pending" : "completed"}
         />
       </ExchangeModal>