mirror of
https://github.com/aljazceru/hypergolic.git
synced 2026-01-24 07:44:30 +01:00
problem: rocket page sux
This commit is contained in:
gsovereignty
104
src/components/Pie.svelte
Normal file
104
src/components/Pie.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import { Card, Chart } from 'flowbite-svelte';
|
||||
|
||||
const options = {
|
||||
series: [35.1, 23.5, 2.4, 5.4],
|
||||
colors: ['#1C64F2', '#16BDCA', '#FDBA8C', '#E74694'],
|
||||
chart: {
|
||||
height: 320,
|
||||
width: '100%',
|
||||
type: 'donut'
|
||||
},
|
||||
stroke: {
|
||||
colors: ['transparent'],
|
||||
lineCap: ''
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
offsetY: 20
|
||||
},
|
||||
total: {
|
||||
showAlways: false,
|
||||
show: false,
|
||||
label: 'Merit Distribution',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
formatter: function (w) {
|
||||
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
||||
return a + b;
|
||||
}, 0);
|
||||
return `${sum}k`;
|
||||
}
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
offsetY: -20,
|
||||
formatter: function (value) {
|
||||
return value + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
size: '40%'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -2
|
||||
}
|
||||
},
|
||||
labels: ['Direct', 'Sponsor', 'Affiliate', 'Email marketing'],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'bottom',
|
||||
fontFamily: 'Inter, sans-serif'
|
||||
},
|
||||
yaxis: {
|
||||
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + 'k';
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
<div class="flex justify-between items-start w-full">
|
||||
<div class="flex-col items-center">
|
||||
<div class="flex items-center mb-1">
|
||||
<h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Merit Distribution</h5>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Chart {options} class="py-6" />
|
||||
|
||||
|
||||
22
src/components/ProductCardFromEvent.svelte
Normal file
22
src/components/ProductCardFromEvent.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ndk } from "@/ndk";
|
||||
import type { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import ProductCard from './ProductCard.svelte';
|
||||
export let productID: string;
|
||||
export let rocket:NDKEvent;
|
||||
let productEvent:NDKEvent | undefined;
|
||||
|
||||
onMount(()=>{
|
||||
$ndk.fetchEvent(productID).then((e)=>{
|
||||
if (e) {
|
||||
productEvent = e
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
{#if productEvent}
|
||||
<ProductCard {rocket} product={productEvent} />
|
||||
{/if}
|
||||
63
src/components/ProductPurchases.svelte
Normal file
63
src/components/ProductPurchases.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import type { RocketProduct } from '@/event_helpers/rockets';
|
||||
import { ndk } from '@/ndk';
|
||||
import type { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { onDestroy } from 'svelte';
|
||||
import * as Card from '@/components/ui/card';
|
||||
import * as Table from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
export let product: RocketProduct;
|
||||
export let rocket: NDKEvent;
|
||||
|
||||
let zaps = $ndk.storeSubscribe(
|
||||
[{ '#a': [`31108:${rocket.author.pubkey}:${rocket.dTag}`], kinds: [9735] }],
|
||||
{
|
||||
subId: product.ID
|
||||
}
|
||||
);
|
||||
|
||||
onDestroy(() => {
|
||||
zaps?.unsubscribe();
|
||||
});
|
||||
|
||||
//todo: validate zaps against product, publish store of all successful payments including those already in rocket. Publish another store with successful payments that are not yet included in rocket state so we can update the state and republish.
|
||||
</script>
|
||||
|
||||
{#each $zaps as z}<a
|
||||
href="#"
|
||||
on:click={() => {
|
||||
console.log(z.rawEvent());
|
||||
}}>{z.id}</a
|
||||
><br />{/each}
|
||||
|
||||
<Card.Root
|
||||
data-x-chunk-name="dashboard-05-chunk-3"
|
||||
data-x-chunk-description="A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount."
|
||||
>
|
||||
<Card.Header class="px-7">
|
||||
<Card.Title>Purchases</Card.Title>
|
||||
<Card.Description>Purchase history for {product.ID}</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Buyer</Table.Head>
|
||||
<Table.Head class="hidden md:table-cell">Date</Table.Head>
|
||||
<Table.Head class="text-right">Amount</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row class="bg-accent">
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Liam Johnson</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">liam@example.com</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">2023-06-23</Table.Cell>
|
||||
<Table.Cell class="text-right">$250.00</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
23
src/components/ProductsForRocket.svelte
Normal file
23
src/components/ProductsForRocket.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import type { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
|
||||
import Todo from './Todo.svelte';
|
||||
import { writable, type Readable } from 'svelte/store';
|
||||
import { getMapOfProductsFromRocket, type RocketProduct } from '@/event_helpers/rockets';
|
||||
import ProductPurchases from './ProductPurchases.svelte';
|
||||
import ProductCard from './ProductCard.svelte';
|
||||
import ProductCardFromEvent from './ProductCardFromEvent.svelte';
|
||||
|
||||
|
||||
export let rocketEvent: NDKEvent;
|
||||
|
||||
$: rocketProducts = getMapOfProductsFromRocket(rocketEvent);
|
||||
</script>
|
||||
|
||||
{#if rocketEvent && rocketProducts.size > 0}
|
||||
{#each rocketProducts as [id, product]}
|
||||
<ProductCardFromEvent rocket={rocketEvent} productID={product.ID} />
|
||||
<ProductPurchases rocket={rocketEvent} {product} />{/each}
|
||||
{/if}
|
||||
|
||||
|
||||
490
src/components/RocketDashboard copy.svelte
Normal file
490
src/components/RocketDashboard copy.svelte
Normal file
@@ -0,0 +1,490 @@
|
||||
<script lang="ts">
|
||||
import ChevronLeft from "lucide-svelte/icons/chevron-left";
|
||||
import ChevronRight from "lucide-svelte/icons/chevron-right";
|
||||
import Copy from "lucide-svelte/icons/copy";
|
||||
import CreditCard from "lucide-svelte/icons/credit-card";
|
||||
import EllipsisVertical from "lucide-svelte/icons/ellipsis-vertical";
|
||||
import File from "lucide-svelte/icons/file";
|
||||
import ListFilter from "lucide-svelte/icons/list-filter";
|
||||
import Truck from "lucide-svelte/icons/truck";
|
||||
|
||||
import { Badge } from "$lib/components/ui/badge/index.js";
|
||||
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import * as Card from "$lib/components/ui/card/index.js";
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
||||
import * as Pagination from "$lib/components/ui/pagination/index.js";
|
||||
import { Progress } from "$lib/components/ui/progress/index.js";
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import * as Table from "$lib/components/ui/table/index.js";
|
||||
import * as Tabs from "$lib/components/ui/tabs/index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="flex flex-col sm:gap-4">
|
||||
<header
|
||||
class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
|
||||
>
|
||||
|
||||
<Breadcrumb.Root class="hidden md:flex">
|
||||
<Breadcrumb.List>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="##">Rocket Name</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Page>Recent Orders</Breadcrumb.Page>
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb.List>
|
||||
</Breadcrumb.Root>
|
||||
</header>
|
||||
<main
|
||||
class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3"
|
||||
>
|
||||
<div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
|
||||
<div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
|
||||
<Card.Root class="sm:col-span-2">
|
||||
<Card.Header class="pb-3">
|
||||
<Card.Title>Your Orders</Card.Title>
|
||||
<Card.Description class="max-w-lg text-balance leading-relaxed">
|
||||
Introducing Our Dynamic Orders Dashboard for Seamless Management and
|
||||
Insightful Analysis.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Footer>
|
||||
<Button>Create New Order</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Description>This Week</Card.Description>
|
||||
<Card.Title class="text-4xl">$1329</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="text-xs text-muted-foreground">+25% from last week</div>
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<Progress value={25} aria-label="25% increase" />
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Description>This Month</Card.Description>
|
||||
<Card.Title class="text-3xl">$5,329</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="text-xs text-muted-foreground">+10% from last month</div>
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<Progress value={12} aria-label="12% increase" />
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</div>
|
||||
<Tabs.Root value="week">
|
||||
<div class="flex items-center">
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="week">Week</Tabs.Trigger>
|
||||
<Tabs.Trigger value="month">Month</Tabs.Trigger>
|
||||
<Tabs.Trigger value="year">Year</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="h-7 gap-1 text-sm"
|
||||
builders={[builder]}
|
||||
>
|
||||
<ListFilter class="h-3.5 w-3.5" />
|
||||
<span class="sr-only sm:not-sr-only">Filter</span>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end">
|
||||
<DropdownMenu.Label>Filter by</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.CheckboxItem checked>
|
||||
Fulfilled
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem>Declined</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem>Refunded</DropdownMenu.CheckboxItem>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
<Button size="sm" variant="outline" class="h-7 gap-1 text-sm">
|
||||
<File class="h-3.5 w-3.5" />
|
||||
<span class="sr-only sm:not-sr-only">Export</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs.Content value="week">
|
||||
<Card.Root>
|
||||
<Card.Header class="px-7">
|
||||
<Card.Title>Orders</Card.Title>
|
||||
<Card.Description>Recent orders from your store.</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Customer</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell">
|
||||
Type
|
||||
</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell">
|
||||
Status
|
||||
</Table.Head>
|
||||
<Table.Head class="hidden md:table-cell">
|
||||
Date
|
||||
</Table.Head>
|
||||
<Table.Head class="text-right">Amount</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
<Table.Row class="bg-accent">
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Liam Johnson</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
liam@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Sale
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-23
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$250.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Olivia Smith</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
olivia@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Refund
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Declined
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-24
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$150.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Noah Williams</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
noah@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Subscription
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-25
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$350.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Emma Brown</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
emma@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Sale
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-26
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$450.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Liam Johnson</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
liam@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Sale
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-23
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$250.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Liam Johnson</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
liam@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Sale
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-23
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$250.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Olivia Smith</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
olivia@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Refund
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Declined
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-24
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$150.00</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<div class="font-medium">Emma Brown</div>
|
||||
<div
|
||||
class="hidden text-sm text-muted-foreground md:inline"
|
||||
>
|
||||
emma@example.com
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
Sale
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<Badge class="text-xs" variant="secondary">
|
||||
Fulfilled
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="hidden md:table-cell">
|
||||
2023-06-26
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">$450.00</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
<div>
|
||||
<Card.Root class="overflow-hidden">
|
||||
<Card.Header class="flex flex-row items-start bg-muted/50">
|
||||
<div class="grid gap-0.5">
|
||||
<Card.Title class="group flex items-center gap-2 text-lg">
|
||||
Order Oe31b70H
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
>
|
||||
<Copy class="h-3 w-3" />
|
||||
<span class="sr-only">Copy Order ID</span>
|
||||
</Button>
|
||||
</Card.Title>
|
||||
<Card.Description>Date: November 23, 2023</Card.Description>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-1">
|
||||
<Button size="sm" variant="outline" class="h-8 gap-1">
|
||||
<Truck class="h-3.5 w-3.5" />
|
||||
<span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
|
||||
Track Order
|
||||
</span>
|
||||
</Button>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
size="icon"
|
||||
variant="outline"
|
||||
class="h-8 w-8"
|
||||
>
|
||||
<EllipsisVertical class="h-3.5 w-3.5" />
|
||||
<span class="sr-only">More</span>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end">
|
||||
<DropdownMenu.Item>Edit</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Export</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item>Trash</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="p-6 text-sm">
|
||||
<div class="grid gap-3">
|
||||
<div class="font-semibold">Order Details</div>
|
||||
<ul class="grid gap-3">
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">
|
||||
Glimmer Lamps x <span>2</span>
|
||||
</span>
|
||||
<span>$250.00</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">
|
||||
Aqua Filters x <span>1</span>
|
||||
</span>
|
||||
<span>$49.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Separator class="my-2" />
|
||||
<ul class="grid gap-3">
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">Subtotal</span>
|
||||
<span>$299.00</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">Shipping</span>
|
||||
<span>$5.00</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-muted-foreground">Tax</span>
|
||||
<span>$25.00</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between font-semibold">
|
||||
<span class="text-muted-foreground">Total</span>
|
||||
<span>$329.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid gap-3">
|
||||
<div class="font-semibold">Shipping Information</div>
|
||||
<address class="grid gap-0.5 not-italic text-muted-foreground">
|
||||
<span>Liam Johnson</span>
|
||||
<span>1234 Main St.</span>
|
||||
<span>Anytown, CA 12345</span>
|
||||
</address>
|
||||
</div>
|
||||
<div class="grid auto-rows-max gap-3">
|
||||
<div class="font-semibold">Billing Information</div>
|
||||
<div class="text-muted-foreground">Same as shipping address</div>
|
||||
</div>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<div class="grid gap-3">
|
||||
<div class="font-semibold">Customer Information</div>
|
||||
<dl class="grid gap-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<dt class="text-muted-foreground">Customer</dt>
|
||||
<dd>Liam Johnson</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<dt class="text-muted-foreground">Email</dt>
|
||||
<dd>
|
||||
<a href="mailto:">liam@acme.com</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<dt class="text-muted-foreground">Phone</dt>
|
||||
<dd>
|
||||
<a href="tel:">+1 234 567 890</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<Separator class="my-4" />
|
||||
<div class="grid gap-3">
|
||||
<div class="font-semibold">Payment Information</div>
|
||||
<dl class="grid gap-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<dt class="flex items-center gap-1 text-muted-foreground">
|
||||
<CreditCard class="h-4 w-4" />
|
||||
Visa
|
||||
</dt>
|
||||
<dd>**** **** **** 4532</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</Card.Content>
|
||||
<Card.Footer class="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
|
||||
<div class="text-xs text-muted-foreground">
|
||||
Updated <time dateTime="2023-11-23">November 23, 2023</time>
|
||||
</div>
|
||||
<Pagination.Root count={10} class="ml-auto mr-0 w-auto">
|
||||
<Pagination.Content>
|
||||
<Pagination.Item>
|
||||
<Button size="icon" variant="outline" class="h-6 w-6">
|
||||
<ChevronLeft class="h-3.5 w-3.5" />
|
||||
<span class="sr-only">Previous Order</span>
|
||||
</Button>
|
||||
</Pagination.Item>
|
||||
<Pagination.Item>
|
||||
<Button size="icon" variant="outline" class="h-6 w-6">
|
||||
<ChevronRight class="h-3.5 w-3.5" />
|
||||
<span class="sr-only">Next Order</span>
|
||||
</Button>
|
||||
</Pagination.Item>
|
||||
</Pagination.Content>
|
||||
</Pagination.Root>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,11 @@
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import * as Table from "$lib/components/ui/table/index.js";
|
||||
import * as Tabs from "$lib/components/ui/tabs/index.js";
|
||||
import type { NDKEvent } from "@nostr-dev-kit/ndk";
|
||||
import Pie from "./Pie.svelte";
|
||||
|
||||
export let rocket:NDKEvent;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -30,19 +35,17 @@
|
||||
|
||||
<Breadcrumb.Root class="hidden md:flex">
|
||||
<Breadcrumb.List>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="##">{rocket.getMatchingTags('d')[0][1]}</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Link href="##">Dashboard</Breadcrumb.Link>
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb.Separator />
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Item>
|
||||
<Breadcrumb.Page>Dashboard</Breadcrumb.Page>
|
||||
</Breadcrumb.Item>
|
||||
|
||||
</Breadcrumb.List>
|
||||
</Breadcrumb.Root>
|
||||
</header>
|
||||
<Pie />
|
||||
<main
|
||||
class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3"
|
||||
|
||||
Reference in New Issue
Block a user