hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(representation): add KPI tiles and enhance doctor representation details in admin view

Browse Source
This commit is contained in:
hamed
2026-07-12 14:39:03 +03:30
parent c1e4cd7f94
commit 0ec0b92705
3 changed files with 88 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/RepresentationDetailPage.tsx
+86 -46
View File
@@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { PencilIcon, TrashIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline'; import { PencilIcon, TrashIcon, CheckCircleIcon, XCircleIcon, UserGroupIcon, CalendarDaysIcon, ClockIcon, ReceiptPercentIcon, PlusIcon } from '@heroicons/react/24/outline';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { api } from '../lib/api'; import { api } from '../lib/api';
import type { ApiResponse, PaginatedResponse } from '../lib/api'; import type { ApiResponse, PaginatedResponse } from '../lib/api';
@@ -52,6 +52,23 @@ function DetailRow({ label, value }: { label: string; value: React.ReactNode })
); );
} }
function StatTile({ icon: Icon, label, value, tone }: {
icon: React.ComponentType<{ className?: string }>;
label: string; value: React.ReactNode; tone: 'violet' | 'green' | 'amber' | 'pink';
}) {
return (
<div className="cp-stat">
<div className="cp-stat-icon" style={{ background: `var(--stat-${tone}-bg)`, color: `var(--stat-${tone}-fg)` }}>
<Icon className="w-5 h-5" />
</div>
<div className="min-w-0">
<div className="text-xs text-[var(--text-3)] mb-1">{label}</div>
<div className="text-xl font-bold text-[var(--text)] leading-none">{value}</div>
</div>
</div>
);
}
export default function RepresentationDetailPage() { export default function RepresentationDetailPage() {
const { uuid } = useParams<{ uuid: string }>(); const { uuid } = useParams<{ uuid: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -85,6 +102,8 @@ export default function RepresentationDetailPage() {
}); });
const repDoctors: RepDoctor[] = doctorsQuery.data?.data ?? []; const repDoctors: RepDoctor[] = doctorsQuery.data?.data ?? [];
const repDoctorsTotal = doctorsQuery.data?.meta?.totalRecords ?? repDoctors.length; const repDoctorsTotal = doctorsQuery.data?.meta?.totalRecords ?? repDoctors.length;
const upcomingTotal = repDoctors.reduce((s, d) => s + (d.upcoming_count ?? 0), 0);
const pastTotal = repDoctors.reduce((s, d) => s + (d.past_count ?? 0), 0);
const appointmentsQuery = useQuery({ const appointmentsQuery = useQuery({
queryKey: ['representation-appointments', uuid, apptScope], queryKey: ['representation-appointments', uuid, apptScope],
@@ -244,6 +263,14 @@ export default function RepresentationDetailPage() {
} }
/> />
{/* KPI tiles */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<StatTile icon={UserGroupIcon} tone="violet" label="تعداد پزشکان" value={formatNumber(repDoctorsTotal)} />
<StatTile icon={CalendarDaysIcon} tone="green" label="نوبت آینده" value={formatNumber(upcomingTotal)} />
<StatTile icon={ClockIcon} tone="amber" label="نوبت گذشته" value={formatNumber(pastTotal)} />
<StatTile icon={ReceiptPercentIcon} tone="pink" label="درصد کمیسیون" value={`${formatNumber(rep.commission_percent)}٪`} />
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Basic Info */} {/* Basic Info */}
<div className="cp-card p-6"> <div className="cp-card p-6">
@@ -284,24 +311,33 @@ export default function RepresentationDetailPage() {
</div> </div>
{/* Doctors of this representation */} {/* Doctors of this representation */}
<div className="cp-card p-6 mt-5"> <div className="cp-card p-6 mt-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserGroupIcon className="w-5 h-5 text-[var(--text-3)]" />
<h2 className="text-sm font-semibold text-gray-700">پزشکان این نماینده</h2> <h2 className="text-sm font-semibold text-gray-700">پزشکان این نماینده</h2>
<span className="badge blue">{formatNumber(repDoctorsTotal)} پزشک</span> <span className="badge violet">{formatNumber(repDoctorsTotal)}</span>
</div> </div>
<button className="btn primary sm" onClick={() => setAttachOpen(true)}>افزودن پزشک</button> <button className="btn primary sm inline-flex items-center gap-1" onClick={() => setAttachOpen(true)}>
<PlusIcon className="w-4 h-4" /> افزودن پزشک
</button>
</div> </div>
{doctorsQuery.isLoading ? ( {doctorsQuery.isLoading ? (
<p className="text-sm text-gray-400 text-center py-6">در حال بارگذاری…</p> <p className="text-sm text-gray-400 text-center py-8">در حال بارگذاری…</p>
) : repDoctors.length === 0 ? ( ) : repDoctors.length === 0 ? (
<p className="text-sm text-gray-400 text-center py-6">این نماینده پزشکی ندارد</p> <div className="text-center py-10">
<UserGroupIcon className="w-10 h-10 mx-auto text-gray-300 mb-2" />
<p className="text-sm text-gray-400">این نماینده هنوز پزشکی ندارد</p>
<button className="btn primary sm mt-3 inline-flex items-center gap-1" onClick={() => setAttachOpen(true)}>
<PlusIcon className="w-4 h-4" /> افزودن اولین پزشک
</button>
</div>
) : ( ) : (
<div style={{ overflowX: 'auto' }}> <div className="table-wrap">
<table style={{ width: '100%' }}> <table className="t">
<thead> <thead>
<tr> <tr>
<th>نام</th> <th>نام پزشک</th>
<th>کد نظام</th> <th>کد نظام</th>
<th>نوبت گذشته</th> <th>نوبت گذشته</th>
<th>نوبت آینده</th> <th>نوبت آینده</th>
@@ -312,9 +348,9 @@ export default function RepresentationDetailPage() {
{repDoctors.map((d) => ( {repDoctors.map((d) => (
<tr key={d.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${d.uuid}`)}> <tr key={d.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${d.uuid}`)}>
<td><b>{d.name}</b></td> <td><b>{d.name}</b></td>
<td dir="ltr" style={{ fontFamily: 'monospace' }}>{d.medical_code ?? '—'}</td> <td dir="ltr" style={{ fontFamily: 'monospace' }} className="text-[var(--text-3)]">{d.medical_code ?? '—'}</td>
<td>{formatNumber(d.past_count)}</td> <td>{formatNumber(d.past_count)}</td>
<td>{formatNumber(d.upcoming_count)}</td> <td>{d.upcoming_count > 0 ? <span className="badge green">{formatNumber(d.upcoming_count)}</span> : <span className="text-[var(--text-3)]">۰</span>}</td>
<td><ActiveBadge active={d.is_active} /></td> <td><ActiveBadge active={d.is_active} /></td>
</tr> </tr>
))} ))}
@@ -325,46 +361,50 @@ export default function RepresentationDetailPage() {
</div> </div>
{/* Appointments of this representation */} {/* Appointments of this representation */}
<div className="cp-card p-6 mt-5"> <div className="cp-card p-6 mt-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
<h2 className="text-sm font-semibold text-gray-700">نوبت‌های این نماینده</h2> <div className="flex items-center gap-2">
<div className="flex items-center gap-1"> <CalendarDaysIcon className="w-5 h-5 text-[var(--text-3)]" />
<button className={`btn sm ${apptScope === 'upcoming' ? 'primary' : 'ghost'}`} onClick={() => setApptScope('upcoming')}>آینده</button> <h2 className="text-sm font-semibold text-gray-700">نوبت‌های این نماینده</h2>
<button className={`btn sm ${apptScope === 'past' ? 'primary' : 'ghost'}`} onClick={() => setApptScope('past')}>گذشته</button> {!appointmentsQuery.isLoading && <span className="badge blue">{formatNumber(repAppointmentsTotal)}</span>}
</div>
<div className="seg">
<button className={apptScope === 'upcoming' ? 'on' : ''} onClick={() => setApptScope('upcoming')}>آینده</button>
<button className={apptScope === 'past' ? 'on' : ''} onClick={() => setApptScope('past')}>گذشته</button>
</div> </div>
</div> </div>
{appointmentsQuery.isLoading ? ( {appointmentsQuery.isLoading ? (
<p className="text-sm text-gray-400 text-center py-6">در حال بارگذاری…</p> <p className="text-sm text-gray-400 text-center py-8">در حال بارگذاری…</p>
) : repAppointments.length === 0 ? ( ) : repAppointments.length === 0 ? (
<p className="text-sm text-gray-400 text-center py-6"> <div className="text-center py-10">
{apptScope === 'upcoming' ? 'نوبت آینده‌ای ثبت نشده' : 'نوبت گذشته‌ای وجود ندارد'} <CalendarDaysIcon className="w-10 h-10 mx-auto text-gray-300 mb-2" />
</p> <p className="text-sm text-gray-400">
{apptScope === 'upcoming' ? 'نوبت آینده‌ای ثبت نشده است' : 'نوبت گذشته‌ای وجود ندارد'}
</p>
</div>
) : ( ) : (
<> <div className="table-wrap">
<div className="mb-2"><span className="badge blue">{formatNumber(repAppointmentsTotal)} نوبت</span></div> <table className="t">
<div style={{ overflowX: 'auto' }}> <thead>
<table style={{ width: '100%' }}> <tr>
<thead> <th>پزشک</th>
<tr> <th>بیمار</th>
<th>پزشک</th> <th>زمان</th>
<th>بیمار</th> <th>وضعیت</th>
<th>زمان</th> </tr>
<th>وضعیت</th> </thead>
<tbody>
{repAppointments.map((a) => (
<tr key={a.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${a.doctor_uuid}`)}>
<td><b>{a.doctor_name}</b></td>
<td>{a.patient_name ?? '—'}</td>
<td dir="ltr" className="text-right">{formatDateTime(a.slot_start)}</td>
<td><span className="badge gray">{a.status}</span></td>
</tr> </tr>
</thead> ))}
<tbody> </tbody>
{repAppointments.map((a) => ( </table>
<tr key={a.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${a.doctor_uuid}`)}> </div>
<td><b>{a.doctor_name}</b></td>
<td>{a.patient_name ?? '—'}</td>
<td>{formatDateTime(a.slot_start)}</td>
<td><span className="badge gray">{a.status}</span></td>
</tr>
))}
</tbody>
</table>
</div>
</>
)} )}
</div> </div>
src/Admin/Controller/AdminApiController.php
+1
View File
@@ -14,6 +14,7 @@ use App\Payment\Entity\Payment;
use App\Rating\Entity\Comment; use App\Rating\Entity\Comment;
use App\Rating\Entity\Rate; use App\Rating\Entity\Rate;
use App\Representation\Entity\Representation; use App\Representation\Entity\Representation;
use App\Representation\Repository\RepresentationRepository;
use App\Secretary\Entity\DoctorSecretary; use App\Secretary\Entity\DoctorSecretary;
use App\Settlement\Entity\FinancialBreakdown; use App\Settlement\Entity\FinancialBreakdown;
use App\Settlement\Entity\Settlement; use App\Settlement\Entity\Settlement;
src/Auth/Entity/User.php
+1
View File
@@ -122,6 +122,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
|| $this->hasRole('ROLE_CLINIC') || $this->hasRole('ROLE_CLINIC')
|| $this->hasRole('ROLE_SECRETARY') || $this->hasRole('ROLE_SECRETARY')
|| $this->hasRole('ROLE_ADMIN') || $this->hasRole('ROLE_ADMIN')
|| $this->hasRole('ROLE_REPRESENTATION') // نماینده — لاگین با نام‌کاربری/رمز مجاز است
|| $this->hasRole('ROLE_IMPORTER'); // کاربر سیستمی کرالر — لاگین با رمز؛ دسترسی فقط اندپوینت ایمپورت || $this->hasRole('ROLE_IMPORTER'); // کاربر سیستمی کرالر — لاگین با رمز؛ دسترسی فقط اندپوینت ایمپورت
} }
} }