refactor: update linting rules and remove max-warnings restriction

test: enhance CSCalendar tests for event popups and interactions

chore: remove unused useIsMobile hook and related tests

test: clean up event constants tests by removing redundant checks

chore: delete createTds utility and associated tests

style: add styles for event popup and calendar cell interactions

feat: implement EventPopup component for displaying event details

fix: update CSCalendar to use EventPopup for event interactions

style: improve SCSS structure and imports for better maintainability

Author: Ali-Sdg90

.eslintrc.json

@@ -16,7 +16,7 @@
         "quotes": ["error", "double"],
         "semi": ["error", "always"],
         "prettier/prettier": [
-            "error",
+            "warn",
             {
                 "endOfLine": "auto"
             }

package.json

@@ -12,8 +12,8 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "test": "react-scripts test --watchAll=false --coverage",
-    "lint": "eslint src --ext .js,.jsx --format stylish --max-warnings=0",
-    "lint:fix": "eslint src --ext .js,.jsx --format stylish --max-warnings=0 --fix",
+    "lint": "eslint src --ext .js,.jsx --format stylish",
+    "lint:fix": "eslint src --ext .js,.jsx --format stylish --fix",
     "act": "act --env-file .env.act --quiet",
     "prepare": "husky"
   },

src/__tests__/components/CSCalendar.test.jsx

@@ -2,25 +2,31 @@ import React from "react";
 import { render, waitFor, screen, fireEvent } from "@testing-library/react";
 import CSCalendar from "../../components/CSCalendar";
 
-// Mock dependencies
-jest.mock("../../utils/createTds", () => ({
-    createTds: jest.fn(),
-}));
-
 jest.mock("../../constants/events", () => ({
     events: [
         {
             title: "جلسه مرحله سوم",
             fullName: "جلسه مرحله‌ سوم: پرسش‌وپاسخ",
+            link: "https://teams.microsoft.com/meeting-3",
+            resource: "https://example.com/resource-3",
         },
         {
             title: "جلسه مرحله دوم",
             fullName: "جلسه مرحله‌ دوم: پرسش‌وپاسخ",
+            link: "https://teams.microsoft.com/meeting-2",
+            resource: "https://example.com/resource-2",
+        },
+        {
+            title: "جلسه مصاحبه",
+            fullName: "جلسه مصاحبه ورود به برنامه",
+            link: "",
+            resource: "",
         },
-        { title: "جلسه مصاحبه", fullName: "جلسه مصاحبه ورود به برنامه" },
         {
             title: "جلسه مرحله اول",
             fullName: "جلسه مرحله‌ اول: پرسش‌وپاسخ",
+            link: "https://teams.microsoft.com/meeting-1",
+            resource: "https://example.com/resource-1",
         },
     ],
 }));
@@ -41,10 +47,6 @@ jest.mock("../../constants/persianWeekDays", () => ({
     ],
 }));
 
