3001 bug planned years months have not values (#3015)

* fix: show all months in the month select

* show all years with plan +5 future years

apps/web/lib/features/daily-plan/all-plans-modal.tsx

@@ -31,7 +31,7 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 	const [showCalendar, setShowCalendar] = useState(false);
 	const [showCustomPlan, setShowCustomPlan] = useState(false);
 	const [customDate, setCustomDate] = useState<Date>();
-	const { futurePlans, myDailyPlans } = useDailyPlan();
+	const { myDailyPlans } = useDailyPlan();
 
 	// Utility function for checking if two dates are the same
 	const isSameDate = useCallback(
@@ -140,9 +140,9 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 										<p className=" text-sm font-medium">Select a date to be able to see a plan</p>
 										<div className="p-3 border flex  items-center  justify-center rounded-md">
 											<FuturePlansCalendar
-												futurePlans={futurePlans}
-												selectedFuturePlan={customDate}
-												setSelectedFuturePlan={setCustomDate}
+												selectedPlan={customDate}
+												setSelectedPlan={setCustomDate}
+												plans={myDailyPlans.items}
 											/>
 										</div>
 									</div>
@@ -200,31 +200,34 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
  */
 
 interface ICalendarProps {
-	setSelectedFuturePlan: Dispatch<SetStateAction<Date | undefined>>;
-	selectedFuturePlan: Date | undefined;
-	futurePlans: IDailyPlan[];
+	setSelectedPlan: Dispatch<SetStateAction<Date | undefined>>;
+	selectedPlan: Date | undefined;
+	plans: IDailyPlan[];
 }
 
 /**
- * The component tha handles the selection of a future plan
+ * The component that handles the selection of a plan
  *
  * @param {Object} props - The props object
  * @param {Dispatch<SetStateAction<IDailyPlan>>} props.setSelectedFuturePlan - A function that set the selected plan
  * @param {IDailyPlan} props.selectedFuturePlan - The selected plan
+ * @param {IDailyPlan[]} props.plans - Available plans
+ *
+ * @returns {JSX.Element} The Calendar component.
  */
 const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarProps) {
-	const { futurePlans, selectedFuturePlan, setSelectedFuturePlan } = props;
+	const { selectedPlan, setSelectedPlan, plans } = props;
 
-	const sortedFuturePlans = useMemo(
+	const sortedPlans = useMemo(
 		() =>
-			futurePlans
+			plans
 				.filter(
 					(plan) =>
 						new Date(plan.date).toLocaleDateString('en') !==
 						new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
 				)
 				.sort((plan1, plan2) => (new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1)),
-		[futurePlans]
+		[plans]
 	);
 
 	/**
@@ -236,8 +239,7 @@ const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarPr
 	 */
 	const isDateUnplanned = useCallback(
 		(dateToCheck: Date) => {
-			return !futurePlans
-				// Start from the day after tomorrow (Tomorrow has a tab)
+			return !plans
 				.filter(
 					(plan) =>
 						new Date(plan.date).toLocaleDateString('en') !==
@@ -248,34 +250,32 @@ const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarPr
 					(date) => new Date(date).toLocaleDateString('en') == new Date(dateToCheck).toLocaleDateString('en')
 				);
 		},
-		[futurePlans]
+		[plans]
 	);
 
 	return (
 		<Calendar
 			mode="single"
 			captionLayout="dropdown"
-			selected={selectedFuturePlan ? new Date(selectedFuturePlan) : undefined}
+			selected={selectedPlan ? new Date(selectedPlan) : undefined}
 			onSelect={(date) => {
 				if (date) {
-					setSelectedFuturePlan(date);
+					setSelectedPlan(date);
 				}
 			}}
 			initialFocus
 			disabled={isDateUnplanned}
 			modifiers={{
-				booked: sortedFuturePlans?.map((plan) => new Date(plan.date))
+				booked: sortedPlans?.map((plan) => new Date(plan.date))
 			}}
 			modifiersClassNames={{
 				booked: clsxm(
 					'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full'
 				),
 				selected: clsxm('bg-primary text-white !rounded-full')
 			}}
-			fromMonth={new Date(sortedFuturePlans?.[0]?.date ?? Date.now())}
-			toMonth={new Date(sortedFuturePlans?.[sortedFuturePlans?.length - 1]?.date ?? Date.now())}
-			fromYear={new Date(sortedFuturePlans?.[0]?.date ?? Date.now())?.getFullYear()}
-			toYear={new Date(sortedFuturePlans?.[sortedFuturePlans?.length - 1]?.date ?? Date.now())?.getFullYear()}
+			fromYear={new Date(sortedPlans?.[0]?.date ?? Date.now())?.getFullYear()}
+			toYear={new Date(sortedPlans?.[sortedPlans?.length - 1]?.date ?? Date.now())?.getFullYear() + 5}
 		/>
 	);
 });