mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-14 11:36:49 +07:00
Initial public release
Aurum — a self-hosted personal finance operating system: cash flow, net worth tracking, budgets, goals, recurring payments, reports, proactive alerts, and a compound-interest returns calculator, all bilingual (RU/EN) and mobile-first. Ships as a three-container Docker Compose stack (Postgres + FastAPI + nginx-served React frontend). See README.md for setup and CONTRIBUTING.md for development.
This commit is contained in:
75
frontend/src/pages/NetWorthPage.tsx
Normal file
75
frontend/src/pages/NetWorthPage.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { NetWorthChart } from "@/components/networth/NetWorthChart";
|
||||
import { AssetAllocationCard } from "@/components/networth/AssetAllocationCard";
|
||||
import { CapitalRoleSummaryCard } from "@/components/networth/CapitalRoleSummaryCard";
|
||||
import { RiskAllocationCard } from "@/components/networth/RiskAllocationCard";
|
||||
import { AssetsTable } from "@/components/networth/AssetsTable";
|
||||
import { AssetFormModal } from "@/components/networth/AssetFormModal";
|
||||
import { AlertBanner } from "@/components/insights/AlertBanner";
|
||||
import { useNetWorthSummary } from "@/hooks/useNetWorth";
|
||||
import { useAssets, useDeleteAsset } from "@/hooks/useAssets";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import type { Asset, NetWorthRange } from "@/types";
|
||||
|
||||
export function NetWorthPage() {
|
||||
const { t } = useTranslation();
|
||||
const [range, setRange] = useState<NetWorthRange>("30d");
|
||||
const { data: summary, isLoading: isSummaryLoading } = useNetWorthSummary(range);
|
||||
const { data: assets, isLoading: isAssetsLoading } = useAssets();
|
||||
const deleteAsset = useDeleteAsset();
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
|
||||
|
||||
function openCreateModal() {
|
||||
setEditingAsset(null);
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEditModal(asset: Asset) {
|
||||
setEditingAsset(asset);
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function handleDelete(asset: Asset) {
|
||||
if (window.confirm(t("netWorth.confirmDeleteAsset", { name: asset.name }))) {
|
||||
deleteAsset.mutate(asset.id);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<AlertBanner />
|
||||
|
||||
<NetWorthChart summary={summary} isLoading={isSummaryLoading} range={range} onRangeChange={setRange} />
|
||||
|
||||
<AssetAllocationCard breakdown={summary?.breakdown ?? []} isLoading={isSummaryLoading} />
|
||||
|
||||
<CapitalRoleSummaryCard roles={summary?.capital_roles ?? []} isLoading={isSummaryLoading} />
|
||||
|
||||
<RiskAllocationCard riskLevels={summary?.risk_levels ?? []} isLoading={isSummaryLoading} />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("netWorth.myAssetsTitle")}</CardTitle>
|
||||
<Button onClick={openCreateModal}>
|
||||
<Plus size={16} />
|
||||
{t("common.add")}
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isAssetsLoading ? (
|
||||
<p className="py-10 text-center text-sm text-text-muted">{t("common.loading")}</p>
|
||||
) : (
|
||||
<AssetsTable items={assets ?? []} onEdit={openEditModal} onDelete={handleDelete} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<AssetFormModal open={modalOpen} onClose={() => setModalOpen(false)} asset={editingAsset} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user