feat: lesson today and fix calendar

Author: dashaaaa21

client/src/components/calendar/Calendar.tsx

@@ -44,7 +44,7 @@ export const Calendar = () => {
     );
 
   return (
-    <div className="w-[306px] h-[319px] rounded-[24px] bg-[#1E1927] px-[24px] py-[20px] shadow-[0px_6px_58px_0px_rgba(196,203,214,0.1)]">
+    <div className="w-[306px] h-[280px] rounded-[24px] bg-[#1E1927] px-[20px] py-[12px] shadow-[0px_6px_58px_0px_rgba(196,203,214,0.1)]">
       <div className="flex items-center justify-between">
         <Button
           as="button"
@@ -67,15 +67,15 @@ export const Calendar = () => {
         </Button>
       </div>
 
-      <div className="mt-[12px] grid grid-cols-7 gap-y-[6px] text-[10px] text-[#9A9A9A]">
+      <div className="mt-[8px] grid grid-cols-7 gap-y-[3px] text-[10px] text-[#9A9A9A]">
         {WEEKDAYS.map((day) => (
           <div key={day} className="text-center font-medium">
             {day}
           </div>
         ))}
       </div>
 
-      <div className="mt-[8px] grid grid-cols-7 gap-y-[6px] text-[12px] text-[#EDEDED]">
+      <div className="mt-[4px] grid grid-cols-7 gap-y-[3px] text-[12px] text-[#EDEDED]">
         {days.map((date, index) => {
           if (!date) {
             return <div key={`empty-${index}`} />;

client/src/components/teacherDashboard/LessonCard.tsx

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+
+type LessonCardProps = {
+  lesson: string;
+  student: string;
+  price: string;
+  date: string;
+  time: string;
+  isPast: boolean;
+  videoCall: ReactNode;
+};
+
+export const LessonCard = ({
+  lesson,
+  student,
+  price,
+  date,
+  time,
+  isPast,
+  videoCall,
+}: LessonCardProps) => {
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <div className="bg-dark-900/30 border border-blue-500/20 rounded-[16px] p-[20px] hover:border-blue-500/40 transition-all duration-300 hover:bg-dark-900/50">
+      <div className="flex flex-col gap-[12px]">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <h3 className="text-white font-medium text-[16px] mb-[4px]">
+              {lesson}
+            </h3>
+            <p className="text-gray-400 text-[14px]">{student}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-blue-400 font-semibold text-[16px]">
+              {price} euro
+            </p>
+            <p className="text-gray-400 text-[12px] mt-[2px]">
+              {formatDate(date)} • {time}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-[8px] border-t border-gray-700/30">
+          <div className="flex items-center gap-[8px]">
+            <div
+              className={`w-[8px] h-[8px] rounded-full ${
+                isPast ? "bg-gray-500" : "bg-green-500"
+              }`}
+            />
+            <span className="text-[12px] text-gray-400">
+              {isPast ? "Past" : "Active"}
+            </span>
+          </div>
+
+          <div className="flex items-center">{videoCall}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/teacherDashboard/MyLessonsSection.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from "react";
-import LessonsTable from "../table/LessonsTable";
 import { Calendar } from "../calendar/Calendar";
 import { PageTitle } from "../pageTitle/PageTitle";
 import { NumberOfStudentsCard } from "./NumberOfStudentsCard";
 import { RequestStudentsCard } from "./RequestStudentsCard";
+import { LessonCard } from "./LessonCard";
 import { useTeacherAppointmentsQuery } from "../../features/appointments/query/useTeacherAppointmentsQuery";
 import { useRegularStudentsQuery } from "../../features/appointments/query/useRegularStudentsQuery";
 import { useAppointmentTime } from "../../features/appointments/hooks/useAppointmentTime";
@@ -37,7 +37,7 @@ export const MyLessonsSection = () => {
 
   const today = new Date().toISOString().split("T")[0];
 
-  const rows = useMemo(() => {
+  const lessons = useMemo(() => {
     const appointments = data?.appointments ?? [];
     return appointments
       .filter((appointment) => appointment.date === today)
@@ -46,16 +46,17 @@ export const MyLessonsSection = () => {
 
         return {
           id: appointment.id,
-          checked: appointment.status === "approved",
           lesson: appointment.lesson,
           student: appointment.studentName || appointment.studentId || "N/A",
           price: appointment.price,
+          date: appointment.date,
+          time: appointment.time,
           isPast,
           videoCall: (
             <Button
               as="button"
               variant="link"
-              className="text-white underline text-[14px] md:text-[16px] hover:text-gray-300"
+              className="text-blue-400 underline text-[12px] hover:text-blue-300 transition-colors"
               onClick={() =>
                 confirmStartCall(
                   appointment.studentId,
@@ -74,35 +75,39 @@ export const MyLessonsSection = () => {
   return (
     <div>
       <PageTitle title="General" />
-      <div className="mt-6 flex flex-col items-center justify-center gap-[40px] lg:flex-row lg:justify-between">
+      <div className="mt-6 flex flex-col items-center justify-center gap-[24px] lg:flex-row lg:justify-between lg:gap-[40px]">
         <NumberOfStudentsCard count={regularStudentsCount} />
         <RequestStudentsCard count={requestStudentsCount} />
         <Calendar />
       </div>
 
       <PageTitle title="My lessons today" />
-      <div className="mt-[28px]">
+      <div className="mt-[12px]">
         {isLoading ? (
           <div className="py-8 text-center text-white">Loading lessons...</div>
         ) : error ? (
           <div className="py-8 text-center text-white">
             Error loading lessons
           </div>
-        ) : rows.length === 0 ? (
+        ) : lessons.length === 0 ? (
           <div className="py-8 text-center text-white">
             No lessons scheduled for today
           </div>
         ) : (
-          <LessonsTable
-            height={290}
-            columns={[
-              { key: "lesson", label: "Lessons", width: "130px" },
-              { key: "student", label: "Students", width: "184px" },
-              { key: "price", label: "Price", width: "146px" },
-              { key: "videoCall", label: "Video call", width: "146px" },
-            ]}
-            rows={rows}
-          />
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px]">
+            {lessons.map((lesson) => (
+              <LessonCard
+                key={lesson.id}
+                lesson={lesson.lesson}
+                student={lesson.student}
+                price={lesson.price}
+                date={lesson.date}
+                time={lesson.time}
+                isPast={lesson.isPast}
+                videoCall={lesson.videoCall}
+              />
+            ))}
+          </div>
         )}
       </div>
     </div>