Amaan taking over for Juhitha-Reddy fix people report page UI

src/components/ApplicationTimeChart/data.js

@@ -0,0 +1,53 @@
+// Helper function to generate dates relative to now
+const generateTimestamp = (daysAgo, hoursAgo = 0) => {
+  const date = new Date();
+  date.setDate(date.getDate() - daysAgo);
+  date.setHours(date.getHours() - hoursAgo);
+  return date.toISOString();
+};
+
+const sampleData = [
+  // Recent applications (last 7 days) - Always fresh dates
+  { role: 'Software Developer', timeToApply: 8, timestamp: generateTimestamp(0, 2) }, // 2 hours ago
+  { role: 'Software Developer', timeToApply: 12, timestamp: generateTimestamp(1, 1) }, // 1 day, 1 hour ago
+  { role: 'Software Developer', timeToApply: 9, timestamp: generateTimestamp(2, 3) }, // 2 days, 3 hours ago
+  { role: 'Architect', timeToApply: 15, timestamp: generateTimestamp(1, 5) }, // 1 day, 5 hours ago
+  { role: 'Architect', timeToApply: 18, timestamp: generateTimestamp(3, 2) }, // 3 days, 2 hours ago
+  { role: 'Master Electrician', timeToApply: 25, timestamp: generateTimestamp(2, 8) }, // 2 days, 8 hours ago
+  { role: 'Master Electrician', timeToApply: 22, timestamp: generateTimestamp(4, 1) }, // 4 days, 1 hour ago
+  { role: 'Product Manager', timeToApply: 6, timestamp: generateTimestamp(3, 4) }, // 3 days, 4 hours ago
+  { role: 'Product Manager', timeToApply: 9, timestamp: generateTimestamp(5, 2) }, // 5 days, 2 hours ago
+  { role: 'Data Scientist', timeToApply: 13, timestamp: generateTimestamp(4, 6) }, // 4 days, 6 hours ago
+  { role: 'Data Scientist', timeToApply: 11, timestamp: generateTimestamp(6, 3) }, // 6 days, 3 hours ago
+  { role: 'UX Designer', timeToApply: 14, timestamp: generateTimestamp(5, 7) }, // 5 days, 7 hours ago
+  { role: 'UX Designer', timeToApply: 16, timestamp: generateTimestamp(6, 4) }, // 6 days, 4 hours ago
+
+  // Monthly data (8-30 days ago)
+  { role: 'Project Manager', timeToApply: 7, timestamp: generateTimestamp(8) }, // 8 days ago
+  { role: 'Project Manager', timeToApply: 11, timestamp: generateTimestamp(11) }, // 11 days ago
+  { role: 'Plumber', timeToApply: 20, timestamp: generateTimestamp(12) }, // 12 days ago
+  { role: 'Plumber', timeToApply: 24, timestamp: generateTimestamp(16) }, // 16 days ago
+  { role: 'Software Developer', timeToApply: 10, timestamp: generateTimestamp(18) }, // 18 days ago
+  { role: 'Architect', timeToApply: 16, timestamp: generateTimestamp(21) }, // 21 days ago
+  { role: 'Master Electrician', timeToApply: 28, timestamp: generateTimestamp(24) }, // 24 days ago
+  { role: 'Data Scientist', timeToApply: 15, timestamp: generateTimestamp(26) }, // 26 days ago
+  { role: 'UX Designer', timeToApply: 12, timestamp: generateTimestamp(28) }, // 28 days ago
+  { role: 'Product Manager', timeToApply: 8, timestamp: generateTimestamp(30) }, // 30 days ago
+
+  // Older data (31-365 days ago)
+  { role: 'UX Designer', timeToApply: 12, timestamp: generateTimestamp(50) }, // ~50 days ago
+  { role: 'Product Manager', timeToApply: 8, timestamp: generateTimestamp(75) }, // ~75 days ago
+  { role: 'Plumber', timeToApply: 26, timestamp: generateTimestamp(115) }, // ~115 days ago
+  { role: 'Software Developer', timeToApply: 7, timestamp: generateTimestamp(180) }, // ~180 days ago
+  { role: 'Architect', timeToApply: 14, timestamp: generateTimestamp(205) }, // ~205 days ago
+  { role: 'Master Electrician', timeToApply: 24, timestamp: generateTimestamp(230) }, // ~230 days ago
+  { role: 'Data Scientist', timeToApply: 16, timestamp: generateTimestamp(255) }, // ~255 days ago
+  { role: 'Project Manager', timeToApply: 9, timestamp: generateTimestamp(295) }, // ~295 days ago
+
+  // Outliers (these will be filtered out as they're > 30 minutes)
+  { role: 'Software Developer', timeToApply: 45, timestamp: generateTimestamp(3) }, // Tab left open
+  { role: 'Product Manager', timeToApply: 120, timestamp: generateTimestamp(8) }, // 2 hours - outlier
+  { role: 'UX Designer', timeToApply: 90, timestamp: generateTimestamp(11) }, // 1.5 hours - outlier
+];
+
+export default sampleData;

src/components/Reports/InfringementsViz.jsx

@@ -176,12 +176,24 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
       </Button>
       <div className={`${styles.kaitest} ${darkMode ? 'mt-2' : ''}`} id="infplot" data-testid="infplot" />
 
-      <Modal size="lg" show={modalVisible} onHide={handleModalClose}>
+      <Modal size="lg" show={modalVisible} onHide={handleModalClose} dialogClassName={styles.infringementModalDialog}>
         <Modal.Header closeButton style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', borderColor: '#374151' } : {}}>
