adding ammo graph

frontend/src/index.css

@@ -232,11 +232,58 @@ textarea {
 .view-grid,
 .firearm-grid,
 .ammo-grid,
-.settings-grid {
+.settings-grid,
+.ammo-chart {
   display: grid;
   gap: 1rem;
 }
 
+.ammo-chart-panel {
+  margin-bottom: 1.5rem;
+  padding: 1.1rem 1.2rem 1.25rem;
+  border-radius: 22px;
+  border: 1px solid rgba(171, 180, 140, 0.12);
+  background: linear-gradient(180deg, rgba(38, 46, 30, 0.44), rgba(15, 19, 13, 0.74));
+}
+
+.ammo-chart-header h4 {
+  margin: 0.3rem 0 0;
+  font-size: 1.1rem;
+}
+
+.ammo-chart-row {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.ammo-chart-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.ammo-chart-meta span {
+  color: #b8c0af;
+  font-size: 0.92rem;
+}
+
+.ammo-chart-track {
+  width: 100%;
+  height: 14px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: rgba(171, 180, 140, 0.08);
+  border: 1px solid rgba(171, 180, 140, 0.08);
+}
+
+.ammo-chart-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #6f8751, #afbf74);
+  box-shadow: 0 0 22px rgba(126, 151, 82, 0.28);
+}
+
 .auth-divider {
   margin: 1.5rem 0 1rem;
   text-align: center;

frontend/src/pages/Home.tsx

@@ -298,6 +298,17 @@ export default function Home() {
     () => enabledCalibers.filter((caliber) => !ammoPageCaliberIds.includes(caliber.id)),
     [ammoPageCaliberIds, enabledCalibers],
   );
+  const ammoChartData = useMemo(() => {
+    const withRounds = enabledAmmoInventory
+      .filter((inventory) => inventory.roundsOnHand > 0)
+      .sort((left, right) => right.roundsOnHand - left.roundsOnHand);
+    const maxRounds = withRounds[0]?.roundsOnHand ?? 0;
+
+    return withRounds.map((inventory) => ({
+      ...inventory,
+      widthPercent: maxRounds > 0 ? Math.max((inventory.roundsOnHand / maxRounds) * 100, 8) : 0,
+    }));
+  }, [enabledAmmoInventory]);
   const firearmCategoryCounts = useMemo(
     () =>
       firearmCategories.map((category) => ({
@@ -1271,6 +1282,36 @@ export default function Home() {
               </div>
             </div>
 
+            <div className="ammo-chart-panel">
+              <div className="ammo-chart-header">
+                <div>
+                  <span className="panel-kicker">Caliber Breakdown</span>
+                  <h4>Rounds by caliber</h4>
+                </div>
+              </div>
+
+              {ammoChartData.length === 0 ? (
+                <p className="placeholder-copy">Add rounds to a caliber to see how your inventory stacks up.</p>
+              ) : (
+                <div className="ammo-chart">
+                  {ammoChartData.map((inventory) => (
+                    <div className="ammo-chart-row" key={inventory.caliberId}>
+                      <div className="ammo-chart-meta">
+                        <strong>{inventory.caliber}</strong>
+                        <span>{inventory.roundsOnHand.toLocaleString()} rounds</span>
+                      </div>
+                      <div className="ammo-chart-track" aria-hidden="true">
+                        <div
+                          className="ammo-chart-bar"
+                          style={{ width: `${inventory.widthPercent}%` }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
             <div className="ammo-grid">
               {ammoPageInventory.length === 0 ? (
                 <p className="placeholder-copy">Add an enabled caliber to start tracking rounds on this page.</p>