feat: Implement responsive design for tablet and mobile breakpoints
- Add useBreakpoint hook for responsive breakpoint detection - Add MobileBottomNav component for mobile navigation - Update ClinicalSidebar with tablet icon-only mode and tooltips - Update PatientBanner with mobile minimal mode and overflow menu - Update PMRInterface to handle responsive layouts and mobile search - Add mobile card layouts to MedicationsView, ProblemsView, InvestigationsView, and DocumentsView - Desktop: 220px sidebar, full banner, tables - Tablet: 56px icon sidebar, condensed banner, scrollable tables - Mobile: Bottom nav, minimal banner, card layouts, search bar
This commit is contained in:
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
|
||||
import { ChevronDown, ChevronUp, FileText, Award, GraduationCap, FlaskConical } from 'lucide-react'
|
||||
import { documents } from '@/data/documents'
|
||||
import type { Document, DocumentType } from '@/types/pmr'
|
||||
import { useBreakpoint } from '@/hooks/useBreakpoint'
|
||||
|
||||
function DocumentTypeIcon({ type }: { type: DocumentType }) {
|
||||
const iconMap: Record<DocumentType, React.ReactNode> = {
|
||||
@@ -136,15 +137,110 @@ function DocumentRow({
|
||||
)
|
||||
}
|
||||
|
||||
function MobileDocumentCard({
|
||||
document,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
document: Document
|
||||
isExpanded: boolean
|
||||
onToggle: () => void
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="w-full p-4 text-left"
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<DocumentTypeIcon type={document.type} />
|
||||
<span className="text-xs text-gray-500">{document.type}</span>
|
||||
</div>
|
||||
<h3 className="font-inter font-medium text-sm text-gray-900">
|
||||
{document.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-1.5 text-xs text-gray-500">
|
||||
<span className="font-geist">{document.date}</span>
|
||||
<span>•</span>
|
||||
<span>{document.source}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
{isExpanded ? (
|
||||
<ChevronUp size={16} className="text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown size={16} className="text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="px-4 pb-4 border-t border-gray-100">
|
||||
<div className="pt-3 font-mono text-xs text-gray-700 leading-relaxed space-y-2">
|
||||
<div className="flex">
|
||||
<span className="text-gray-400 w-28 shrink-0">Type:</span>
|
||||
<span>{document.type}</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="text-gray-400 w-28 shrink-0">Date Awarded:</span>
|
||||
<span>{document.date}</span>
|
||||
</div>
|
||||
{document.institution && (
|
||||
<div className="flex">
|
||||
<span className="text-gray-400 w-28 shrink-0">Institution:</span>
|
||||
<span>{document.institution}</span>
|
||||
</div>
|
||||
)}
|
||||
{document.classification && (
|
||||
<div className="flex">
|
||||
<span className="text-gray-400 w-28 shrink-0">Classification:</span>
|
||||
<span>{document.classification}</span>
|
||||
</div>
|
||||
)}
|
||||
{document.duration && (
|
||||
<div className="flex">
|
||||
<span className="text-gray-400 w-28 shrink-0">Duration:</span>
|
||||
<span>{document.duration}</span>
|
||||
</div>
|
||||
)}
|
||||
{document.researchDetail && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-gray-400 w-28 shrink-0">Research:</span>
|
||||
<span className="mt-1">
|
||||
{document.researchDetail}
|
||||
{document.researchGrade && (
|
||||
<><br />Grade: {document.researchGrade}</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{document.notes && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-gray-400 w-28 shrink-0">Notes:</span>
|
||||
<span className="mt-1 text-gray-600">{document.notes}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DocumentsView() {
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
const { isMobile } = useBreakpoint()
|
||||
|
||||
const handleToggle = (id: string) => {
|
||||
setExpandedId(expandedId === id ? null : id)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded">
|
||||
<div className="bg-white border border-gray-200 rounded overflow-hidden">
|
||||
<div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
|
||||
<h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
|
||||
Attached Documents
|
||||
@@ -153,54 +249,67 @@ export function DocumentsView() {
|
||||
Education and certifications presented as attached documents in the patient record.
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-12"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
|
||||
>
|
||||
Document
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-20"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-32"
|
||||
>
|
||||
Source
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
|
||||
>
|
||||
<span className="sr-only">Expand</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{documents.map((document) => (
|
||||
<DocumentRow
|
||||
key={document.id}
|
||||
document={document}
|
||||
isExpanded={expandedId === document.id}
|
||||
onToggle={() => handleToggle(document.id)}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{isMobile ? (
|
||||
<div className="p-3 space-y-3 bg-pmr-content">
|
||||
{documents.map((document) => (
|
||||
<MobileDocumentCard
|
||||
key={document.id}
|
||||
document={document}
|
||||
isExpanded={expandedId === document.id}
|
||||
onToggle={() => handleToggle(document.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-12"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
|
||||
>
|
||||
Document
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-20"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-32"
|
||||
>
|
||||
Source
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
|
||||
>
|
||||
<span className="sr-only">Expand</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{documents.map((document) => (
|
||||
<DocumentRow
|
||||
key={document.id}
|
||||
document={document}
|
||||
isExpanded={expandedId === document.id}
|
||||
onToggle={() => handleToggle(document.id)}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
{documents.length === 0 && (
|
||||
<div className="p-4 text-sm text-gray-500 text-center">No documents attached</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user