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

feat: improvement of test tab

Browse Source
This commit is contained in:
etiennecollin
2025-08-13 22:13:59 +02:00
parent 0f349d635b
commit 782e59f4e7
1 changed files with 104 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/components/tabs/TestTab.tsx
View File

@@ -2,8 +2,13 @@
import { notify } from "@/utils/notifications";
import Spinner from "@/components/utils/Spinner";
import VoucherCard from "../VoucherCard";
import VoucherModal from "@/components/modals/VoucherModal";
import { useCallback, useState } from "react";
import { Voucher } from "@/types/voucher";
export default function TestTab() {
const [viewVoucher, setViewVoucher] = useState<Voucher | null>(null);
const sendInfo = () => notify("This is an info notification", "info");
const sendSuccess = () => notify("Operation succeeded!", "success");
const sendError = () => notify("Something went wrong!", "error");
@@ -13,31 +18,107 @@ export default function TestTab() {
setTimeout(() => notify("Third message", "error"), 1000);
};
const closeModal = useCallback(() => {
setViewVoucher(null);
}, []);
const v: Voucher = {
id: "test-voucher",
createdAt: "2025-12-31",
name: "Test Voucher",
code: "TEST123",
authorizedGuestCount: 0,
authorizedGuestLimit: null,
expired: false,
timeLimitMinutes: 1440,
activatedAt: null,
expiresAt: "2025-12-31",
dataUsageLimitMBytes: null,
rxRateLimitKbps: null,
txRateLimitKbps: null,
};
return (
<div className="flex-center flex-col space-y-6">
<div className="card max-w-lg space-y-4">
<h2 className="text-lg font-semibold text-primary">
Notification Tester
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<button onClick={sendInfo} className="btn-primary">
Send Info
</button>
<button onClick={sendSuccess} className="btn-success">
Send Success
</button>
<button onClick={sendError} className="btn-danger">
Send Error
</button>
<button onClick={sendMultiple} className="btn-primary">
Send Multiple
</button>
<>
<div className="flex-center flex-col space-y-6">
<div className="card max-w-lg space-y-4">
<h2 className="text-lg font-semibold text-primary">
Notification Tester
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<button onClick={sendInfo} className="btn-primary">
Send Info
</button>
<button onClick={sendSuccess} className="btn-success">
Send Success
</button>
<button onClick={sendError} className="btn-danger">
Send Error
</button>
<button onClick={sendMultiple} className="btn-primary">
Send Multiple
</button>
</div>
</div>
<div className="card max-w-lg">
<h2 className="text-lg font-semibold text-primary">
Spinner Example
</h2>
<Spinner />
</div>
<div className="flex-center flex-row gap-4 w-full">
<VoucherCard
key={123}
voucher={{
id: "abc123",
createdAt: "2025-12-31",
name: "test voucher",
code: "1234567890",
authorizedGuestCount: 0,
expired: false,
timeLimitMinutes: 1440,
}}
editMode={false}
selected={false}
onClick={() => setViewVoucher(v)}
/>
<VoucherCard
key={456}
voucher={{
id: "abc123",
createdAt: "2025-12-31",
name: "test voucher",
code: "1234567890",
authorizedGuestCount: 0,
expired: false,
timeLimitMinutes: 1440,
}}
editMode={true}
selected={true}
onClick={() => setViewVoucher(v)}
/>
<VoucherCard
key={789}
voucher={{
id: "abc123",
createdAt: "2025-12-31",
name: "test voucher",
code: "1234567890",
authorizedGuestCount: 1,
expired: true,
timeLimitMinutes: 1440,
expiresAt: "2025-12-31",
}}
editMode={true}
selected={false}
onClick={() => setViewVoucher(v)}
/>
</div>
</div>
<div className="card max-w-lg">
<h2 className="text-lg font-semibold text-primary">Spinner Example</h2>
<Spinner />
</div>
</div>
{viewVoucher && (
<VoucherModal voucher={viewVoucher} onClose={closeModal} />
)}
</>
);
}