+
+ );
+};
+
+export default DataTable;
\ No newline at end of file
diff --git a/src/app/(refine)/refine/libs/interface.ts b/src/app/(refine)/refine/libs/interface.ts
new file mode 100644
index 0000000..c022c02
--- /dev/null
+++ b/src/app/(refine)/refine/libs/interface.ts
@@ -0,0 +1,28 @@
+export interface User {
+ id: string;
+ uid: string;
+ name: string;
+ email: string;
+ phone: string;
+ university: string;
+ sizeJersey: string;
+ foodLimitation: string;
+ invitationCode: string;
+ age: string;
+ chronicDisease: string;
+ drugAllergy: string;
+ status: string;
+ graduatedYear: string;
+ faculty: string;
+ imageUrl: string;
+ lastEntered: string;
+ registeredAt: string;
+ role: string;
+ education: string;
+ isAcrophobic: boolean;
+}
+
+export type FieldEntry = {
+ label: string;
+ field: keyof User;
+};
diff --git a/src/app/(refine)/refine/libs/stat.ts b/src/app/(refine)/refine/libs/stat.ts
new file mode 100644
index 0000000..5b71ece
--- /dev/null
+++ b/src/app/(refine)/refine/libs/stat.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// lib/stats.ts
+import dayjs from 'dayjs';
+import { User } from '../libs/interface';
+
+export const processStats = (data: User[]) => {
+ const today = dayjs().format('YYYY-MM-DD');
+
+ const statusStatistics = {
+ currentStudent: data.filter(u => u.status === 'chula_student').length,
+ alumni: data.filter(u => u.status === 'alumni').length,
+ generalPublic: data.filter(u => u.status === 'general_student').length,
+ otherStudents: data.filter(
+ u => !['chula_student', 'alumni', 'general_student'].includes(u.status),
+ ).length,
+ };
+
+ const dailyRegistrations = data.reduce((acc, user) => {
+ const date = dayjs(user.registeredAt).format('YYYY-MM-DD');
+ if (date) acc[date] = (acc[date] || 0) + 1;
+ return acc;
+ }, {} as Record
+
+ {paginatedData.map(user => (
+ router.push(`/refine/users/${user.id}`)}
+ />
+ ))}
+
+
+
+
+
+
+
+ + ข้อมูลผู้ลงทะเบียนทั้งหมด +
+ + +
+
+
+
+
+ ดูข้อมูลทั้งหมด
+
+
+
+
+ );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/app/(refine)/refine/users/[id]/_components/infoRow.tsx b/src/app/(refine)/refine/users/[id]/_components/infoRow.tsx
new file mode 100644
index 0000000..f903013
--- /dev/null
+++ b/src/app/(refine)/refine/users/[id]/_components/infoRow.tsx
@@ -0,0 +1,18 @@
+export const InfoRow = ({
+ label,
+ value,
+ onEdit,
+}: {
+ label: string;
+ value: string;
+ onEdit?: () => void;
+}) => (
+
+
+
+
+
+
+
+
+ + แนวโน้มการลงทะเบียนรายวัน +
+
+ `${value} คน`,
+ stepSize: 1,
+ color: '#6b7280',
+ },
+ grid: { color: '#f3f4f6' },
+ },
+ },
+ }}
+ />
+
+
+
+
+
+ สถิติตามสถานะ
+
+
+
+
+
+
+ สถานการณ์วันนี้
+
+ {label}
+ {value}
+
+);
\ No newline at end of file
diff --git a/src/app/(refine)/refine/users/[id]/_components/userDetails.tsx b/src/app/(refine)/refine/users/[id]/_components/userDetails.tsx
new file mode 100644
index 0000000..5e7c53d
--- /dev/null
+++ b/src/app/(refine)/refine/users/[id]/_components/userDetails.tsx
@@ -0,0 +1,233 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+import { useOne } from '@refinedev/core';
+import { User, FieldEntry } from '../../../libs/interface';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const formatThaiDate = (dateString: string) => {
+ const date = new Date(dateString);
+ date.setFullYear(date.getFullYear());
+ return date.toLocaleDateString('th-TH', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ });
+};
+
+export default function UserDetails({ id }: { id: string }) {
+ const router = useRouter();
+ const [isImageOpen, setIsImageOpen] = useState(false);
+ const [image, setImage] = useState
+
+ );
+
+ if (isLoading) return {title}
+
+ {fields.map(({ label, field }) => {
+ const value = user?.[field];
+ let displayValue = value || 'N/A';
+
+ if (field === 'registeredAt') {
+ displayValue = formatThaiDate(value as string);
+ } else if (field === 'graduatedYear') {
+ displayValue = (parseInt(value as string) + 543).toString();
+ } else if (field === 'status') {
+ displayValue = value as string;
+ } else if (field === 'isAcrophobic') {
+ displayValue = value ? 'ใช่' : 'ไม่';
+ }
+
+ return (
+
+
+ {label}
+ {displayValue}
+
+ );
+ })}
+ กำลังโหลด...
;
+ if (isError)
+ return (
+
+ เกิดข้อผิดพลาดในการโหลดข้อมูลผู้ใช้
+
+ );
+ if (!user) return ไม่พบผู้ใช้
;
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Image Preview */}
+
+
+
+ {/* Profile Information */}
+
+
+
+ {/* Image Modal */}
+ {isImageOpen && (
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/(refine)/refine/users/[id]/page.tsx b/src/app/(refine)/refine/users/[id]/page.tsx
new file mode 100644
index 0000000..936cb8e
--- /dev/null
+++ b/src/app/(refine)/refine/users/[id]/page.tsx
@@ -0,0 +1,9 @@
+// This is the server component that handles routing
+import UserDetails from './_components/userDetails';
+
+type tParams = Promise<{ id: string }>;
+
+export default async function Page(props: { params: tParams }) {
+ const { id } = await props.params;
+ return setIsImageOpen(true)}
+ className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl bg-gray-100 shadow-lg"
+ >
+ {imageError ? (
+ 
+ )
+ )}
+
+
+
+ {imageError}
+
+ ) : (
+ image && (
+
+
+
+ {user.name}
+
+
+ {user.role}
+
+ {user.uid}
+
+
+ {renderSection('ข้อมูลส่วนตัว', [
+ createField('อีเมล', 'email'),
+ createField('เบอร์โทรศัพท์', 'phone'),
+ createField('สถานะ', 'status'),
+ createField('วันที่ลงทะเบียน', 'registeredAt'),
+ ])}
+
+ {renderSection('ข้อมูลการศึกษา', [
+ createField('มหาวิทยาลัย', 'university'),
+ createField('คณะ', 'faculty'),
+ createField('ระดับการศึกษา', 'education'),
+ createField('ปีที่จบการศึกษา', 'graduatedYear'),
+ ])}
+
+ {renderSection('ข้อมูลเพิ่มเติม', [
+ createField('ขนาดเสื้อ', 'sizeJersey'),
+ createField('ข้อจำกัดด้านอาหาร', 'foodLimitation'),
+ createField('กลัวความสูงไหม', 'isAcrophobic'),
+ ...(user.chronicDisease
+ ? [createField('โรคประจำตัว', 'chronicDisease')]
+ : []),
+ ...(user.drugAllergy
+ ? [createField('อาการแพ้ยา', 'drugAllergy')]
+ : []),
+ ])}
+
+ setIsImageOpen(false)}
+ >
+
+ )}
+
+
+
+
+ {image ? (
+
+ ) : (
+
+
+ {imageError}
+
+ )}
+
+
+
+ );
+}
แดชบอร์ด
+