) => void;
+ onReset?: () => void;
+}
+
+export default function FilterPanel({
+ filters,
+ values,
+ onChange,
+ onReset,
+}: FilterPanelProps) {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const handleChange = (key: string, value: any) => {
+ onChange({ ...values, [key]: value });
+ };
+
+ const handleMultiSelect = (key: string, value: string) => {
+ const current = values[key] || [];
+ const updated = current.includes(value)
+ ? current.filter((v: string) => v !== value)
+ : [...current, value];
+ handleChange(key, updated);
+ };
+
+ const activeFilterCount = Object.values(values).filter(
+ (v) => v && (Array.isArray(v) ? v.length > 0 : true)
+ ).length;
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Filter content */}
+ {isExpanded && (
+
+
+ {filters.map((filter) => (
+
+
+ {filter.type === 'select' && filter.options && (
+
+ )}
+ {filter.type === 'multiselect' && filter.options && (
+
+ {filter.options.map((opt) => (
+
+ ))}
+
+ )}
+ {filter.type === 'search' && (
+
handleChange(filter.key, e.target.value || null)}
+ placeholder={`Search ${filter.label.toLowerCase()}...`}
+ className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+ />
+ )}
+
+ ))}
+
+
+ {/* Actions */}
+
+ {onReset && (
+
+ )}
+
+
+
+ )}
+
+
+
{title}
+ {icon &&
{icon}}
+
+
+
{value}
+ {unit &&
{unit}}
+
+ {(change !== undefined || changePercent !== undefined) && (
+
+ {getTrendIcon()}
+
+ {changePercent !== undefined
+ ? `${changePercent > 0 ? '+' : ''}${changePercent.toFixed(1)}%`
+ : change !== undefined
+ ? `${change > 0 ? '+' : ''}${change}`
+ : ''}
+
+ vs prev period
+
+ )}
+
+ {getIcon()}
+ {value !== undefined && (
+
+ {value > 0 ? '+' : ''}{value.toFixed(1)}%
+
+ )}
+ {showLabel && (
+ {getLabel()}
+ )}
+
+ );
+}
diff --git a/components/analytics/charts/AreaChart.tsx b/components/analytics/charts/AreaChart.tsx
new file mode 100644
index 0000000..4f20b78
--- /dev/null
+++ b/components/analytics/charts/AreaChart.tsx
@@ -0,0 +1,98 @@
+/**
+ * Area Chart Component
+ * Displays time series data as a filled area chart
+ */
+
+import {
+ AreaChart as RechartsAreaChart,
+ Area,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from 'recharts';
+
+interface AreaChartProps {
+ data: any[];
+ xKey: string;
+ yKey: string | string[];
+ title?: string;
+ colors?: string[];
+ height?: number;
+ showGrid?: boolean;
+ showLegend?: boolean;
+ stacked?: boolean;
+ gradient?: boolean;
+ formatter?: (value: number) => string;
+}
+
+const DEFAULT_COLORS = ['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444'];
+
+export default function AreaChart({
+ data,
+ xKey,
+ yKey,
+ title,
+ colors = DEFAULT_COLORS,
+ height = 300,
+ showGrid = true,
+ showLegend = true,
+ stacked = false,
+ gradient = true,
+ formatter = (value) => value.toLocaleString(),
+}: AreaChartProps) {
+ const yKeys = Array.isArray(yKey) ? yKey : [yKey];
+
+ return (
+
+ {title &&
{title}
}
+
+
+
+ {yKeys.map((key, index) => (
+
+
+
+
+ ))}
+
+ {showGrid && }
+
+
+ [formatter(value), '']}
+ />
+ {showLegend && }
+ {yKeys.map((key, index) => (
+
+ ))}
+
+
+
+ {title &&
{title}
}
+
+
+ {showGrid && }
+ {horizontal ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+ [formatter(value), '']}
+ />
+ {showLegend && yKeys.length > 1 && }
+ {yKeys.map((key, index) => (
+
+ {yKeys.length === 1 &&
+ data.map((entry, i) => (
+ |
+ ))}
+
+ ))}
+
+
+
+ );
+}
diff --git a/components/analytics/charts/Gauge.tsx b/components/analytics/charts/Gauge.tsx
new file mode 100644
index 0000000..98162ff
--- /dev/null
+++ b/components/analytics/charts/Gauge.tsx
@@ -0,0 +1,91 @@
+/**
+ * Gauge Chart Component
+ * Displays a single value as a gauge/meter
+ */
+
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+
+interface GaugeProps {
+ value: number;
+ max?: number;
+ title?: string;
+ unit?: string;
+ size?: number;
+ colors?: { low: string; medium: string; high: string };
+ thresholds?: { low: number; high: number };
+}
+
+const DEFAULT_COLORS = {
+ low: '#ef4444',
+ medium: '#f59e0b',
+ high: '#10b981',
+};
+
+export default function Gauge({
+ value,
+ max = 100,
+ title,
+ unit = '%',
+ size = 200,
+ colors = DEFAULT_COLORS,
+ thresholds = { low: 33, high: 66 },
+}: GaugeProps) {
+ const percentage = Math.min((value / max) * 100, 100);
+
+ // Determine color based on thresholds
+ let color: string;
+ if (percentage < thresholds.low) {
+ color = colors.low;
+ } else if (percentage < thresholds.high) {
+ color = colors.medium;
+ } else {
+ color = colors.high;
+ }
+
+ // Data for semi-circle gauge
+ const gaugeData = [
+ { value: percentage, color },
+ { value: 100 - percentage, color: '#e5e7eb' },
+ ];
+
+ return (
+
+ {title &&
{title}
}
+
+
+
+
+ {gaugeData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+ {value.toFixed(1)}
+
+ {unit}
+
+
+
+ 0
+ {max / 2}
+ {max}
+
+
+ {title &&
{title}
}
+
+ {/* X Labels */}
+
+ {xLabels.map((label) => (
+
+ {label}
+
+ ))}
+
+
+ {/* Grid */}
+ {yLabels.map((yLabel) => (
+
+
+ {yLabel}
+
+ {xLabels.map((xLabel) => {
+ const value = getValue(xLabel, yLabel);
+ const bgColor = value !== undefined ? getColor(value) : '#f3f4f6';
+ const textColor =
+ value !== undefined && (value - minValue) / range > 0.5
+ ? '#fff'
+ : '#374151';
+
+ return (
+
+ {showValues && value !== undefined && (
+
+ {value.toFixed(0)}
+
+ )}
+
+ );
+ })}
+
+ ))}
+
+ {/* Legend */}
+
+
+
+ {title &&
{title}
}
+
+
+ {showGrid && }
+
+
+ [formatter(value), '']}
+ />
+ {showLegend && }
+ {yKeys.map((key, index) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/components/analytics/charts/PieChart.tsx b/components/analytics/charts/PieChart.tsx
new file mode 100644
index 0000000..4c14fb6
--- /dev/null
+++ b/components/analytics/charts/PieChart.tsx
@@ -0,0 +1,123 @@
+/**
+ * Pie Chart Component
+ * Displays distribution data as a pie chart
+ */
+
+import {
+ PieChart as RechartsPieChart,
+ Pie,
+ Cell,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from 'recharts';
+
+interface PieChartProps {
+ data: any[];
+ dataKey: string;
+ nameKey: string;
+ title?: string;
+ colors?: string[];
+ height?: number;
+ showLegend?: boolean;
+ innerRadius?: number;
+ outerRadius?: number;
+ formatter?: (value: number) => string;
+}
+
+const DEFAULT_COLORS = [
+ '#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444',
+ '#06b6d4', '#ec4899', '#84cc16', '#f97316', '#6366f1',
+];
+
+export default function PieChart({
+ data,
+ dataKey,
+ nameKey,
+ title,
+ colors = DEFAULT_COLORS,
+ height = 300,
+ showLegend = true,
+ innerRadius = 0,
+ outerRadius = 80,
+ formatter = (value) => value.toLocaleString(),
+}: PieChartProps) {
+ const RADIAN = Math.PI / 180;
+
+ const renderCustomizedLabel = ({
+ cx,
+ cy,
+ midAngle,
+ innerRadius,
+ outerRadius,
+ percent,
+ }: any) => {
+ if (percent < 0.05) return null;
+
+ const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+ const x = cx + radius * Math.cos(-midAngle * RADIAN);
+ const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+ return (
+ cx ? 'start' : 'end'}
+ dominantBaseline="central"
+ fontSize="12"
+ fontWeight="bold"
+ >
+ {`${(percent * 100).toFixed(0)}%`}
+
+ );
+ };
+
+ return (
+
+ {title &&
{title}
}
+
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+ [formatter(value), '']}
+ />
+ {showLegend && (
+
+ )}
+
+
+
+
+
Redirecting to sign in...
+
+
+
+
403
+
Access Denied
+
+ You don't have permission to access this page. This page requires{' '}
+ {requiredRole} role or higher.
+
+
+
+
+
+
403
+
Access Denied
+
+ You don't have the required permission to access this page.
+
+
+
+
(
+ Component: React.ComponentType
,
+ options?: {
+ requiredRole?: UserRole
+ requiredPermission?: string
+ fallback?: React.ReactNode
+ redirectTo?: string
+ }
+) {
+ return function AuthGuardedComponent(props: P) {
+ return (
+
+
+
+ )
+ }
+}
+
+export default AuthGuard
diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..958e46a
--- /dev/null
+++ b/components/auth/LoginForm.tsx
@@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { signIn } from 'next-auth/react'
+import Link from 'next/link'
+
+interface LoginFormProps {
+ callbackUrl?: string
+ onSuccess?: () => void
+ onError?: (error: string) => void
+}
+
+export function LoginForm({ callbackUrl = '/', onSuccess, onError }: LoginFormProps) {
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setIsLoading(true)
+ setError(null)
+
+ try {
+ const result = await signIn('credentials', {
+ email,
+ password,
+ redirect: false,
+ })
+
+ if (result?.error) {
+ const errorMessage = getErrorMessage(result.error)
+ setError(errorMessage)
+ onError?.(errorMessage)
+ } else if (result?.ok) {
+ onSuccess?.()
+ if (callbackUrl) {
+ window.location.href = callbackUrl
+ }
+ }
+ } catch (err) {
+ const errorMessage = 'An unexpected error occurred'
+ setError(errorMessage)
+ onError?.(errorMessage)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return (
+
+ )
+}
+
+function getErrorMessage(error: string): string {
+ const errorMessages: Record = {
+ CredentialsSignin: 'Invalid email or password',
+ default: 'An error occurred during sign in',
+ }
+ return errorMessages[error] ?? errorMessages.default
+}
+
+export default LoginForm
diff --git a/components/auth/PasswordResetForm.tsx b/components/auth/PasswordResetForm.tsx
new file mode 100644
index 0000000..0f05828
--- /dev/null
+++ b/components/auth/PasswordResetForm.tsx
@@ -0,0 +1,142 @@
+import { useState } from 'react'
+
+interface PasswordResetFormProps {
+ token: string
+ onSuccess?: () => void
+ onError?: (error: string) => void
+}
+
+export function PasswordResetForm({ token, onSuccess, onError }: PasswordResetFormProps) {
+ const [password, setPassword] = useState('')
+ const [confirmPassword, setConfirmPassword] = useState('')
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+ const [success, setSuccess] = useState(false)
+
+ const validatePassword = (): string | null => {
+ if (password.length < 8) {
+ return 'Password must be at least 8 characters long'
+ }
+
+ const hasUpperCase = /[A-Z]/.test(password)
+ const hasLowerCase = /[a-z]/.test(password)
+ const hasNumbers = /\d/.test(password)
+
+ if (!hasUpperCase || !hasLowerCase || !hasNumbers) {
+ return 'Password must contain uppercase, lowercase, and numbers'
+ }
+
+ if (password !== confirmPassword) {
+ return 'Passwords do not match'
+ }
+
+ return null
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setIsLoading(true)
+ setError(null)
+
+ const validationError = validatePassword()
+ if (validationError) {
+ setError(validationError)
+ setIsLoading(false)
+ onError?.(validationError)
+ return
+ }
+
+ try {
+ const response = await fetch('/api/auth/reset-password', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ token, password }),
+ })
+
+ const data = await response.json()
+
+ if (!response.ok) {
+ setError(data.message || 'An error occurred')
+ onError?.(data.message || 'An error occurred')
+ return
+ }
+
+ setSuccess(true)
+ onSuccess?.()
+ } catch (err) {
+ const errorMessage = 'An unexpected error occurred'
+ setError(errorMessage)
+ onError?.(errorMessage)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ if (success) {
+ return (
+
+
Password Reset Successful!
+
Your password has been reset successfully.
+
+ {availableProviders.map((providerId) => {
+ const config = providerConfig[providerId]
+ const isGoogle = providerId === 'google'
+
+ return (
+
+ )
+ })}
+
+ )
+}
+
+export function SocialDivider() {
+ return (
+
+
+
+ Or continue with
+
+
+ {categoryIcons[listing.category] || '🌿'}
+
+
+
{listing.title}
+
{categoryLabels[listing.category]}
+
+
${listing.price.toFixed(2)}
+
{listing.quantity} avail.
+
+
+ {categoryIcons[listing.category] || '🌿'}
+
+
+
+ Featured
+
+
+
+
+
+ {listing.title}
+
+
+ ${listing.price.toFixed(2)}
+
+
+
+ {listing.description}
+
+
+
+ {categoryLabels[listing.category]}
+ •
+ {listing.quantity} available
+
+
+ {listing.viewCount} views
+
+
+
+ {categoryIcons[listing.category] || '🌿'}
+
+
+
+
+ {listing.title}
+
+
+ ${listing.price.toFixed(2)}
+
+
+
+ {listing.description}
+
+
+ {categoryLabels[listing.category]}
+ {listing.quantity} available
+
+ {listing.sellerName && (
+
+ by {listing.sellerName}
+
+ )}
+ {listing.tags.length > 0 && (
+
+ {listing.tags.slice(0, 3).map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+ {listings.map((listing) => (
+
+ ))}
+
+ );
+ }
+
+ return (
+
+ {listings.map((listing) => (
+
+ ))}
+
+ );
+}
+
+export default ListingGrid;
diff --git a/components/marketplace/OfferForm.tsx b/components/marketplace/OfferForm.tsx
new file mode 100644
index 0000000..6d38247
--- /dev/null
+++ b/components/marketplace/OfferForm.tsx
@@ -0,0 +1,144 @@
+import { useState } from 'react';
+
+interface OfferFormProps {
+ listingId: string;
+ askingPrice: number;
+ currency?: string;
+ onSubmit: (amount: number, message: string) => Promise;
+ onCancel?: () => void;
+}
+
+export function OfferForm({
+ listingId,
+ askingPrice,
+ currency = 'USD',
+ onSubmit,
+ onCancel,
+}: OfferFormProps) {
+ const [amount, setAmount] = useState(askingPrice.toString());
+ const [message, setMessage] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+
+ const offerAmount = parseFloat(amount);
+
+ if (isNaN(offerAmount) || offerAmount <= 0) {
+ setError('Please enter a valid offer amount');
+ return;
+ }
+
+ setSubmitting(true);
+ try {
+ await onSubmit(offerAmount, message);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to submit offer');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const suggestedOffers = [
+ { label: 'Full Price', value: askingPrice },
+ { label: '10% Off', value: Math.round(askingPrice * 0.9 * 100) / 100 },
+ { label: '15% Off', value: Math.round(askingPrice * 0.85 * 100) / 100 },
+ ];
+
+ return (
+