Initial commit: MOPC platform with Docker deployment setup
Full Next.js 15 platform with tRPC, Prisma, PostgreSQL, NextAuth. Includes production Dockerfile (multi-stage, port 7600), docker-compose with registry-based image pull, Gitea Actions CI workflow, nginx config for portal.monaco-opc.com, deployment scripts, and DEPLOYMENT.md guide. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
258
src/components/settings/ai-settings-form.tsx
Normal file
258
src/components/settings/ai-settings-form.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
'use client'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { Bot, Loader2, Zap } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
|
||||
const formSchema = z.object({
|
||||
ai_enabled: z.boolean(),
|
||||
ai_provider: z.string(),
|
||||
ai_model: z.string(),
|
||||
ai_send_descriptions: z.boolean(),
|
||||
openai_api_key: z.string().optional(),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface AISettingsFormProps {
|
||||
settings: {
|
||||
ai_enabled?: string
|
||||
ai_provider?: string
|
||||
ai_model?: string
|
||||
ai_send_descriptions?: string
|
||||
openai_api_key?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function AISettingsForm({ settings }: AISettingsFormProps) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
ai_enabled: settings.ai_enabled === 'true',
|
||||
ai_provider: settings.ai_provider || 'openai',
|
||||
ai_model: settings.ai_model || 'gpt-4o',
|
||||
ai_send_descriptions: settings.ai_send_descriptions === 'true',
|
||||
openai_api_key: '',
|
||||
},
|
||||
})
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('AI settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'AI' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const testConnection = trpc.settings.testAIConnection.useMutation({
|
||||
onSuccess: (result) => {
|
||||
if (result.success) {
|
||||
toast.success('AI connection successful')
|
||||
} else {
|
||||
toast.error(`Connection failed: ${result.error}`)
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Test failed: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
const settingsToUpdate = [
|
||||
{ key: 'ai_enabled', value: String(data.ai_enabled) },
|
||||
{ key: 'ai_provider', value: data.ai_provider },
|
||||
{ key: 'ai_model', value: data.ai_model },
|
||||
{ key: 'ai_send_descriptions', value: String(data.ai_send_descriptions) },
|
||||
]
|
||||
|
||||
// Only update API key if a new value was entered
|
||||
if (data.openai_api_key && data.openai_api_key.trim()) {
|
||||
settingsToUpdate.push({ key: 'openai_api_key', value: data.openai_api_key })
|
||||
}
|
||||
|
||||
updateSettings.mutate({ settings: settingsToUpdate })
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ai_enabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">Enable AI Features</FormLabel>
|
||||
<FormDescription>
|
||||
Use AI to suggest optimal jury-project assignments
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ai_provider"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>AI Provider</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select provider" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="openai">OpenAI</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
AI provider for smart assignment suggestions
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ai_model"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Model</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select model" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="gpt-4o">GPT-4o (Recommended)</SelectItem>
|
||||
<SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem>
|
||||
<SelectItem value="gpt-4-turbo">GPT-4 Turbo</SelectItem>
|
||||
<SelectItem value="gpt-4">GPT-4</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
OpenAI model to use for AI features
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="openai_api_key"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>API Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder={settings.openai_api_key ? '••••••••' : 'Enter API key'}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Your OpenAI API key. Leave blank to keep the existing key.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ai_send_descriptions"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">Send Project Descriptions</FormLabel>
|
||||
<FormDescription>
|
||||
Include anonymized project descriptions in AI requests for better matching
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={updateSettings.isPending}
|
||||
>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Bot className="mr-2 h-4 w-4" />
|
||||
Save AI Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => testConnection.mutate()}
|
||||
disabled={testConnection.isPending}
|
||||
>
|
||||
{testConnection.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="mr-2 h-4 w-4" />
|
||||
Test Connection
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
219
src/components/settings/branding-settings-form.tsx
Normal file
219
src/components/settings/branding-settings-form.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Palette } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
|
||||
const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
|
||||
|
||||
const formSchema = z.object({
|
||||
platform_name: z.string().min(1, 'Platform name is required'),
|
||||
primary_color: z.string().regex(hexColorRegex, 'Invalid hex color'),
|
||||
secondary_color: z.string().regex(hexColorRegex, 'Invalid hex color'),
|
||||
accent_color: z.string().regex(hexColorRegex, 'Invalid hex color'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface BrandingSettingsFormProps {
|
||||
settings: {
|
||||
platform_name?: string
|
||||
primary_color?: string
|
||||
secondary_color?: string
|
||||
accent_color?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function BrandingSettingsForm({ settings }: BrandingSettingsFormProps) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
platform_name: settings.platform_name || 'Monaco Ocean Protection Challenge',
|
||||
primary_color: settings.primary_color || '#de0f1e',
|
||||
secondary_color: settings.secondary_color || '#053d57',
|
||||
accent_color: settings.accent_color || '#557f8c',
|
||||
},
|
||||
})
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Branding settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'BRANDING' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
updateSettings.mutate({
|
||||
settings: [
|
||||
{ key: 'platform_name', value: data.platform_name },
|
||||
{ key: 'primary_color', value: data.primary_color },
|
||||
{ key: 'secondary_color', value: data.secondary_color },
|
||||
{ key: 'accent_color', value: data.accent_color },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
const watchedColors = form.watch(['primary_color', 'secondary_color', 'accent_color'])
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="platform_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Platform Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Monaco Ocean Protection Challenge" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
The display name shown across the platform
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Color Preview */}
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="mb-3 text-sm font-medium">Color Preview</p>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div
|
||||
className="h-12 w-12 rounded-lg border shadow-xs"
|
||||
style={{ backgroundColor: watchedColors[0] }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Primary</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div
|
||||
className="h-12 w-12 rounded-lg border shadow-xs"
|
||||
style={{ backgroundColor: watchedColors[1] }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Secondary</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div
|
||||
className="h-12 w-12 rounded-lg border shadow-xs"
|
||||
style={{ backgroundColor: watchedColors[2] }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Accent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="primary_color"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Primary Color</FormLabel>
|
||||
<div className="flex gap-2">
|
||||
<FormControl>
|
||||
<Input type="color" className="h-10 w-14 cursor-pointer p-1" {...field} />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="#de0f1e"
|
||||
{...field}
|
||||
className="flex-1"
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormDescription>
|
||||
Used for CTAs, alerts, and primary actions
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="secondary_color"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Secondary Color</FormLabel>
|
||||
<div className="flex gap-2">
|
||||
<FormControl>
|
||||
<Input type="color" className="h-10 w-14 cursor-pointer p-1" {...field} />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="#053d57"
|
||||
{...field}
|
||||
className="flex-1"
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormDescription>
|
||||
Used for headers and sidebar
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="accent_color"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Accent Color</FormLabel>
|
||||
<div className="flex gap-2">
|
||||
<FormControl>
|
||||
<Input type="color" className="h-10 w-14 cursor-pointer p-1" {...field} />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="#557f8c"
|
||||
{...field}
|
||||
className="flex-1"
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<FormDescription>
|
||||
Used for links and secondary elements
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={updateSettings.isPending}>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Palette className="mr-2 h-4 w-4" />
|
||||
Save Branding Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
181
src/components/settings/defaults-settings-form.tsx
Normal file
181
src/components/settings/defaults-settings-form.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
'use client'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Settings } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
|
||||
const COMMON_TIMEZONES = [
|
||||
{ value: 'Europe/Monaco', label: 'Monaco (CET/CEST)' },
|
||||
{ value: 'Europe/Paris', label: 'Paris (CET/CEST)' },
|
||||
{ value: 'Europe/London', label: 'London (GMT/BST)' },
|
||||
{ value: 'America/New_York', label: 'New York (EST/EDT)' },
|
||||
{ value: 'America/Los_Angeles', label: 'Los Angeles (PST/PDT)' },
|
||||
{ value: 'Asia/Tokyo', label: 'Tokyo (JST)' },
|
||||
{ value: 'Asia/Singapore', label: 'Singapore (SGT)' },
|
||||
{ value: 'Australia/Sydney', label: 'Sydney (AEST/AEDT)' },
|
||||
{ value: 'UTC', label: 'UTC' },
|
||||
]
|
||||
|
||||
const formSchema = z.object({
|
||||
default_timezone: z.string().min(1, 'Timezone is required'),
|
||||
default_page_size: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
autosave_interval_seconds: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface DefaultsSettingsFormProps {
|
||||
settings: {
|
||||
default_timezone?: string
|
||||
default_page_size?: string
|
||||
autosave_interval_seconds?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function DefaultsSettingsForm({ settings }: DefaultsSettingsFormProps) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
default_timezone: settings.default_timezone || 'Europe/Monaco',
|
||||
default_page_size: settings.default_page_size || '20',
|
||||
autosave_interval_seconds: settings.autosave_interval_seconds || '30',
|
||||
},
|
||||
})
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Default settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'DEFAULTS' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
updateSettings.mutate({
|
||||
settings: [
|
||||
{ key: 'default_timezone', value: data.default_timezone },
|
||||
{ key: 'default_page_size', value: data.default_page_size },
|
||||
{ key: 'autosave_interval_seconds', value: data.autosave_interval_seconds },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="default_timezone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Default Timezone</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select timezone" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{COMMON_TIMEZONES.map((tz) => (
|
||||
<SelectItem key={tz.value} value={tz.value}>
|
||||
{tz.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
Timezone used for displaying dates and deadlines across the platform
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="default_page_size"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Default Page Size</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select page size" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="10">10 items per page</SelectItem>
|
||||
<SelectItem value="20">20 items per page</SelectItem>
|
||||
<SelectItem value="50">50 items per page</SelectItem>
|
||||
<SelectItem value="100">100 items per page</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>
|
||||
Default number of items shown in lists and tables
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="autosave_interval_seconds"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Autosave Interval (seconds)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="10" max="120" placeholder="30" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
How often evaluation forms are automatically saved while editing.
|
||||
Lower values provide better data protection but increase server load.
|
||||
Recommended: 30 seconds.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={updateSettings.isPending}>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
Save Default Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
270
src/components/settings/email-settings-form.tsx
Normal file
270
src/components/settings/email-settings-form.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Mail, Send } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
const formSchema = z.object({
|
||||
smtp_host: z.string().min(1, 'SMTP host is required'),
|
||||
smtp_port: z.string().regex(/^\d+$/, 'Port must be a number'),
|
||||
smtp_user: z.string().min(1, 'SMTP user is required'),
|
||||
smtp_password: z.string().optional(),
|
||||
email_from: z.string().email('Invalid email address'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface EmailSettingsFormProps {
|
||||
settings: {
|
||||
smtp_host?: string
|
||||
smtp_port?: string
|
||||
smtp_user?: string
|
||||
smtp_password?: string
|
||||
email_from?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function EmailSettingsForm({ settings }: EmailSettingsFormProps) {
|
||||
const [testDialogOpen, setTestDialogOpen] = useState(false)
|
||||
const [testEmail, setTestEmail] = useState('')
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
smtp_host: settings.smtp_host || 'localhost',
|
||||
smtp_port: settings.smtp_port || '587',
|
||||
smtp_user: settings.smtp_user || '',
|
||||
smtp_password: '',
|
||||
email_from: settings.email_from || 'noreply@monaco-opc.com',
|
||||
},
|
||||
})
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Email settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'EMAIL' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const sendTestEmail = trpc.settings.testEmailConnection.useMutation({
|
||||
onSuccess: (result) => {
|
||||
setTestDialogOpen(false)
|
||||
if (result.success) {
|
||||
toast.success('Test email sent successfully')
|
||||
} else {
|
||||
toast.error(`Failed to send test email: ${result.error}`)
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Test failed: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
const settingsToUpdate = [
|
||||
{ key: 'smtp_host', value: data.smtp_host },
|
||||
{ key: 'smtp_port', value: data.smtp_port },
|
||||
{ key: 'smtp_user', value: data.smtp_user },
|
||||
{ key: 'email_from', value: data.email_from },
|
||||
]
|
||||
|
||||
if (data.smtp_password && data.smtp_password.trim()) {
|
||||
settingsToUpdate.push({ key: 'smtp_password', value: data.smtp_password })
|
||||
}
|
||||
|
||||
updateSettings.mutate({ settings: settingsToUpdate })
|
||||
}
|
||||
|
||||
const handleSendTest = () => {
|
||||
if (!testEmail) {
|
||||
toast.error('Please enter an email address')
|
||||
return
|
||||
}
|
||||
sendTestEmail.mutate({ testEmail })
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4">
|
||||
<p className="text-sm text-amber-800">
|
||||
Email settings are typically configured via environment variables. Changes here
|
||||
will be stored in the database but may be overridden by environment variables.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="smtp_host"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SMTP Host</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="smtp.example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="smtp_port"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SMTP Port</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="587" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="smtp_user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SMTP User</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="user@example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="smtp_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SMTP Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder={settings.smtp_password ? '••••••••' : 'Enter password'}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Leave blank to keep existing password
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email_from"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>From Email Address</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="noreply@monaco-opc.com" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Email address that will appear as the sender
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" disabled={updateSettings.isPending}>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mail className="mr-2 h-4 w-4" />
|
||||
Save Email Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Dialog open={testDialogOpen} onOpenChange={setTestDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button type="button" variant="outline">
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
Send Test Email
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Send Test Email</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter an email address to receive a test email
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="test@example.com"
|
||||
value={testEmail}
|
||||
onChange={(e) => setTestEmail(e.target.value)}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setTestDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSendTest}
|
||||
disabled={sendTestEmail.isPending}
|
||||
>
|
||||
{sendTestEmail.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
'Send Test'
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
149
src/components/settings/security-settings-form.tsx
Normal file
149
src/components/settings/security-settings-form.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Shield } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
|
||||
const formSchema = z.object({
|
||||
session_duration_hours: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
magic_link_expiry_minutes: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
rate_limit_requests_per_minute: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface SecuritySettingsFormProps {
|
||||
settings: {
|
||||
session_duration_hours?: string
|
||||
magic_link_expiry_minutes?: string
|
||||
rate_limit_requests_per_minute?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function SecuritySettingsForm({ settings }: SecuritySettingsFormProps) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
session_duration_hours: settings.session_duration_hours || '24',
|
||||
magic_link_expiry_minutes: settings.magic_link_expiry_minutes || '15',
|
||||
rate_limit_requests_per_minute: settings.rate_limit_requests_per_minute || '60',
|
||||
},
|
||||
})
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Security settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'SECURITY' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
updateSettings.mutate({
|
||||
settings: [
|
||||
{ key: 'session_duration_hours', value: data.session_duration_hours },
|
||||
{ key: 'magic_link_expiry_minutes', value: data.magic_link_expiry_minutes },
|
||||
{ key: 'rate_limit_requests_per_minute', value: data.rate_limit_requests_per_minute },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="session_duration_hours"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Session Duration (hours)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="1" max="720" placeholder="24" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
How long user sessions remain valid before requiring re-authentication.
|
||||
Recommended: 24 hours for jury members, up to 168 hours (1 week) for admins.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="magic_link_expiry_minutes"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Magic Link Expiry (minutes)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="5" max="60" placeholder="15" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
How long magic link authentication links remain valid.
|
||||
Shorter is more secure. Recommended: 15 minutes.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rate_limit_requests_per_minute"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>API Rate Limit (requests/minute)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="10" max="300" placeholder="60" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Maximum API requests allowed per minute per user.
|
||||
Helps prevent abuse and ensures fair resource usage.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4">
|
||||
<p className="text-sm text-amber-800">
|
||||
<strong>Security Note:</strong> Changing these settings affects all users immediately.
|
||||
Reducing session duration will not log out existing sessions but will prevent renewal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={updateSettings.isPending}>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="mr-2 h-4 w-4" />
|
||||
Save Security Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
224
src/components/settings/settings-content.tsx
Normal file
224
src/components/settings/settings-content.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
'use client'
|
||||
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Bot,
|
||||
Palette,
|
||||
Mail,
|
||||
HardDrive,
|
||||
Shield,
|
||||
Settings as SettingsIcon,
|
||||
} from 'lucide-react'
|
||||
import { AISettingsForm } from './ai-settings-form'
|
||||
import { BrandingSettingsForm } from './branding-settings-form'
|
||||
import { EmailSettingsForm } from './email-settings-form'
|
||||
import { StorageSettingsForm } from './storage-settings-form'
|
||||
import { SecuritySettingsForm } from './security-settings-form'
|
||||
import { DefaultsSettingsForm } from './defaults-settings-form'
|
||||
|
||||
function SettingsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-32" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-16 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface SettingsContentProps {
|
||||
initialSettings: Record<string, string>
|
||||
}
|
||||
|
||||
export function SettingsContent({ initialSettings }: SettingsContentProps) {
|
||||
// We use the initial settings passed from the server
|
||||
// Forms will refetch on mutation success
|
||||
|
||||
// Helper to get settings by prefix
|
||||
const getSettingsByKeys = (keys: string[]) => {
|
||||
const result: Record<string, string> = {}
|
||||
keys.forEach((key) => {
|
||||
if (initialSettings[key] !== undefined) {
|
||||
result[key] = initialSettings[key]
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
const aiSettings = getSettingsByKeys([
|
||||
'ai_enabled',
|
||||
'ai_provider',
|
||||
'ai_model',
|
||||
'ai_send_descriptions',
|
||||
'openai_api_key',
|
||||
])
|
||||
|
||||
const brandingSettings = getSettingsByKeys([
|
||||
'platform_name',
|
||||
'primary_color',
|
||||
'secondary_color',
|
||||
'accent_color',
|
||||
])
|
||||
|
||||
const emailSettings = getSettingsByKeys([
|
||||
'smtp_host',
|
||||
'smtp_port',
|
||||
'smtp_user',
|
||||
'smtp_password',
|
||||
'email_from',
|
||||
])
|
||||
|
||||
const storageSettings = getSettingsByKeys([
|
||||
'max_file_size_mb',
|
||||
'allowed_file_types',
|
||||
])
|
||||
|
||||
const securitySettings = getSettingsByKeys([
|
||||
'session_duration_hours',
|
||||
'magic_link_expiry_minutes',
|
||||
'rate_limit_requests_per_minute',
|
||||
])
|
||||
|
||||
const defaultsSettings = getSettingsByKeys([
|
||||
'default_timezone',
|
||||
'default_page_size',
|
||||
'autosave_interval_seconds',
|
||||
])
|
||||
|
||||
return (
|
||||
<Tabs defaultValue="ai" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 lg:grid-cols-6">
|
||||
<TabsTrigger value="ai" className="gap-2">
|
||||
<Bot className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">AI</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="branding" className="gap-2">
|
||||
<Palette className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Branding</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="email" className="gap-2">
|
||||
<Mail className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Email</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="storage" className="gap-2">
|
||||
<HardDrive className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Storage</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="security" className="gap-2">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Security</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="defaults" className="gap-2">
|
||||
<SettingsIcon className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Defaults</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="ai">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>AI Configuration</CardTitle>
|
||||
<CardDescription>
|
||||
Configure AI-powered features like smart jury assignment
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AISettingsForm settings={aiSettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="branding">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Platform Branding</CardTitle>
|
||||
<CardDescription>
|
||||
Customize the look and feel of your platform
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BrandingSettingsForm settings={brandingSettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="email">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Email Configuration</CardTitle>
|
||||
<CardDescription>
|
||||
Configure email settings for notifications and magic links
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<EmailSettingsForm settings={emailSettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="storage">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>File Storage</CardTitle>
|
||||
<CardDescription>
|
||||
Configure file upload limits and allowed types
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<StorageSettingsForm settings={storageSettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Security Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure security and access control settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SecuritySettingsForm settings={securitySettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="defaults">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Default Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure default values for the platform
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DefaultsSettingsForm settings={defaultsSettings} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
|
||||
export { SettingsSkeleton }
|
||||
293
src/components/settings/storage-settings-form.tsx
Normal file
293
src/components/settings/storage-settings-form.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
'use client'
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { toast } from 'sonner'
|
||||
import { HardDrive, Loader2, Cloud, FolderOpen } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
// Note: Storage provider cache is cleared server-side when settings are updated
|
||||
|
||||
const COMMON_FILE_TYPES = [
|
||||
{ value: 'application/pdf', label: 'PDF Documents (.pdf)' },
|
||||
{ value: 'video/mp4', label: 'MP4 Video (.mp4)' },
|
||||
{ value: 'video/quicktime', label: 'QuickTime Video (.mov)' },
|
||||
{ value: 'image/png', label: 'PNG Images (.png)' },
|
||||
{ value: 'image/jpeg', label: 'JPEG Images (.jpg, .jpeg)' },
|
||||
{ value: 'image/gif', label: 'GIF Images (.gif)' },
|
||||
{ value: 'image/webp', label: 'WebP Images (.webp)' },
|
||||
{ value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', label: 'Word Documents (.docx)' },
|
||||
{ value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', label: 'Excel Spreadsheets (.xlsx)' },
|
||||
{ value: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', label: 'PowerPoint (.pptx)' },
|
||||
]
|
||||
|
||||
const formSchema = z.object({
|
||||
storage_provider: z.enum(['s3', 'local']),
|
||||
local_storage_path: z.string().optional(),
|
||||
max_file_size_mb: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
avatar_max_size_mb: z.string().regex(/^\d+$/, 'Must be a number'),
|
||||
allowed_file_types: z.array(z.string()).min(1, 'Select at least one file type'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
interface StorageSettingsFormProps {
|
||||
settings: {
|
||||
storage_provider?: string
|
||||
local_storage_path?: string
|
||||
max_file_size_mb?: string
|
||||
avatar_max_size_mb?: string
|
||||
allowed_file_types?: string
|
||||
}
|
||||
}
|
||||
|
||||
export function StorageSettingsForm({ settings }: StorageSettingsFormProps) {
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
// Parse allowed file types from JSON string
|
||||
let allowedTypes: string[] = []
|
||||
try {
|
||||
allowedTypes = settings.allowed_file_types
|
||||
? JSON.parse(settings.allowed_file_types)
|
||||
: ['application/pdf', 'video/mp4', 'video/quicktime', 'image/png', 'image/jpeg']
|
||||
} catch {
|
||||
allowedTypes = ['application/pdf', 'video/mp4', 'video/quicktime', 'image/png', 'image/jpeg']
|
||||
}
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
storage_provider: (settings.storage_provider as 's3' | 'local') || 's3',
|
||||
local_storage_path: settings.local_storage_path || './uploads',
|
||||
max_file_size_mb: settings.max_file_size_mb || '500',
|
||||
avatar_max_size_mb: settings.avatar_max_size_mb || '5',
|
||||
allowed_file_types: allowedTypes,
|
||||
},
|
||||
})
|
||||
|
||||
const storageProvider = form.watch('storage_provider')
|
||||
|
||||
const updateSettings = trpc.settings.updateMultiple.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Storage settings saved successfully')
|
||||
utils.settings.getByCategory.invalidate({ category: 'STORAGE' })
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Failed to save settings: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
updateSettings.mutate({
|
||||
settings: [
|
||||
{ key: 'storage_provider', value: data.storage_provider },
|
||||
{ key: 'local_storage_path', value: data.local_storage_path || './uploads' },
|
||||
{ key: 'max_file_size_mb', value: data.max_file_size_mb },
|
||||
{ key: 'avatar_max_size_mb', value: data.avatar_max_size_mb },
|
||||
{ key: 'allowed_file_types', value: JSON.stringify(data.allowed_file_types) },
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Storage Provider Selection */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="storage_provider"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-3">
|
||||
<FormLabel>Storage Provider</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
>
|
||||
<div className="flex items-start space-x-3 rounded-lg border p-4">
|
||||
<RadioGroupItem value="s3" id="s3" className="mt-1" />
|
||||
<Label htmlFor="s3" className="flex flex-col cursor-pointer">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cloud className="h-4 w-4" />
|
||||
<span className="font-medium">S3 / MinIO</span>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Store files in MinIO or S3-compatible storage. Recommended for production.
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3 rounded-lg border p-4">
|
||||
<RadioGroupItem value="local" id="local" className="mt-1" />
|
||||
<Label htmlFor="local" className="flex flex-col cursor-pointer">
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
<span className="font-medium">Local Filesystem</span>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Store files on the local server. Good for development or single-server deployments.
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Local Storage Path (only shown when local is selected) */}
|
||||
{storageProvider === 'local' && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="local_storage_path"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Local Storage Path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="./uploads" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Directory path where files will be stored. Relative paths are from the app root.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="max_file_size_mb"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Maximum File Size (MB)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="1" max="2000" placeholder="500" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Maximum allowed file upload size in megabytes. Recommended: 500 MB for video uploads.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="avatar_max_size_mb"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Maximum Avatar/Logo Size (MB)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="1" max="50" placeholder="5" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Maximum size for profile pictures and project logos.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="allowed_file_types"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<div className="mb-4">
|
||||
<FormLabel>Allowed File Types</FormLabel>
|
||||
<FormDescription>
|
||||
Select which file types can be uploaded to the platform
|
||||
</FormDescription>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{COMMON_FILE_TYPES.map((type) => (
|
||||
<FormField
|
||||
key={type.value}
|
||||
control={form.control}
|
||||
name="allowed_file_types"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem
|
||||
key={type.value}
|
||||
className="flex items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value?.includes(type.value)}
|
||||
onCheckedChange={(checked) => {
|
||||
return checked
|
||||
? field.onChange([...field.value, type.value])
|
||||
: field.onChange(
|
||||
field.value?.filter(
|
||||
(value) => value !== type.value
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="cursor-pointer text-sm font-normal">
|
||||
{type.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{storageProvider === 's3' && (
|
||||
<div className="rounded-lg border border-muted bg-muted/50 p-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<strong>Note:</strong> MinIO connection settings (endpoint, bucket, credentials) are
|
||||
configured via environment variables for security. Set <code>MINIO_ENDPOINT</code> and{' '}
|
||||
<code>MINIO_PUBLIC_ENDPOINT</code> for external MinIO servers.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{storageProvider === 'local' && (
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950">
|
||||
<p className="text-sm text-amber-800 dark:text-amber-200">
|
||||
<strong>Warning:</strong> Local storage is not recommended for production deployments
|
||||
with multiple servers, as files will only be accessible from the server that uploaded them.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={updateSettings.isPending}>
|
||||
{updateSettings.isPending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HardDrive className="mr-2 h-4 w-4" />
|
||||
Save Storage Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user