Scrum4Me/components/settings/min-quota-editor.tsx
Scrum4Me Agent c11b5f3b4c feat(PBI-49): add BEM sub-element data-debug-id to components/settings/*
- leave-product-button: root only (single-button component)
- min-quota-editor: __input (number input), __save (save button)
- profile-editor: __username (bio/short-description input), __save (submit)
- role-manager: __roles (checkbox list), __add (save button)
- token-manager: __tokens (active tokens list), __generate (create button)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 22:30:28 +02:00

61 lines
2.1 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"
data-debug-id="min-quota-editor__input"
/>
<span className="text-sm text-muted-foreground">%</span>
<DemoTooltip show={isDemo}>
<Button onClick={handleSave} disabled={isDemo || isPending} size="sm" data-debug-id="min-quota-editor__save">
Opslaan
</Button>
</DemoTooltip>
</div>
</div>
)
}