mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-13 11:06:40 +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:
62
frontend/src/components/networth/RiskAllocationCard.tsx
Normal file
62
frontend/src/components/networth/RiskAllocationCard.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { formatCurrency } from "@/lib/format";
|
||||
import { useTranslation, type TranslationKey } from "@/lib/i18n";
|
||||
import type { RiskLevelSummary } from "@/types";
|
||||
|
||||
interface RiskAllocationCardProps {
|
||||
riskLevels: RiskLevelSummary[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function RiskAllocationCard({ riskLevels, isLoading }: RiskAllocationCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("netWorth.riskAllocationTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<p className="py-10 text-center text-sm text-text-muted">{t("common.loading")}</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
{riskLevels.map((tier) => (
|
||||
<div key={tier.risk_level} className="rounded-lg border border-border p-3.5">
|
||||
<p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-text-muted">
|
||||
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: tier.color }} />
|
||||
{t(`netWorth.riskLevel.${tier.risk_level}` as TranslationKey)}
|
||||
</p>
|
||||
<p className="mt-1.5 text-xl font-semibold tabular-nums text-text-primary">
|
||||
{formatCurrency(tier.total_value)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-text-muted">{tier.percent.toFixed(0)}% {t("netWorth.riskAllocationOfCapital")}</p>
|
||||
|
||||
{tier.items.length > 0 && (
|
||||
<ul className="mt-3 space-y-1.5 border-t border-gridline pt-3">
|
||||
{tier.items.map((item) => (
|
||||
<li key={item.key} className="flex items-center gap-2">
|
||||
<span className="min-w-0 flex-1 truncate text-xs text-text-secondary">
|
||||
{item.key === "cash" ? t("netWorth.assetClass.cash") : item.name}
|
||||
</span>
|
||||
<span className="h-1 w-10 shrink-0 overflow-hidden rounded-full bg-surface-2">
|
||||
<span
|
||||
className="block h-full rounded-full"
|
||||
style={{ width: `${item.percent}%`, backgroundColor: tier.color }}
|
||||
/>
|
||||
</span>
|
||||
<span className="w-8 shrink-0 text-right text-[11px] tabular-nums text-text-muted">
|
||||
{item.percent.toFixed(0)}%
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user