parent report page with two charts, Jalali birth date picker, user ID and invoices in profile

- the parents section is gone: no parent login, invite codes or "I'm a parent" button;
  "گزارشِ والدین" in the profile shows the week against the previous one (praise line,
  six tiles, minutes-per-day and right/wrong-per-day charts, a table of the numbers)
- birth date as day / month / year selects (Jalali, leap Esfand handled) instead of age;
  adults (19+) are asked which grade's math they want to learn
- user ID under the name, copyable
- "پرداخت‌ها و فاکتورها": every order with invoice number, discount, amount and reference code
- tutor: when the free daily quota runs out, a button to the subscription page instead of "retry"

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/AgePicker.tsx

@@ -1,66 +0,0 @@
-import { Minus, Plus } from 'lucide-react';
-import { currentJalaliYear, toFa } from '@/lib/format';
-import { sounds } from '@/lib/sound';
-
-const MIN_AGE = 7;
-const MAX_AGE = 19;
-const DEFAULT_AGE = 13;
-
-/** سرور سالِ تولدِ شمسی می‌خواهد، نه سن. */
-export const birthYearFromAge = (age: number) => currentJalaliYear() - age;
-
-export function ageFromBirthYear(year: number | null | undefined): number | null {
-  if (!year) return null;
-  const age = currentJalaliYear() - year;
-  return age >= MIN_AGE && age <= MAX_AGE ? age : null;
-}
-
-/**
- * انتخابِ سن با دو دکمه‌ی − و +. جای «چرخِ» قبلی نشست که عددِ وسطش با مقدارِ
- * واقعی نمی‌خواند و کلیک روی عددهایش کار نمی‌کرد.
- */
-export function AgePicker({ value, onChange }: { value: number | null; onChange: (age: number) => void }) {
-  const current = value ?? DEFAULT_AGE;
-  const step = (delta: number) => {
-    const next = Math.max(MIN_AGE, Math.min(MAX_AGE, current + delta));
-    if (next !== current || value === null) {
-      sounds.tick();
-      onChange(next);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between rounded-2xl border-2 border-line bg-white p-2">
-      <button
-        type="button"
-        aria-label="کمتر"
-        onClick={() => step(-1)}
-        disabled={value !== null && current <= MIN_AGE}
-        className="flex h-12 w-12 items-center justify-center rounded-xl bg-soft text-coral disabled:opacity-30"
-      >
-        <Minus size={20} strokeWidth={3} />
-      </button>
-      <div className="text-center" aria-live="polite">
-        {value === null ? (
-          <button type="button" onClick={() => onChange(DEFAULT_AGE)} className="text-sm font-bold text-muted">
-            بزن تا انتخاب کنی
-          </button>
-        ) : (
-          <>
-            <span className="text-3xl font-black text-coral">{toFa(value)}</span>
-            <span className="mr-1 text-sm font-bold text-muted">سال</span>
-          </>
-        )}
-      </div>
-      <button
-        type="button"
-        aria-label="بیشتر"
-        onClick={() => step(1)}
-        disabled={value !== null && current >= MAX_AGE}
-        className="flex h-12 w-12 items-center justify-center rounded-xl bg-soft text-coral disabled:opacity-30"
-      >
-        <Plus size={20} strokeWidth={3} />
-      </button>
-    </div>
-  );
-}

src/components/BirthDatePicker.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react';
+import { toEnDigits, toFa } from '@/lib/format';
+
+/**
+ * تاریخِ تولدِ شمسی با سه فهرستِ روز/ماه/سال (از ۱۴۰۵-۰۷ به جای «چند سالته؟»).
+ * <select> عمداً بومی است: روی گوشی همان چرخِ آشنای خودِ گوشی باز می‌شود و تقویمِ
+ * ماهانه‌ای که برای تاریخِ سی سال پیش باید ده‌ها بار ورق بخورد لازم نیست.
+ *
+ * سرور تاریخ را شمسی می‌گیرد («1385-04-12») و خودش به میلادی تبدیل می‌کند
+ * (accounts/jalali.py)؛ این‌جا هیچ تبدیلی انجام نمی‌شود، فقط تعدادِ روزهای ماه.
+ */
+export const JALALI_MONTHS = [
+  'فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور',
+  'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند',
+];
+/** همان بازه‌ی سرور (accounts/serializers.py: MIN_AGE / MAX_AGE). */
+const MIN_AGE = 5;
+const MAX_AGE = 99;
+/** از این سن به بعد فرمِ آشنایی به‌جای «کدوم پایه‌ای؟» می‌پرسد «ریاضیِ کدوم پایه؟». */
+export const ADULT_AGE = 19;
+
+type Parts = { y: number; m: number; d: number };
+
+function jalaliParts(date: Date): Parts {
+  const parts = new Intl.DateTimeFormat('en-US-u-ca-persian', { year: 'numeric', month: 'numeric', day: 'numeric' }).formatToParts(date);
+  const get = (type: string) => parseInt(toEnDigits(parts.find((p) => p.type === type)?.value ?? '0'), 10);
+  return { y: get('year'), m: get('month'), d: get('day') };
+}
+
+export const todayJalali = () => jalaliParts(new Date());
+
+/** کبیسه یعنی سی‌امِ اسفند وجود دارد؛ آن روز همیشه یکی از ۱۹ تا ۲۱ مارسِ سالِ بعدِ میلادی است. */
+function isLeap(y: number): boolean {
+  return [19, 20, 21].some((day) => {
+    const p = jalaliParts(new Date(y + 622, 2, day, 12));
+    return p.y === y && p.m === 12 && p.d === 30;
+  });
+}
+
+function monthLength(y: number, m: number): number {
+  if (m <= 6) return 31;
+  if (m <= 11) return 30;
+  return isLeap(y) ? 30 : 29;
+}
+
+function parse(value: string | null | undefined): Parts | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? '');
+  return match ? { y: +match[1], m: +match[2], d: +match[3] } : null;
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+/** «1385-04-12» → «۱۲ تیر ۱۳۸۵». */
+export function formatBirthDate(value: string | null): string {
+  const p = parse(value);
+  return p ? `${toFa(p.d)} ${JALALI_MONTHS[p.m - 1]} ${toFa(p.y)}` : '';
+}
+
+/** سنِ کامل از تاریخِ تولد؛ برای کاربرِ قدیمی که فقط سال داده، تقریبی از سال. */
+export function ageOf(birthDate: string | null, birthYear: number | null): number | null {
+  const today = todayJalali();
+  const born = parse(birthDate);
+  if (born) return today.y - born.y - (today.m < born.m || (today.m === born.m && today.d < born.d) ? 1 : 0);
+  return birthYear ? today.y - birthYear : null;
+}
+
+export function BirthDatePicker({
+  value,
+  fallbackYear = null,
+  onChange,
+}: {
+  value: string | null;
+  /** سالِ تولدِ کاربرِ قدیمی (بی‌تاریخ) تا فهرستِ سال خالی باز نشود. */
+  fallbackYear?: number | null;
+  /** فقط وقتی هر سه انتخاب شده‌اند تاریخ می‌دهد؛ تا آن موقع null. */
+  onChange: (value: string | null) => void;
+}) {
+  const initial = parse(value);
+  const [y, setY] = useState<number | ''>(initial?.y ?? fallbackYear ?? '');
+  const [m, setM] = useState<number | ''>(initial?.m ?? '');
+  const [d, setD] = useState<number | ''>(initial?.d ?? '');
+  // والد هر بار تابعِ تازه می‌سازد؛ با ref، تغییرِ تابع خودش onChange را دوباره صدا نمی‌زند.
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const thisYear = todayJalali().y;
+  const years = Array.from({ length: MAX_AGE - MIN_AGE + 1 }, (_, i) => thisYear - MIN_AGE - i);
+  const days = monthLength(typeof y === 'number' ? y : thisYear, typeof m === 'number' ? m : 1);
+
+  // سی‌ویکِ مهر یا سی‌امِ اسفندِ غیرکبیسه با عوض شدنِ ماه/سال معتبر نمی‌ماند.
+  useEffect(() => {
+    if (typeof d === 'number' && d > days) setD(days);
+  }, [d, days]);
+
+  useEffect(() => {
+    const complete = y !== '' && m !== '' && d !== '' && d <= days;
+    onChangeRef.current(complete ? `${y}-${pad(m)}-${pad(d)}` : null);
+  }, [y, m, d, days]);
+
+  const select = 'w-full appearance-none rounded-2xl border-2 bg-white px-3 py-3.5 text-center text-sm font-bold outline-none focus:border-coral';
+  const tone = (v: number | '') => (v === '' ? 'border-line text-muted' : 'border-coral text-ink');
+
+  return (
+    <div className="grid grid-cols-[1fr_1.5fr_1.3fr] gap-2">
+      <select aria-label="روزِ تولد" value={d} onChange={(e) => setD(e.target.value ? +e.target.value : '')} className={`${select} ${tone(d)}`}>
+        <option value="">روز</option>
+        {Array.from({ length: days }, (_, i) => i + 1).map((n) => <option key={n} value={n}>{toFa(n)}</option>)}
+      </select>
+      <select aria-label="ماهِ تولد" value={m} onChange={(e) => setM(e.target.value ? +e.target.value : '')} className={`${select} ${tone(m)}`}>
+        <option value="">ماه</option>
+        {JALALI_MONTHS.map((name, i) => <option key={name} value={i + 1}>{name}</option>)}
+      </select>
+      <select aria-label="سالِ تولد" value={y} onChange={(e) => setY(e.target.value ? +e.target.value : '')} className={`${select} ${tone(y)}`}>
+        <option value="">سال</option>
+        {years.map((n) => <option key={n} value={n}>{toFa(n)}</option>)}
+      </select>
+    </div>
+  );
+}