1 files changed, 39 insertions, 0 deletions
diff --git a/frontend/components/prism/QualityCard.tsx b/frontend/components/prism/QualityCard.tsx
new file mode 100644
index 0000000..e220fce
--- /dev/null
+++ b/frontend/components/prism/QualityCard.tsx
@@ -0,0 +1,39 @@
+import type { TickerOverview } from "@/types/api";
+import { fmtNumber, fmtPct } from "@/lib/format";
+
+export function QualityCard({ overview }: { overview: TickerOverview }) {
+  const rows = [
+    { label: "Gross Margin", value: fmtPct(overview.ratios.gross_margin_ttm), missing: overview.ratios.gross_margin_ttm == null },
+    { label: "Op Margin", value: fmtPct(overview.ratios.operating_margin_ttm), missing: overview.ratios.operating_margin_ttm == null },
+    { label: "Net Margin", value: fmtPct(overview.ratios.net_margin_ttm), missing: overview.ratios.net_margin_ttm == null },
+    { label: "ROE", value: fmtPct(overview.ratios.roe_ttm), missing: overview.ratios.roe_ttm == null },
+    { label: "ROA", value: fmtPct(overview.ratios.roa_ttm), missing: overview.ratios.roa_ttm == null },
+    { label: "ROIC", value: fmtPct(overview.ratios.roic_ttm), missing: overview.ratios.roic_ttm == null },
+    { label: "D/E", value: overview.ratios.debt_to_equity == null ? "-" : `${fmtNumber(overview.ratios.debt_to_equity)}x`, missing: overview.ratios.debt_to_equity == null },
+    { label: "Current Ratio", value: overview.ratios.current_ratio == null ? "-" : `${fmtNumber(overview.ratios.current_ratio)}x`, missing: overview.ratios.current_ratio == null },
+    { label: "Dividend Yield", value: fmtPct(overview.ratios.dividend_yield_ttm), missing: overview.ratios.dividend_yield_ttm == null },
+    { label: "Payout Ratio", value: fmtPct(overview.ratios.dividend_payout_ratio_ttm), missing: overview.ratios.dividend_payout_ratio_ttm == null },
+  ];
+
+  const visible = rows.filter((r) => !r.missing);
+  if (!visible.length) return null;
+
+  return (
+    <section className="psm-card">
+      <div className="psm-card-head">
+        <div>
+          <div className="psm-eyebrow">Quality</div>
+          <h2 className="psm-card-title">Quality</h2>
+        </div>
+      </div>
+      <div className="psm-stat-list">
+        {visible.map((row) => (
+          <div key={row.label} className="psm-stat-row">
+            <span className="psm-stat-label">{row.label}</span>
+            <span className="psm-stat-value">{row.value}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}