feat: initial admin panel

2026-02-19 22:13:11 +03:30
parent 70efff0dfd
commit 9aff48019d
50 changed files with 9604 additions and 1 deletions
@@ -0,0 +1,76 @@
+'use client';
+
+import { User } from '@/types/user';
+import { formatDate, formatPrice, getFullName, getEmail, getMobile } from '@/lib/utils';
+import { CalendarIcon, EnvelopeIcon, PhoneIcon, WalletIcon, UserIcon } from '@heroicons/react/24/outline';
+
+interface UserInfoProps {
+    user: User;
+}
+
+export default function UserInfo({ user }: UserInfoProps) {
+    return (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
+            <div className="px-4 py-5 sm:px-6">
+                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                    اطلاعات کاربر
+                </h3>
+            </div>
+            <div className="border-t border-gray-200">
+                <dl>
+                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500">نام کامل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
+                            <UserIcon className="h-4 w-4 ml-1 text-gray-400" />
+                            {getFullName(user)}
+                        </dd>
+                    </div>
+                    <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500">ایمیل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
+                            <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
+                            {getEmail(user.email)}
+                        </dd>
+                    </div>
+                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500">شماره موبایل</dt>
+                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
+                            <PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
+                            {getMobile(user.mobile)}
+                        </dd>
+                    </div>
+                    <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500">کیف پول</dt>
+                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
+                            <WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
+                            {formatPrice(user.wallet)} تومان
+                        </dd>
+                    </div>
+                    <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                        <dt className="text-sm font-medium text-gray-500">تاریخ عضویت</dt>
+                        <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
+                            <CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
+                            {formatDate(user.created_at)}
+                        </dd>
+                    </div>
+                    {user.birthday && (
+                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">تاریخ تولد</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {formatDate(user.birthday)}
+                            </dd>
+                        </div>
+                    )}
+                    {user.gender && (
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">جنسیت</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
+                            </dd>
+                        </div>
+                    )}
+                </dl>
+            </div>
+        </div>
+    );
+}