fix myschedule - code copied instead of using existing component due to different data structure

components/publisher/ShiftsList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import toast from "react-hot-toast";
 import { useRouter } from "next/router";
 import Link from "next/link";

components/sidemenuData.js

@@ -15,11 +15,11 @@ const sidemenu = [
         text: "График",
         url: "/cart/calendar/schedule",
     },
-    // {
+    {
-    //     id: "myshedule",
+        id: "myshedule",
-    //     text: "Моя График",
+        text: "Моя График",
-    //     url: "/cart/publishers/myschedule",
+        url: "/cart/publishers/myschedule",
-    // },
+    },
     {
         id: "locations",
         text: "Местоположения",

pages/cart/publishers/myschedule.tsx

@@ -6,6 +6,7 @@ import axiosServer from '../../../src/axiosServer';
 import common from '../../../src/helpers/common';
 import ShiftsList from '../../../components/publisher/ShiftsList';
 
+import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../../src/helpers/const"
 import { useSession, getSession } from 'next-auth/react';
 
 export default function MySchedulePage({ assignments }) {
@@ -18,16 +19,37 @@ export default function MySchedulePage({ assignments }) {
     return (
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
+                <h1 className="text-3xl font-bold">Моите смени</h1>
                 <div className="container mx-auto p-4">
-                    <h1 className="text-xl font-semibold mb-4">Моите смени</h1>
+                    {assignments && assignments.map((assignment) => (
-                    <ShiftsList assignments={assignments} selectedtab={common.getCurrentYearMonth()} />
+                        <div className="flex items-center space-x-2 py-1" key={assignment.dateStr}>
+                            <div className="font-bold flex-shrink-0 w-6 text-right">{assignment.dateStr + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/}
+                            <div className="flex-grow flex">
+                                <div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
+                                    <span>{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}</span>
+                                    <button
+                                        className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`}
+                                        onClick={() => searchReplacement(assignment.id)}
+                                    >
+                                        Търси заместник
+                                    </button>
+                                    <button
+                                        className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
+                                        onClick={() => AddToGoogleCalendar(assignment.id)}
+                                    >
+                                        Добави в календар
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
                 </div>
             </ProtectedRoute>
         </Layout>
     );
 }
 
-//get future assignmenrs for the current user (session.user.id)
+//get future assignments for the current user (session.user.id)
 
 export const getServerSideProps = async (context) => {
     const session = await getSession(context);
@@ -72,6 +94,7 @@ export const getServerSideProps = async (context) => {
         if (assignment.shift && assignment.shift.startTime) {
             return {
                 ...assignment,
+                dateStr: assignment.shift.startTime.toLocaleDateString("bg-BG", { day: "numeric", month: "long" }),
                 shift: {
                     ...assignment.shift,
                     startTime: assignment.shift.startTime.toISOString(),
@@ -82,26 +105,10 @@ export const getServerSideProps = async (context) => {
         return assignment;
     });
 
-    const singleKey = "all";
-    const assignmentsStructure = {
-        assignments: {
-            items: {
-                [singleKey]: [],
-            },
-            keys: [singleKey],
-            months: {
-                [singleKey]: "Всички смени",
-            },
-        },
-        selectedtab: singleKey,
-    };
 
-    transformedAssignments.forEach(assignment => {
-        assignmentsStructure.assignments.items[singleKey].push(assignment);
-    });
 
     return {
-        props: assignmentsStructure
+        props: { assignments: transformedAssignments }
     }
 }