Aditya-feat: Add Side-by-Side Comparison Mode for Actual vs. Planned Expenditure Charts

src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureCard.jsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { ENDPOINTS } from '../../../../utils/URL';
+import ExpenditureChart from './ExpenditureChart';
+import styles from './ExpenditureCard.module.css';
+
+function useProjectList() {
+  const [projectList, setProjectList] = useState([]);
+  const [selectedProject, setSelectedProject] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    axios
+      .get(ENDPOINTS.BM_EXPENDITURE_PROJECTS)
+      .then(({ data }) => {
+        if (cancelled) return;
+        const labeled = Array.isArray(data)
+          ? data.map((id, index) => ({
+              id,
+              name: `Project ${String.fromCodePoint(65 + index)}`,
+            }))
+          : [];
+        setProjectList(labeled);
+        if (labeled.length > 0) setSelectedProject(labeled[0].id);
+      })
+      .catch(err => {
+        if (!cancelled) {
+          setError(err?.response?.data?.message || 'Failed to load projects');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { projectList, selectedProject, setSelectedProject, loading, error };
+}
+
+/**
+ * ExpenditureCard — unified card for both layout variants.
+ *
+ * Props:
+ *   mode     ('comparison' | 'stacked') — layout variant; defaults to 'stacked'
+ *   pieType  ('actual' | 'planned')     — required when mode === 'stacked'
+ */
+function ExpenditureCard({ mode = 'stacked', pieType }) {
+  const { projectList, selectedProject, setSelectedProject, loading, error } = useProjectList();
+
+  const isStacked = mode === 'stacked';
+  const cardClass = isStacked ? `${styles.card} ${styles.cardStacked}` : styles.card;
+  const selectId = isStacked ? `sec-project-select-${pieType}` : 'ft-project-select';
+
+  if (loading) {
+    return (
+      <div className={cardClass}>
+        {/* <output> is the semantic equivalent of role="status" with implicit aria-live="polite" */}
+        <output className={styles.stateMessage}>Loading project list…</output>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cardClass}>
+        <p className={`${styles.stateMessage} ${styles.errorMessage}`} role="alert">
+          {error}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cardClass}>
+      <div className={`${styles.controls} ${isStacked ? styles.controlsStacked : ''}`}>
+        <div className={`${styles.selectGroup} ${isStacked ? styles.selectGroupStacked : ''}`}>
+          <label htmlFor={selectId} className={styles.selectLabel}>
+            Project
+          </label>
+          <select
+            id={selectId}
+            className={styles.select}
+            value={selectedProject}
+            onChange={e => setSelectedProject(e.target.value)}
+          >
+            {projectList.map(project => (
+              <option key={project.id} value={project.id}>
+                {project.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {selectedProject && (
+        <ExpenditureChart
+          projectId={selectedProject}
+          {...(isStacked ? { pieType } : { viewMode: 'comparison' })}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ExpenditureCard;

src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureCard.module.css

@@ -0,0 +1,97 @@
+/* ============================================================
+   ExpenditureCard — Shared CSS Module
+   Used by both FinancialsTrackingCard (comparison mode) and
+   SingleExpenditureCard (stacked mode).
+   All colours use CSS custom properties that cascade from
+   WeeklyProjectSummary.module.css (:root / .darkMode).
+   Light / dark switching is therefore automatic.
+   ============================================================ */
+
+/* ── Outer card ──────────────────────────────────────────────── */
+.card {
+  background: var(--card-bg);
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 8px var(--card-shadow);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--text-color);
+}
+
+/* Stacked-mode card needs fixed min-height and column flex */
+.cardStacked {
+  min-height: 340px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Controls row ────────────────────────────────────────────── */
+.controls {
+  margin-bottom: 20px;
+}
+
+.controlsStacked {
+  margin-bottom: 12px;
+}
+
+/* ── Project select group ────────────────────────────────────── */
+.selectGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 280px;
+}
+
+.selectGroupStacked {
+  max-width: 240px;
+}
+
+.selectLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.select {
+  padding: 6px 10px;
+  background: var(--section-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border-color, #cccccc);
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.select:focus {
+  outline: none;
+  border-color: var(--focus-border-color, #3b82f6);
+}
+
+/* ── Loading / error states ──────────────────────────────────── */
+.stateMessage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  font-size: 14px;
+  color: var(--text-color);
+  text-align: center;
+}
+
+.errorMessage {
+  color: var(--neg-color, #b91c1c);
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .card {
+    padding: 16px;
+  }
+
+  .selectGroup,
+  .selectGroupStacked {
+    max-width: 100%;
+    width: 100%;
+  }
+}