diff --git a/assets/admin/components/icons/FilesToolbarIcons.tsx b/assets/admin/components/icons/FilesToolbarIcons.tsx new file mode 100644 index 00000000..95a33bd5 --- /dev/null +++ b/assets/admin/components/icons/FilesToolbarIcons.tsx @@ -0,0 +1,58 @@ +/** + * Toolbar icons ported verbatim from clinic-pro-tauri `src/assets/icon` so the + * پرونده‌ها header matches the tauri /files page pixel-for-pixel. + */ + +export function SearchHeaderP({ color = '#7E7E7E' }: { color?: string }) { + return ( + + + + + ); +} + +export function TurnsFilter({ color = '#616161' }: { color?: string }) { + return ( + + + + + + + ); +} + +/** Table-view toggle icon (tauri `PatientsGridView`). */ +export function PatientsGridView({ width = 24, height = 24, color = '#5559CE' }: { width?: number; height?: number; color?: string }) { + return ( + + + + + + + + ); +} + +/** Card-view toggle icon (tauri `PatientsCategoryView`). */ +export function PatientsCategoryView({ width = 24, height = 24, color = '#616161' }: { width?: number; height?: number; color?: string }) { + return ( + + + + + + + ); +} + +export function AddTurn({ color = '#E1E1E1' }: { color?: string }) { + return ( + + + + + ); +} diff --git a/assets/admin/pages/PatientsListPage.tsx b/assets/admin/pages/PatientsListPage.tsx index 72fb4f0d..59f1c11e 100644 --- a/assets/admin/pages/PatientsListPage.tsx +++ b/assets/admin/pages/PatientsListPage.tsx @@ -2,8 +2,7 @@ import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { Link, useNavigate } from 'react-router-dom'; import { - PlusIcon, PencilIcon, EyeIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon, - Squares2X2Icon, TableCellsIcon, ExclamationCircleIcon, IdentificationIcon, + PencilIcon, EyeIcon, ExclamationCircleIcon, IdentificationIcon, UserIcon, EllipsisHorizontalIcon, } from '@heroicons/react/24/outline'; import { api } from '../lib/api'; @@ -13,6 +12,9 @@ import { formatNumber, toDate } from '../lib/utils'; import Pagination from '../components/ui/Pagination'; import PatientTagsCell from '../components/PatientTagsCell'; import PatientsFilterModal, { type PatientFilters } from '../components/PatientsFilterModal'; +import { + SearchHeaderP, TurnsFilter, PatientsGridView, PatientsCategoryView, AddTurn, +} from '../components/icons/FilesToolbarIcons'; // tauri /files paginates card view by 16 and table view by 12. const CARD_PAGE_SIZE = 16; @@ -37,7 +39,6 @@ function countFilters(f: PatientFilters): number { /** * A single patient card — mirrors tauri `files/list/CardView` pixel-for-pixel * (avatar + name + ⋮ menu header, file-number/mobile rows, tags footer). - * The whole card navigates to the detail; the ⋮ menu offers view/edit. */ function PatientCard({ r, onView, onEdit }: { r: PatientRecord; onView: () => void; onEdit: () => void }) { const [menu, setMenu] = useState(false); @@ -46,7 +47,6 @@ function PatientCard({ r, onView, onEdit }: { r: PatientRecord; onView: () => vo className="bg-white dark:bg-[#222433] rounded-[6px] p-[14px] border border-[#EDEDED] dark:border-[#35343D] shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1 cursor-pointer" onClick={(e) => { if ((e.target as HTMLElement).closest('.more-square-icon')) return; onView(); }} > - {/* نام بیمار */}
@@ -74,19 +74,16 @@ function PatientCard({ r, onView, onEdit }: { r: PatientRecord; onView: () => vo
- {/* شماره پرونده */}
شماره پرونده: {r.record_number || '—'}
- {/* شماره موبایل */}
موبایل: {r.user_mobile || '—'}
- {/* فوتر: برچسب‌ها */}
e.stopPropagation()} @@ -134,38 +131,67 @@ export default function PatientsListPage() { const editHref = (r: PatientRecord) => `/admin/patients/${r.uuid}/edit`; const viewHref = (r: PatientRecord) => `/admin/patients/${r.uuid}`; + // نمایش جدولی/کارتی — دو دکمه با آیکون SVG سفارشی (عین tauri ViewModeToggle). + const viewToggle = ( +
+ + +
+ ); + return ( -
- {/* Header */} -
-

پرونده‌ها

-
-
- - { setSearch(e.target.value); setPage(1); }} - style={{ width: 320, maxWidth: '60vw', height: 40, paddingInlineStart: 34 }} - /> +
+ {/* Head — تیتر تنها (tauri files/head) */} +

پرونده‌ها

+ + {/* Inputs — ردیف کنترل‌ها (tauri files/inputs) */} +
+
+ {/* جستجو + سوییچ نما */} +
+
+
+ { setSearch(e.target.value); setPage(1); }} + placeholder="کد ملی، شماره پرونده یا نام مراجعه کننده را وارد کنید..." + className="text-[#525252] dark:text-[#D7D8ED]" + style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontSize: 13, textAlign: 'left' }} + /> + + + +
+
+ {viewToggle}
- {/* view toggle */} -
- -
- -