feat: add users question

app/dashboard/users/page.tsx

@@ -0,0 +1,317 @@
+"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: [] } as { survey_answers: SurveyAnswerItem[] })),
+    ]);
+
+    // 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>
+  );
+}

components/icons.tsx

@@ -196,3 +196,10 @@ export const TagIcon = (p: IconProps) => (
     <circle cx="7.5" cy="7.5" r="1.2" />
   </svg>
 );
+
+export const UserIcon = (p: IconProps) => (
+  <svg {...base(p)}>
+    <circle cx="12" cy="8" r="4" />
+    <path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
+  </svg>
+);

lib/api.ts

@@ -1,7 +1,11 @@
 // Thin fetch wrapper for the meditation API. The app is a static SPA, so every
 // call runs in the browser and carries the bearer token from localStorage.
 
-import { MEDITATION_BASE_URL, TOKEN_STORAGE_KEY } from "./config";
+import {
+  APPRO_TOKEN_STORAGE_KEY,
+  MEDITATION_BASE_URL,
+  TOKEN_STORAGE_KEY,
+} from "./config";
 
 export class ApiError extends Error {
   status: number;
@@ -29,6 +33,21 @@ export function clearToken() {
   window.localStorage.removeItem(TOKEN_STORAGE_KEY);
 }
 
+export function getApproToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return window.localStorage.getItem(APPRO_TOKEN_STORAGE_KEY);
+}
+
+export function setApproToken(token: string) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(APPRO_TOKEN_STORAGE_KEY, token);
+}
+
+export function clearApproToken() {
+  if (typeof window === "undefined") return;
+  window.localStorage.removeItem(APPRO_TOKEN_STORAGE_KEY);
+}
+
 type Query = Record<string, string | number | boolean | undefined | null>;
 
 interface RequestOptions {
@@ -40,6 +59,8 @@ interface RequestOptions {
   baseUrl?: string;
   // Skip attaching the bearer token (used by the login calls).
   auth?: boolean;
+  // Extra headers to merge into the request.
+  headers?: Record<string, string>;
 }
 
 function buildUrl(path: string, query?: Query, baseUrl = MEDITATION_BASE_URL) {
@@ -60,7 +81,7 @@ export async function apiFetch<T = unknown>(
   path: string,
   options: RequestOptions = {},
 ): Promise<T> {
-  const { method = "GET", body, query, baseUrl, auth = true } = options;
+  const { method = "GET", body, query, baseUrl, auth = true, headers: extraHeaders } = options;
 
   const headers: Record<string, string> = { Accept: "application/json" };
 
@@ -69,6 +90,10 @@ export async function apiFetch<T = unknown>(
     if (token) headers.Authorization = `Bearer ${token}`;
   }
 
+  if (extraHeaders) {
+    Object.assign(headers, extraHeaders);
+  }
+
   let payload: BodyInit | undefined;
   if (body instanceof FormData) {
     payload = body; // browser sets multipart Content-Type + boundary

lib/auth.tsx

@@ -13,7 +13,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useState,
 } from "react";
 import { APPRO_BASE_URL, MEDITATION_BASE_URL, PACKAGE_NAME } from "./config";
@@ -21,8 +20,10 @@ import {
   ApiError,
   apiFetch,
   clearToken,
+  clearApproToken,
   getToken,
   setToken,
+  setApproToken,
   toFormData,
 } from "./api";
 
@@ -73,16 +74,12 @@ async function meditationLogin(approoToken: string): Promise<string> {
 }
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [token, setTokenState] = useState<string | null>(null);
+  const [token, setTokenState] = useState<string | null>(() => getToken());
-  const [ready, setReady] = useState(false);
+  const [ready] = useState(true);
-
-  useEffect(() => {
-    setTokenState(getToken());
-    setReady(true);
-  }, []);
 
   const login = useCallback(async (identifier: string, password: string) => {
     const approoToken = await approAgencyLogin(identifier, password);
+    setApproToken(approoToken);
     const medToken = await meditationLogin(approoToken);
     setToken(medToken);
     setTokenState(medToken);
@@ -90,6 +87,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
   const logout = useCallback(() => {
     clearToken();
+    clearApproToken();
     setTokenState(null);
   }, []);
 

lib/config.ts

@@ -19,5 +19,6 @@ export const ASSET_BASE_URL =
   process.env.NEXT_PUBLIC_ASSET_BASE_URL ??
   MEDITATION_BASE_URL.replace(/\/api\/?$/, "");
 
-// localStorage key for the meditation bearer token.
+// localStorage keys for the meditation bearer token and approagency token.
 export const TOKEN_STORAGE_KEY = "meditation_admin_token";
+export const APPRO_TOKEN_STORAGE_KEY = "approagency_admin_token";

lib/nav.ts

@@ -14,6 +14,7 @@ import {
   TagIcon,
   TimerIcon,
   TrophyIcon,
+  UserIcon,
   WorryIcon,
 } from "@/components/icons";
 
@@ -113,6 +114,11 @@ export const NAV: NavSection[] = [
     icon: SurveyIcon,
     items: [{ href: "/dashboard/surveys", label: "پرسش‌های نظرسنجی" }],
   },
+  {
+    label: "کاربران",
+    icon: UserIcon,
+    items: [{ href: "/dashboard/users", label: "کاربران نظرسنجی" }],
+  },
   {
     label: "گفتگو با مشاور",
     icon: ChatIcon,