88 lines
4.0 KiB
JavaScript
88 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import api from '../api/axios';
|
|
import { FaUserMd, FaUsers, FaCalendarAlt } from 'react-icons/fa';
|
|
|
|
// ฟังก์ชันสำหรับเรียก API แต่ละตัว
|
|
const fetchDoctorsCount = async () => {
|
|
const { data } = await api.get('/doctors');
|
|
return data.length; // นับจำนวนแพทย์
|
|
};
|
|
|
|
const fetchPatientsCount = async () => {
|
|
const { data } = await api.get('/patients');
|
|
return data.length; // นับจำนวนผู้ป่วย
|
|
};
|
|
|
|
const fetchConsultations = async () => {
|
|
const { data } = await api.get('/consultations');
|
|
// คุณอาจต้องกรองข้อมูลเพื่อหาจำนวนนัดหมายที่กำลังจะมาถึง
|
|
// เช่น data.filter(c => new Date(c.date) > new Date()).length
|
|
return data.length; // นับจำนวนการนัดหมายทั้งหมด
|
|
};
|
|
|
|
export default function DashboardPage() {
|
|
// ใช้ useQuery แยกกันสำหรับแต่ละข้อมูล
|
|
const { data: doctorsCount, isLoading: isDoctorsLoading, isError: isDoctorsError } = useQuery({
|
|
queryKey: ['doctorsCount'],
|
|
queryFn: fetchDoctorsCount,
|
|
});
|
|
|
|
const { data: patientsCount, isLoading: isPatientsLoading, isError: isPatientsError } = useQuery({
|
|
queryKey: ['patientsCount'],
|
|
queryFn: fetchPatientsCount,
|
|
});
|
|
|
|
const { data: consultationsCount, isLoading: isConsultationsLoading, isError: isConsultationsError } = useQuery({
|
|
queryKey: ['consultationsCount'],
|
|
queryFn: fetchConsultations,
|
|
});
|
|
|
|
if (isDoctorsLoading || isPatientsLoading || isConsultationsLoading) {
|
|
return <div className="text-center p-8">กำลังโหลดข้อมูล...</div>;
|
|
}
|
|
|
|
if (isDoctorsError || isPatientsError || isConsultationsError) {
|
|
return <div className="alert alert-error">เกิดข้อผิดพลาดในการโหลดข้อมูล</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<h1 className="text-3xl font-bold mb-6">ภาพรวมระบบ</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Card แสดงจำนวนแพทย์ */}
|
|
<div className="stats shadow bg-white">
|
|
<div className="stat">
|
|
<div className="stat-figure text-primary">
|
|
<FaUserMd size={24} />
|
|
</div>
|
|
<div className="stat-title">จำนวนแพทย์</div>
|
|
<div className="stat-value text-primary">{doctorsCount}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card แสดงจำนวนผู้ป่วย */}
|
|
<div className="stats shadow bg-white">
|
|
<div className="stat">
|
|
<div className="stat-figure text-secondary">
|
|
<FaUsers size={24} />
|
|
</div>
|
|
<div className="stat-title">จำนวนผู้ป่วย</div>
|
|
<div className="stat-value text-secondary">{patientsCount}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card แสดงจำนวนนัดหมาย */}
|
|
<div className="stats shadow bg-white">
|
|
<div className="stat">
|
|
<div className="stat-figure text-accent">
|
|
<FaCalendarAlt size={24} />
|
|
</div>
|
|
<div className="stat-title">จำนวนนัดหมาย</div>
|
|
<div className="stat-value text-accent">{consultationsCount}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |