@meshxdata/fops 0.1.55 → 0.1.57

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Audit.jsx

@@ -1,164 +0,0 @@
-import React, { useState } from "react";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import { useAudit } from "../api/queries";
-
-function SeverityBadge({ severity }) {
-  const cls = severity === "warn"
-    ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
-    : "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400";
-  return <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${cls}`}>{severity}</span>;
-}
-
-function FindingsTable({ findings }) {
-  if (!findings?.length) return <p className="text-sm text-green-500 py-4 text-center">No findings</p>;
-  const sorted = [...findings].sort((a, b) => (a.severity === "warn" ? -1 : 1) - (b.severity === "warn" ? -1 : 1));
-  return (
-    <table className="w-full text-sm">
-      <thead>
-        <tr className="text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase border-b border-gray-200 dark:border-gray-700">
-          <th className="px-4 py-2 w-20">Severity</th>
-          <th className="px-4 py-2 w-40">Check</th>
-          <th className="px-4 py-2">Message</th>
-          <th className="px-4 py-2">Fix</th>
-        </tr>
-      </thead>
-      <tbody>
-        {sorted.map((f, i) => (
-          <tr key={i} className="border-b border-gray-100 dark:border-gray-700/50">
-            <td className="px-4 py-2"><SeverityBadge severity={f.severity} /></td>
-            <td className="px-4 py-2"><code className="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">{f.check}</code></td>
-            <td className="px-4 py-2 text-gray-700 dark:text-gray-300">{f.message}</td>
-            <td className="px-4 py-2"><code className="text-xs text-gray-500 break-all">{f.fix || ""}</code></td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-function ResourceGroup({ title, resources, nameKey }) {
-  const [expanded, setExpanded] = useState(null);
-  if (!resources?.length) return null;
-  return (
-    <div className="mb-8">
-      <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">{title}</h2>
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase border-b border-gray-200 dark:border-gray-700">
-              <th className="px-5 py-3">Name</th>
-              <th className="px-5 py-3">Location</th>
-              <th className="px-5 py-3 w-24">Warnings</th>
-              <th className="px-5 py-3 w-24">Info</th>
-            </tr>
-          </thead>
-          <tbody>
-            {resources.map((r, i) => {
-              const name = r[nameKey] || "?";
-              const warns = (r.findings || []).filter((f) => f.severity === "warn").length;
-              const infos = (r.findings || []).filter((f) => f.severity === "info").length;
-              return (
-                <React.Fragment key={i}>
-                  <tr
-                    className="border-b border-gray-100 dark:border-gray-700/50 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30"
-                    onClick={() => setExpanded(expanded === i ? null : i)}
-                  >
-                    <td className="px-5 py-3 font-medium text-gray-800 dark:text-gray-200">{name}</td>
-                    <td className="px-5 py-3 text-gray-600 dark:text-gray-400">{r.location || "-"}</td>
-                    <td className="px-5 py-3">
-                      {warns > 0 ? <><SeverityBadge severity="warn" /><span className="ml-1 text-xs">{warns > 1 ? `x${warns}` : ""}</span></> : <span className="text-gray-400">0</span>}
-                    </td>
-                    <td className="px-5 py-3 text-gray-500">{infos}</td>
-                  </tr>
-                  {expanded === i && (
-                    <tr>
-                      <td colSpan={4} className="p-0">
-                        <div className="bg-gray-50 dark:bg-gray-900/50 p-4">
-                          <FindingsTable findings={r.findings} />
-                        </div>
-                      </td>
-                    </tr>
-                  )}
-                </React.Fragment>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-function Audit() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const { data, isLoading, refetch, isFetching } = useAudit();
-
-  const vmData = data?.vms || {};
-  const aksData = data?.aks || {};
-  const storageData = data?.storage || {};
-  const allFindings = [...(vmData.findings || []), ...(aksData.findings || []), ...(storageData.findings || [])];
-  const totalWarns = allFindings.filter((f) => f.severity === "warn").length;
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main className="grow">
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            <div className="sm:flex sm:justify-between sm:items-center mb-8">
-              <div>
-                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Security Audit</h1>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Azure infrastructure security posture</p>
-              </div>
-              <button
-                className="btn bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white disabled:opacity-50"
-                onClick={() => refetch()}
-                disabled={isFetching}
-              >
-                {isFetching ? "Scanning..." : "Run Audit"}
-              </button>
-            </div>
-
-            <div className="grid grid-cols-4 gap-4 mb-8">
-              {[
-                { label: "Total Findings", value: allFindings.length },
-                { label: "Warnings", value: totalWarns, color: "text-yellow-500" },
-                { label: "Resources", value: (vmData.vms?.length || 0) + (aksData.clusters?.length || 0) + (storageData.accounts?.length || 0) },
-                { label: "Status", value: (isLoading || isFetching) ? "Scanning..." : !data ? "Not scanned" : totalWarns === 0 ? "Clean" : `${totalWarns} issues` },
-              ].map((c, i) => (
-                <div key={i} className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
-                  <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">{c.label}</p>
-                  <p className={`text-2xl font-semibold ${c.color || "text-gray-800 dark:text-gray-100"}`}>{c.value}</p>
-                </div>
-              ))}
-            </div>
-
-            {!data && !isLoading && !isFetching ? (
-              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
-                <p className="text-sm text-gray-500 mb-4">Click "Run Audit" to scan Azure infrastructure for security issues.</p>
-                <button
-                  className="btn bg-gray-900 text-gray-100 hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white"
-                  onClick={() => refetch()}
-                >Run Audit</button>
-              </div>
-            ) : isLoading || isFetching ? (
-              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
-                <p className="text-sm text-gray-500">Running security audit across all Azure resources...</p>
-              </div>
-            ) : (
-              <>
-                <ResourceGroup title="Virtual Machines" resources={vmData.vms} nameKey="vm" />
-                <ResourceGroup title="AKS Clusters" resources={aksData.clusters} nameKey="cluster" />
-                <ResourceGroup title="Storage Accounts" resources={storageData.accounts} nameKey="account" />
-              </>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export default Audit;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/pages/Costs.jsx

@@ -1,305 +0,0 @@
-import React, { useState } from "react";
-import Sidebar from "../partials/Sidebar";
-import Header from "../partials/Header";
-import { useCosts } from "../api/queries";
-
-const CURRENCIES = [
-  { code: "USD", symbol: "$" },
-  { code: "EUR", symbol: "€" },
-  { code: "GBP", symbol: "£" },
-  { code: "CHF", symbol: "CHF" },
-  { code: "AED", symbol: "AED" },
-];
-
-function formatCost(amount, currency = "USD") {
-  const cur = CURRENCIES.find((c) => c.code === currency) || CURRENCIES[0];
-  return `${cur.symbol} ${parseFloat(amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-}
-
-function exportCsv(vmCosts, clusterCosts, serviceCosts, currency) {
-  const lines = ["Type,Name,Amount,Currency"];
-  for (const c of vmCosts) lines.push(`VM,"${c.name}",${c.amount},${currency}`);
-  for (const c of clusterCosts) lines.push(`Cluster,"${c.name}",${c.amount},${currency}`);
-  for (const c of serviceCosts) lines.push(`Service,"${c.name}",${c.amount},${currency}`);
-  const blob = new Blob([lines.join("\n")], { type: "text/csv" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `cost-report-${new Date().toISOString().slice(0, 10)}.csv`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function CostBar({ amount, max, currency }) {
-  const pct = max > 0 ? (amount / max) * 100 : 0;
-  return (
-    <div className="flex items-center gap-3 w-full">
-      <div className="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-        <div className="h-full bg-violet-500 rounded-full" style={{ width: `${Math.max(pct, 1)}%` }} />
-      </div>
-      <span className="text-sm font-mono text-gray-800 dark:text-gray-100 whitespace-nowrap w-28 text-right">{formatCost(amount, currency)}</span>
-    </div>
-  );
-}
-
-function Costs() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [days, setDays] = useState(30);
-  const [selectedCurrency, setSelectedCurrency] = useState("USD");
-  const { data, isLoading, error } = useCosts(days);
-
-  // Merge data from all providers
-  const allVmCosts = [];
-  const allClusterCosts = [];
-  const allServiceCosts = [];
-  let currency = "USD";
-  let costError = null;
-  let cachedAt = null;
-
-  if (data) {
-    for (const [, providerData] of Object.entries(data)) {
-      if (providerData.error) {
-        costError = providerData.error;
-        continue;
-      }
-      if (providerData.currency) currency = providerData.currency;
-      if (providerData.fromCache && providerData.cachedAt) {
-        cachedAt = new Date(providerData.cachedAt);
-      }
-
-      for (const [name, amount] of Object.entries(providerData.vmCosts || {})) {
-        allVmCosts.push({ name, amount });
-      }
-      for (const [name, amount] of Object.entries(providerData.clusterCosts || {})) {
-        allClusterCosts.push({ name, amount });
-      }
-      for (const [name, amount] of Object.entries(providerData.byService || {})) {
-        allServiceCosts.push({ name, amount });
-      }
-    }
-  }
-
-  allVmCosts.sort((a, b) => b.amount - a.amount);
-  allClusterCosts.sort((a, b) => b.amount - a.amount);
-  allServiceCosts.sort((a, b) => b.amount - a.amount);
-
-  const vmTotal = allVmCosts.reduce((s, c) => s + c.amount, 0);
-  const clusterTotal = allClusterCosts.reduce((s, c) => s + c.amount, 0);
-  const serviceTotal = allServiceCosts.reduce((s, c) => s + c.amount, 0);
-  const maxVm = allVmCosts[0]?.amount || 0;
-  const maxCluster = allClusterCosts[0]?.amount || 0;
-  const maxService = allServiceCosts[0]?.amount || 0;
-
-  const hasData = allVmCosts.length > 0 || allClusterCosts.length > 0 || allServiceCosts.length > 0;
-
-  const thClass = "px-5 py-3 font-semibold text-left whitespace-nowrap";
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-        <main className="grow">
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            <div className="sm:flex sm:justify-between sm:items-center mb-8">
-              <div className="mb-4 sm:mb-0">
-                <h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Costs</h1>
-                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Azure Cost Management data for tracked resources</p>
-              </div>
-              <div className="flex items-center gap-2">
-                {cachedAt && (
-                  <span className="text-xs text-amber-600 dark:text-amber-400 bg-amber-500/10 px-2 py-1 rounded-lg">
-                    Cached {cachedAt.toLocaleString()}
-                  </span>
-                )}
-                <select
-                  className="form-select bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-sm text-gray-600 dark:text-gray-300 rounded-lg"
-                  value={days}
-                  onChange={(e) => setDays(Number(e.target.value))}
-                >
-                  <option value={7}>Last 7 days</option>
-                  <option value={14}>Last 14 days</option>
-                  <option value={30}>Last 30 days</option>
-                  <option value={60}>Last 60 days</option>
-                  <option value={90}>Last 90 days</option>
-                </select>
-                <select
-                  className="form-select bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-sm text-gray-600 dark:text-gray-300 rounded-lg"
-                  value={selectedCurrency}
-                  onChange={(e) => setSelectedCurrency(e.target.value)}
-                >
-                  {CURRENCIES.map((c) => (
-                    <option key={c.code} value={c.code}>{c.code} ({c.symbol})</option>
-                  ))}
-                </select>
-                <button
-                  className="btn bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
-                  onClick={() => exportCsv(allVmCosts, allClusterCosts, allServiceCosts, selectedCurrency)}
-                  disabled={isLoading || !hasData}
-                >
-                  <svg className="shrink-0 fill-current mr-1" width="16" height="16" viewBox="0 0 16 16"><path d="M8 1a1 1 0 0 1 1 1v6.6l2.3-2.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4L7 8.6V2a1 1 0 0 1 1-1ZM2 13a1 1 0 0 1 1 1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1v0a1 1 0 0 1 1-1Z"/></svg>
-                  Export CSV
-                </button>
-              </div>
-            </div>
-
-            {isLoading ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">
-                Loading cost data... This may take a moment.
-              </div>
-            ) : error ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-red-500 text-center py-12">
-                Failed to load costs: {error.message}
-              </div>
-            ) : costError && !hasData ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-center py-12 px-5">
-                <div className="text-red-500 mb-2">Cost query failed: {costError}</div>
-                <div className="text-gray-400 dark:text-gray-500">
-                  Make sure you are logged into Azure (<code className="text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded font-mono">az login</code>) and have Cost Management access.
-                </div>
-              </div>
-            ) : !hasData ? (
-              <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl text-sm text-gray-400 dark:text-gray-500 text-center py-12">
-                No cost data available for the selected period.
-              </div>
-            ) : (
-              <div className="space-y-6">
-                {/* Summary cards */}
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
-                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">VM Total ({days}d)</div>
-                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(vmTotal, selectedCurrency)}</div>
-                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allVmCosts.length} VM(s)</div>
-                  </div>
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
-                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">Cluster Total ({days}d)</div>
-                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(clusterTotal, selectedCurrency)}</div>
-                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allClusterCosts.length} cluster(s)</div>
-                  </div>
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl px-5 py-4">
-                    <div className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold mb-1">Subscription Total ({days}d)</div>
-                    <div className="text-2xl font-bold text-gray-800 dark:text-gray-100">{formatCost(serviceTotal, selectedCurrency)}</div>
-                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">{allServiceCosts.length} service(s)</div>
-                  </div>
-                </div>
-
-                {/* VM costs */}
-                {allVmCosts.length > 0 && (
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by VM</h2>
-                    </header>
-                    <div className="overflow-x-auto">
-                      <table className="table-auto w-full dark:text-gray-300">
-                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                          <tr>
-                            <th className={thClass}>VM</th>
-                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
-                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
-                          </tr>
-                        </thead>
-                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                          {allVmCosts.map((c) => (
-                            <tr key={c.name}>
-                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
-                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxVm} currency={selectedCurrency} /></td>
-                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{vmTotal > 0 ? ((c.amount / vmTotal) * 100).toFixed(1) : "0.0"}%</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                        <tfoot>
-                          <tr className="border-t border-gray-200 dark:border-gray-700">
-                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
-                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(vmTotal, selectedCurrency)}</td>
-                          </tr>
-                        </tfoot>
-                      </table>
-                    </div>
-                  </div>
-                )}
-
-                {/* Cluster costs */}
-                {allClusterCosts.length > 0 && (
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by Cluster</h2>
-                    </header>
-                    <div className="overflow-x-auto">
-                      <table className="table-auto w-full dark:text-gray-300">
-                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                          <tr>
-                            <th className={thClass}>Cluster</th>
-                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
-                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
-                          </tr>
-                        </thead>
-                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                          {allClusterCosts.map((c) => (
-                            <tr key={c.name}>
-                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
-                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxCluster} currency={selectedCurrency} /></td>
-                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{clusterTotal > 0 ? ((c.amount / clusterTotal) * 100).toFixed(1) : "0.0"}%</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                        <tfoot>
-                          <tr className="border-t border-gray-200 dark:border-gray-700">
-                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
-                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(clusterTotal, selectedCurrency)}</td>
-                          </tr>
-                        </tfoot>
-                      </table>
-                    </div>
-                  </div>
-                )}
-
-                {/* Cost by service */}
-                {allServiceCosts.length > 0 && (
-                  <div className="bg-white dark:bg-gray-800 shadow-xs rounded-xl">
-                    <header className="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
-                      <h2 className="font-semibold text-gray-800 dark:text-gray-100">Cost by Azure Service</h2>
-                    </header>
-                    <div className="overflow-x-auto">
-                      <table className="table-auto w-full dark:text-gray-300">
-                        <thead className="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-900/20 border-t border-b border-gray-100 dark:border-gray-700/60">
-                          <tr>
-                            <th className={thClass}>Service</th>
-                            <th className={`${thClass} w-full`}>Cost ({days}d)</th>
-                            <th className="px-5 py-3 font-semibold text-right whitespace-nowrap">% of Total</th>
-                          </tr>
-                        </thead>
-                        <tbody className="text-sm divide-y divide-gray-100 dark:divide-gray-700/60">
-                          {allServiceCosts.map((c) => (
-                            <tr key={c.name}>
-                              <td className="px-5 py-3 whitespace-nowrap font-medium text-gray-800 dark:text-gray-100">{c.name}</td>
-                              <td className="px-5 py-3"><CostBar amount={c.amount} max={maxService} currency={selectedCurrency} /></td>
-                              <td className="px-5 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400 font-mono text-xs">{serviceTotal > 0 ? ((c.amount / serviceTotal) * 100).toFixed(1) : "0.0"}%</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                        <tfoot>
-                          <tr className="border-t border-gray-200 dark:border-gray-700">
-                            <td className="px-5 py-3 font-semibold text-gray-800 dark:text-gray-100">Total</td>
-                            <td className="px-5 py-3 font-mono font-semibold text-gray-800 dark:text-gray-100 text-right" colSpan="2">{formatCost(serviceTotal, selectedCurrency)}</td>
-                          </tr>
-                        </tfoot>
-                      </table>
-                    </div>
-                  </div>
-                )}
-
-                {costError && (
-                  <div className="text-xs text-yellow-600 dark:text-yellow-400 bg-yellow-500/10 rounded-lg px-4 py-2">
-                    Warning: {costError}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export default Costs;