feat: enhance member management features; add quick stats and search capabilities

This commit is contained in:
T. Zehetbauer
2026-04-02 22:56:04 +02:00
parent 0932c57fa1
commit f43770999f
35 changed files with 4370 additions and 159 deletions

View File

@@ -457,10 +457,7 @@ export function FeatureCarousel() {
const [active, setActive] = useState(0);
const slide = SLIDES[active]!;
const next = useCallback(
() => setActive((i) => (i + 1) % SLIDES.length),
[],
);
const next = useCallback(() => setActive((i) => (i + 1) % SLIDES.length), []);
const prev = useCallback(
() => setActive((i) => (i - 1 + SLIDES.length) % SLIDES.length),
[],

View File

@@ -8,10 +8,7 @@ import { Check, ExternalLink, X } from 'lucide-react';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import {
Card,
CardContent,
} from '@kit/ui/card';
import { Card, CardContent } from '@kit/ui/card';
import {
Table,
TableBody,
@@ -265,7 +262,10 @@ function PriceBar({
<div className="bg-muted h-6 overflow-hidden rounded-md">
{available ? (
<div
className={cn('h-full rounded-md transition-all duration-500', color)}
className={cn(
'h-full rounded-md transition-all duration-500',
color,
)}
style={{
width: `${pct}%`,
minWidth: pct > 0 ? 4 : 0,
@@ -323,7 +323,10 @@ export function PricingCalculator() {
<div className="mx-auto w-full max-w-4xl space-y-0">
{/* ── Header ── */}
<div className="bg-primary rounded-t-2xl px-8 py-7">
<Badge variant="outline" className="border-primary-foreground/20 text-primary-foreground/80 mb-1 text-[10px] uppercase tracking-widest">
<Badge
variant="outline"
className="border-primary-foreground/20 text-primary-foreground/80 mb-1 text-[10px] tracking-widest uppercase"
>
Preisvergleich
</Badge>
<h2 className="font-heading text-primary-foreground text-2xl font-bold tracking-tight">
@@ -376,7 +379,7 @@ export function PricingCalculator() {
<div className="flex flex-wrap items-center gap-3">
<Card className="bg-primary/5 border-primary/10 flex flex-1 items-center justify-between p-4">
<div>
<div className="text-primary text-[10px] font-bold uppercase tracking-wider">
<div className="text-primary text-[10px] font-bold tracking-wider uppercase">
Ihr MYeasyCMS-Tarif
</div>
<div className="font-heading text-primary text-xl font-bold">
@@ -460,21 +463,20 @@ export function PricingCalculator() {
{bestSaving && bestSaving.p !== null && bestSaving.p > tier.price && (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<Card className="bg-primary/5 border-primary/10 p-5 text-center">
<div className="text-primary text-[10px] font-bold uppercase tracking-wider">
<div className="text-primary text-[10px] font-bold tracking-wider uppercase">
Ersparnis vs. {bestSaving.name.split(' ')[0]}
</div>
<div className="font-heading text-primary mt-1 text-3xl font-bold">
{fmt((bestSaving.p - tier.price) * 12)}
</div>
<div className="text-muted-foreground text-sm">
pro Jahr (
{Math.round((1 - tier.price / bestSaving.p) * 100)}%
pro Jahr ({Math.round((1 - tier.price / bestSaving.p) * 100)}%
günstiger)
</div>
</Card>
<Card className="bg-muted/50 p-5 text-center">
<div className="text-muted-foreground text-[10px] font-bold uppercase tracking-wider">
<div className="text-muted-foreground text-[10px] font-bold tracking-wider uppercase">
Preis pro Mitglied
</div>
<div className="font-heading text-primary mt-1 text-3xl font-bold">
@@ -521,19 +523,19 @@ export function PricingCalculator() {
{USP_FEATURES.map((f, i) => (
<TableRow key={i}>
<TableCell className="font-medium">{f.label}</TableCell>
{(
['mcms', 'sewobe', 'easy', 'club', 'wiso'] as const
).map((col) => (
<TableCell
key={col}
className={cn(
'text-center',
col === 'mcms' && 'bg-primary/5',
)}
>
<FeatureCell value={f[col]} />
</TableCell>
))}
{(['mcms', 'sewobe', 'easy', 'club', 'wiso'] as const).map(
(col) => (
<TableCell
key={col}
className={cn(
'text-center',
col === 'mcms' && 'bg-primary/5',
)}
>
<FeatureCell value={f[col]} />
</TableCell>
),
)}
</TableRow>
))}
</TableBody>