paulmataruso/unifi-voucher-manager
1
0
Fork 0
mirror of https://github.com/etiennecollin/unifi-voucher-manager.git synced 2025-11-02 21:13:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: cleanup of print page

Browse Source
This commit is contained in:
etiennecollin
2025-09-07 15:56:16 -04:00
parent dacd6a9a5c
commit 74e824f834
1 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/app/print/page.tsx
View File

@@ -13,6 +13,7 @@ import {
} from "@/utils/format";
import { useGlobal } from "@/contexts/GlobalContext";
import { formatCode } from "@/utils/format";
import Spinner from "@/components/utils/Spinner";
export type PrintMode = "list" | "grid";
@@ -20,6 +21,31 @@ export type PrintMode = "list" | "grid";
function VoucherPrintCard({ voucher }: { voucher: Voucher }) {
const { wifiConfig, wifiString } = useGlobal();
const fields = [
{
label: "Duration",
value: formatDuration(voucher.timeLimitMinutes),
},
{
label: "Max Guests",
value: formatMaxGuests(voucher.authorizedGuestLimit),
},
{
label: "Data Limit",
value: voucher.dataUsageLimitMBytes
? formatBytes(voucher.dataUsageLimitMBytes * 1024 * 1024)
: "Unlimited",
},
{
label: "Down Speed",
value: formatSpeed(voucher.rxRateLimitKbps),
},
{
label: "Up Speed",
value: formatSpeed(voucher.txRateLimitKbps),
},
];
return (
<div className="print-voucher">
<div className="print-header">
@@ -28,38 +54,12 @@ function VoucherPrintCard({ voucher }: { voucher: Voucher }) {
<div className="print-voucher-code">{formatCode(voucher.code)}</div>
<div className="print-info-row">
<span className="print-label">Duration:</span>
<span className="print-value">
{formatDuration(voucher.timeLimitMinutes)}
</span>
</div>
<div className="print-info-row">
<span className="print-label">Max Guests:</span>
<span className="print-value">
{formatMaxGuests(voucher.authorizedGuestLimit)}
</span>
</div>
<div className="print-info-row">
<span className="print-label">Data Limit:</span>
<span className="print-value">
{voucher.dataUsageLimitMBytes
? formatBytes(voucher.dataUsageLimitMBytes * 1024 * 1024)
: "Unlimited"}
</span>
</div>
<div className="print-info-row">
<span className="print-label">Down Speed:</span>
<span className="print-value">
{formatSpeed(voucher.rxRateLimitKbps)}
</span>
</div>
<div className="print-info-row">
<span className="print-label">Up Speed:</span>
<span className="print-value">
{formatSpeed(voucher.txRateLimitKbps)}
</span>
</div>
{fields.map((field) => (
<div className="print-info-row">
<span className="print-label">{field.label}:</span>
<span className="print-value">{field.value}</span>
</div>
))}
{wifiConfig && (
<div className="print-qr-section">
@@ -103,7 +103,7 @@ function VoucherPrintCard({ voucher }: { voucher: Voucher }) {
);
}
// This component handles fetching and displaying vouchers based on URL params
// This component handles displaying and printing the vouchers based on URL params
function Vouchers() {
const router = useRouter();
const searchParams = useSearchParams();
@@ -169,9 +169,7 @@ export default function PrintPage() {
return (
<main className="print-wrapper">
<Suspense
fallback={<div style={{ textAlign: "center" }}>Loading...</div>}
>
<Suspense fallback={<Spinner />}>
<Vouchers />
</Suspense>
</main>