- Shade -
+Shade
Pay invoice
Choose how you want to settle this invoice. diff --git a/src/app/payment/[id]/page.tsx b/src/app/payment/[id]/page.tsx index c853056..de410ff 100644 --- a/src/app/payment/[id]/page.tsx +++ b/src/app/payment/[id]/page.tsx @@ -80,7 +80,9 @@ export default function PublicPaymentPage() { Loading invoice details...
-
{navItems.map(({ href, label, icon: Icon }) => {
- const active = pathname === href || pathname.startsWith(href + "/");
+ const active =
+ pathname === href || pathname.startsWith(href + "/");
return (
-
);
}
-
diff --git a/src/components/RevenueChart.tsx b/src/components/RevenueChart.tsx
index 7a980f7..3f9403c 100644
--- a/src/components/RevenueChart.tsx
+++ b/src/components/RevenueChart.tsx
@@ -16,21 +16,29 @@ export interface RevenueDataPoint {
}
interface TooltipPayload {
- value?: number;
+ value?: number | string | readonly (number | string)[];
}
interface CustomTooltipProps {
active?: boolean;
- payload?: TooltipPayload[];
+ payload?: readonly TooltipPayload[];
label?: string;
}
function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
if (!active || !payload?.length) return null;
+
+ const value = payload[0].value;
+ const formattedValue = Array.isArray(value)
+ ? value.join(", ")
+ : typeof value === "number"
+ ? value.toLocaleString()
+ : value;
+
return (
); } @@ -51,9 +59,14 @@ interface RevenueChartProps { export default function RevenueChart({ data = MOCK_DATA }: RevenueChartProps) { return (
{label}
-{payload[0].value?.toLocaleString()} XLM
+{formattedValue} XLM
-Revenue Over Time
++ Revenue Over Time +
- + @@ -73,7 +86,15 @@ export default function RevenueChart({ data = MOCK_DATA }: RevenueChartProps) { tickLine={false} width={48} /> - } /> + ( + + )} + /> -
{navItems.map(({ href, label, icon: Icon }) => {
- const active =
- pathname === href || pathname.startsWith(href + "/");
+ const active = pathname === href || pathname.startsWith(href + "/");
return (
-
{
const stored = localStorage.getItem("shade:theme");
- const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ const systemDark = window.matchMedia(
+ "(prefers-color-scheme: dark)",
+ ).matches;
const dark = stored === "dark" || (stored !== "light" && systemDark);
setIsDark(dark);
document.documentElement.classList.toggle("dark", dark);
diff --git a/src/components/avatar/avatar-upload.tsx b/src/components/avatar/avatar-upload.tsx
index 5db03be..cf40d92 100644
--- a/src/components/avatar/avatar-upload.tsx
+++ b/src/components/avatar/avatar-upload.tsx
@@ -1,12 +1,6 @@
"use client";
-import {
- ChangeEvent,
- KeyboardEvent,
- useEffect,
- useRef,
- useState,
-} from "react";
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
import { ImagePlus } from "lucide-react";
import { cn } from "@/lib/utils";
diff --git a/src/components/billing/billing-plan-form.test.tsx b/src/components/billing/billing-plan-form.test.tsx
index 54e41b3..a8ffd86 100644
--- a/src/components/billing/billing-plan-form.test.tsx
+++ b/src/components/billing/billing-plan-form.test.tsx
@@ -46,7 +46,9 @@ describe("BillingPlanForm", () => {
await user.click(screen.getByRole("button", { name: /create plan/i }));
- expect(await screen.findByText(/plan name is required/i)).toBeInTheDocument();
+ expect(
+ await screen.findByText(/plan name is required/i),
+ ).toBeInTheDocument();
expect(screen.getByText(/description is required/i)).toBeInTheDocument();
expect(screen.getByText(/amount must be/i)).toBeInTheDocument();
expect(handleSubmit).not.toHaveBeenCalled();
@@ -61,10 +63,7 @@ describe("BillingPlanForm", () => {
await user.type(screen.getByLabelText(/plan name/i), "Starter");
await user.type(screen.getByLabelText(/description/i), "Entry tier");
await user.type(screen.getByLabelText(/^amount$/i), "0");
- await user.type(
- screen.getByLabelText(/customer email/i),
- "not-an-email",
- );
+ await user.type(screen.getByLabelText(/customer email/i), "not-an-email");
await user.click(screen.getByRole("button", { name: /create plan/i }));
@@ -86,6 +85,8 @@ describe("BillingPlanForm", () => {
).toBeInTheDocument();
await user.type(screen.getByLabelText(/plan name/i), "Pro");
- expect(screen.queryByText(/plan name is required/i)).not.toBeInTheDocument();
+ expect(
+ screen.queryByText(/plan name is required/i),
+ ).not.toBeInTheDocument();
});
});
diff --git a/src/components/billing/billing-plan-form.tsx b/src/components/billing/billing-plan-form.tsx
index fbccf73..455cc4e 100644
--- a/src/components/billing/billing-plan-form.tsx
+++ b/src/components/billing/billing-plan-form.tsx
@@ -77,8 +77,8 @@ export function BillingPlanForm({ onSubmit }: BillingPlanFormProps) {
@@ -145,9 +145,7 @@ export function BillingPlanForm({ onSubmit }: BillingPlanFormProps) { id="plan-interval" required aria-invalid={Boolean(errors.interval)} - aria-describedby={ - errors.interval ? "plan-interval-error" : undefined - } + aria-describedby={errors.interval ? "plan-interval-error" : undefined} value={draft.interval} onChange={(event) => updateField("interval", event.target.value)} disabled={isSubmitting} @@ -175,9 +173,7 @@ export function BillingPlanForm({ onSubmit }: BillingPlanFormProps) { errors.customerEmail ? "plan-customer-email-error" : undefined } value={draft.customerEmail} - onChange={(event) => - updateField("customerEmail", event.target.value) - } + onChange={(event) => updateField("customerEmail", event.target.value)} disabled={isSubmitting} className={inputClass(Boolean(errors.customerEmail))} placeholder="customer@example.com" diff --git a/src/components/invoice/invoice-controls.tsx b/src/components/invoice/invoice-controls.tsx index 04bafc6..82f75b6 100644 --- a/src/components/invoice/invoice-controls.tsx +++ b/src/components/invoice/invoice-controls.tsx @@ -48,7 +48,10 @@ export function InvoiceControls({
Create billing plan
- Define a recurring charge. Validate every field before activating - the plan. + Define a recurring charge. Validate every field before activating the + plan.
{/* Status Dropdown */}-
-
{
const stored = localStorage.getItem("shade:theme");
- const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ const systemDark = window.matchMedia(
+ "(prefers-color-scheme: dark)",
+ ).matches;
const dark = stored === "dark" || (stored !== "light" && systemDark);
setIsDark(dark);
document.documentElement.classList.toggle("dark", dark);
diff --git a/src/components/avatar/avatar-upload.tsx b/src/components/avatar/avatar-upload.tsx
index 5db03be..cf40d92 100644
--- a/src/components/avatar/avatar-upload.tsx
+++ b/src/components/avatar/avatar-upload.tsx
@@ -1,12 +1,6 @@
"use client";
-import {
- ChangeEvent,
- KeyboardEvent,
- useEffect,
- useRef,
- useState,
-} from "react";
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
import { ImagePlus } from "lucide-react";
import { cn } from "@/lib/utils";
diff --git a/src/components/billing/billing-plan-form.test.tsx b/src/components/billing/billing-plan-form.test.tsx
index 54e41b3..a8ffd86 100644
--- a/src/components/billing/billing-plan-form.test.tsx
+++ b/src/components/billing/billing-plan-form.test.tsx
@@ -46,7 +46,9 @@ describe("BillingPlanForm", () => {
await user.click(screen.getByRole("button", { name: /create plan/i }));
- expect(await screen.findByText(/plan name is required/i)).toBeInTheDocument();
+ expect(
+ await screen.findByText(/plan name is required/i),
+ ).toBeInTheDocument();
expect(screen.getByText(/description is required/i)).toBeInTheDocument();
expect(screen.getByText(/amount must be/i)).toBeInTheDocument();
expect(handleSubmit).not.toHaveBeenCalled();
@@ -61,10 +63,7 @@ describe("BillingPlanForm", () => {
await user.type(screen.getByLabelText(/plan name/i), "Starter");
await user.type(screen.getByLabelText(/description/i), "Entry tier");
await user.type(screen.getByLabelText(/^amount$/i), "0");
- await user.type(
- screen.getByLabelText(/customer email/i),
- "not-an-email",
- );
+ await user.type(screen.getByLabelText(/customer email/i), "not-an-email");
await user.click(screen.getByRole("button", { name: /create plan/i }));
@@ -86,6 +85,8 @@ describe("BillingPlanForm", () => {
).toBeInTheDocument();
await user.type(screen.getByLabelText(/plan name/i), "Pro");
- expect(screen.queryByText(/plan name is required/i)).not.toBeInTheDocument();
+ expect(
+ screen.queryByText(/plan name is required/i),
+ ).not.toBeInTheDocument();
});
});
diff --git a/src/components/billing/billing-plan-form.tsx b/src/components/billing/billing-plan-form.tsx
index fbccf73..455cc4e 100644
--- a/src/components/billing/billing-plan-form.tsx
+++ b/src/components/billing/billing-plan-form.tsx
@@ -77,8 +77,8 @@ export function BillingPlanForm({ onSubmit }: BillingPlanFormProps) {