File size: 9,439 Bytes
96637b1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المختبر - نظام إدارة المستشفى</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
body { font-family: 'Tajawal', sans-serif; }
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-reverse space-x-2">
<i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
<span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
</div>
<div class="hidden md:flex space-x-reverse space-x-6">
<a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
<a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
<a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
<a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
<a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
<a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-800">المختبر</h1>
<button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
<i data-feather="plus" class="w-5 h-5"></i>
<span>طلب تحليل جديد</span>
</button>
</div>
<!-- Statistics -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">التحاليل اليوم</p>
<p class="text-2xl font-bold text-gray-800">45</p>
</div>
<i data-feather="flask" class="w-8 h-8 text-blue-500"></i>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">قيد الانتظار</p>
<p class="text-2xl font-bold text-yellow-600">12</p>
</div>
<i data-feather="clock" class="w-8 h-8 text-yellow-500"></i>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">مكتملة</p>
<p class="text-2xl font-bold text-green-600">28</p>
</div>
<i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">طارئة</p>
<p class="text-2xl font-bold text-red-600">5</p>
</div>
<i data-feather="alert-triangle" class="w-8 h-8 text-red-500"></i>
</div>
</div>
</div>
<!-- Lab Tests Table -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6 border-b">
<h2 class="text-xl font-semibold text-gray-800">التحاليل الحالية</h2>
</div>
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المريض</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع التحليل</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الطبيب</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024001</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أحمد محمد</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">CBC</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. أحمد محمد</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد التنفيذ</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900">عرض</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024002</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">فاطمة أحمد</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">كيمياء حيوية</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. سارة أحمد</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900">عرض</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024003</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">محمود علي</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">هرمونات</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. محمود علي</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">طارئ</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900">عرض</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
feather.replace();
anime({
targets: 'tr',
translateX: [-20, 0],
opacity: [0, 1],
delay: anime.stagger(50),
duration: 600,
easing: 'easeOutQuad'
});
</script>
</body>
</html> |