added price range filtering on courses

src/modules/courses/ui/components/CourseFilter.tsx

@@ -28,6 +28,8 @@ interface FilterValues {
   dateTo: string;
   timeFrom: string;
   timeTo: string;
+  priceMin: number;
+  priceMax: number;
 }
 
 interface CourseFilterProps {
@@ -42,6 +44,10 @@ interface CourseFilterProps {
   dateTo: string;
   timeFrom: string;
   timeTo: string;
+  priceMin: number;
+  priceMax: number;
+  priceRangeMin: number;
+  priceRangeMax: number;
   uniqueSports: string[];
   uniqueTrainers: string[];
   uniqueRooms: string[];
@@ -63,6 +69,10 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
   dateTo,
   timeFrom,
   timeTo,
+  priceMin,
+  priceMax,
+  priceRangeMin,
+  priceRangeMax,
   uniqueSports,
   uniqueTrainers,
   uniqueRooms,
@@ -78,7 +88,8 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
   const [localDateTo, setLocalDateTo] = useState(dateTo);
   const [localTimeFrom, setLocalTimeFrom] = useState(timeFrom);
   const [localTimeTo, setLocalTimeTo] = useState(timeTo);
-  const [priceValue, setPriceValue] = useState([0, 50]);
+  const [localPriceMin, setLocalPriceMin] = useState(priceMin);
+  const [localPriceMax, setLocalPriceMax] = useState(priceMax);
   const [isOpen, setIsOpen] = useState(false);
 
   // Sync local state when sheet opens
@@ -92,6 +103,8 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
       setLocalDateTo(dateTo);
       setLocalTimeFrom(timeFrom);
       setLocalTimeTo(timeTo);
+      setLocalPriceMin(priceMin);
+      setLocalPriceMax(priceMax);
     }
     setIsOpen(open);
   };
@@ -104,7 +117,9 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
     !!dateFrom ||
     !!dateTo ||
     !!timeFrom ||
-    !!timeTo;
+    !!timeTo ||
+    priceMin !== priceRangeMin ||
+    priceMax !== priceRangeMax;
 
   const handleApplyFilters = () => {
     onApplyFilters({
@@ -116,6 +131,8 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
       dateTo: localDateTo,
       timeFrom: localTimeFrom,
       timeTo: localTimeTo,
+      priceMin: localPriceMin,
+      priceMax: localPriceMax,
     });
   };
 
@@ -128,6 +145,8 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
     setLocalDateTo("");
     setLocalTimeFrom("");
     setLocalTimeTo("");
+    setLocalPriceMin(priceRangeMin);
+    setLocalPriceMax(priceRangeMax);
     onReset();
   };
 
@@ -213,19 +232,23 @@ const CourseFilter: React.FC<CourseFilterProps> = ({
             </select>
           </div>
 
-          {/* TODO: Price */}
+          {/* Price */}
           <div className="space-y-1">
             <label className="font-medium">Preis</label>
             <Slider
               className="mt-1"
-              value={priceValue}
+              value={[localPriceMin, localPriceMax]}
-              onValueChange={setPriceValue}
+              onValueChange={([min, max]) => {
-              max={50}
+                setLocalPriceMin(min);
+                setLocalPriceMax(max);
+              }}
+              min={priceRangeMin}
+              max={priceRangeMax}
               step={1}
             />
             <div className="flex justify-between mt-2">
-              <span>{priceValue[0]}€</span>
+              <span>{localPriceMin}€</span>
-              <span>{priceValue[1]}€</span>
+              <span>{localPriceMax}€</span>
             </div>
           </div>
 

src/modules/courses/ui/views/course-list-view.tsx

@@ -46,6 +46,8 @@ const CourseListView = () => {
   const [dateTo, setDateTo] = useState("");
   const [timeFrom, setTimeFrom] = useState("");
   const [timeTo, setTimeTo] = useState("");
+  const [priceMin, setPriceMin] = useState<number | null>(null);
+  const [priceMax, setPriceMax] = useState<number | null>(null);
   const [deleteMode, setDeleteMode] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [courseToDelete, setCourseToDelete] = useState<{ id: string; name: string } | null>(null);
@@ -314,6 +316,10 @@ const CourseListView = () => {
     if (timeFrom && course.timeFrom < timeFrom) return false;
     if (timeTo && course.timeTo > timeTo) return false;
 
+    // Price range filter
+    if (priceMin !== null && course.price < priceMin) return false;
+    if (priceMax !== null && course.price > priceMax) return false;
+
     return true;
   });
 
@@ -338,6 +344,12 @@ const CourseListView = () => {
     );
   });
 
+  // Calculate price range from courses
+  const priceRangeMin =
+    courses.length > 0 ? Math.floor(Math.min(...courses.map((c) => c.price))) : 0;
+  const priceRangeMax =
+    courses.length > 0 ? Math.ceil(Math.max(...courses.map((c) => c.price))) : 0;
+
   // Get unique sports for filter
   const uniqueSports = Array.from(new Set(courses.map((c) => c.sport)));
 
@@ -365,6 +377,8 @@ const CourseListView = () => {
     !!dateTo,
     !!timeFrom,
     !!timeTo,
+    priceMin !== null && priceMin !== priceRangeMin,
+    priceMax !== null && priceMax !== priceRangeMax,
   ].filter(Boolean).length;
 
   return (
@@ -380,6 +394,10 @@ const CourseListView = () => {
             dateTo={dateTo}
             timeFrom={timeFrom}
             timeTo={timeTo}
+            priceMin={priceMin ?? priceRangeMin}
+            priceMax={priceMax ?? priceRangeMax}
+            priceRangeMin={priceRangeMin}
+            priceRangeMax={priceRangeMax}
             uniqueSports={uniqueSports}
             uniqueTrainers={uniqueTrainers}
             uniqueRooms={uniqueRooms}
@@ -392,6 +410,8 @@ const CourseListView = () => {
               setDateTo(filters.dateTo);
               setTimeFrom(filters.timeFrom);
               setTimeTo(filters.timeTo);
+              setPriceMin(filters.priceMin === priceRangeMin ? null : filters.priceMin);
+              setPriceMax(filters.priceMax === priceRangeMax ? null : filters.priceMax);
             }}
             onReset={() => {
               setFilterStatus("all");
@@ -402,6 +422,8 @@ const CourseListView = () => {
               setDateTo("");
               setTimeFrom("");
               setTimeTo("");
+              setPriceMin(null);
+              setPriceMax(null);
             }}
           >
             <Button variant="outline" className="flex items-center gap-2 relative">