stats and layout
This commit is contained in:
Karol Wypchlo
parent
4d3615e493
commit
d5fca433fb
|
|
@ -136,13 +136,11 @@ export default function Layout({ title, children }) {
|
|||
Settings
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>
|
||||
Payments (coming soon)
|
||||
</a>
|
||||
{/* <Link href="/payments">
|
||||
<a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
|
||||
Payments
|
||||
</a>
|
||||
</Link> */}
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||
|
|
@ -245,12 +243,11 @@ export default function Layout({ title, children }) {
|
|||
Settings
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Payments (coming soon)
|
||||
</a>
|
||||
{/* <Link href="/payments">
|
||||
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
|
||||
Payments
|
||||
</a>
|
||||
</Link> */}
|
||||
<a
|
||||
href="#"
|
||||
onClick={handleSignOut}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import user from "./user.json";
|
||||
|
||||
export default (req, res) => {
|
||||
res.json(user);
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"sub": "ab776d6d-f324-4fa7-a728-7587d5215481",
|
||||
"tier": 1,
|
||||
"subscribedUntil": "0001-01-01T00:00:00Z"
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
// import items from "./downloads.json";
|
||||
const items = [];
|
||||
import items from "./downloads.json";
|
||||
|
||||
export default (req, res) => {
|
||||
const offset = parseInt(req.query?.offset ?? 0, 10);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import stats from "./stats.json";
|
||||
|
||||
export default (req, res) => {
|
||||
res.json(stats);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"storageUsed": 809500672,
|
||||
"numRegReads": 0,
|
||||
"numRegWrites": 0,
|
||||
"numUploads": 13,
|
||||
"numDownloads": 78,
|
||||
"totalUploadsSize": 618649028,
|
||||
"totalDownloadsSize": 32307956843,
|
||||
"bwUploads": 2810183680,
|
||||
"bwDownloads": 32323934976,
|
||||
"bwRegReads": 0,
|
||||
"bwRegWrites": 0
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ function SkylinkList({ items = [] }) {
|
|||
}
|
||||
|
||||
export default function Home() {
|
||||
const { data: user } = useSWR("/user", fetcher);
|
||||
const { data: stats } = useSWR(`${apiPrefix}/user/stats`, fetcher);
|
||||
const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
|
||||
const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ export default function Home() {
|
|||
<div className="ml-5 w-0 flex-1">
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
|
||||
<dd className="flex items-baseline">
|
||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.storageUsed ?? 0)}</div>
|
||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.storageUsed ?? 0)}</div>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -190,7 +190,7 @@ export default function Home() {
|
|||
<div className="ml-5 w-0 flex-1">
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Bandwidth used</dt>
|
||||
<dd className="flex items-baseline">
|
||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.bandwidthUsed ?? 0)}</div>
|
||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.bwDownloads ?? 0)}</div>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import Link from "next/link";
|
||||
import dayjs from "dayjs";
|
||||
import Layout from "../components/Layout";
|
||||
import useSWR from "swr";
|
||||
|
||||
const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "/api";
|
||||
const plans = [
|
||||
{ id: "initial_free", name: "Free", price: 0, description: "Unlimited bandwidth with throttled speed" },
|
||||
{ id: "initial_plus", name: "Skynet Plus", price: 5, description: "1 TB premium bandwidth with full speed" },
|
||||
{ id: "initial_pro", name: "Skynet Pro", price: 20, description: "5 TB premium bandwidth with full speed" },
|
||||
{ id: "initial_extreme", name: "Skynet Extreme", price: 80, description: "20 TB premium bandwidth with full speed" },
|
||||
];
|
||||
const currentlyActivePlan = "initial_free";
|
||||
|
||||
const fetcher = (url) => fetch(url).then((r) => r.json());
|
||||
|
||||
export default function Payments() {
|
||||
const { data: invoices, error } = useSWR(`${apiPrefix}/square/invoices`, fetcher);
|
||||
|
||||
console.log(invoices);
|
||||
const { data: invoices, error } = useSWR("/api/square/invoices", fetcher);
|
||||
|
||||
return (
|
||||
<Layout title="Payments">
|
||||
|
|
@ -19,12 +24,12 @@ export default function Payments() {
|
|||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
|
||||
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free Plan</dd>
|
||||
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Next invoice</dt>
|
||||
<dt className="text-sm font-medium text-gray-500 truncate">Current payment</dt>
|
||||
<dd className="mt-1 text-3xl font-semibold text-gray-900">—</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,135 +41,6 @@ export default function Payments() {
|
|||
</div>
|
||||
</dl>
|
||||
|
||||
<section aria-labelledby="payment_details_heading">
|
||||
<form action="#" method="POST">
|
||||
<div className="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div className="bg-white py-6 px-4 sm:p-6">
|
||||
<div>
|
||||
<h2 id="payment_details_heading" className="text-lg leading-6 font-medium text-gray-900">
|
||||
Payment details
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Update your billing information. Please note that updating your location could affect your tax
|
||||
rates.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-4 gap-6">
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
|
||||
First name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="first_name"
|
||||
autoComplete="cc-given-name"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
|
||||
Last name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="last_name"
|
||||
autoComplete="cc-family-name"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label htmlFor="email_address" className="block text-sm font-medium text-gray-700">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="email_address"
|
||||
id="email_address"
|
||||
autoComplete="email"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-1">
|
||||
<label htmlFor="expiration_date" className="block text-sm font-medium text-gray-700">
|
||||
Expration date
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="expiration_date"
|
||||
id="expiration_date"
|
||||
autoComplete="cc-exp"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
placeholder="MM / YY"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-1">
|
||||
<label htmlFor="security_code" className="flex items-center text-sm font-medium text-gray-700">
|
||||
<span>Security code</span>
|
||||
{/* Heroicon name: solid/question-mark-circle */}
|
||||
<svg
|
||||
className="ml-1 flex-shrink-0 h-5 w-5 text-gray-300"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="security_code"
|
||||
id="security_code"
|
||||
autoComplete="cc-csc"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label htmlFor="country" className="block text-sm font-medium text-gray-700">
|
||||
Country / Region
|
||||
</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
autoComplete="country"
|
||||
className="mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
>
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Mexico</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
|
||||
ZIP / Postal
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postal_code"
|
||||
id="postal_code"
|
||||
autoComplete="postal-code"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
{/* Plan */}
|
||||
<section aria-labelledby="plan_heading">
|
||||
<form action="#" method="POST">
|
||||
|
|
@ -176,129 +52,55 @@ export default function Payments() {
|
|||
Plan
|
||||
</h3>
|
||||
</div>
|
||||
<div className="ml-4 mt-2 flex-shrink-0">
|
||||
<Link href="/plans">
|
||||
<a className="font-medium text-green-600 hover:text-green-500">help me choose a plan</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend className="sr-only">Pricing plans</legend>
|
||||
<ul className="relative bg-white rounded-md -space-y-px">
|
||||
<li>
|
||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||
<div className="relative border rounded-tl-md rounded-tr-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label className="flex items-center text-sm cursor-pointer">
|
||||
<input
|
||||
name="pricing_plan"
|
||||
type="radio"
|
||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||
aria-describedby="plan-option-pricing-0 plan-option-limit-0"
|
||||
defaultChecked
|
||||
/>
|
||||
<span className="ml-3 font-medium text-gray-900">Free</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||
<span className="font-medium">—</span>
|
||||
{plans.map((plan, index) => (
|
||||
<li key={plan.id}>
|
||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||
<div
|
||||
className={`relative border ${index === 0 ? "rounded-tl-md rounded-tr-md" : ""} ${
|
||||
index === plans.length - 1 ? "rounded-bl-md rounded-br-md" : ""
|
||||
} p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3`}
|
||||
>
|
||||
<label className="flex items-center text-sm cursor-pointer">
|
||||
<input
|
||||
name="pricing_plan"
|
||||
type="radio"
|
||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||
aria-describedby="plan-option-pricing-0 plan-option-limit-0"
|
||||
defaultChecked
|
||||
/>
|
||||
<span className="ml-3 font-medium text-gray-900">{plan.name}</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||
<span className="font-medium">{plan.price ? `$${plan.price} / mo` : "no cost"}</span>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
{/* <span>($290 / yr)</span> */}
|
||||
</p>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
{/* <span>($290 / yr)</span> */}
|
||||
</p>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
<p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||
Unlimited bandwidth with throttled speed
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||
<div className="relative border border-gray-200 p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label className="flex items-center text-sm cursor-pointer">
|
||||
<input
|
||||
name="pricing_plan"
|
||||
type="radio"
|
||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||
aria-describedby="plan-option-pricing-1 plan-option-limit-1"
|
||||
/>
|
||||
<span className="ml-3 font-medium text-gray-900">Skynet Plus</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||
<span className="font-medium">$5 / mo</span>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($50 / yr)</span>
|
||||
</p>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
<p id="plan-option-limit-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||
1 TB premium bandwidth with full speed
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||
<div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label className="flex items-center text-sm cursor-pointer">
|
||||
<input
|
||||
name="pricing_plan"
|
||||
type="radio"
|
||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||
aria-describedby="plan-option-pricing-2 plan-option-limit-2"
|
||||
/>
|
||||
<span className="ml-3 font-medium text-gray-900">Skynet Pro</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||
<span className="font-medium">$20 / mo</span>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($200 / yr)</span>
|
||||
</p>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
<p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||
5 TB premium bandwidth with full speed
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||
<div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
||||
<label className="flex items-center text-sm cursor-pointer">
|
||||
<input
|
||||
name="pricing_plan"
|
||||
type="radio"
|
||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||
aria-describedby="plan-option-pricing-2 plan-option-limit-2"
|
||||
/>
|
||||
<span className="ml-3 font-medium text-gray-900">Skynet Extreme</span>
|
||||
</label>
|
||||
<p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||
<span className="font-medium">$80 / mo</span>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($800 / yr)</span>
|
||||
</p>
|
||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||
<p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||
20 TB premium bandwidth with full speed
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||
{plan.description}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div className="flex items-center">
|
||||
{/* Enabled: "bg-orange-500", Not Enabled: "bg-gray-200" */}
|
||||
<button
|
||||
type="button"
|
||||
className="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors ease-in-out duration-200"
|
||||
aria-pressed="true"
|
||||
aria-labelledby="annual-billing-label"
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
{/* Enabled: "translate-x-5", Not Enabled: "translate-x-0" */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
||||
/>
|
||||
</button>
|
||||
<span className="ml-3" id="annual-billing-label">
|
||||
<span className="text-sm font-medium text-gray-900">Annual billing </span>
|
||||
<span className="text-sm text-gray-500">(Save 10%)</span>
|
||||
<span className="text-sm font-medium text-gray-900">Currently active plan:</span>
|
||||
<span className="text-sm ml-3">Free</span>
|
||||
<span className="text-sm text-gray-500 ml-3">
|
||||
(next payment $5 on 10/10/2020 -{" "}
|
||||
<a
|
||||
href="/api/square/subscriptions/cancel"
|
||||
className="text-sm text-green-600 hover:text-green-900"
|
||||
>
|
||||
cancel
|
||||
</a>
|
||||
)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -307,7 +109,7 @@ export default function Payments() {
|
|||
type="submit"
|
||||
className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
|
||||
>
|
||||
Save
|
||||
Subscribe to selected plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -334,6 +136,12 @@ export default function Payments() {
|
|||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Invoice
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
|
|
@ -344,7 +152,7 @@ export default function Payments() {
|
|||
scope="col"
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Amount
|
||||
Status
|
||||
</th>
|
||||
{/*
|
||||
`relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
|
||||
|
|
@ -358,19 +166,29 @@ export default function Payments() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1/1/2020</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
Business Plan - Annual Billing
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CA$109.00</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a href="#" className="text-orange-600 hover:text-orange-900">
|
||||
View receipt
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/* More items... */}
|
||||
{invoices &&
|
||||
invoices.map((invoice) => (
|
||||
<tr key={invoice.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{dayjs(invoice.createdAt).format("DD/MM/YYYY")}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{invoice.invoiceNumber}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.title}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.status}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href={invoice.publicUrl}
|
||||
className="text-green-600 hover:text-green-900"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
View invoice
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
Reference in New Issue