30 lines
3.4 KiB
JavaScript
30 lines
3.4 KiB
JavaScript
import { c as create_ssr_component, f as escape } from "../../../chunks/ssr.js";
|
|
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
let providers = [];
|
|
let logProvider = "openai";
|
|
(/* @__PURE__ */ new Date()).toISOString().split("T")[0];
|
|
function getModelsForProvider(providerName) {
|
|
const provider = providers.find((p) => p.name === providerName);
|
|
return provider ? provider.models.map((m) => m.name) : [];
|
|
}
|
|
getModelsForProvider(logProvider);
|
|
return `<div class="max-w-6xl mx-auto animate-fade-in"> <div class="mb-6" data-svelte-h="svelte-1ywbnew"><h1 class="text-2xl font-bold text-surface-800">Vendor Cost Tracker</h1> <p class="text-surface-600 mt-1">Track, analyze, and optimize your AI API spending across providers</p></div> <div class="flex gap-1 mb-6 border-b border-surface-200"><button class="${"px-4 py-2 text-sm font-medium transition-colors " + escape(
|
|
"text-primary-600 border-b-2 border-primary-600",
|
|
true
|
|
)}">Dashboard</button> <button class="${"px-4 py-2 text-sm font-medium transition-colors " + escape(
|
|
"text-surface-500 hover:text-surface-700",
|
|
true
|
|
)}">Log Cost</button> <button class="${"px-4 py-2 text-sm font-medium transition-colors " + escape(
|
|
"text-surface-500 hover:text-surface-700",
|
|
true
|
|
)}">Compare Providers</button> <button class="${"px-4 py-2 text-sm font-medium transition-colors " + escape(
|
|
"text-surface-500 hover:text-surface-700",
|
|
true
|
|
)}">Budget Alerts</button></div> ${``} ${`<div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div class="lg:col-span-3 grid grid-cols-4 gap-3"><div class="card p-4 text-center"><p class="text-xs text-surface-600" data-svelte-h="svelte-85t98o">This Month</p> <p class="text-xl font-bold text-primary-600">${escape("$0.00")}</p></div> <div class="card p-4 text-center"><p class="text-xs text-surface-600" data-svelte-h="svelte-10wm6t0">Last Month</p> <p class="text-xl font-bold text-surface-700">${escape("$0.00")}</p></div> <div class="card p-4 text-center"><p class="text-xs text-surface-600" data-svelte-h="svelte-1rp8gbm">Change</p> <p class="${"text-xl font-bold " + escape(
|
|
"text-green-600",
|
|
true
|
|
)}">${escape("0%")}</p></div> <div class="card p-4 text-center"><p class="text-xs text-surface-600" data-svelte-h="svelte-hx77j6">All Time</p> <p class="text-xl font-bold text-surface-800">${escape("$0.00")}</p></div></div> <div class="card p-4"><h3 class="text-sm font-bold text-surface-800 mb-3" data-svelte-h="svelte-tg6wul">By Provider</h3> ${`<p class="text-sm text-surface-500 text-center py-4" data-svelte-h="svelte-1ylm2om">No data yet</p>`}</div> <div class="card p-4"><h3 class="text-sm font-bold text-surface-800 mb-3" data-svelte-h="svelte-199k9g5">By Project</h3> ${`<p class="text-sm text-surface-500 text-center py-4" data-svelte-h="svelte-1ylm2om">No data yet</p>`}</div> <div class="card p-4"><h3 class="text-sm font-bold text-surface-800 mb-3" data-svelte-h="svelte-q5gb1t">By Model</h3> ${`<p class="text-sm text-surface-500 text-center py-4" data-svelte-h="svelte-1ylm2om">No data yet</p>`}</div> <div class="lg:col-span-3 card p-4"><h3 class="text-sm font-bold text-surface-800 mb-3" data-svelte-h="svelte-1pp27mx">Daily Breakdown</h3> ${`<p class="text-sm text-surface-500 text-center py-8" data-svelte-h="svelte-16mfyk5">No daily data yet. Start logging costs!</p>`}</div></div> `}</div>`;
|
|
});
|
|
export {
|
|
Page as default
|
|
};
|