-          <Modal.Title>{focusedInf.date ? focusedInf.date.toString() : 'Infringement'}</Modal.Title>
+          <span
+            style={{
+              ...(darkMode ? { color: '#f9fafb' } : {}),
+              fontSize: '1.5rem',
+              fontWeight: 500,
+              lineHeight: 1.5,
+            }}
+          >
+            {focusedInf.date ? focusedInf.date.toString() : 'Infringement'}
+          </span>
         </Modal.Header>
-        <Modal.Body style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}>
-          <div id="inf">
+        <Modal.Body
+          className={styles.infringementModalBody}
+          style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}
+        >
+          <div id="inf" className={styles.infringementDescriptions}>
             <table style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', width: '100%' } : { width: '100%' }}>
               <thead>
                 <tr style={darkMode ? { backgroundColor: '#1b2a41' } : {}}>
@@ -208,4 +220,4 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
   );
 }
 
-export default InfringementsViz;
+export default InfringementsViz;

src/components/Reports/PeopleReport/PeopleReport.jsx

@@ -555,7 +555,7 @@ class PeopleReport extends Component {
                       <PeopleDataTable />
                     </>
                   ) : (
-                    <Alert color="danger" style={{ margin: '0 35% ' }}>You have no tasks.</Alert>
+                    <Alert color="danger" className={styles.noTasksAlert}>You have no tasks.</Alert>
                   )}
                   <div className={`${styles.infringementContainer}`}>
                     <div className={`${styles.infringementContainerInner}`}>

src/components/Reports/PeopleReport/PeopleReport.module.css

@@ -169,6 +169,17 @@ body {
   margin-top: 20px;
 }
 
+.mobilePeopleTable {
+  width: 100%;
+}
+
+.noTasksAlert {
+  width: min(100%, 320px);
+  margin: 0 auto;
+  text-align: center;
+  white-space: normal;
+}
+
 .badgeSummaryPreviewDiv {
   padding-left: 1%;
 }
@@ -187,6 +198,32 @@ body {
   background-color: #f2f2f2;
 }
 
+.infringementModalDialog {
+  max-width: min(800px, calc(100vw - 2rem));
+}
+
+.infringementModalDialog :global(.modal-content) {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.infringementModalBody,
+.infringementDescriptions {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.infringementDescriptions table {
+  width: 100%;
+  min-width: 0;
+  table-layout: fixed;
+}
+
+.infringementDescriptions th,
+.infringementDescriptions td {
+  overflow-wrap: anywhere;
+}
+
 /* Table css starts */
 
 .introDate {
@@ -397,16 +434,18 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  min-width: 0;
 }
 
 .peopleReportRight {
   width: 23vw;
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  min-width: 0;
   margin-top: 2rem;
-  height: 140vh; 
-  overflow: hidden;
+  height: auto;
+  overflow: visible;
 }
 
 .peopleReportProfileWrapper {
@@ -426,6 +465,15 @@ body {
   box-shadow: 0 0 12px rgb(0 0 0 / 8%);
   height: 698px;
   margin-top: 2rem;
+  min-width: 0;
+}
+
+.reportStats p,
+.reportStats h4,
+.reportStats a {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: normal;
 }
 
 @media (width >= 1489px) and (width <= 1784px) {

src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css

@@ -29,6 +29,8 @@
 
 .people-report-pie-wrapper {
   height: 100% !important;
+  max-width: 100%;
+  min-width: 0;
 }
 
 @media (width >= 2000px) {
@@ -63,11 +65,12 @@
   align-items: center;
   gap: 2rem;
   width: 100%;
+  min-width: 0;
 }
 
 .pie-chart-wrapper {
   display: flex;
   align-items: center;
   gap: 2rem;
   width: 100%;
-}
+}

src/components/Reports/PeopleTableDetails.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import 'reactjs-popup/dist/index.css';
 import { Container } from 'reactstrap';
-import './PeopleTableDetails.module.css';
+import styles from './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
@@ -199,7 +199,7 @@ function PeopleTableDetails(props) {
                     key={`${outerIndex}-${innerIndex}`}
                     alt={resource.name}
                     src={resource.profilePic || '/pfp-default.png'}
-                    className="img-circle"
+                    className={styles['img-circle']}
                     title={resource.name}
                   />
                 );
@@ -218,7 +218,7 @@ function PeopleTableDetails(props) {
                   toggleMoreResources(value._id);
                 }}
               >
-                <span className="dot">{res.length - 2}+</span>
+                <span className={styles.dot}>{res.length - 2}+</span>
               </button>
             ) : null,
           )}
@@ -248,10 +248,10 @@ function PeopleTableDetails(props) {
           </div>
         </div>
 
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
         <div className="people-table-end-cell">{value.estimatedHours}</div>
@@ -272,9 +272,13 @@ function PeopleTableDetails(props) {
     </div>
   );
 
+  const containerClassName = darkMode
+    ? [styles.wrapper, styles['text-light'], 'text-light', styles.wrapperDark].join(' ')
+    : styles.wrapper;
+
   return (
-    <Container fluid className={`wrapper ${darkMode ? 'text-light' : ''}`}>
-      <div className="table-filter-container">
+    <Container fluid className={containerClassName}>
+      <div className={styles['table-filter-container']}>
         <TableFilter
           onTaskNameSearch={onTaskNameSearch}
           searchPriority={searchPriority}
@@ -297,8 +301,9 @@ function PeopleTableDetails(props) {
           UpdateStartDate={updateStartDate}
           EndDate={endDate}
           UpdateEndDate={updateEndDate}
+          darkMode={darkMode}
         />
-        <button type="button" onClick={resetFilters} className="tasks-table-clear-filter-button">
+        <button type="button" onClick={resetFilters} className={styles['tasks-table-clear-filter-button']}>
           Clear Filters
         </button>
       </div>