rajpreet/Kuma
1
0
Fork 0
mirror of https://github.com/Since-3/Kuma.git synced 2026-10-12 21:41:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

changed ui and added new filters for courses

Browse source
This commit is contained in:
Rajpreet0 2026-01-11 16:42:13 +01:00
parent 99a4c96cf0
commit 11cac4ca48
7 changed files with 697 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

225
package-lock.json generated
View file

@ -9,11 +9,13 @@
"version": "0.1.0",
"dependencies": {
"@prisma/client": "^6.19.0",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tooltip": "^1.2.8",
"@supabase/ssr": "^0.7.0",
@ -2784,12 +2786,90 @@
"@prisma/debug": "6.19.0"
}
},
"node_modules/@radix-ui/number": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
"license": "MIT"
},
"node_modules/@radix-ui/primitive": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
"license": "MIT"
},
"node_modules/@radix-ui/react-accordion": {
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-collapsible": "1.1.12",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-direction": "1.1.1",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-primitive": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-arrow": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@ -2925,6 +3005,77 @@
}
}
},
"node_modules/@radix-ui/react-collapsible": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
"integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-use-layout-effect": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@ -3735,6 +3886,80 @@
}
}
},
"node_modules/@radix-ui/react-slider": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
"integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
"license": "MIT",
"dependencies": {
"@radix-ui/number": "1.1.1",
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-collection": "1.1.7",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-direction": "1.1.1",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-use-layout-effect": "1.1.1",
"@radix-ui/react-use-previous": "1.1.1",
"@radix-ui/react-use-size": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-primitive": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-slot": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",

2
package.json
View file

@ -14,11 +14,13 @@
},
"dependencies": {
"@prisma/client": "^6.19.0",
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tooltip": "^1.2.8",
"@supabase/ssr": "^0.7.0",

66
src/components/ui/accordion.tsx Normal file
View file

@ -0,0 +1,66 @@
"use client"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/src/lib/utils"
function Accordion({
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}
function AccordionItem({
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("border-b last:border-b-0", className)}
{...props}
/>
)
}
function AccordionTrigger({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
}
function AccordionContent({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden"
{...props}
>
<div className={cn("pt-0 pb-4", className)}>{children}</div>
</AccordionPrimitive.Content>
)
}
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

2
src/components/ui/sheet.tsx
View file

@ -58,7 +58,7 @@ function SheetContent({
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&

63
src/components/ui/slider.tsx Normal file
View file

@ -0,0 +1,63 @@
"use client"
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"
import { cn } from "@/src/lib/utils"
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max],
[value, defaultValue, min, max]
)
return (
<SliderPrimitive.Root
data-slot="slider"
defaultValue={defaultValue}
value={value}
min={min}
max={max}
className={cn(
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
className
)}
{...props}
>
<SliderPrimitive.Track
data-slot="slider-track"
className={cn(
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
)}
>
<SliderPrimitive.Range
data-slot="slider-range"
className={cn(
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)}
/>
</SliderPrimitive.Track>
{Array.from({ length: _values.length }, (_, index) => (
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>
)
}
export { Slider }

265
src/modules/courses/ui/components/CourseFilter.tsx Normal file
View file

@ -0,0 +1,265 @@
import { Button } from "@/src/components/ui/button";
import {
Sheet,
SheetClose,
SheetContent,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/src/components/ui/sheet";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/src/components/ui/accordion";
import { Slider } from "@/src/components/ui/slider";
import React, { useState } from "react";
type FilterStatus = "all" | "draft" | "published";
interface CourseFilterProps {
children: React.ReactNode;
// values
filterStatus: FilterStatus;
filterSport: string;
filterTrainer: string;
filterRoom: string;
dateFrom: string;
dateTo: string;
timeFrom: string;
timeTo: string;
uniqueSports: string[];
uniqueTrainers: string[];
uniqueRooms: string[];
// setters
setFilterStatus: (v: FilterStatus) => void;
setFilterSport: (v: string) => void;
setFilterTrainer: (v: string) => void;
setFilterRoom: (v: string) => void;
setDateFrom: (v: string) => void;
setDateTo: (v: string) => void;
setTimeFrom: (v: string) => void;
setTimeTo: (v: string) => void;
// actions
onReset: () => void;
}
const CourseFilter: React.FC<CourseFilterProps> = ({
children,
filterStatus,
filterSport,
filterTrainer,
filterRoom,
dateFrom,
dateTo,
timeFrom,
timeTo,
uniqueSports,
uniqueTrainers,
uniqueRooms,
setFilterStatus,
setFilterSport,
setFilterTrainer,
setFilterRoom,
setDateFrom,
setDateTo,
setTimeFrom,
setTimeTo,
onReset,
}) => {
const hasActiveFilters =
filterStatus !== "all" ||
filterSport !== "all" ||
filterTrainer !== "all" ||
filterRoom !== "all" ||
!!dateFrom ||
!!dateTo ||
!!timeFrom ||
!!timeTo;
const [priceValue, setPriceValue] = useState([0, 50]);
return (
<Sheet>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent side="right" className="w-full sm:max-w-md flex flex-col">
<SheetHeader>
<SheetTitle className="text-2xl">Kurse Filtern</SheetTitle>
</SheetHeader>
<div className="flex-1 overflow-y-auto space-y-4 p-4">
{/* Datum */}
<h2 className="text-lg">Datum</h2>
{/* From */}
<div className="space-y-1">
<label className="font-medium">Von</label>
<input
type="date"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
{/* To */}
<div className="space-y-1">
<label className="font-medium">Bis</label>
<input
type="date"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
{/* Trainer */}
<div className="space-y-1">
<label className="font-medium">Trainer</label>
<select
value={filterTrainer}
onChange={(e) => setFilterTrainer(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
{uniqueTrainers.map((trainer) => (
<option key={trainer} value={trainer}>
{trainer}
</option>
))}
</select>
</div>
{/* Status */}
<div className="space-y-1">
<label className="font-medium">Status</label>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
<option value="draft">Entwurf</option>
<option value="published">Veröffentlicht</option>
</select>
</div>
{/* Sport */}
<div className="space-y-1">
<label className="font-medium">Sportart</label>
<select
value={filterSport}
onChange={(e) => setFilterSport(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
{uniqueSports.map((sport) => (
<option key={sport} value={sport}>
{sport}
</option>
))}
</select>
</div>
{/* TODO: Price */}
<div className="space-y-1">
<label className="font-medium">Preis</label>
<Slider
className="mt-1"
value={priceValue}
onValueChange={setPriceValue}
max={50}
step={1}
/>
<div className="flex justify-between mt-2">
<span>{priceValue[0]}€</span>
<span>{priceValue[1]}€</span>
</div>
</div>
{/* Advanced Filter Accordion */}
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="advanced-filters">
<AccordionTrigger className="text-base font-medium">
Erweiterte Filter
</AccordionTrigger>
<AccordionContent className="space-y-4 pt-2">
{/* Room */}
<div className="space-y-1">
<label className="font-medium">Raum</label>
<select
value={filterRoom}
onChange={(e) => setFilterRoom(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
{uniqueRooms.map((room) => (
<option key={room} value={room}>
{room}
</option>
))}
</select>
</div>
{/* TODO: Niveau */}
<div className="space-y-1">
<label className="font-medium">Niveau</label>
<select className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition">
<option value="everyone">Jedes Niveau</option>
<option value="beginner">Anfänger</option>
<option value="intermediate">Fortgeschritten</option>
<option value="advanced">Profi</option>
</select>
</div>
{/* Uhrzeit */}
<h3 className=" font-medium mt-2">Uhrzeit</h3>
{/* From */}
<div className="space-y-1">
<label className="font-medium">Von</label>
<input
type="time"
value={timeFrom}
onChange={(e) => setTimeFrom(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
{/* To */}
<div className="space-y-1">
<label className="font-medium">Bis</label>
<input
type="time"
value={timeTo}
onChange={(e) => setTimeTo(e.target.value)}
className="h-10 w-full px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<SheetFooter className="flex flex-row items-center w-full justify-end gap-2 border-t pt-4">
{hasActiveFilters && (
<Button variant="outline" onClick={onReset}>
Zurücksetzen
</Button>
)}
{/* Schließt das Sheet */}
<SheetClose asChild>
<Button>Filtern</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
);
};
export default CourseFilter;

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

@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
import CourseListItem from "../components/CourseListItem";
import { Filter, ChevronUp, ChevronDown } from "lucide-react";
import DeleteDialog from "@/src/components/layout/DeleteDialog";
import CourseFilter from "../components/CourseFilter";
type Course = {
id: string;
@ -38,10 +39,12 @@ const CourseListView = () => {
const [isLoading, setIsLoading] = useState(true);
const [filterStatus, setFilterStatus] = useState<"all" | "draft" | "published">("all");
const [filterSport, setFilterSport] = useState<string>("all");
const [showFilters, setShowFilters] = useState(false);
const [showPastCourses, setShowPastCourses] = useState(false);
const [filterTrainer, setFilterTrainer] = useState<string>("all");
const [filterRoom, setFilterRoom] = useState<string>("all");
const [dateFrom, setDateFrom] = useState("");
const [dateTo, setDateTo] = useState("");
const [timeFrom, setTimeFrom] = useState("");
const [timeTo, setTimeTo] = useState("");
const [deleteMode, setDeleteMode] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [courseToDelete, setCourseToDelete] = useState<{ id: string; name: string } | null>(null);
@ -230,8 +233,14 @@ const CourseListView = () => {
if (filterStatus !== "all" && course.status !== filterStatus) return false;
if (filterSport !== "all" && course.sport !== filterSport) return false;
// Hide past courses unless showPastCourses is enabled
if (!showPastCourses && isPastCourse(course.date)) return false;
// Trainer filter
if (filterTrainer !== "all" && !course.trainers.includes(filterTrainer)) return false;
// Room filter (compare by room name, not ID)
if (filterRoom !== "all") {
const roomName = roomsMap[course.room] || course.room;
if (roomName !== filterRoom) return false;
}
// Date range filter (additional client-side filter on top of server-side)
if (dateFrom) {
@ -250,6 +259,10 @@ const CourseListView = () => {
if (courseDate > toDate) return false;
}
// Time range filter
if (timeFrom && course.timeFrom < timeFrom) return false;
if (timeTo && course.timeTo > timeTo) return false;
return true;
});
@ -277,6 +290,12 @@ const CourseListView = () => {
// Get unique sports for filter
const uniqueSports = Array.from(new Set(courses.map((c) => c.sport)));
// Get unique trainers for filter (flatten trainers arrays)
const uniqueTrainers = Array.from(new Set(courses.flatMap((c) => c.trainers)));
// Get unique rooms for filter (using room names from roomsMap)
const uniqueRooms = Array.from(new Set(courses.map((c) => roomsMap[c.room] || c.room)));
// Get first trainer name (for display)
const getTrainerName = (trainers: string[]) => {
if (trainers.length === 0) return "Kein Trainer";
@ -292,18 +311,63 @@ const CourseListView = () => {
);
}
// Count active filters
const activeFiltersCount = [
filterStatus !== "all",
filterSport !== "all",
filterTrainer !== "all",
filterRoom !== "all",
!!dateFrom,
!!dateTo,
!!timeFrom,
!!timeTo,
].filter(Boolean).length;
return (
<div>
<div className="flex justify-between items-center mb-6">
<div className="flex w-full justify-end mr-2 gap-2">
<Button
variant="outline"
onClick={() => setShowFilters(!showFilters)}
className="flex items-center gap-2"
<CourseFilter
filterStatus={filterStatus}
filterSport={filterSport}
filterTrainer={filterTrainer}
filterRoom={filterRoom}
dateFrom={dateFrom}
dateTo={dateTo}
timeFrom={timeFrom}
timeTo={timeTo}
uniqueSports={uniqueSports}
uniqueTrainers={uniqueTrainers}
uniqueRooms={uniqueRooms}
setFilterStatus={setFilterStatus}
setFilterSport={setFilterSport}
setFilterTrainer={setFilterTrainer}
setFilterRoom={setFilterRoom}
setDateFrom={setDateFrom}
setDateTo={setDateTo}
setTimeFrom={setTimeFrom}
setTimeTo={setTimeTo}
onReset={() => {
setFilterStatus("all");
setFilterSport("all");
setFilterTrainer("all");
setFilterRoom("all");
setDateFrom("");
setDateTo("");
setTimeFrom("");
setTimeTo("");
}}
>
<Filter size={18} />
Filter
</Button>
<Button variant="outline" className="flex items-center gap-2 relative">
<Filter size={18} />
Filter
{activeFiltersCount > 0 && (
<span className="absolute -top-2 -right-2 bg-yellow text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
{activeFiltersCount}
</span>
)}
</Button>
</CourseFilter>
<Button
variant={deleteMode ? "destructive" : "outline"}
onClick={() => setDeleteMode(!deleteMode)}
@ -314,106 +378,6 @@ const CourseListView = () => {
</div>
</div>
{showFilters && (
<div className="mb-6 p-6 bg-white border border-gray-200 rounded-xl shadow-sm">
<h2 className="text-lg font-semibold mb-4 text-gray-900">Filter</h2>
{/* Filter Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Status Filter */}
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Status</label>
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value as "all" | "draft" | "published")}
className="h-10 px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
<option value="draft">Entwurf</option>
<option value="published">Veröffentlicht</option>
</select>
</div>
{/* Sportart Filter */}
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Sportart</label>
<select
value={filterSport}
onChange={(e) => setFilterSport(e.target.value)}
className="h-10 px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
>
<option value="all">Alle</option>
{uniqueSports.map((sport) => (
<option key={sport} value={sport}>
{sport}
</option>
))}
</select>
</div>
{/* Date From */}
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Von Datum</label>
<input
type="date"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
className="h-10 px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
{/* Date To */}
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Bis Datum</label>
<input
type="date"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
className="h-10 px-3 rounded-lg border border-gray-300 bg-gray-50 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-300 transition"
/>
</div>
{/* Show Past Courses Toggle */}
<div className="flex flex-col justify-end">
<label className="text-sm font-medium text-gray-700 mb-1">Vergangene Kurse</label>
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={showPastCourses}
onChange={(e) => setShowPastCourses(e.target.checked)}
className="w-4 h-4 rounded cursor-pointer accent-blue-500"
/>
<span className="text-sm text-gray-600">anzeigen</span>
</div>
</div>
</div>
{/* Reset Button */}
{(filterStatus !== "all" ||
filterSport !== "all" ||
dateFrom ||
dateTo ||
showPastCourses) && (
<div className="mt-6">
<Button
variant="outline"
size="sm"
onClick={() => {
setFilterStatus("all");
setFilterSport("all");
setDateFrom("");
setDateTo("");
setShowPastCourses(false);
}}
className="border-gray-300 text-gray-700 hover:bg-gray-100 transition"
>
Filter zurücksetzen
</Button>
</div>
)}
</div>
)}
{/* Load Older Courses Button */}
{hasOlderCourses && (
<div className="mb-4 flex justify-center">