60 lines
2 KiB
TypeScript
60 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
|
import { updateMinQuotaPctAction } from '@/actions/settings'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
interface MinQuotaEditorProps {
|
|
currentValue: number
|
|
isDemo: boolean
|
|
}
|
|
|
|
export function MinQuotaEditor({ currentValue, isDemo }: MinQuotaEditorProps) {
|
|
const [value, setValue] = useState(currentValue)
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
function handleSave() {
|
|
startTransition(async () => {
|
|
const result = await updateMinQuotaPctAction(value)
|
|
if ('error' in result) {
|
|
toast.error(result.error as string)
|
|
} else {
|
|
toast.success('Instelling opgeslagen')
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3" {...debugProps('min-quota-editor', 'MinQuotaEditor', 'components/settings/min-quota-editor.tsx')}>
|
|
<div>
|
|
<label htmlFor="min-quota-pct" className="text-sm font-medium text-foreground">
|
|
Minimaal beschikbaar Claude-quota voordat de worker een job oppakt (%)
|
|
</label>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Worker slaapt tot quota gereset is wanneer onder deze drempel.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
id="min-quota-pct"
|
|
type="number"
|
|
min={1}
|
|
max={100}
|
|
value={value}
|
|
onChange={e => setValue(Number(e.target.value))}
|
|
disabled={isDemo || isPending}
|
|
className="w-24 rounded border border-border bg-surface-container px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">%</span>
|
|
<DemoTooltip show={isDemo}>
|
|
<Button onClick={handleSave} disabled={isDemo || isPending} size="sm">
|
|
Opslaan
|
|
</Button>
|
|
</DemoTooltip>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|