mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-01 18:19:43 +00:00
Update
This commit is contained in:
jjbrunton committed
1 parent
75509b0e45
commit
ef7bc8c90d
16 files changed
+886
-32
No files matched your search
@@ -0,0 +1,181 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useAppConfig, AppConfig } from '@/hooks/useAppConfig';
|
||||
import { useAuth, PERMISSION_KEYS } from '@/contexts/AuthContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Save, AlertTriangle, RefreshCw, Users } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export function AppSettingsPage() {
|
||||
const { hasPermission, isSuperAdmin } = useAuth();
|
||||
const { config, loading, error, updateConfig, refetch } = useAppConfig();
|
||||
|
||||
// Local form state
|
||||
const [formData, setFormData] = useState<Partial<AppConfig>>({});
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
// Permission check - only super admins or those with MANAGE_APP_CONFIG can access
|
||||
const canManage = isSuperAdmin || hasPermission(PERMISSION_KEYS.MANAGE_APP_CONFIG);
|
||||
|
||||
// Initialize form data when config loads
|
||||
useEffect(() => {
|
||||
if (config) {
|
||||
setFormData({
|
||||
answer_gap_threshold: config.answer_gap_threshold ?? 10,
|
||||
});
|
||||
setHasChanges(false);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
const handleChange = <K extends keyof AppConfig>(field: K, value: AppConfig[K]) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const { error: saveError } = await updateConfig(formData);
|
||||
if (saveError) {
|
||||
toast.error(saveError);
|
||||
} else {
|
||||
toast.success('App settings saved successfully');
|
||||
setHasChanges(false);
|
||||
}
|
||||
} catch {
|
||||
toast.error('Failed to save settings');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (config) {
|
||||
setFormData({
|
||||
answer_gap_threshold: config.answer_gap_threshold ?? 10,
|
||||
});
|
||||
setHasChanges(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!canManage) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[50vh]">
|
||||
<Alert variant="destructive" className="max-w-md">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>Access Denied</AlertTitle>
|
||||
<AlertDescription>
|
||||
You don't have permission to manage app settings. Contact a super admin for access.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">App Settings</h1>
|
||||
<p className="text-muted-foreground">Configure mobile app behavior settings</p>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">App Settings</h1>
|
||||
<p className="text-muted-foreground">Configure mobile app behavior settings</p>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertTitle>Error loading settings</AlertTitle>
|
||||
<AlertDescription className="flex items-center gap-4">
|
||||
{error}
|
||||
<Button variant="outline" size="sm" onClick={refetch}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Retry
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">App Settings</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Configure mobile app behavior settings
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{hasChanges && (
|
||||
<Button variant="ghost" onClick={handleReset}>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleSave} disabled={!hasChanges || isSaving}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{config?.updated_at && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Last updated: {format(new Date(config.updated_at), 'MMM d, yyyy HH:mm')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Answer Spam Prevention */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
Answer Spam Prevention
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Prevent one partner from getting too far ahead in answering questions
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="threshold">Answer Gap Threshold</Label>
|
||||
<Input
|
||||
id="threshold"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
value={formData.answer_gap_threshold ?? 10}
|
||||
onChange={(e) => handleChange('answer_gap_threshold', parseInt(e.target.value) || 0)}
|
||||
className="max-w-[200px]"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Maximum number of questions a user can answer ahead of their partner.
|
||||
When exceeded, they'll see a "Waiting for your partner" message.
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Set to <strong>0</strong> to disable this feature.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -165,13 +165,13 @@ export function DashboardPage() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="relative">
|
||||
<div className="absolute -top-20 -left-20 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute -top-20 -left-20 w-64 h-64 bg-primary/5 rounded-full blur-3xl hidden xl:block" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-4xl font-bold tracking-tight">
|
||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||
<h1 className="text-2xl md:text-3xl xl:text-4xl font-bold tracking-tight">
|
||||
Dashboard
|
||||
</h1>
|
||||
<RealtimeStatusIndicator
|
||||
@@ -179,7 +179,7 @@ export function DashboardPage() {
|
||||
showLabel
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
<p className="text-muted-foreground text-sm md:text-base">
|
||||
Welcome back. Here's what's happening with Sauci.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -224,12 +224,12 @@ export function CategoriesPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Categories</h1>
|
||||
<p className="text-muted-foreground">
|
||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight">Categories</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Organize your question packs into categories
|
||||
</p>
|
||||
</div>
|
||||
@@ -238,7 +238,8 @@ export function CategoriesPage() {
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={form.openCreate}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Category
|
||||
<span className="hidden sm:inline">Add Category</span>
|
||||
<span className="sm:hidden">Add</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<Button variant="outline" onClick={() => setAiIdeasOpen(true)}>
|
||||
|
||||
@@ -67,7 +67,7 @@ export function PacksPage() {
|
||||
description: '',
|
||||
icon: '💕',
|
||||
is_premium: false,
|
||||
is_public: true,
|
||||
is_public: false,
|
||||
is_explicit: false,
|
||||
},
|
||||
(pack) => ({
|
||||
@@ -267,7 +267,7 @@ export function PacksPage() {
|
||||
description: result.description,
|
||||
icon: result.icon || '💕',
|
||||
is_premium: false,
|
||||
is_public: true,
|
||||
is_public: false,
|
||||
is_explicit: false,
|
||||
});
|
||||
setAiDialogOpen(false);
|
||||
|
||||
@@ -163,19 +163,19 @@ export function UsersPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Users</h1>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight">Users</h1>
|
||||
<RealtimeStatusIndicator status={realtimeStatus} showLabel />
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{profiles.length} registered user{profiles.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative w-64">
|
||||
<div className="relative w-full sm:w-64">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search users..."
|
||||
@@ -187,7 +187,7 @@ export function UsersPage() {
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="rounded-md border">
|
||||
<div className="rounded-md border overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
@@ -211,17 +211,17 @@ export function UsersPage() {
|
||||
filteredProfiles.map((profile) => (
|
||||
<TableRow key={profile.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to={`/users/${profile.id}`} className="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={profile.avatar_url || undefined} />
|
||||
<AvatarFallback>
|
||||
{profile.name?.charAt(0).toUpperCase() || 'U'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium">
|
||||
<span className="font-medium hover:text-primary transition-colors">
|
||||
{profile.name || 'Unnamed User'}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{profile.email || '—'}
|
||||
|
||||
Reference in new issue
Block a user