From b6db98b302b1254aee241ef71d80104b6408acee Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Tue, 4 Nov 2025 11:26:38 +0100
Subject: [PATCH] make DateRangeSection code more generic, add title checkbox
 for langs card

---
 .../src/components/Home/DateRangeSection.js   | 21 ++++++++-----------
 .../src/pages/Home/stages/Customize.js        |  7 +++----
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/frontend/frontend/src/components/Home/DateRangeSection.js b/frontend/frontend/src/components/Home/DateRangeSection.js
index 79ab0911..917d3a1e 100644
--- a/frontend/frontend/src/components/Home/DateRangeSection.js
+++ b/frontend/frontend/src/components/Home/DateRangeSection.js
@@ -5,12 +5,10 @@ import Section from './Section';
 import { Input } from '../Generic';
 
 const DateRangeSection = ({
-  selectedTimeRange,
-  setSelectedTimeRange,
-  // eslint-disable-next-line no-unused-vars
-  privateAccess,
+  selectedOption,
+  setSelectedOption,
 }) => {
-  const timeRangeOptions = [
+  const options = [
     { id: 1, label: 'Past 1 Month', disabled: false, value: 'one_month' },
     {
       id: 2,
@@ -20,27 +18,26 @@ const DateRangeSection = ({
     },
     { id: 2, label: 'Past 6 Months', disabled: false, value: 'six_months' },
     { id: 3, label: 'Past 1 Year', disabled: false, value: 'one_year' },
-    // { id: 4, label: 'All Time', disabled: !privateAccess, value: 'all_time' },
     { id: 4, label: 'All Time', disabled: true, value: 'all_time' },
   ];
 
-  const selectedOption = selectedTimeRange || timeRangeOptions[2];
+  const defaultOption = 2;
 
   return (
     <Section title="Date Range">
       <p>Select the date range for statistics.</p>
       <Input
-        options={timeRangeOptions}
-        selectedOption={selectedOption}
-        setSelectedOption={setSelectedTimeRange}
+        options={options}
+        selectedOption={selectedOption || options[defaultOption]}
+        setSelectedOption={setSelectedOption}
       />
     </Section>
   );
 };
 
 DateRangeSection.propTypes = {
-  selectedTimeRange: PropTypes.object.isRequired,
-  setSelectedTimeRange: PropTypes.func.isRequired,
+  selectedOption: PropTypes.object.isRequired,
+  setSelectedOption: PropTypes.func.isRequired,
   privateAccess: PropTypes.bool.isRequired,
 };
 
diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js
index 7ab27c28..a884db5e 100644
--- a/frontend/frontend/src/pages/Home/stages/Customize.js
+++ b/frontend/frontend/src/pages/Home/stages/Customize.js
@@ -37,7 +37,7 @@ const CustomizeStage = ({
   return (
     <div className="w-full flex flex-wrap">
       <div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
-        {cardType === CardTypes.STATS && (
+        {(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && (
           <CheckboxSection
             title="Show Title?"
             text="Shows a title at the top of the card."
@@ -66,9 +66,8 @@ const CustomizeStage = ({
           />
         )}
         <DateRangeSection
-          selectedTimeRange={selectedTimeRange}
-          setSelectedTimeRange={setSelectedTimeRange}
-          privateAccess={privateAccess}
+          selectedOption={selectedTimeRange}
+          setSelectedOption={setSelectedTimeRange}
         />
         {cardType === CardTypes.TOP_LANGS && (
           <CheckboxSection