318 lines
10 KiB
TypeScript
318 lines
10 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,
|
|
Pagination,
|
|
Select,
|
|
Spinner,
|
|
} from "@/components/ui";
|
|
import { EyeIcon } from "@/components/icons";
|
|
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;
|
|
}
|
|
|
|
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 [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);
|
|
}
|
|
|
|
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="فهرست کاربران و پاسخهای نظرسنجی آنها"
|
|
/>
|
|
|
|
<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={detailOpen}
|
|
onClose={() => setDetailOpen(false)}
|
|
title={userName ? `جزئیات کاربر — ${userName}` : "جزئیات کاربر"}
|
|
footer={
|
|
<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>
|
|
);
|
|
}
|