Init

frontend/src/components/BudgetSetup.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { budgets as budgetsApi, type Budget } from '@/lib/api'
+
+interface Props {
+  existingBudgets: Budget[]
+  onCreated: () => void
+  onCancel: () => void
+}
+
+export function BudgetSetup({ existingBudgets, onCreated, onCancel }: Props) {
+  const { t } = useTranslation()
+  const [name, setName] = useState('')
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+  const [currency, setCurrency] = useState('EUR')
+  const [carryover, setCarryover] = useState('0')
+  const [copyFromId, setCopyFromId] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const handleCreate = async () => {
+    setSaving(true)
+    try {
+      const budget = await budgetsApi.create({
+        name,
+        start_date: startDate,
+        end_date: endDate,
+        currency,
+        carryover_amount: parseFloat(carryover) || 0,
+      })
+      if (copyFromId) {
+        await budgetsApi.copyFrom(budget.id, copyFromId)
+      }
+      onCreated()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="bg-gradient-to-r from-violet-50 to-purple-50">
+        <CardTitle>{t('budget.setup')}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 pt-4">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">{t('budget.name')}</label>
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Oktober 2025" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium">{t('budget.startDate')}</label>
+            <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+          </div>
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium">{t('budget.endDate')}</label>
+            <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium">{t('budget.currency')}</label>
+            <Input value={currency} onChange={(e) => setCurrency(e.target.value)} />
+          </div>
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium">{t('budget.carryover')}</label>
+            <Input type="number" step="0.01" value={carryover} onChange={(e) => setCarryover(e.target.value)} />
+          </div>
+        </div>
+        {existingBudgets.length > 0 && (
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium">{t('budget.copyFrom')}</label>
+            <Select value={copyFromId} onValueChange={setCopyFromId}>
+              <SelectTrigger>
+                <SelectValue placeholder="—" />
+              </SelectTrigger>
+              <SelectContent>
+                {existingBudgets.map((b) => (
+                  <SelectItem key={b.id} value={b.id}>{b.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="flex gap-2 justify-end">
+        <Button variant="outline" onClick={onCancel}>{t('common.cancel')}</Button>
+        <Button onClick={handleCreate} disabled={saving || !name || !startDate || !endDate}>
+          {t('common.create')}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}