From 09a30886129d358fb2b7ceb58889c4d538e832f8 Mon Sep 17 00:00:00 2001
From: boppanapraveen <61085397+boppanapraveen@users.noreply.github.com>
Date: Wed, 12 Nov 2025 19:53:06 -0600
Subject: [PATCH 1/3] Fix: Implemented .css to .module.css PR Anlaytics
 Dashboard

---
 .../ReviewsInsight/ActionDoneGraph.jsx        |  8 ++++----
 .../ReviewsInsight/PRQualityGraph.jsx         | 10 +++++-----
 .../ReviewsInsight/ReviewsInsight.jsx         | 20 ++++++++++---------
 ...sInsight.css => ReviewsInsight.module.css} |  0
 4 files changed, 20 insertions(+), 18 deletions(-)
 rename src/components/PRAnalyticsDashboard/ReviewsInsight/{ReviewsInsight.css => ReviewsInsight.module.css} (100%)

diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
index 646a0d14c9..3ff81a0c6d 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
@@ -1,5 +1,5 @@
 import { Bar } from 'react-chartjs-2';
-import './ReviewsInsight.css';
+import styles from './ReviewsInsight.module.css';
 import { useSelector } from 'react-redux';
 
 function ActionDoneGraph({ selectedTeams, teamData }) {
@@ -10,7 +10,7 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
   }
 
   if (!teamData || Object.keys(teamData).length === 0) {
-    return <div className="no-data-ri">No data available for Action Done Graph.</div>;
+    return <div className={styles['no-data-ri']}>No data available for Action Done Graph.</div>;
   }
 
   const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -81,9 +81,9 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
   };
 
   return (
-    <div className="ri-action-done-graph">
+    <div className={styles['ri-action-done-graph']}>
       <h2>PR: Action Done</h2>
-      <div className="ri-graph">
+      <div className={styles['ri-graph']}>
         <Bar data={data} options={options} />
       </div>
     </div>
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
index 5726f606b1..46b420f3ce 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
@@ -1,5 +1,5 @@
 import { Pie } from 'react-chartjs-2';
-import './ReviewsInsight.css';
+import styles from './ReviewsInsight.module.css';
 import { useSelector } from 'react-redux';
 
 function PRQualityGraph({ selectedTeams, qualityData }) {
@@ -10,7 +10,7 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
   }
 
   if (!qualityData || Object.keys(qualityData).length === 0) {
-    return <div className="no-data-ri">No data available for Quality Graph.</div>;
+    return <div className={styles['no-data-ri']}>No data available for Quality Graph.</div>;
   }
 
   const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -57,11 +57,11 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
   };
 
   return (
-    <div className="ri-quality-graph">
+    <div className={styles['ri-quality-graph']}>
       <h2>PR Quality Distribution</h2>
-      <div className="ri-charts">
+      <div className={styles['ri-charts']}>
         {teamsToDisplay.map(team => (
-          <div key={team} className="ri-chart">
+          <div key={team} className={styles['ri-chart']}>
             <h3>{team}</h3>
             <Pie data={generateChartData(team)} options={options} />
           </div>
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
index f666462620..ef956f91ce 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Select from 'react-select';
-import './ReviewsInsight.css';
+import styles from './ReviewsInsight.module.css';
 import ActionDoneGraph from './ActionDoneGraph';
 import PRQualityGraph from './PRQualityGraph';
 import { fetchReviewsInsights } from '../../../actions/prAnalytics/reviewsInsightsAction';
@@ -93,11 +93,13 @@ function ReviewsInsight() {
   ];
 
   return (
-    <div className={`reviews-insight-container ${darkMode ? 'dark-mode' : ''}`}>
+    <div
+      className={`${styles['reviews-insight-container']} ${darkMode ? styles['dark-mode'] : ''}`}
+    >
       <h1>PR Reviews Insights</h1>
 
-      <div className="ri-filters">
-        <div className="ri-filter-item">
+      <div className={styles['ri-filters']}>
+        <div className={styles['ri-filter-item']}>
           <label htmlFor="ri-duration-filter">Duration:</label>
           <select id="ri-duration-filter" value={duration} onChange={handleDurationChange}>
             <option value="Last Week">Last Week</option>
@@ -107,7 +109,7 @@ function ReviewsInsight() {
           </select>
         </div>
 
-        <div className="ri-filter-item">
+        <div className={styles['ri-filter-item']}>
           <label htmlFor="team-filter">Team Code:</label>
           <Select
             id="team-filter"
@@ -175,7 +177,7 @@ function ReviewsInsight() {
         </div>
       </div>
 
-      <div className="ri-selected-teams">
+      <div className={styles['ri-selected-teams']}>
         {selectedTeams.length === 0 ? (
           <p>No teams selected</p>
         ) : selectedTeams.some(team => team.value === 'All') ? (
@@ -185,10 +187,10 @@ function ReviewsInsight() {
         )}
       </div>
 
-      {loading && <div className="ri-loading">Loading...</div>}
-      {error && <div className="ri-error">{error}</div>}
+      {loading && <div className={styles['ri-loading']}>Loading...</div>}
+      {error && <div className={styles['ri-error']}>{error}</div>}
       {!loading && !error && (
-        <div className="ri-graphs">
+        <div className={styles['ri-graphs']}>
           <ActionDoneGraph selectedTeams={selectedTeams} teamData={teamData} />
           <PRQualityGraph selectedTeams={selectedTeams} qualityData={qualityData} />
         </div>
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.css b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
similarity index 100%
rename from src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.css
rename to src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css

From b20287aec7e644143c89990d63642c91d617c556 Mon Sep 17 00:00:00 2001
From: boppanapraveen <61085397+boppanapraveen@users.noreply.github.com>
Date: Wed, 12 Nov 2025 20:10:46 -0600
Subject: [PATCH 2/3] Fix: Implemented .css to .module.css PR Anlaytics
 Dashboard-1

---
 .../ReviewsInsight/ReviewsInsight.module.css                 | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
index 0a2e36f8c7..eea8d8fad6 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
@@ -124,7 +124,6 @@
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 5px;
-  text-align: center;
   background-color: #ffffff;
   color: #000000;
   transition: background-color 0.3s, color 0.3s;
@@ -186,7 +185,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #888;
+  color: #666666;
   font-size: 14px;
 }
 
@@ -208,7 +207,7 @@
 .ri-loading {
   text-align: center;
   font-size: 18px;
-  color: #888;
+  color: #666666;
 }
 
 .ri-error {

From bd352f2a48fb6d1f16cefe62c950d852ff5ad2f2 Mon Sep 17 00:00:00 2001
From: boppanapraveen <61085397+boppanapraveen@users.noreply.github.com>
Date: Wed, 26 Nov 2025 02:03:54 -0600
Subject: [PATCH 3/3] fix: Resolved Merge Conflicts

---
 .../ReviewsInsight/ActionDoneGraph.jsx        |  22 +-
 .../ReviewsInsight/PRQualityGraph.jsx         |  61 +++--
 .../ReviewsInsight/ReviewsInsight.jsx         |  89 +++++--
 .../ReviewsInsight/ReviewsInsight.module.css  | 244 ++++++++++--------
 4 files changed, 264 insertions(+), 152 deletions(-)

diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
index 3ff81a0c6d..16613f7931 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ActionDoneGraph.jsx
@@ -1,16 +1,18 @@
 import { Bar } from 'react-chartjs-2';
 import styles from './ReviewsInsight.module.css';
 import { useSelector } from 'react-redux';
+import { Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 function ActionDoneGraph({ selectedTeams, teamData }) {
   const darkMode = useSelector(state => state.theme.darkMode);
 
   if (!selectedTeams || selectedTeams.length === 0) {
-    return <div> </div>;
+    return <div></div>;
   }
 
   if (!teamData || Object.keys(teamData).length === 0) {
-    return <div className={styles['no-data-ri']}>No data available for Action Done Graph.</div>;
+    return <div className={styles.noData}>No data available for Action Graph.</div>;
   }
 
   const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -54,6 +56,14 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
       tooltip: {
         enabled: true,
       },
+      datalabels: {
+        color: darkMode ? '#fff' : '#000',
+        font: { weight: 'bold', size: 11 },
+        formatter: value => {
+          if (!value) return 0;
+          return value;
+        },
+      },
     },
     scales: {
       x: {
@@ -81,9 +91,11 @@ function ActionDoneGraph({ selectedTeams, teamData }) {
   };
 
   return (
-    <div className={styles['ri-action-done-graph']}>
-      <h2>PR: Action Done</h2>
-      <div className={styles['ri-graph']}>
+    <div className={styles.riActionDoneGraph}>
+      <h2 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
+        PR: Action Done
+      </h2>
+      <div className={`${styles.riGraph} ${darkMode ? styles.riGraphDarkMode : ''}`}>
         <Bar data={data} options={options} />
       </div>
     </div>
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
index 46b420f3ce..31d84af489 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/PRQualityGraph.jsx
@@ -1,8 +1,12 @@
 import { Pie } from 'react-chartjs-2';
 import styles from './ReviewsInsight.module.css';
 import { useSelector } from 'react-redux';
+import { Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-function PRQualityGraph({ selectedTeams, qualityData }) {
+Chart.register(ChartDataLabels);
+
+function PRQualityGraph({ selectedTeams, qualityData, isDataViewActive }) {
   const darkMode = useSelector(state => state.theme.darkMode);
 
   if (!selectedTeams || selectedTeams.length === 0) {
@@ -10,7 +14,7 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
   }
 
   if (!qualityData || Object.keys(qualityData).length === 0) {
-    return <div className={styles['no-data-ri']}>No data available for Quality Graph.</div>;
+    return <div className={styles.noData}>No data available for Quality Graph.</div>;
   }
 
   const isAllTeams = selectedTeams.some(team => team.value === 'All');
@@ -20,17 +24,23 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
 
   const generateChartData = team => {
     const teamQualityData = qualityData[team] || {};
+
+    const counts = [
+      teamQualityData.NotApproved || 0,
+      teamQualityData.LowQuality || 0,
+      teamQualityData.Sufficient || 0,
+      teamQualityData.Exceptional || 0,
+    ];
+
+    const total = counts.reduce((sum, v) => sum + v, 0);
+    const values = isDataViewActive ? counts.map(v => (total ? (v / total) * 100 : 0)) : counts;
+
     return {
       labels: ['Not Approved', 'Low Quality', 'Sufficient', 'Exceptional'],
       datasets: [
         {
           label: `PR Quality Distribution for ${team}`,
-          data: [
-            teamQualityData.NotApproved || 0,
-            teamQualityData.LowQuality || 0,
-            teamQualityData.Sufficient || 0,
-            teamQualityData.Exceptional || 0,
-          ],
+          data: values,
           backgroundColor: ['#DC3545', '#FFC107', '#28A745', '#5940CB'],
           hoverOffset: 4,
         },
@@ -40,29 +50,46 @@ function PRQualityGraph({ selectedTeams, qualityData }) {
 
   const options = {
     responsive: true,
+    interaction: {
+      mode: 'dataset',
+    },
     plugins: {
       legend: {
         position: 'bottom',
         labels: {
-          font: {
-            size: 12,
-          },
-          color: !darkMode ? '#333' : '#fff',
+          font: { size: 12 },
+          color: darkMode ? '#fff' : '#333',
         },
       },
       tooltip: {
         enabled: true,
+        callbacks: {
+          label: ctx => (isDataViewActive ? `${ctx.raw.toFixed(1)}%` : ctx.raw),
+        },
+      },
+      datalabels: {
+        color: darkMode ? '#fff' : '#000',
+        font: { weight: 'bold', size: 11 },
+        formatter: value => {
+          if (!value) return '';
+          return isDataViewActive ? `${value}%` : value;
+        },
       },
     },
   };
 
   return (
-    <div className={styles['ri-quality-graph']}>
-      <h2>PR Quality Distribution</h2>
-      <div className={styles['ri-charts']}>
+    <div className={styles.riQualityGraph}>
+      <h2 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
+        PR Quality Distribution
+      </h2>
+
+      <div className={`${styles.riCharts}`}>
         {teamsToDisplay.map(team => (
-          <div key={team} className={styles['ri-chart']}>
-            <h3>{team}</h3>
+          <div key={team} className={`${styles.riChart} ${darkMode ? styles.riChartDarkMode : ''}`}>
+            <h3 className={`${styles.heading} ${darkMode ? styles.darkModeForeground : ''}`}>
+              {team}
+            </h3>
             <Pie data={generateChartData(team)} options={options} />
           </div>
         ))}
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
index ef956f91ce..b0f11b1b54 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.jsx
@@ -9,9 +9,10 @@ import { getAllTeamCode } from '../../../actions/allTeamsAction';
 
 function ReviewsInsight() {
   const [duration, setDuration] = useState('Last Week');
-  const [selectedTeams, setSelectedTeams] = useState([]);
+  const [selectedTeams, setSelectedTeams] = useState([{ value: 'All', label: 'All Teams' }]);
   const [teamData, setTeamData] = useState({});
   const [qualityData, setQualityData] = useState({});
+  const [dataViewActive, setDataViewActive] = useState(false);
   const dispatch = useDispatch();
 
   const { loading, data, error } = useSelector(state => state.reviewsInsights);
@@ -72,6 +73,7 @@ function ReviewsInsight() {
             qualityDistribution.find(quality => quality.qualityLevel === 'Sufficient')?.count || 0,
           Exceptional:
             qualityDistribution.find(quality => quality.qualityLevel === 'Exceptional')?.count || 0,
+          memberCount: team.memberCount,
         };
       });
       setTeamData(formattedTeamData);
@@ -94,14 +96,28 @@ function ReviewsInsight() {
 
   return (
     <div
-      className={`${styles['reviews-insight-container']} ${darkMode ? styles['dark-mode'] : ''}`}
+      className={`${styles.reviewsInsightContainer} ${darkMode ? styles.darkModeForeground : ''} ${
+        darkMode ? styles.darkModeBackground : ''
+      }`}
     >
-      <h1>PR Reviews Insights</h1>
+      <h1 className={darkMode ? styles.darkModeForeground : styles.heading}>PR Reviews Insights</h1>
 
-      <div className={styles['ri-filters']}>
-        <div className={styles['ri-filter-item']}>
-          <label htmlFor="ri-duration-filter">Duration:</label>
-          <select id="ri-duration-filter" value={duration} onChange={handleDurationChange}>
+      <div className={`${styles.riFilters} ${darkMode ? styles.darkModeForeground : ''}`}>
+        <div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
+          <label
+            htmlFor="ri-duration-filter"
+            className={`${styles.riFilterItemLabel} ${darkMode ? styles.darkModeForeground : ''}`}
+          >
+            Duration:
+          </label>
+          <select
+            id="ri-duration-filter"
+            value={duration}
+            onChange={handleDurationChange}
+            className={`${styles.riDurationFilter} ${
+              darkMode ? styles.riDurationFilterDarkMode : ''
+            }`}
+          >
             <option value="Last Week">Last Week</option>
             <option value="Last 2 weeks">Last 2 weeks</option>
             <option value="Last Month">Last Month</option>
@@ -109,8 +125,13 @@ function ReviewsInsight() {
           </select>
         </div>
 
-        <div className={styles['ri-filter-item']}>
-          <label htmlFor="team-filter">Team Code:</label>
+        <div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
+          <label
+            htmlFor="team-filter"
+            className={`${styles.riFilterItemLabel} ${darkMode ? styles.darkModeForeground : ''}`}
+          >
+            Team Code:
+          </label>
           <Select
             id="team-filter"
             isMulti
@@ -175,24 +196,58 @@ function ReviewsInsight() {
             }}
           />
         </div>
+
+        <div className={`${styles.riFilterItem} ${darkMode ? styles.darkModeForeground : ''}`}>
+          <span className={styles.riDataviewTitle}>Data View</span>
+          <div className={styles.riToggleWrap}>
+            <label className={styles.riSwitch}>
+              <input
+                type="checkbox"
+                checked={dataViewActive}
+                onChange={() => setDataViewActive(v => !v)}
+                aria-label="Toggle data view: Percent vs Number"
+                className={styles.riSwitchInput}
+              />
+              <span className={`${styles.riSlider} ${darkMode ? styles.riSliderDarkMode : ''}`} />
+            </label>
+
+            <span className={`${styles.modeLabel} ${darkMode ? styles.darkModeForeground : ''}`}>
+              {dataViewActive ? 'PERCENT' : 'NUMBER'}
+            </span>
+          </div>
+        </div>
       </div>
 
-      <div className={styles['ri-selected-teams']}>
+      <div>
         {selectedTeams.length === 0 ? (
-          <p>No teams selected</p>
+          <p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
+            No teams selected
+          </p>
         ) : selectedTeams.some(team => team.value === 'All') ? (
-          <p>Selected Teams: All Teams</p>
+          <p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
+            Selected Teams: All Teams
+          </p>
         ) : (
-          <p>Selected Teams: {selectedTeams.map(team => team.label).join(', ')}</p>
+          <p className={`${styles.riSelectedTeams} ${darkMode ? styles.darkModeForeground : ''}`}>
+            Selected Teams: {selectedTeams.map(team => team.label).join(', ')}
+          </p>
         )}
       </div>
 
-      {loading && <div className={styles['ri-loading']}>Loading...</div>}
-      {error && <div className={styles['ri-error']}>{error}</div>}
+      {loading && (
+        <div className={`${styles.riLoading} ${darkMode ? styles.darkModeForeground : ''}`}>
+          Loading...
+        </div>
+      )}
+      {error && <div className={`${styles.riError}`}>{error}</div>}
       {!loading && !error && (
-        <div className={styles['ri-graphs']}>
+        <div className={`${styles.riGraphs} ${darkMode ? styles.darkModeForeground : ''}`}>
           <ActionDoneGraph selectedTeams={selectedTeams} teamData={teamData} />
-          <PRQualityGraph selectedTeams={selectedTeams} qualityData={qualityData} />
+          <PRQualityGraph
+            selectedTeams={selectedTeams}
+            qualityData={qualityData}
+            isDataViewActive={dataViewActive}
+          />
         </div>
       )}
     </div>
diff --git a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
index eea8d8fad6..51af3510f9 100644
--- a/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
+++ b/src/components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight.module.css
@@ -1,5 +1,5 @@
-.reviews-insight-container {
-  padding: 20px;
+.reviewsInsightContainer {
+  padding: 20px 20px 60px;
   font-family: Arial, sans-serif;
   background-color: #ffffff;
   color: #000000;
@@ -7,118 +7,155 @@
   transition: background-color 0.3s, color 0.3s;
 }
 
-.reviews-insight-container h1 {
- color: #000000;
-}
-.dark-mode h1 {
-  color: #f1f1f1;
+.heading {
+  color: #000000;
+  text-align: center;
 }
 
-.reviews-insight-container.dark-mode {
-  background-color: #1b2a41;
+.darkModeForeground {
   color: #f1f1f1;
 }
 
-@media screen and (max-width: 1080px) {
-  .ri-graphs {
-    flex-direction: column;
-    gap: 5px;
-  }
-
-  .ri-action-done-graph{
-    width: 100% !important;
-    height: 500px;
-  }
-
-  .ri-quality-graph {
-    width: 100% !important;
-  }
-
-  .ri-graph{
-    min-height: 300px;
-  }
+.darkModeBackground{
+  background-color: #1b2a41;
 }
 
-.ri-filters {
+.riFilters {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+  padding: 10px;
 }
 
-.dark-mode .ri-filters {
-  background-color: #1c2541;
-  color: #f1f1f1;
-  box-shadow: 2px 2px 4px 1px black;
-  padding: 10px;
-  border-radius: 8px;
+.riGraphs {
+  display: flex;
+  justify-content: space-around;
 }
 
-.ri-filter-item {
+.riFilterItem {
   display: flex;
   flex-direction: column;
-  margin-right: 20px;
+  padding: 10px 25px;
+  min-width: 23ch;
 }
 
-.dark-mode #ri-duration-filter {
+.riDurationFilter {
+  min-height: 40px;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding: 2px 8px;
+  box-sizing: border-box;
+  box-shadow: 2px 2px 4px 1px black;
+}
+
+.riDurationFilterDarkMode{
   background-color: #1c2541;
   box-shadow: 2px 2px 4px 1px black;
   border: none;
   color: #f1f1f1;
 }
 
-.ri-filter-item label {
+.riFilterItemLabel {
   margin-bottom: 5px;
   font-weight: bold;
 }
 
-.dark-mode .ri-filter-item label {
-  color: #f1f1f1;
-}
-
-.ri-selected-teams p{
-  margin-bottom: 20px;
+.riSelectedTeams {
+  margin: 20px 0 40px;
   font-style: italic;
   text-align: center;
   font-size: 24px;
 }
 
-.no-data-ri {
-  text-align: center;
-  font-size: 18px;
-  margin-top: 20px;
+.riToggleWrap {
+  display: inline-flex;
+  gap: 13px;
+  white-space: nowrap;
 }
 
-.dark-mode .ri-selected-teams p {
-  color: #f1f1f1;
+.riDataviewTitle {
+  font-weight: 600;
+  font-size: 16px;
+  margin-right: 4px;
 }
 
-.ri-graphs {
-  display: flex;
-  justify-content: space-around;
+.riSwitch {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  width: 42px;
+  height: 24px;
 }
 
-.ri-quality-graph {
-  width: 50%;
-  display: flex;
-  flex-direction: column;
+.riSwitchInput {
+  opacity: 1;
+  width: 0;
+  height: 0;
 }
 
-.ri-quality-graph h2 {
-  color: #000000;
+.riSwitch input:checked + .riSlider::before {
+  transform: translateX(18px);
 }
 
-.dark-mode .ri-quality-graph h2 {
-  color: #f1f1f1;
+.riSlider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: #1c1c1c;
+  border-radius: 999px;
+  transition: background 0.2s ease;
+}
+
+.riSlider::before {
+  content: '';
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  top: 2px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.riModeLabel {
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: #4a4a4a;
+}
+
+.riSliderDarkMode{
+  background: #e6e6e6;
 }
 
-.ri-charts {
+.riSliderDarkMode::before{
+  background: #1c2541;
+}
+
+.noData {
+  text-align: center;
+  font-size: 18px;
+  margin-top: 20px;
+}
+
+.riQualityGraph {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+
+.riCharts {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: space-evenly;
 }
 
-.ri-chart {
+.riChart {
   width: 250px;
   text-align: center;
   border: 1px solid #ccc;
@@ -129,35 +166,20 @@
   transition: background-color 0.3s, color 0.3s;
 }
 
-.dark-mode .ri-chart {
+.riChartDarkMode{
   background-color: #1c2541;
   color: #f1f1f1;
   box-shadow: 2px 2px 4px 1px black;
   border: none;
 }
 
-.ri-chart h3 {
-  color: #000000;
-}
-
-.dark-mode .ri-chart h3 {
-  color: #f1f1f1;
-}
-
-.ri-action-done-graph {
+.riActionDoneGraph {
   width: 50%;
   display: flex;
   flex-direction: column;
 }
 
-.ri-action-done-graph h2 {
-  color: #000000;
-}
-.dark-mode .ri-action-done-graph h2 {
-  color: #f1f1f1;
-}
-
-.ri-graph {
+.riGraph {
   border: 1px solid #ccc;
   padding: 10px;
   height: 100%;
@@ -168,50 +190,46 @@
   transition: background-color 0.3s, color 0.3s;
 }
 
-.dark-mode .ri-graph {
+.riGraphDarkMode{
   background-color: #1c2541;
   color: #f1f1f1;
   box-shadow: 2px 2px 4px 1px black;
   border: none;
 }
 
-.ri-graph canvas{
-  height: auto !important;
-}
-
-.ri-graph-placeholder {
-  height: 300px;
-  background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #666666;
-  font-size: 14px;
+.riGraph canvas {
+  height: 100% !important;
 }
 
-.dark-mode .ri-graph-placeholder {
-  background-color: #1c1c1c;
-  color: #f1f1f1;
-}
-
-.ri-team-name {
-  font-weight: bold;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.dark-mode .ri-team-name {
-  color: #f1f1f1;
-}
-
-.ri-loading {
+.riLoading {
   text-align: center;
   font-size: 18px;
-  color: #666666;
+  color: #888;
 }
 
-.ri-error {
+.riError {
   text-align: center;
   color: #dc3545;
   font-weight: bold;
 }
+
+
+@media screen and (max-width: 1080px) {
+  .riGraphs {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .riActionDoneGraph {
+    width: 100% !important;
+    height: 500px;
+  }
+
+  .riQualityGraph {
+    width: 100% !important;
+  }
+
+  .riGraph {
+    min-height: 300px;
+  }
+}
\ No newline at end of file