fix(admin): Move percentages outside bars, add cost column to type breakdown

- Move percentage text from inside bars to separate column (always visible)
- Add cost (USD) column to "Wykorzystanie wg typu" section
- Add tokens+cost to type query in backend
- Fix same issues in company detail template

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

blueprints/admin/routes_analytics.py

@@ -480,7 +480,10 @@ def admin_ai_usage():
         # Usage by type (filtered)
         type_query = db.query(
             AIUsageLog.request_type,
-            func.count(AIUsageLog.id).label('count')
+            func.count(AIUsageLog.id).label('count'),
+            func.coalesce(func.sum(AIUsageLog.cost_cents), 0).label('cost_cents'),
+            func.coalesce(func.sum(AIUsageLog.tokens_input), 0).label('tokens_input'),
+            func.coalesce(func.sum(AIUsageLog.tokens_output), 0).label('tokens_output')
         )
         type_query = apply_filters(type_query)
         type_stats = type_query.group_by(AIUsageLog.request_type).order_by(desc('count')).all()
@@ -503,7 +506,9 @@ def admin_ai_usage():
                 'type_label': label,
                 'type_class': css_class,
                 'count': t.count,
-                'percentage': round(percentage, 1)
+                'percentage': round(percentage, 1),
+                'cost_usd': float(t.cost_cents or 0) / 100,
+                'tokens': int(t.tokens_input or 0) + int(t.tokens_output or 0)
             })
 
         # Model breakdown (filtered)

templates/admin/ai_usage_company.html

@@ -163,15 +163,17 @@
     .usage-bar {
         height: 100%;
         border-radius: var(--radius);
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: var(--spacing-sm);
+        min-width: 4px;
+        transition: width 0.3s ease;
+    }
+
+    .usage-pct {
+        width: 50px;
+        min-width: 50px;
+        text-align: right;
         font-size: var(--font-size-xs);
         font-weight: 600;
-        color: white;
-        min-width: 40px;
-        transition: width 0.3s ease;
+        color: var(--text-secondary);
     }
 
     .usage-bar.chat { background: #3b82f6; }
@@ -455,10 +457,9 @@
             <div class="usage-row">
                 <div class="usage-label">{{ item.type_label }}</div>
                 <div class="usage-bar-container">
-                    <div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%">
-                        {{ item.percentage }}%
-                    </div>
+                    <div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%"></div>
                 </div>
+                <div class="usage-pct">{{ item.percentage }}%</div>
                 <div class="usage-count">{{ item.count }}</div>
                 <div class="usage-cost">${{ "%.4f"|format(item.cost_usd) }}</div>
             </div>
@@ -477,10 +478,9 @@
             <div class="usage-row">
                 <div class="usage-label">{{ item.model }}</div>
                 <div class="usage-bar-container">
-                    <div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%">
-                        {{ item.percentage }}%
-                    </div>
+                    <div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%"></div>
                 </div>
+                <div class="usage-pct">{{ item.percentage }}%</div>
                 <div class="usage-count">{{ item.count }}</div>
                 <div class="usage-cost">${{ "%.4f"|format(item.cost_usd) }}</div>
             </div>

templates/admin/ai_usage_dashboard.html

@@ -263,14 +263,7 @@
     .usage-bar {
         height: 100%;
         border-radius: var(--radius);
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: var(--spacing-sm);
-        font-size: var(--font-size-xs);
-        font-weight: 600;
-        color: white;
-        min-width: 40px;
+        min-width: 4px;
         transition: width 0.3s ease;
     }
 
@@ -284,6 +277,15 @@
     .usage-bar.model-3 { background: #f59e0b; }
     .usage-bar.model-4 { background: #8b5cf6; }
 
+    .usage-pct {
+        width: 50px;
+        min-width: 50px;
+        text-align: right;
+        font-size: var(--font-size-xs);
+        font-weight: 600;
+        color: var(--text-secondary);
+    }
+
     .usage-count {
         width: 60px;
         text-align: right;
@@ -759,11 +761,11 @@
             <div class="usage-row">
                 <div class="usage-label">{{ item.type_label }}</div>
                 <div class="usage-bar-container">
-                    <div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%">
-                        {{ item.percentage }}%
-                    </div>
+                    <div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%"></div>
                 </div>
+                <div class="usage-pct">{{ item.percentage }}%</div>
                 <div class="usage-count">{{ item.count }}</div>
+                <div class="usage-cost">${{ "%.4f"|format(item.cost_usd) }}</div>
             </div>
             {% endfor %}
         </div>
@@ -786,10 +788,9 @@
             <div class="usage-row">
                 <div class="usage-label">{{ item.model }}</div>
                 <div class="usage-bar-container">
-                    <div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%">
-                        {{ item.percentage }}%
-                    </div>
+                    <div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%"></div>
                 </div>
+                <div class="usage-pct">{{ item.percentage }}%</div>
                 <div class="usage-count">{{ item.count }}</div>
                 <div class="usage-cost">${{ "%.4f"|format(item.cost_usd) }}</div>
             </div>