Menü
Kurtarma Planı statik SPA geliştirme: Vue 3, Ant Design Vue, IndexedDB, finans motoru, çoklu profil, şifreleme, AI sohbet. Proje dosyalarında veya finans/UI görevlerinde kullan.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | kurtarma-plani |
| description | Kurtarma Planı statik SPA geliştirme: Vue 3, Ant Design Vue, IndexedDB, finans motoru, çoklu profil, şifreleme, AI sohbet. Proje dosyalarında veya finans/UI görevlerinde kullan. |
Tek HTML statik SPA; borç/gelir/gider takibi; IndexedDB; opsiyonel parola şifrelemesi; çoklu profil.
Mimari: Modüler, kütüphane odaklı, tekrar kullanılabilir bileşenler; finans motoru UI'dan ayrık (src/finance/ — saf TS, decimal.js + date-fns). Vue bileşenleri sadece sunum + form state.
UX: Sezgisel, sade yerleşim; mobile-first; açık/koyu tema; finans odaklı tipografi ve tutar vurgusu.
UI kit: Ant Design Vue 4 + @ant-design/icons-vue. Tailwind kullanılmaz; stil AntDV token + <style scoped> + minimal global CSS.
Kabuk: AppShell — aside.kp-sider (pin + hover peek); marka üstte sabit, .kp-sider__nav-scroll (profil + menü) kaydırılabilir, alt footer sabit; üst navbar breadcrumb + araçlar, formlar FormDrawer (stack + ilk alan focus).
Etkileşim: <a-select> dropdownRender slot'unda 「Yeni Kayıt」 → drawer stack (üstte yeni form). Liste: EntityListPage — masaüstü <a-table>, mobil (≤640px) kart; satır/kart tıklama ortak (onListItemClick: varsayılan @edit, @row-click tanımlı sayfalarda satır aksiyonu); araç çubuğu (arama + filtre ikonu · ortada arşiv · yeni kayıt; mobilde arşiv üstte ortada). Filtreler popover içinde (banka built-in bank-filter + :banks; diğerleri declarative :filters="ListFilter<T>[]" — select / numberRange / dateRange; rozet aktif filtre sayısı; 「Filtreyi temizle」 hepsini sıfırlar). Liste route'ları meta.pageLayout: 'wide' veya sekmeli listelerde 'wide-fill'. Renk: ColorPickerInput (form), ColorSwatch (liste color sütunu). Tooltip: KpTooltip — ≤768px tooltip yok; liste sütunlarında tooltip yok (sadece aksiyon ikonları). Drawer: FormDrawer — mobilde tam ekran; stack yatay kaydırma yok (KP_MOBILE_VIEWPORT_MQ). #actions (Vazgeç/Kaydet): varsayılan mobilde drawer footer (sağa dayalı, otomatik genişlik); masaüstü header. Silme header'da yok (form altı .kp-form-drawer-danger-row veya liste TableRowActions). Drawer içi tablo: ham <Table> değil DrawerDataTable; içerik kp-drawer-table-page ile kalan yüksekliği doldurur; row-actions + @edit/@delete (TableRowActions); taksit planı sütunları buildScheduleDrawerColumns (schedule-table-columns.ts). Panel KPI: KpStatRow — two-by-two-until-lg (<992px 2×2); mobileHintToggle ile dar ekranda tek satır ipucu + sağ üst geçiş düğmesi.
Liste URL state: useListQuery({ key }) — arama, arşiv, banka, sıralama, sayfa, sayfa boyutu + declarative filtreler URL query'de. state-key zorunlu (çoklu liste). :loading birleşik: sütun/filtrede kullanılan tüm entity store'ları computed ile birleştir; onMounted yüklemesi ile aynı küme. Güncel bakiye → useAccountBalances().balanceMovementLoading. Masaüstü layout oturtma EntityListPage içinde otomatik (tableMeasurePending). Ayrıntı: ui-patterns.mdc → Liste :loading, Masaüstü tablo layout oturtma.
Liste filtre matrisi: Borçlar → Krediler / Taksitli avans → banka + durum (active/overdue/closed) + anapara + aylık taksit + kalan + vade + başlangıç tarihi. Borçlar → Kredi kartları → banka + limit + borç + kullanılabilir + asgari ödeme. Borçlar → Nakit avans → banka + limit + anapara + işleyen faiz + toplam borç + kullanılabilir. Yönetim → Hesaplar → banka + tür + açılış. Yönetim → Kasalar → açılış. Yönetim → Bankalar / Gelir-Gider türleri → Durum = kullanım (used/unused) — başka entity'lerden referans alıyorsa "Kullanımda". Nakit akışı → Gelir/Gider → tür + hedef/kaynak + durum (cashflowStatus) + tutar + plan/gerçek tarih. Nakit akışı → Transfer → kaynak + hedef + tutar + tarih. Türetilen değerler (summary cache, formül üzerinden) doğrudan getValue callback ile filtreye geçirilir — listede sütun varsa filtre de olmalı. Para birimi filtresi yok (profil para birimi sabit). Her listede en az bir filtre olmalı (yoksa "Durum = kullanım" anlamlı bir varsayılan).
Sayfa genişliği: resolvePageLayout() (src/router/meta.ts); AppShell .kp-page / .kp-page--wide / .kp-page--fill. Liste dikey dolgu: --kp-table-min-h + --kp-table-body-min-h; taşan içerik .kp-content kaydırması (dahili scroll.y yok).
Grafik: ECharts dashboard + ayrı analiz/rapor sayfaları. Üst KPI KpStatRow (HomeView: two-by-two-until-lg; «Bu ay net» mobileHintToggle gelir/gider). Tüm grafikler KpChart.vue sarıcısından geçer — tree-shaken echarts/core + CanvasRenderer + BarChart/LineChart/PieChart + Grid/Legend/Title/Tooltip/DataZoom (yeni grafik tipi gerekirse use([...]) listesine eklenir). Responsive ResizeObserver; tema değiştiğinde dispose + re-init (useUiStore.isDark); isEmpty durumu boş-mesaj overlay'iyle.
Bölgesel: <a-config-provider :locale="trTR">; profil localeSettings (Ayarlar → Bölgesel: locale, para birimi, timezone, tarih formatı). Para birimi formlarda değiştirilemez; LocaleInputNumber + useLocaleFormatters. Varsayılan tr-TR, TRY, Europe/Istanbul. AntDV içeride dayjs; finans date-fns-tz. Görüntü formatlama: her zaman useLocaleFormatters() (formatCurrency, formatDate, formatDateLong, formatNumber); ham Intl.*Format çağırma.
Liste içinde satır-içi aksiyon: EntityListPage __ prefix'li sütun key'leri (__actions, __realize, …) mobil kartlarda otomatik gizler; masaüstü tablosunda customRender: () => h(Popconfirm, …) ile tek-tık aksiyon. Mobilde aynı aksiyon form drawer içinden (örn. Switch) sağlanmalı. Status sütunu mobil kart uyumu için düz string (Tag yerine — Tag istenirse yalnızca tabloda h(Tag, …)).
Vade durumu (M6+): Planlı gelir/gider/transfer için cashflowStatus(item, asOf?) → realized / overdue / due (7 gün) / upcoming. Hesap/kasa gerçekleşmiş bakiyesi için accountBalance / cashRegisterBalance / totalCashOnHand (src/features/cashflow/balanceHelpers.ts). Borç karşılama analizi: computeDebtCoverage(...).
Analitik motor (M7+, src/features/analytics/): Saf TS, UI bağımsız. snapshot.ts → assetSnapshot / debtSnapshot / netWorth (asOf anlık pozisyon, currency-aware: dövizli hesap toplama dahil değil ama listede gözükür). series.ts → monthlyCashflowSeries (plan|actual|effective basis) / incomeByType + expenseByType (donut) / assetTrendSeries (90+ gün için 7'şer adım) / upcomingDebtSeries. useDashboardData.ts → reaktif composable, tüm gerekli store'ları paralel yükler. Yeni dashboard / analiz sayfaları bu modüllerden veri çeker; entity ham hesabı bileşende yapılmaz.
Süreç: Milestone sırası (TODO.md); her teslimatta CHANGELOG ([Unreleased]; npm version ile otomatik [X.Y.Z] taşınması); kural dosyaları .cursor/rules/.
Detay: .cursor/rules/developer-ux.mdc (alwaysApply).
docs/WIKI.md (ilk gereksinimler — eksiksiz)README.mddocs/ARCHITECTURE.mddocs/BANKING-TR.md (referans preset açıklaması)TODO.md| Konu | Kural |
|---|---|
| Profil | Her profil izole; ilk yüklemede seçim |
| Parola | Zorunlu değil; varsa tüm profil verisi şifreli |
| Hassas veri | sensitive: true; export onayı; AI'da yok |
| API keys | Export opsiyonel; AI'ya asla |
| Entity şeması | entities.ts / migration → aynı PR: ai-context-export (+ AI_CONTEXT_VERSION); gerekirse yedek/senkron (export.ts, snapshot.ts, SCHEMA_VERSION / SYNC_SCHEMA_VERSION) |
| TCMB preset | Build embed + IndexedDB; çevrimiçi feed/import ile DB ezme; offline'da DB/embed |
| Çevrimiçi | Finans offline-first; AI + preset feed yalnızca online |
| AI | models.dev embed; stream; usage kalıcı; offline'da devre dışı; kayıt önerisi kp-proposals (src/features/ai/proposals/prompt.ts) |
| Rapor | Excel/PDF UI export only |
npm run build
FETCH_MODELS=1 npm run build
M1 iskelet → M2 veri → M3 yönetimsel → M4–M5 borç → M6 akış → M7 analiz → M8 AI → M9 test
Yeni özellik eklerken TODO.md ve CHANGELOG.md güncelle ([Unreleased]). Yayın: npm version patch (veya minor / major / X.Y.Z) — CHANGELOG taşıması otomatik; ardından main push. Bkz. README § Sürüm ve CHANGELOG.
src/finance/)decimal.js — 28 hane, HALF_EVEN; D(), roundMoney(), moneyEquals() helper'larırates.ts — toMonthly({ value, period }), toDailyFromMonthly(), annualEffectiveFromMonthly()loan.ts — buildAnnuitySchedule(input) (anüite + son taksitte yuvarlama kapanışı), computeLateFee() (default = sözleşme × 1.3, basit günlük), payoffAmount() (kalan anapara + kısmi ay faizi), lateDays()credit-card.ts — creditCardMinPaymentRate(limit, tiers?) (TR: <25k %20 / ≥25k %40), creditCardStatement({ openingBalance, transactions, limit }) (dönem sonu + asgari ödeme), creditCardLateInterest({ unpaidBalance, daysLate, apr, lateApr? }) (default apr × 1.087)cash-advance.ts — runRevolvingLedger({ openingBalance, openingDate, transactions, apr, asOf? }): kronolojik hareketler arasında günlük basit faiz tahakkuku; ödeme önce tahakkuk eden faizi sonra anaparayı düşer; aşırı ödeme sıfırla sınırlanırtaxRateMonthly faize gömülür (i_eff = i · (1 + tax)); preset'ten alınırnpm run test — Vitest birim testleri (toplam 98 test: M4 kredi + M5 kart/revolving + M6 cashflow + bakiye + datepicker + analytics + helper'lar)/analytics route — pageLayout: 'wide'; sekmeler URL'de (?tab=debts|cashflow|accounts)from, to, bank, endpoint (acc:<id> / reg:<id>), category (nakit akışı sekmesi)reports.ts: debtInstallmentRows, cashflowMonthRows, movementRows, filterCashflowRecordsuseAnalyticsFilters / useAnalyticsData: filtre senkron + store yüklemeKpChart + Table — borç (stacked bar + taksit listesi), nakit akışı (bar/line + donut + aylık tablo), hesap geçmişi (trend + hareket listesi)<a-input-number> doğrudan kullanmaz. Daima <LocaleInputNumber kind="currency|percent|integer" />
currency — profil locale ondalık ayracı + Intl.NumberFormat currency hane sayısı (TRY için 2)percent — profil locale'inin yüzde max hane sayısıinteger — precision=0, step=1style="flex: 1; min-width: 0"currency: profileCurrency() (sabit profil para birimi); mevcut kayıtlar düzenlemede kendi currency değerini korur (geri uyumluluk için props.entity?.currency ?? profileCurrency())<a-select> çoklu seçenek listeleri :options="..." array biçiminde (slot'lu <a-select-option> döngüsü yerine)useLocaleFormatters().formatCurrency / formatDate / formatNumber — hardcoded 'tr-TR' veya Intl.NumberFormat doğrudan kullanılmaz/debts route — pageLayout: 'wide'; sekmeler URL'de (?tab=loans|creditCards|cashAdvance|installmentAdvance)DebtsView AdminView ile aynı flex column kalıbı (kp-debts + kp-debts-tabs); sekme panelleri <div class="kp-list-tab-pane"> ile sarılıEntityListPage @row-click listener'ı varken @edit varsayılanını geçersiz kılaradminPrimaryNameColumn('<Tip>') (otomatik genişlik + ellipsis); status sütunu string veya kpTag (EntityListPage / KpColumnTagCell); sütunlara elle width / minWidth verme — prepareListTableColumnspurchase + late + cashAdvance aylık oranlarıcashAdvanceAprMonthly + cashAdvanceLateAprMonthlycashAdvance.monthlyAprCeilingDismissibleDrawerAlert + hint-key (taksit planı, erken kapama, ekstre, nakit avans ledger)CreditCardTxnDrawer (purchase/payment/cashAdvance), nakit avans için CashAdvanceTxnDrawer (draw/payment), taksitli avans için InstallmentAdvancePaymentDrawer (gecikme faizi form ipuçları)InstallmentAdvanceFormDrawer içinde SelectWithCreate ile "Yeni nakit avans hesabı" üst drawer olarak açılabilirreadPreset(): db.bankingPreset.getActive() ?? bundledDefault
updateFromFeed(): require online → fetch → zod.parse → db.put (overwrite)
updateFromFile(): FileReader → zod.parse → db.put (overwrite)
Feed URL: varsayılan uygulama config'inde; ayarlardan override edilebilir.
// useConnectivity: navigator.onLine + optional HEAD probe
// AI routes/components: v-if="isOnline" veya disabled + tooltip
Preset güncelleme butonu offline'da disabled. AI adapter'ları if (!isOnline) return guard.