-jest.mock("../../components/useIsMobile", () => ({
-    useIsMobile: jest.fn(() => false),
-}));
-
 jest.mock("../../components/CalendarEventCreator", () => {
     return function MockCalendarEventCreator() {
         return (
@@ -187,31 +189,93 @@ describe("CSCalendar", () => {
         expect(getByText("ماه بعد")).toBeInTheDocument();
     });
 
-    it("should render Alert component", () => {
+    it("should not render bottom Alert component anymore (popup replaces it)", () => {
         const { container } = render(
             <CSCalendar
                 setAnnouncementData={mockSetAnnouncementData}
                 addToCurrentWeek={mockAddToCurrentWeek}
             />
         );
 
-        expect(container.querySelector(".ant-alert")).toBeInTheDocument();
+        expect(container.querySelector(".ant-alert")).not.toBeInTheDocument();
     });
 
-    it("should display event description", () => {
-        const { getByText } = render(
+    it("clicking a calendar cell with event should open anchored popup showing event details", async () => {
+        const { container, getByText } = render(
+            <CSCalendar
+                setAnnouncementData={mockSetAnnouncementData}
+                addToCurrentWeek={mockAddToCurrentWeek}
+            />
+        );
+
+        await waitFor(() => {
+            // find clickable cell wrapper
+            const cells = container.querySelectorAll(
+                ".calendar-cell-with-event"
+            );
+            expect(cells.length).toBeGreaterThanOrEqual(0);
+            // find the first wrapper that actually contains an event (stage-tag)
+            const clickable = Array.from(cells).find((c) =>
+                c.querySelector(".stage-tag")
+            );
+            expect(clickable).toBeTruthy();
+            if (clickable) fireEvent.click(clickable);
+        });
+
+        // popup should show the Persian date label
+        expect(getByText("تاریخ شمسی")).toBeInTheDocument();
+        // session link should be labeled as Microsoft Teams in Persian and resource should be present
+        expect(getByText("ماکروسافت تیمز")).toBeInTheDocument();
+        expect(getByText("مشاهده منبع")).toBeInTheDocument();
+    });
+
+    it("clicking the calendar TD (cell square) containing a staged event opens the popup", async () => {
+        const { container, getByText } = render(
             <CSCalendar
                 setAnnouncementData={mockSetAnnouncementData}
                 addToCurrentWeek={mockAddToCurrentWeek}
             />
         );
 
-        // Should render event description or "no event" message
-        const eventDescription = getByText((content, element) => {
-            return element && element.className === "event-description";
+        await waitFor(() => {
+            // find a table cell that contains our clickable wrapper
+            const tds = Array.from(
+                container.querySelectorAll(".ant-picker-cell")
+            );
+            const tdWithEvent = tds.find((td) =>
+                td.querySelector(".calendar-cell-with-event .stage-tag")
+            );
+
+            expect(tdWithEvent).toBeTruthy();
+
+            if (tdWithEvent) {
+                fireEvent.click(tdWithEvent);
+            }
         });
 
-        expect(eventDescription).toBeInTheDocument();
+        expect(getByText("تاریخ شمسی")).toBeInTheDocument();
+        expect(getByText("ماکروسافت تیمز")).toBeInTheDocument();
+        expect(getByText("مشاهده منبع")).toBeInTheDocument();
+    });
+
+    it("every calendar cell should contain a date-label Tag and be annotated with data-date", async () => {
+        const { container } = render(
+            <CSCalendar
+                setAnnouncementData={mockSetAnnouncementData}
+                addToCurrentWeek={mockAddToCurrentWeek}
+            />
+        );
+
+        await waitFor(() => {
+            const wrappers = container.querySelectorAll(
+                ".calendar-cell-with-event"
+            );
+            expect(wrappers.length).toBeGreaterThan(0);
+            const hasDateAttr = Array.from(wrappers).some((w) =>
+                w.getAttribute("data-date")
+            );
+            expect(hasDateAttr).toBeTruthy();
+        });
     });
 
     it("should have select elements for month and year", () => {
@@ -356,16 +420,16 @@ describe("CSCalendar", () => {
         expect(todayBtn).toBeInTheDocument();
     });
 
-    it("should render ConfigProvider with RTL direction", () => {
+    it("should not show the anchored popup on initial render", () => {
         const { container } = render(
             <CSCalendar
                 setAnnouncementData={mockSetAnnouncementData}
                 addToCurrentWeek={0}
             />
         );
 
-        const alert = container.querySelector(".ant-alert");
-        expect(alert).toBeInTheDocument();
+        const popup = container.querySelector(".event-popup");
+        expect(popup).not.toBeInTheDocument();
     });
 
     it("should handle onPanelChange when month/year changes", () => {

src/__tests__/components/useIsMobile.test.jsx

@@ -42,12 +42,6 @@ describe("events constants", () => {
         });
     });
 
-    it("should contain specific event details", () => {
-        const thirdEvent = events.find((e) => e.title === "جلسه مرحله سوم");
-        expect(thirdEvent).toBeDefined();
-        expect(thirdEvent.fullName).toContain("مرحله‌ سوم");
-    });
-
     it("should be ordered correctly", () => {
         expect(events[0].title).toBe("جلسه مرحله سوم");
         expect(events[1].title).toBe("جلسه مرحله دوم");