feat(panel): özet kartları, anlık durum ve hızlı harcama ekleme

- Gelir, sabit gider, toplam birikim, devreden borç kartları
- Anlık durum: kalan harcanabilir ve günlük harcama önerisi
- Grup planlanan/gerçekleşen (Haftalık/Aylık)
- "Harcama Ekle": masaüstünde başlıkta, mobilde yüzen düğme
- Yükleniyor iskeleti, boş durumlar, açık dönem yokken son dönem özeti

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-12 23:54:32 +03:00
parent 30136ed1d3
commit 64c185ab96
14 changed files with 479 additions and 20 deletions
+4 -1
View File
@@ -1,5 +1,5 @@
import { useRef, useState } from 'react'
import { useSearchParams } from 'react-router'
import { useLocation, useSearchParams } from 'react-router'
import { Info } from 'lucide-react'
import { PageError, PageHeader, PageLoading } from '@/components/page'
import { PeriodPicker } from '@/features/periods/period-picker'
@@ -40,6 +40,8 @@ function LedgerView({ period }: { period: Period }) {
const [params, setParams] = useSearchParams()
const [today] = useState(() => toIsoDate(new Date()))
const [editing, setEditing] = useState<Entry | null>(null)
// Panel'deki "Harcama Ekle" → tutar alanına odaklan
const focusAmount = (useLocation().state as { focus?: boolean } | null)?.focus === true
const formRef = useRef<HTMLDivElement>(null)
const inPeriod = today >= period.start_date && today <= period.last_date
const todayIndex = inPeriod ? weekIndexFor(period.weeks, today) : null
@@ -108,6 +110,7 @@ function LedgerView({ period }: { period: Period }) {
categories={catalog.c}
methods={catalog.m}
entry={editing ?? undefined}
autoFocus={focusAmount}
onSaved={(date) => goTo(weekIndexFor(period.weeks, date))}
onCancel={() => setEditing(null)}
/>