feat: add section logs
This commit is contained in:
@@ -0,0 +1,559 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { authLogsApi } from '@/lib/api/authLogs';
|
||||
import { packagesApi } from '@/lib/api/packages';
|
||||
import PageHeader from '@/components/admin/PageHeader';
|
||||
import PersianDatePicker from '@/components/admin/PersianDatePicker';
|
||||
import { PackageName } from '@/types/package';
|
||||
import {
|
||||
AuthLog,
|
||||
AuthLogFilters,
|
||||
AuthStats,
|
||||
AUTH_EVENTS,
|
||||
getAuthEventLabel,
|
||||
PaginatedAuthLogs,
|
||||
} from '@/types/auth-log';
|
||||
import { formatPrice, formatDate, formatTime } from '@/lib/utils';
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
ArrowPathIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
CheckBadgeIcon,
|
||||
BanknotesIcon,
|
||||
UserGroupIcon,
|
||||
ExclamationTriangleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
// Default price of one Kavenegar verify SMS, in Toman. Only used to price the
|
||||
// SMS total in the panel — the admin can change it and the choice is remembered.
|
||||
const DEFAULT_SMS_UNIT_COST = 800;
|
||||
const SMS_COST_STORAGE_KEY = 'approagency:sms_unit_cost';
|
||||
|
||||
const emptyFilters: AuthLogFilters = {
|
||||
event: '',
|
||||
mobile: '',
|
||||
package_name: '',
|
||||
date_from: '',
|
||||
date_to: '',
|
||||
};
|
||||
|
||||
const eventBadgeClass = (event: string, success: boolean): string => {
|
||||
if (!success) return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
|
||||
if (event === 'otp_sent' || event === 'mobile_otp_sent') {
|
||||
return 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300';
|
||||
}
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
||||
};
|
||||
|
||||
export default function AuthAnalyticsPage() {
|
||||
const { token } = useAuth();
|
||||
const [packages, setPackages] = useState<PackageName[]>([]);
|
||||
const [filters, setFilters] = useState<AuthLogFilters>(emptyFilters);
|
||||
const [smsUnitCost, setSmsUnitCost] = useState<number>(DEFAULT_SMS_UNIT_COST);
|
||||
const [stats, setStats] = useState<AuthStats | null>(null);
|
||||
const [logs, setLogs] = useState<PaginatedAuthLogs | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Restore the last SMS unit price the admin entered
|
||||
useEffect(() => {
|
||||
const saved = window.localStorage.getItem(SMS_COST_STORAGE_KEY);
|
||||
if (saved) {
|
||||
const parsed = parseInt(saved, 10);
|
||||
if (!Number.isNaN(parsed) && parsed >= 0) setSmsUnitCost(parsed);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const load = useCallback(async (
|
||||
targetPage: number,
|
||||
activeFilters: AuthLogFilters,
|
||||
unitCost: number
|
||||
) => {
|
||||
if (!token) return;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [statsData, logsData] = await Promise.all([
|
||||
authLogsApi.getStats({ ...activeFilters, sms_unit_cost: unitCost }, token),
|
||||
authLogsApi.getLogs({ ...activeFilters, page: targetPage, per_page: 30 }, token),
|
||||
]);
|
||||
setStats(statsData);
|
||||
setLogs(logsData);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'خطا در دریافت آمار ورود و پیامک');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
packagesApi.getAllPackages(token).then(setPackages).catch(() => setPackages([]));
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
load(1, emptyFilters, DEFAULT_SMS_UNIT_COST);
|
||||
}, [token, load]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFilters((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleUnitCostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const digits = e.target.value.replace(/[^\d]/g, '');
|
||||
const parsed = digits ? parseInt(digits, 10) : 0;
|
||||
setSmsUnitCost(parsed);
|
||||
window.localStorage.setItem(SMS_COST_STORAGE_KEY, String(parsed));
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPage(1);
|
||||
load(1, filters, smsUnitCost);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFilters(emptyFilters);
|
||||
setSmsUnitCost(DEFAULT_SMS_UNIT_COST);
|
||||
window.localStorage.setItem(SMS_COST_STORAGE_KEY, String(DEFAULT_SMS_UNIT_COST));
|
||||
setPage(1);
|
||||
load(1, emptyFilters, DEFAULT_SMS_UNIT_COST);
|
||||
};
|
||||
|
||||
const goToPage = (targetPage: number) => {
|
||||
setPage(targetPage);
|
||||
load(targetPage, filters, smsUnitCost);
|
||||
};
|
||||
|
||||
// Tallest bar in the daily chart, used to scale the rest
|
||||
const dailyMax = useMemo(
|
||||
() => Math.max(1, ...(stats?.daily || []).map((d) => Math.max(d.otp_sent, d.otp_verified))),
|
||||
[stats]
|
||||
);
|
||||
|
||||
const inputClass =
|
||||
'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
|
||||
|
||||
const cards = stats ? [
|
||||
{
|
||||
title: 'پیامک ارسالشده',
|
||||
value: formatPrice(stats.totals.sms_sent),
|
||||
hint: 'مجموع کدهای ارسالی (قابل محاسبه برای هزینه)',
|
||||
Icon: DevicePhoneMobileIcon,
|
||||
iconBg: 'bg-amber-100 dark:bg-amber-500/15',
|
||||
iconColor: 'text-amber-600 dark:text-amber-400',
|
||||
},
|
||||
{
|
||||
title: 'هزینه تخمینی پیامک',
|
||||
value: `${formatPrice(stats.totals.sms_cost)} تومان`,
|
||||
hint: `بر پایه ${formatPrice(stats.totals.sms_unit_cost)} تومان برای هر پیامک`,
|
||||
Icon: BanknotesIcon,
|
||||
iconBg: 'bg-cyan-100 dark:bg-cyan-500/15',
|
||||
iconColor: 'text-cyan-600 dark:text-cyan-400',
|
||||
},
|
||||
{
|
||||
title: 'ورود موفق',
|
||||
value: formatPrice(stats.totals.logins),
|
||||
hint: 'تأیید کد + رمز عبور + گوگل',
|
||||
Icon: ArrowRightOnRectangleIcon,
|
||||
iconBg: 'bg-green-100 dark:bg-green-500/15',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
},
|
||||
{
|
||||
title: 'نرخ تأیید کد',
|
||||
value: `${formatPrice(stats.totals.otp_conversion_rate)}٪`,
|
||||
hint: `${formatPrice(stats.totals.otp_verified)} تأیید از ${formatPrice(stats.totals.otp_sent)} ارسال`,
|
||||
Icon: CheckBadgeIcon,
|
||||
iconBg: 'bg-indigo-100 dark:bg-indigo-500/15',
|
||||
iconColor: 'text-indigo-600 dark:text-indigo-400',
|
||||
},
|
||||
{
|
||||
title: 'کاربران یکتا',
|
||||
value: formatPrice(stats.totals.unique_mobiles),
|
||||
hint: 'شمارههای یکتا در این بازه',
|
||||
Icon: UserGroupIcon,
|
||||
iconBg: 'bg-purple-100 dark:bg-purple-500/15',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
},
|
||||
{
|
||||
title: 'کد نامعتبر',
|
||||
value: formatPrice(stats.totals.otp_failed),
|
||||
hint: 'پیامکهایی که به ورود نرسیدند',
|
||||
Icon: ExclamationTriangleIcon,
|
||||
iconBg: 'bg-red-100 dark:bg-red-500/15',
|
||||
iconColor: 'text-red-600 dark:text-red-400',
|
||||
},
|
||||
] : [];
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<PageHeader
|
||||
title="آمار ورود و پیامک"
|
||||
subtitle="تعداد کدهای ارسالی، تأییدها و ورودها برای محاسبه هزینه پیامک"
|
||||
/>
|
||||
|
||||
{/* Filters */}
|
||||
<form
|
||||
onSubmit={handleSearch}
|
||||
className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<PersianDatePicker
|
||||
id="date_from"
|
||||
label="از تاریخ"
|
||||
placeholder="انتخاب تاریخ شروع"
|
||||
value={filters.date_from || ''}
|
||||
onChange={(value) => setFilters((prev) => ({ ...prev, date_from: value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<PersianDatePicker
|
||||
id="date_to"
|
||||
label="تا تاریخ"
|
||||
placeholder="انتخاب تاریخ پایان"
|
||||
value={filters.date_to || ''}
|
||||
onChange={(value) => setFilters((prev) => ({ ...prev, date_to: value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="package_name" className={labelClass}>پکیج</label>
|
||||
<select
|
||||
id="package_name"
|
||||
name="package_name"
|
||||
value={filters.package_name || ''}
|
||||
onChange={handleInputChange}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">همه پکیجها</option>
|
||||
{packages.map((pkg) => (
|
||||
<option key={pkg.id} value={pkg.name || ''}>
|
||||
{pkg.title || pkg.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="event" className={labelClass}>نوع رویداد</label>
|
||||
<select
|
||||
id="event"
|
||||
name="event"
|
||||
value={filters.event || ''}
|
||||
onChange={handleInputChange}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">همه رویدادها</option>
|
||||
{Object.entries(AUTH_EVENTS).map(([key, e]) => (
|
||||
<option key={key} value={key}>{e.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="mobile" className={labelClass}>شماره موبایل</label>
|
||||
<input
|
||||
type="text"
|
||||
id="mobile"
|
||||
name="mobile"
|
||||
value={filters.mobile || ''}
|
||||
onChange={handleInputChange}
|
||||
className={inputClass}
|
||||
placeholder="0912xxxxxxx"
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="sms_unit_cost" className={labelClass}>هزینه هر پیامک (تومان)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="sms_unit_cost"
|
||||
value={smsUnitCost ? formatPrice(smsUnitCost) : ''}
|
||||
onChange={handleUnitCostChange}
|
||||
className={inputClass}
|
||||
placeholder="۸۰۰"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
|
||||
>
|
||||
<MagnifyingGlassIcon className="h-4 w-4" />
|
||||
اعمال فیلتر
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm"
|
||||
>
|
||||
<ArrowPathIcon className="h-4 w-4" />
|
||||
پاک کردن فیلترها
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
|
||||
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
|
||||
{cards.map(({ title, value, hint, Icon, iconBg, iconColor }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="bg-white dark:bg-gray-900 rounded-2xl p-5 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl ${iconBg}`}>
|
||||
<Icon className={`h-5 w-5 ${iconColor}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">{title}</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-gray-100 mt-0.5">{value}</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1 leading-relaxed">{hint}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Daily chart: sent vs verified OTPs */}
|
||||
{stats && stats.daily.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-5">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">روند روزانه</h3>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded-sm bg-amber-500" />
|
||||
کد ارسالی
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2.5 w-2.5 rounded-sm bg-green-500" />
|
||||
کد تأییدشده
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex items-end gap-3 min-w-full h-48" style={{ minWidth: `${stats.daily.length * 44}px` }}>
|
||||
{stats.daily.map((day) => (
|
||||
<div key={day.date} className="flex-1 flex flex-col items-center gap-2 min-w-[32px]">
|
||||
<div className="w-full flex items-end justify-center gap-0.5 h-40">
|
||||
<div
|
||||
className="w-1/2 bg-amber-500/80 rounded-t-md transition-all"
|
||||
style={{ height: `${(day.otp_sent / dailyMax) * 100}%` }}
|
||||
title={`${day.otp_sent} کد ارسالی`}
|
||||
/>
|
||||
<div
|
||||
className="w-1/2 bg-green-500/80 rounded-t-md transition-all"
|
||||
style={{ height: `${(day.otp_verified / dailyMax) * 100}%` }}
|
||||
title={`${day.otp_verified} کد تأییدشده`}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 dark:text-gray-500 whitespace-nowrap">
|
||||
{formatDate(day.date)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Breakdown by event and package */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">تفکیک بر اساس رویداد</h3>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{Object.entries(AUTH_EVENTS).map(([key, e]) => (
|
||||
<li key={key} className="px-5 py-3 flex items-center justify-between gap-3">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{e.label}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{formatPrice(stats.by_event[key] ?? 0)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">تفکیک بر اساس پکیج</h3>
|
||||
</div>
|
||||
{stats.by_package.length === 0 ? (
|
||||
<p className="px-5 py-8 text-sm text-center text-gray-500 dark:text-gray-400">
|
||||
دادهای برای نمایش نیست
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{stats.by_package.map((row) => (
|
||||
<li key={row.package_name} className="px-5 py-3 flex items-center justify-between gap-3">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 truncate" dir="ltr">
|
||||
{packages.find((p) => p.name === row.package_name)?.title || row.package_name}
|
||||
</span>
|
||||
<span className="flex items-center gap-3 flex-shrink-0 text-xs">
|
||||
<span className="px-2 py-0.5 rounded-md bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
|
||||
{formatPrice(row.sms)} پیامک
|
||||
</span>
|
||||
<span className="px-2 py-0.5 rounded-md bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
|
||||
{formatPrice(row.logins)} ورود
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Raw event log */}
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="px-5 py-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{logs ? `${formatPrice(logs.total)} رویداد یافت شد` : 'در حال بارگذاری...'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center py-16">
|
||||
<div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
|
||||
</div>
|
||||
) : !logs || logs.data.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
|
||||
<DevicePhoneMobileIcon className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">
|
||||
هیچ رویدادی با این فیلترها یافت نشد
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Mobile: stacked cards */}
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800 md:hidden">
|
||||
{logs.data.map((log: AuthLog) => (
|
||||
<li key={log.id} className="px-5 py-4 space-y-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate" dir="ltr">
|
||||
{log.mobile || log.email || '—'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
|
||||
{log.package_name || '—'}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`flex-shrink-0 px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${eventBadgeClass(log.event, log.success)}`}>
|
||||
{getAuthEventLabel(log.event)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 text-xs text-gray-400 dark:text-gray-500">
|
||||
<span dir="ltr">{log.ip || '—'}</span>
|
||||
<span>{formatDate(log.created_at)} {formatTime(log.created_at)}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Desktop: table */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800/60">
|
||||
<tr className="text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<th className="px-4 py-3">کاربر</th>
|
||||
<th className="px-4 py-3">رویداد</th>
|
||||
<th className="px-4 py-3">پیامک</th>
|
||||
<th className="px-4 py-3">پکیج</th>
|
||||
<th className="px-4 py-3">IP</th>
|
||||
<th className="px-4 py-3">تاریخ و ساعت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{logs.data.map((log: AuthLog) => (
|
||||
<tr key={log.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
|
||||
<td className="px-4 py-3.5">
|
||||
<div className="text-sm text-gray-900 dark:text-gray-100" dir="ltr">
|
||||
{log.mobile || '—'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400" dir="ltr">
|
||||
{log.email || '—'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<span className={`px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${eventBadgeClass(log.event, log.success)}`}>
|
||||
{getAuthEventLabel(log.event)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 text-sm whitespace-nowrap">
|
||||
{log.sms_sent ? (
|
||||
<span className="text-amber-600 dark:text-amber-400 font-medium">۱</span>
|
||||
) : (
|
||||
<span className="text-gray-400 dark:text-gray-500">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3.5 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{log.package_name || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap" dir="ltr">
|
||||
{log.ip || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{formatDate(log.created_at)} {formatTime(log.created_at)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{logs && logs.last_page > 1 && (
|
||||
<div className="flex items-center justify-between px-5 py-3.5 border-t border-gray-200 dark:border-gray-800">
|
||||
<button
|
||||
onClick={() => goToPage(page - 1)}
|
||||
disabled={page <= 1 || isLoading}
|
||||
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
قبلی
|
||||
</button>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
صفحه {logs.current_page} از {logs.last_page}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => goToPage(page + 1)}
|
||||
disabled={page >= logs.last_page || isLoading}
|
||||
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
بعدی
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import { UsersIcon, CubeIcon, TagIcon, BellIcon, GiftIcon, ShoppingBagIcon, CalculatorIcon } from '@heroicons/react/24/outline';
|
||||
import { UsersIcon, CubeIcon, TagIcon, BellIcon, GiftIcon, ShoppingBagIcon, CalculatorIcon, ChartBarIcon } from '@heroicons/react/24/outline';
|
||||
import { MegaphoneIcon } from 'lucide-react';
|
||||
|
||||
export default function Dashboard() {
|
||||
@@ -36,6 +36,15 @@ export default function Dashboard() {
|
||||
iconColor: 'text-cyan-600 dark:text-cyan-400',
|
||||
hoverBorder: 'hover:border-cyan-300 dark:hover:border-cyan-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/auth-analytics',
|
||||
title: 'آمار ورود و پیامک',
|
||||
desc: 'تعداد کدهای ارسالی، تأییدها و ورودها برای محاسبه هزینه پیامک',
|
||||
Icon: ChartBarIcon,
|
||||
iconBg: 'bg-amber-100 dark:bg-amber-500/15',
|
||||
iconColor: 'text-amber-600 dark:text-amber-400',
|
||||
hoverBorder: 'hover:border-amber-300 dark:hover:border-amber-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/packages',
|
||||
title: 'مدیریت پکیجها',
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
ShoppingBagIcon,
|
||||
HomeIcon,
|
||||
CalculatorIcon,
|
||||
ChartBarIcon,
|
||||
Bars3Icon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
@@ -25,6 +26,7 @@ const navItems = [
|
||||
{ href: '/admin/users', label: 'کاربران', Icon: UsersIcon },
|
||||
{ href: '/admin/purchases', label: 'خریدها', Icon: ShoppingBagIcon },
|
||||
{ href: '/admin/accounting', label: 'حسابداری', Icon: CalculatorIcon },
|
||||
{ href: '/admin/auth-analytics', label: 'ورود و پیامک', Icon: ChartBarIcon },
|
||||
{ href: '/admin/packages', label: 'پکیجها', Icon: CubeIcon },
|
||||
{ href: '/admin/products', label: 'محصولات', Icon: TagIcon },
|
||||
{ href: '/admin/reminders', label: 'یادآوریها', Icon: BellIcon },
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { apiClient } from './client';
|
||||
import { AuthLogFilters, AuthStats, PaginatedAuthLogs } from '@/types/auth-log';
|
||||
|
||||
const buildAuthLogQuery = (filters: AuthLogFilters): string => {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (filters.event) params.append('event', filters.event);
|
||||
if (filters.mobile) params.append('mobile', filters.mobile);
|
||||
if (filters.email) params.append('email', filters.email);
|
||||
if (filters.package_name) params.append('package_name', filters.package_name);
|
||||
if (filters.success !== undefined) params.append('success', filters.success ? '1' : '0');
|
||||
if (filters.sms_only) params.append('sms_only', '1');
|
||||
if (filters.date_from) params.append('date_from', filters.date_from);
|
||||
if (filters.date_to) params.append('date_to', filters.date_to);
|
||||
if (filters.time_from) params.append('time_from', filters.time_from);
|
||||
if (filters.time_to) params.append('time_to', filters.time_to);
|
||||
if (filters.sms_unit_cost !== undefined) params.append('sms_unit_cost', String(filters.sms_unit_cost));
|
||||
if (filters.per_page) params.append('per_page', String(filters.per_page));
|
||||
if (filters.page) params.append('page', String(filters.page));
|
||||
|
||||
return params.toString();
|
||||
};
|
||||
|
||||
export const authLogsApi = {
|
||||
// Aggregated OTP/SMS and login stats for the analytics cards and chart
|
||||
getStats: async (filters: AuthLogFilters, token: string): Promise<AuthStats> => {
|
||||
const qs = buildAuthLogQuery(filters);
|
||||
return apiClient.get<AuthStats>(`/admin/auth-stats${qs ? `?${qs}` : ''}`, token);
|
||||
},
|
||||
|
||||
// Raw paginated event log
|
||||
getLogs: async (filters: AuthLogFilters, token: string): Promise<PaginatedAuthLogs> => {
|
||||
const qs = buildAuthLogQuery(filters);
|
||||
return apiClient.get<PaginatedAuthLogs>(`/admin/auth-logs${qs ? `?${qs}` : ''}`, token);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,110 @@
|
||||
import { Paginated } from './purchase';
|
||||
|
||||
// Nested user on an auth log row (subset of the full User model)
|
||||
export interface AuthLogUser {
|
||||
id: number;
|
||||
uuid: string;
|
||||
first_name: string | null;
|
||||
last_name: string | null;
|
||||
email: string | null;
|
||||
mobile: string | null;
|
||||
}
|
||||
|
||||
// One authentication event — matches backend App\Models\AuthLog
|
||||
export interface AuthLog {
|
||||
id: number;
|
||||
user_id: number | null;
|
||||
mobile: string | null;
|
||||
email: string | null;
|
||||
event: AuthEvent;
|
||||
package_name: string | null;
|
||||
source: number | null;
|
||||
success: boolean;
|
||||
sms_sent: boolean;
|
||||
ip: string | null;
|
||||
user_agent: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user: AuthLogUser | null;
|
||||
}
|
||||
|
||||
// Event keys — must stay in sync with AuthLog::EVENTS on the backend
|
||||
export const AUTH_EVENTS = {
|
||||
otp_sent: { label: 'ارسال کد ورود (پیامک)', sms: true },
|
||||
otp_verified: { label: 'تأیید کد ورود', sms: false },
|
||||
otp_failed: { label: 'کد ورود نامعتبر', sms: false },
|
||||
mobile_otp_sent: { label: 'ارسال کد تأیید شماره (پیامک)', sms: true },
|
||||
mobile_verified: { label: 'تأیید شماره موبایل', sms: false },
|
||||
mobile_verify_failed: { label: 'تأیید شماره ناموفق', sms: false },
|
||||
login: { label: 'ورود با رمز عبور', sms: false },
|
||||
login_failed: { label: 'ورود ناموفق', sms: false },
|
||||
register: { label: 'ثبتنام', sms: false },
|
||||
google_login: { label: 'ورود با گوگل', sms: false },
|
||||
} as const;
|
||||
|
||||
export type AuthEvent = keyof typeof AUTH_EVENTS;
|
||||
|
||||
export const getAuthEventLabel = (event: string): string =>
|
||||
(AUTH_EVENTS as Record<string, { label: string }>)[event]?.label || event;
|
||||
|
||||
export interface AuthStatsDaily {
|
||||
date: string;
|
||||
total: number;
|
||||
sms: number;
|
||||
otp_sent: number;
|
||||
otp_verified: number;
|
||||
otp_failed: number;
|
||||
}
|
||||
|
||||
export interface AuthStatsPackage {
|
||||
package_name: string;
|
||||
sms: number;
|
||||
logins: number;
|
||||
}
|
||||
|
||||
export interface AuthStats {
|
||||
filters: {
|
||||
date_from: string | null;
|
||||
date_to: string | null;
|
||||
event: string | null;
|
||||
package_name: string | null;
|
||||
};
|
||||
totals: {
|
||||
events: number;
|
||||
unique_mobiles: number;
|
||||
unique_users: number;
|
||||
sms_sent: number;
|
||||
sms_cost: number;
|
||||
sms_unit_cost: number;
|
||||
otp_sent: number;
|
||||
otp_verified: number;
|
||||
otp_failed: number;
|
||||
otp_conversion_rate: number;
|
||||
logins: number;
|
||||
registers: number;
|
||||
};
|
||||
by_event: Record<string, number>;
|
||||
by_package: AuthStatsPackage[];
|
||||
daily: AuthStatsDaily[];
|
||||
}
|
||||
|
||||
// Filters shared by the auth-logs and auth-stats endpoints
|
||||
export interface AuthLogFilters {
|
||||
event?: string;
|
||||
mobile?: string;
|
||||
email?: string;
|
||||
package_name?: string;
|
||||
success?: boolean;
|
||||
sms_only?: boolean;
|
||||
// Date/time window on created_at (Y-m-d dates, H:i(:s) times, Tehran-local)
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
time_from?: string;
|
||||
time_to?: string;
|
||||
// Only used by the stats endpoint, to price the SMS total
|
||||
sms_unit_cost?: number;
|
||||
per_page?: number;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
export type PaginatedAuthLogs = Paginated<AuthLog>;
|
||||
Reference in New Issue
Block a user