feat: integrate hospital management module with advanced UI styling and analytics components

src/pages/hospital/PatientArchive.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  Database, 
+  Search, 
+  Calendar, 
+  TrendingUp, 
+  Clock, 
+  FileText, 
+  User, 
+  Activity, 
+  MapPin, 
+  ChevronRight,
+  Filter,
+  CheckCircle2,
+  Video
+} from 'lucide-react';
+
+export const PatientArchive: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'LIST' | 'TIMELINE'>('LIST');
+
+  const archive = [
+    { id: 'INC-9012', date: '2026-05-04', name: 'Rajit Bose', age: 52, gender: 'M', triage: 'RED', category: 'CARDIAC', outcome: 'DISCHARGED', ambulance: 'ALS-02', teleLink: true },
+    { id: 'INC-8955', date: '2026-05-03', name: 'Sana Khan', age: 24, gender: 'F', triage: 'YELLOW', category: 'TRAUMA', outcome: 'ADMITTED', ambulance: 'BLS-09', teleLink: false },
+    { id: 'INC-8940', date: '2026-05-03', name: 'Unknown Male', age: 0, gender: 'M', triage: 'RED', category: 'STROKE', outcome: 'DECEASED', ambulance: 'ALS-01', teleLink: true },
+  ];
+
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="module-content"
+    >
+      <div className="module-header-modern">
+        <div className="title-wrap">
+          <h3>PATIENT & INCIDENT HISTORY</h3>
+          <div className="live-pill">
+            <span className="pulse" /> COMPREHENSIVE CARE RECORDS
+          </div>
+        </div>
+        <div className="action-area-header">
+          <div className="date-picker-mini">
+            <Calendar size={14} />
+            <span>LAST 30 DAYS</span>
+          </div>
+          <div className="search-mini">
+            <Search size={14} />
+            <input type="text" placeholder="Search by ID, Name, MRN..." />
+          </div>
+          <button className="register-staff-btn-premium">
+            <Filter size={18} />
+          </button>
+        </div>
+      </div>
+
+      <div className="archive-grid">
+        <div className="archive-list-panel">
+          <table className="staff-table-premium">
+            <thead>
+              <tr>
+                <th>Patient ID & Date</th>
+                <th>Category</th>
+                <th>Provider Details</th>
+                <th>Outcome</th>
+                <th>History</th>
+              </tr>
+            </thead>
+            <tbody>
+              {archive.map(p => (
+                <tr key={p.id} className="archive-row-hover">
+                  <td>
+                    <div className="patient-main-ident">
+                      <strong>{p.name}</strong>
+                      <span>{p.id} · {p.date}</span>
+                    </div>
+                  </td>
+                  <td>
+                    <div className="cat-badge-wrap">
+                      <span className={`cat-pill cat-${p.category.toLowerCase()}`}>{p.category}</span>
+                      <span className={`triage-tag triage-${p.triage.toLowerCase()}`}>{p.triage}</span>
+                    </div>
+                  </td>
+                  <td>
+                    <div className="amb-emt-meta">
+                      <span>{p.ambulance}</span>
+                      {p.teleLink && <Video size={10} style={{ color: 'var(--accent-cyan)' }} />}
+                    </div>
+                  </td>
+                  <td>
+                    <span className={`outcome-pill outcome-${p.outcome.toLowerCase()}`}>{p.outcome}</span>
+                  </td>
+                  <td>
+                    <button className="tag-btn"><ChevronRight size={14} /></button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="archive-metrics-side">
+          <div className="side-metric-card">
+            <h4>Outcome Distribution</h4>
+            <div className="metric-bar-chart">
+              {/* Simple Mock Bars */}
+              <div className="bar-row">
+                <span>Admitted</span>
+                <div className="bar-container"><div className="bar-val" style={{ width: '65%', background: 'var(--accent-cyan)' }} /></div>
+                <span className="perc">65%</span>
+              </div>
+              <div className="bar-row">
+                <span>Discharged</span>
+                <div className="bar-container"><div className="bar-val" style={{ width: '25%', background: 'var(--accent-green)' }} /></div>
+                <span className="perc">25%</span>
+              </div>
+              <div className="bar-row">
+                <span>Referred</span>
+                <div className="bar-container"><div className="bar-val" style={{ width: '10%', background: 'var(--warning-amber)' }} /></div>
+                <span className="perc">10%</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="side-metric-card">
+            <h4>Timeline Insight (Scene to ED)</h4>
+            <div className="avg-time-display">
+              <Clock size={24} style={{ color: 'var(--accent-cyan)' }} />
+              <div className="time-val">28.4 <small>min</small></div>
+              <span className="trend down">▼ 2m vs Last Month</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};