Nirali reports collapse change

.github/workflows/pull_request_test.yml

@@ -53,6 +53,6 @@ jobs:
     - name: Install Dependencies
       run: yarn install --frozen-lockfile
     - name: Run Unit Tests for Changed Files Only
-      run: yarn run test:changed
+      run: NODE_OPTIONS="--max-old-space-size=4096" yarn run test:changed
     - name: Run Lint
       run: yarn run lint

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
         run: yarn install
 
       - name: Run tests
-        run: yarn test
+        run: NODE_OPTIONS="--max-old-space-size=4096" yarn test
 
       - name: Upload test results
         if: failure()

package.json

@@ -177,7 +177,8 @@
     "@typescript-eslint/eslint-plugin": "^8.44.1",
     "@typescript-eslint/parser": "^8.44.1",
     "@vitejs/plugin-react": "^4.5.0",
-    "@vitest/ui": "3.2.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "babel-jest": "^29.7.0",
     "baseline-browser-mapping": "^2.9.17",
     "cross-env": "^5.2.1",
@@ -206,7 +207,7 @@
     "stylelint-config-standard": "^39.0.1",
     "typescript": "^4.8.4",
     "vite": "^6.3.5",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/components/Reports/PeopleReport/PeopleReport.jsx

@@ -482,7 +482,6 @@ class PeopleReport extends Component {
     const boxCount = visibleBlocks.length;
 
     return (
-
       <div className={`${styles.containerPeopleWrapper} ${darkMode ? styles.bgOxfordBlue : ''}`}>
         <div className={`${styles.peopleReportFlexLayout}`}>
 
@@ -492,7 +491,6 @@ class PeopleReport extends Component {
                 boxCount === 3 ? styles.threeBoxes :
                 ''}`}
               >
-
                 <ReportPage.ReportBlock
                   firstColor="#ff5e82"
                   secondColor="#e25cb2"
@@ -651,54 +649,60 @@ class PeopleReport extends Component {
               darkMode={darkMode}
             >
 
-              <div
-                // style={{ minHeight: '200px' }}
-                className={`${styles.reportStats} ${darkMode ? `${styles.bgYinmnBlue} ${styles.textLight}` : ''}`}
-              >
-                <p>
-                  <Link to={`/userProfile/${_id}`}
-                    title="View Profile"
-                    className={`${darkMode ? `${styles.textLight} ${styles.fontWeightBold}` : ''}`}
-                    style={{ fontSize: "24px" }}>
-                    {firstName} {lastName}
-                  </Link>
-                </p>
-                <div className={styles.dateInfo}>
-                  <div>
-                    <p>Role</p>
-                    <h4>{role}</h4>
-                  </div>
-                  </div>
-                  <div className={styles.dateInfo}>
-                  <div>
-                    <p>Title</p>
-                    <h4>{jobTitle}</h4>
-                  </div>
-                </div>
-
-                {/* {endDate ? ( */}
-                <div className={styles.rehireable}>
-                  <Checkbox
-                    value={isRehireable}
-                    onChange={() => this.setRehireable(!isRehireable)}
-                    label="Rehireable"
-                    darkMode={darkMode}
-                    className={`${styles.reportStats} ${darkMode ? `${styles.bgYinmnBlue} ${styles.textLight}` : ''}`}
-                    backgroundColorCN={darkMode ? styles.bgYinmnBlue : ""}
-                    textColorCN={darkMode ? styles.textLight : ""}
-                  />
-                </div>
-                <div className={styles.dateInfo}>
-                  <div>
-                    <p>Start Date</p>
-                    <h4>{formatDate(startDate)}</h4>
-                  </div>
-                  <div>
-                    <p>End Date</p>
-                    <h4>{endDate ? formatDate(endDate) : 'N/A'}</h4>
-                  </div>
-                </div>
-              </div>
+<div
+  className={`${styles.card} ${
+    darkMode ? `${styles.darkCard}` : styles.lightCard
+  }`}
+>
+  {/* Name */}
+  <Link
+    to={`/userProfile/${_id}`}
+    title="View Profile"
+    className={`${styles.userName} ${
+      darkMode ? styles.textLight : styles.textDark
+    }`}
+  >
+    {firstName} {lastName}
+  </Link>
+
+  {/* Info Grid */}
+  <div className={styles.infoGrid}>
+    <div>
+      <p className={styles.label}>Role</p>
+      <h5 className={styles.value}>{role}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>Title</p>
+      <h5 className={styles.value}>{jobTitle}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>Start Date</p>
+      <h5 className={styles.value}>{formatDate(startDate)}</h5>
+    </div>
+
+    <div>
+      <p className={styles.label}>End Date</p>
+      <h5 className={styles.value}>
+        {endDate ? formatDate(endDate) : 'N/A'}
+      </h5>
+    </div>
+  </div>
+
+  {/* Checkbox */}
+  <div className={styles.checkboxWrapper}>
+    <Checkbox
+      value={isRehireable}
+      onChange={() => this.setRehireable(!isRehireable)}
+      label="Rehireable"
+      darkMode={darkMode}
+      backgroundColorCN={darkMode ? styles.bgYinmnBlue : ""}
+      textColorCN={darkMode ? styles.textLight : ""}
+    />
+  </div>
+</div>
+
             </ReportPage.ReportHeader>
           </div >
         </div>