aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2026-01-02 15:35:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: cloud payment history

Browse Source
This commit is contained in:
Jay V
2025-08-29 17:57:59 -04:00
parent 28c341ad32
commit 058163333d
2 changed files with 122 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
cloud/app/src/routes/workspace/[id].tsx
View File

@@ -102,7 +102,35 @@ const dummyUsageData = [
},
]
export default function() {
const dummyPaymentData = [
{
id: "pay_1Ab2Cd3Ef4Gh5678",
amount: 2000000000,
timeCreated: new Date("2025-01-28T14:32:00Z"),
},
{
id: "pay_9Ij8Kl7Mn6Op5432",
amount: 1000000000,
timeCreated: new Date("2025-01-25T09:18:00Z"),
},
{
id: "pay_5Qr4St3Uv2Wx1098",
amount: 5000000000,
timeCreated: new Date("2025-01-20T16:45:00Z"),
},
{
id: "pay_7Yz6Ab5Cd4Ef3210",
amount: 1500000000,
timeCreated: new Date("2025-01-15T11:22:00Z"),
},
{
id: "pay_3Gh2Ij1Kl0Mn9876",
amount: 3000000000,
timeCreated: new Date("2025-01-10T13:55:00Z"),
},
]
export default function () {
const actor = createAsync(() => getActor())
onMount(() => {
console.log("MOUNTED", actor())
@@ -354,24 +382,40 @@ export default function() {
</section>
{/* Payments Section */}
<Show when={billingInfo() && billingInfo()!.payments.length > 0}>
<Show when={dummyPaymentData.length > 0}>
{/* Real data condition: billingInfo() && billingInfo()!.payments.length > 0 */}
<section data-slot="payments-section">
<div data-slot="section-title">
<h2>Payments History</h2>
<p>Your recent payment transactions.</p>
<p>Recent payment transactions.</p>
</div>
<div data-slot="payments-list">
<For each={billingInfo()?.payments}>
{(payment) => (
<div data-slot="payment-item">
<span data-slot="payment-id">{payment.id}</span>
{" | "}
<span data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</span>
{" | "}
<span data-slot="payment-date">{new Date(payment.timeCreated).toLocaleDateString()}</span>
</div>
)}
</For>
<div data-slot="payments-table">
<table data-slot="payments-table-element">
<thead>
<tr>
<th>Date</th>
<th>Payment ID</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<For each={dummyPaymentData}>
{/* Real data: billingInfo()?.payments */}
{(payment) => {
const date = new Date(payment.timeCreated)
return (
<tr>
<td data-slot="payment-date" title={formatDateUTC(date)}>
{formatDateForTable(date)}
</td>
<td data-slot="payment-id">{payment.id}</td>
<td data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</td>
</tr>
)
}}
</For>
</tbody>
</table>
</div>
</section>
</Show>
@@ -380,7 +424,7 @@ export default function() {
<section data-slot="usage-section">
<div data-slot="section-title">
<h2>Usage History</h2>
<p>Your recent API usage and costs.</p>
<p>Recent API usage and costs.</p>
</div>
<div data-slot="usage-table">
<Show

84
cloud/app/src/routes/workspace/index.css
View File

@@ -279,34 +279,74 @@ a {
/* Payments Section */
[data-slot="payments-section"] {
[data-slot="payments-list"] {
display: flex;
flex-direction: column;
gap: var(--space-2);
[data-slot="payments-table"] {
overflow-x: auto;
}
[data-slot="payment-item"] {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3);
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
[data-slot="payments-table-element"] {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
font-family: var(--font-mono);
@media (max-width: 30rem) {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
thead {
border-bottom: 1px solid var(--color-border);
}
}
[data-slot="payment-id"],
[data-slot="payment-amount"],
[data-slot="payment-date"] {
color: var(--color-text-muted);
th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-weight: 600;
color: var(--color-text-secondary);
}
td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-muted);
color: var(--color-text-muted);
font-family: var(--font-mono);
&[data-slot="payment-date"] {
color: var(--color-text);
}
&[data-slot="payment-id"] {
font-family: var(--font-mono);
font-weight: 400;
color: var(--color-text-muted);
max-width: 200px;
word-break: break-word;
}
&[data-slot="payment-amount"] {
color: var(--color-text);
}
}
tbody tr {
&:last-child td {
border-bottom: none;
}
}
@media (max-width: 40rem) {
th,
td {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-xs);
}
th {
&:nth-child(2) /* Payment ID */ {
display: none;
}
}
td {
&:nth-child(2) /* Payment ID */ {
display: none;
}
}
}
}
}