563 lines
19 KiB
TypeScript
563 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { apiFetch, getApproToken } from "@/lib/api";
|
|
import { APPRO_BASE_URL, MEDITATION_BASE_URL } from "@/lib/config";
|
|
import { usePaginated } from "@/lib/useResource";
|
|
import { DataTable, type Column } from "@/components/DataTable";
|
|
import {
|
|
Badge,
|
|
Button,
|
|
Card,
|
|
Modal,
|
|
PageHeader,
|
|
Field,
|
|
Input,
|
|
Pagination,
|
|
Select,
|
|
Spinner,
|
|
} from "@/components/ui";
|
|
import { DownloadIcon, EyeIcon } from "@/components/icons";
|
|
import { useToast } from "@/components/toast";
|
|
import { exportToExcel, mapWithConcurrency } from "@/lib/excel";
|
|
import { toFa } from "@/lib/utils";
|
|
|
|
interface MeditationUser {
|
|
id: number;
|
|
full_name?: string;
|
|
first_name?: string;
|
|
last_name?: string;
|
|
age?: number | null;
|
|
gender?: number | null;
|
|
email?: string | null;
|
|
mobile?: string | null;
|
|
identifier?: string | null;
|
|
created_at?: string;
|
|
answers_count?: number;
|
|
questions_answered?: number;
|
|
}
|
|
|
|
interface ApproUser {
|
|
id: number;
|
|
uuid?: string;
|
|
first_name?: string;
|
|
last_name?: string;
|
|
full_name?: string;
|
|
age?: number | null;
|
|
gender?: number | null;
|
|
email?: string | null;
|
|
mobile?: string | null;
|
|
birthday?: string | null;
|
|
created_at?: string;
|
|
}
|
|
|
|
interface SurveyAnswerItem {
|
|
question_id: number;
|
|
question?: string;
|
|
type?: string;
|
|
answers: { option_id: number; label: string }[];
|
|
}
|
|
|
|
interface DetailData {
|
|
appro: ApproUser | null;
|
|
survey_answers: SurveyAnswerItem[];
|
|
answers_count?: number;
|
|
questions_answered?: number;
|
|
}
|
|
|
|
// Confirmation password for the full export. This is a guard against an
|
|
// accidental click, not a security boundary — it ships in the client bundle, so
|
|
// anyone with the page can read it. Real protection belongs on the API side.
|
|
const EXPORT_PASSWORD = "amnk1380";
|
|
|
|
const GENDER_LABELS: Record<number, string> = {
|
|
1: "مرد",
|
|
2: "زن",
|
|
};
|
|
|
|
function faDate(value?: string): string {
|
|
if (!value) return "—";
|
|
try {
|
|
return toFa(new Date(value).toLocaleDateString("fa-IR"));
|
|
} catch {
|
|
return "—";
|
|
}
|
|
}
|
|
|
|
export default function UsersPage() {
|
|
const [answered, setAnswered] = useState<string>("");
|
|
const { data, meta, page, setPage, loading, error, reload } =
|
|
usePaginated<MeditationUser>("/admin/survey-users", {
|
|
perPage: 20,
|
|
query: answered ? { answered } : undefined,
|
|
});
|
|
|
|
const toast = useToast();
|
|
const [exporting, setExporting] = useState(false);
|
|
const [exportProgress, setExportProgress] = useState(0);
|
|
|
|
// The full export hammers the API with one request per user, so it sits
|
|
// behind a confirmation password instead of being one stray click away.
|
|
const [gateOpen, setGateOpen] = useState(false);
|
|
const [gatePassword, setGatePassword] = useState("");
|
|
const [gateError, setGateError] = useState<string | null>(null);
|
|
|
|
const [detailUser, setDetailUser] = useState<MeditationUser | null>(null);
|
|
const [detailData, setDetailData] = useState<DetailData | null>(null);
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
const [detailLoading, setDetailLoading] = useState(false);
|
|
|
|
async function openDetail(user: MeditationUser) {
|
|
setDetailOpen(true);
|
|
setDetailLoading(true);
|
|
setDetailUser(user);
|
|
setDetailData(null);
|
|
|
|
const [appro, survey] = await Promise.all([
|
|
user.mobile
|
|
? apiFetch<{ data: ApproUser[] }>("/admin/users", {
|
|
query: { mobile: user.mobile, per_page: 1 },
|
|
baseUrl: APPRO_BASE_URL,
|
|
headers: { Authorization: `Bearer ${getApproToken()}` },
|
|
}).then((r) => r.data?.[0] ?? null)
|
|
: Promise.resolve(null),
|
|
apiFetch<{ survey_answers: SurveyAnswerItem[]; answers_count?: number; questions_answered?: number }>(
|
|
`/admin/survey-users/${user.identifier || user.id}`,
|
|
{ baseUrl: MEDITATION_BASE_URL },
|
|
).catch(() => ({ survey_answers: [], answers_count: undefined, questions_answered: undefined })),
|
|
]);
|
|
|
|
// Sync approagency data back to meditation DB if user has null fields
|
|
if (appro && user.mobile && (!user.first_name || user.age == null || user.gender == null)) {
|
|
apiFetch(`/admin/survey-users/${user.identifier || user.id}`, {
|
|
method: "PATCH",
|
|
baseUrl: MEDITATION_BASE_URL,
|
|
body: {
|
|
first_name: appro.first_name,
|
|
last_name: appro.last_name,
|
|
age: appro.age,
|
|
gender: appro.gender,
|
|
birthday: appro.birthday,
|
|
identifier: appro.uuid,
|
|
email: appro.email,
|
|
},
|
|
}).catch(() => {}); // fire-and-forget
|
|
}
|
|
|
|
setDetailData({
|
|
appro,
|
|
survey_answers: survey.survey_answers ?? [],
|
|
answers_count: survey.answers_count,
|
|
questions_answered: survey.questions_answered,
|
|
});
|
|
setDetailLoading(false);
|
|
}
|
|
|
|
function genderLabel(value?: number | null) {
|
|
return value != null ? GENDER_LABELS[value] ?? "—" : "—";
|
|
}
|
|
|
|
function openGate() {
|
|
if (exporting) return;
|
|
setGatePassword("");
|
|
setGateError(null);
|
|
setGateOpen(true);
|
|
}
|
|
|
|
function submitGate() {
|
|
if (gatePassword !== EXPORT_PASSWORD) {
|
|
setGateError("رمز عبور نادرست است.");
|
|
return;
|
|
}
|
|
setGateOpen(false);
|
|
setGatePassword("");
|
|
setGateError(null);
|
|
void exportAll();
|
|
}
|
|
|
|
// Full export: walks every page of the current filter, then pulls each user's
|
|
// survey answers so the sheet gets one column per question.
|
|
async function exportAll() {
|
|
if (exporting) return;
|
|
setExporting(true);
|
|
setExportProgress(0);
|
|
|
|
try {
|
|
const users: MeditationUser[] = [];
|
|
let currentPage = 1;
|
|
let lastPage = 1;
|
|
|
|
do {
|
|
const res = await apiFetch<{
|
|
data: MeditationUser[];
|
|
last_page?: number;
|
|
meta?: { last_page?: number };
|
|
}>("/admin/survey-users", {
|
|
baseUrl: MEDITATION_BASE_URL,
|
|
query: {
|
|
page: currentPage,
|
|
per_page: 100,
|
|
...(answered ? { answered } : {}),
|
|
},
|
|
});
|
|
users.push(...(res.data ?? []));
|
|
lastPage = Number(res.last_page ?? res.meta?.last_page ?? 1);
|
|
currentPage++;
|
|
} while (currentPage <= lastPage);
|
|
|
|
if (users.length === 0) {
|
|
toast.error("کاربری برای خروجی گرفتن وجود ندارد.");
|
|
return;
|
|
}
|
|
|
|
const details = await mapWithConcurrency(
|
|
users,
|
|
6,
|
|
(user) =>
|
|
apiFetch<{ survey_answers?: SurveyAnswerItem[] }>(
|
|
`/admin/survey-users/${user.identifier || user.id}`,
|
|
{ baseUrl: MEDITATION_BASE_URL },
|
|
)
|
|
.then((r) => r.survey_answers ?? [])
|
|
.catch(() => [] as SurveyAnswerItem[]),
|
|
(done, total) => setExportProgress(Math.round((done / total) * 100)),
|
|
);
|
|
|
|
// Union of questions, in first-seen order, so every row lines up.
|
|
const questionOrder: number[] = [];
|
|
const questionTitles = new Map<number, string>();
|
|
for (const answers of details) {
|
|
for (const item of answers) {
|
|
if (!questionTitles.has(item.question_id)) {
|
|
questionTitles.set(item.question_id, item.question || `سوال ${item.question_id}`);
|
|
questionOrder.push(item.question_id);
|
|
}
|
|
}
|
|
}
|
|
|
|
const headers = [
|
|
"شناسه",
|
|
"نام",
|
|
"سن",
|
|
"جنسیت",
|
|
"ایمیل",
|
|
"موبایل",
|
|
"تاریخ ثبتنام",
|
|
"تعداد پاسخها",
|
|
"سوالات پاسخ داده شده",
|
|
...questionOrder.map((id) => questionTitles.get(id)!),
|
|
];
|
|
|
|
const rows = users.map((user, i) => {
|
|
const byQuestion = new Map(
|
|
details[i].map((item) => [
|
|
item.question_id,
|
|
item.answers.map((a) => a.label).join("، "),
|
|
]),
|
|
);
|
|
return [
|
|
user.id,
|
|
user.full_name || [user.first_name, user.last_name].filter(Boolean).join(" ") || "—",
|
|
user.age ?? "—",
|
|
genderLabel(user.gender),
|
|
user.email || "—",
|
|
user.mobile || "—",
|
|
faDate(user.created_at),
|
|
user.answers_count ?? "—",
|
|
user.questions_answered ?? "—",
|
|
...questionOrder.map((id) => byQuestion.get(id) || ""),
|
|
];
|
|
});
|
|
|
|
const suffix = answered === "1" ? "-answered" : answered === "0" ? "-unanswered" : "";
|
|
exportToExcel(`survey-users${suffix}`, headers, rows, "کاربران");
|
|
toast.success(`خروجی اکسل ${toFa(users.length)} کاربر آماده شد.`);
|
|
} catch {
|
|
toast.error("خطا در تهیه خروجی اکسل.");
|
|
} finally {
|
|
setExporting(false);
|
|
setExportProgress(0);
|
|
}
|
|
}
|
|
|
|
// Single-user export: profile fields plus that user's survey answers, taken
|
|
// straight from what the open modal already loaded.
|
|
function exportDetail() {
|
|
if (!detailUser || !detailData) return;
|
|
const appro = detailData.appro;
|
|
|
|
const headers = ["عنوان", "مقدار"];
|
|
const rows: (string | number)[][] = [
|
|
["شناسه", detailUser.id],
|
|
["نام", userName || "—"],
|
|
["سن", (appro?.age ?? detailUser.age) ?? "—"],
|
|
["جنسیت", genderLabel(appro?.gender ?? detailUser.gender)],
|
|
["تاریخ تولد", appro?.birthday ? faDate(appro.birthday) : "—"],
|
|
["ایمیل", (appro?.email ?? detailUser.email) || "—"],
|
|
["موبایل", detailUser.mobile || "—"],
|
|
["تاریخ ثبتنام", faDate(detailUser.created_at)],
|
|
["تعداد پاسخها", detailData.answers_count ?? "—"],
|
|
["سوالات پاسخ داده شده", detailData.questions_answered ?? "—"],
|
|
["", ""],
|
|
["سوال", "پاسخ"],
|
|
...detailData.survey_answers.map((item) => [
|
|
item.question || `سوال ${item.question_id}`,
|
|
item.answers.map((a) => a.label).join("، ") || "بدون پاسخ",
|
|
]),
|
|
];
|
|
|
|
exportToExcel(`survey-user-${detailUser.id}`, headers, rows, "جزئیات کاربر");
|
|
}
|
|
|
|
const columns: Column<MeditationUser>[] = [
|
|
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-20" },
|
|
{
|
|
key: "full_name",
|
|
header: "نام",
|
|
render: (r) => r.full_name || [r.first_name, r.last_name].filter(Boolean).join(" ") || "—",
|
|
},
|
|
{
|
|
key: "questions_answered",
|
|
header: "پاسخ به سوالات",
|
|
className: "w-32",
|
|
render: (r) =>
|
|
r.questions_answered != null ? toFa(r.questions_answered) : "—",
|
|
},
|
|
{
|
|
key: "created_at",
|
|
header: "تاریخ ثبتنام",
|
|
className: "w-32",
|
|
render: (r) => faDate(r.created_at),
|
|
},
|
|
];
|
|
|
|
const a = detailData?.appro;
|
|
const s = detailData;
|
|
const userName = a
|
|
? a.full_name || [a.first_name, a.last_name].filter(Boolean).join(" ") || ""
|
|
: detailUser
|
|
? detailUser.full_name || [detailUser.first_name, detailUser.last_name].filter(Boolean).join(" ") || ""
|
|
: "";
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="کاربران نظرسنجی"
|
|
subtitle="فهرست کاربران و پاسخهای نظرسنجی آنها"
|
|
action={
|
|
<Button onClick={openGate} disabled={exporting}>
|
|
{exporting ? (
|
|
<>
|
|
<Spinner className="h-4 w-4" />
|
|
<span>در حال آمادهسازی… {toFa(exportProgress)}٪</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<DownloadIcon className="h-4 w-4" />
|
|
<span>خروجی اکسل</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<label className="text-sm text-muted">فیلتر:</label>
|
|
<Select value={answered} onChange={(e) => { setAnswered(e.target.value); setPage(1); }}>
|
|
<option value="">همه کاربران</option>
|
|
<option value="1">پاسخ دادهاند</option>
|
|
<option value="0">پاسخ ندادهاند</option>
|
|
</Select>
|
|
</div>
|
|
|
|
<DataTable
|
|
columns={columns}
|
|
rows={data}
|
|
loading={loading}
|
|
error={error}
|
|
onRetry={reload}
|
|
emptyTitle="کاربری یافت نشد"
|
|
emptyMessage="هنوز کاربری در نظرسنجی شرکت نکرده است."
|
|
actions={(row) => (
|
|
<Button variant="ghost" onClick={() => openDetail(row)} aria-label="جزئیات">
|
|
<EyeIcon className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
/>
|
|
|
|
{meta && (
|
|
<Pagination
|
|
page={page}
|
|
lastPage={meta.last_page}
|
|
total={meta.total}
|
|
onChange={setPage}
|
|
/>
|
|
)}
|
|
|
|
<Modal
|
|
open={gateOpen}
|
|
onClose={() => setGateOpen(false)}
|
|
title="تایید خروجی اکسل"
|
|
footer={
|
|
<>
|
|
<Button onClick={submitGate} disabled={!gatePassword}>
|
|
تایید و شروع خروجی
|
|
</Button>
|
|
<Button variant="secondary" onClick={() => setGateOpen(false)}>
|
|
انصراف
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
submitGate();
|
|
}}
|
|
className="flex flex-col gap-3"
|
|
>
|
|
<p className="text-sm text-muted">
|
|
این عملیات اطلاعات همه کاربران و پاسخهای نظرسنجی را از سرور
|
|
میخواند و ممکن است بار زیادی روی سرور بگذارد. برای ادامه رمز عبور
|
|
را وارد کنید.
|
|
</p>
|
|
<Field label="رمز عبور" required>
|
|
<Input
|
|
type="password"
|
|
autoFocus
|
|
value={gatePassword}
|
|
onChange={(e) => {
|
|
setGatePassword(e.target.value);
|
|
setGateError(null);
|
|
}}
|
|
placeholder="رمز عبور خروجی"
|
|
dir="ltr"
|
|
/>
|
|
</Field>
|
|
{gateError && <p className="text-sm text-danger">{gateError}</p>}
|
|
{/* Lets Enter submit the form even though the button lives in the footer. */}
|
|
<button type="submit" className="hidden" aria-hidden />
|
|
</form>
|
|
</Modal>
|
|
|
|
<Modal
|
|
open={detailOpen}
|
|
onClose={() => setDetailOpen(false)}
|
|
title={userName ? `جزئیات کاربر — ${userName}` : "جزئیات کاربر"}
|
|
footer={
|
|
<>
|
|
<Button
|
|
onClick={exportDetail}
|
|
disabled={detailLoading || !detailData}
|
|
>
|
|
<DownloadIcon className="h-4 w-4" />
|
|
<span>خروجی اکسل</span>
|
|
</Button>
|
|
<Button variant="secondary" onClick={() => setDetailOpen(false)}>
|
|
بستن
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
{detailLoading && (
|
|
<div className="flex justify-center py-8">
|
|
<Spinner className="h-6 w-6" />
|
|
</div>
|
|
)}
|
|
|
|
{s && !detailLoading && (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Card>
|
|
<p className="text-sm text-muted">نام</p>
|
|
<p className="mt-1 font-bold text-foreground">{userName || "—"}</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">سن</p>
|
|
<p className="mt-1 font-bold text-foreground">
|
|
{(a?.age ?? detailUser?.age) != null ? toFa(a?.age ?? detailUser!.age!) : "—"}
|
|
</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">جنسیت</p>
|
|
<p className="mt-1 font-bold text-foreground">
|
|
{(a?.gender ?? detailUser?.gender) != null
|
|
? GENDER_LABELS[a?.gender ?? detailUser!.gender!] ?? "—"
|
|
: "—"}
|
|
</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">تاریخ تولد</p>
|
|
<p className="mt-1 font-bold text-foreground">
|
|
{a?.birthday ? faDate(a.birthday) : "—"}
|
|
</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">ایمیل</p>
|
|
<p className="mt-1 font-bold text-foreground" dir="ltr">
|
|
{(a?.email ?? detailUser?.email) || "—"}
|
|
</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">موبایل</p>
|
|
<p className="mt-1 font-bold text-foreground" dir="ltr">
|
|
{detailUser?.mobile || "—"}
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Card>
|
|
<p className="text-sm text-muted">تعداد پاسخها</p>
|
|
<p className="mt-1 font-bold text-foreground">
|
|
{s.answers_count != null ? toFa(s.answers_count) : "—"}
|
|
</p>
|
|
</Card>
|
|
<Card>
|
|
<p className="text-sm text-muted">سوالات پاسخ داده شده</p>
|
|
<p className="mt-1 font-bold text-foreground">
|
|
{s.questions_answered != null ? toFa(s.questions_answered) : "—"}
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
{s.survey_answers.length > 0 ? (
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-bold text-foreground">
|
|
پاسخهای نظرسنجی
|
|
</h3>
|
|
<div className="flex flex-col gap-2">
|
|
{s.survey_answers.map((item) => (
|
|
<div
|
|
key={item.question_id}
|
|
className="rounded-xl border border-border p-3"
|
|
>
|
|
<p className="text-sm font-medium text-foreground">
|
|
{item.question}
|
|
</p>
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{item.answers.map((a) => (
|
|
<Badge key={a.option_id} tone="primary">
|
|
{a.label}
|
|
</Badge>
|
|
))}
|
|
{item.answers.length === 0 && (
|
|
<span className="text-xs text-muted">بدون پاسخ</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-center text-sm text-muted">
|
|
این کاربر هنوز به هیچ سوالی پاسخ نداده است.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|