import { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
type Card = {
fullName: string;
role: string;
username: string;
password: string;
};
type Props = {
schoolName: string;
loginUrl: string;
cards: Card[];
};
function CardEl({
card,
perRow,
buildQrUrl,
schoolName,
loginUrl,
}: {
card: Card;
perRow: 2 | 3;
buildQrUrl: (card: Card) => string;
schoolName: string;
loginUrl: string;
}) {
const sz = perRow === 3 ? 'sm' : 'md';
return (
د
دانشیار من
اتوماسیون هوشمند مدارس
{schoolName}
اسکن صفحه ورود
{card.fullName}
{card.role}
نام کاربری
{card.username}
رمز اولیه
{card.password}
آدرس ورود
{loginUrl}
QR فقط صفحه ورود را باز میکند؛ ورود با نام کاربری و رمز چاپشده انجام میشود. پس از اولین ورود رمز را تغییر دهید.
);
}
export default function PrintCredentials({ schoolName, loginUrl, cards }: Props) {
const [perRow, setPerRow] = useState<2 | 3>(2);
const buildQrUrl = (card: Card) => {
const url = new URL(loginUrl, window.location.origin);
url.searchParams.set('u', card.username);
return (
`https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
url.toString()
)}&size=140x140&format=svg&margin=2`
);
};
const unsafeQrCount = cards.filter((card) => 'qrToken' in card).length;
// Group into A4 pages: 2-per-row → 3 rows = 6 cards; 3-per-row → 3 rows = 9 cards
const perPage = perRow === 2 ? 6 : 9;
const pages: Card[][] = [];
for (let i = 0; i < cards.length; i += perPage) {
pages.push(cards.slice(i, i + perPage));
}
return (
{/* ---- Toolbar (screen only) ---- */}
{cards.length} کارت آماده چاپ
— QR کارتها ورود خودکار انجام نمیدهد؛ رمزها فقط همین یک بار نمایش داده میشوند.
{unsafeQrCount > 0 && داده قدیمی QR ورود خودکار نادیده گرفته شد. }
چیدمان:
setPerRow(2)}
type="button"
>
setPerRow(3)}
type="button"
>
window.print()}>
بازگشت
{/* ---- Screen preview: A4 pages with shadow ---- */}
{pages.map((pageCards, pi) => (
{pages.length > 1 && (
صفحه {pi + 1} از {pages.length}
)}
{pageCards.map((card, i) => (
))}
{cards.map((card, i) => (
);
}