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

src/pages/hospital/DeptModal.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { X, ChevronDown } from 'lucide-react';
+
+interface DeptModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  deptFormData: {
+    name: string;
+    headOfDepartment: string;
+    totalBedsCapacity: number;
+    contactPhone: string;
+    isActive: boolean;
+  };
+  setDeptFormData: (data: any) => void;
+  allUsers: any[];
+  selectedHospital: any;
+  onSubmit: () => void;
+}
+
+export const DeptModal: React.FC<DeptModalProps> = ({
+  isOpen,
+  onClose,
+  deptFormData,
+  setDeptFormData,
+  allUsers,
+  selectedHospital,
+  onSubmit,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="premium-modal-overlay">
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0, y: 20 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        exit={{ scale: 0.95, opacity: 0, y: 20 }}
+        className="premium-modal-container"
+      >
+        <div className="modal-header-premium">
+          <h3>Add Department</h3>
+          <button className="modal-close-btn" onClick={onClose}>
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="setup-form-modern">
+          <div className="form-group-premium">
+            <label>Department Name</label>
+            <input
+              type="text"
+              className="setup-input-premium"
+              value={deptFormData.name}
+              onChange={(e) =>
+                setDeptFormData({ ...deptFormData, name: e.target.value })
+              }
+              placeholder="e.g. Emergency & Trauma"
+            />
+          </div>
+          <div className="form-group-premium">
+            <label>Head of Department</label>
+            <div
+              className="custom-select-wrapper"
+              style={{ position: 'relative' }}
+            >
+              <select
+                className="setup-input-premium custom-select"
+                value={deptFormData.headOfDepartment}
+                onChange={(e) =>
+                  setDeptFormData({
+                    ...deptFormData,
+                    headOfDepartment: e.target.value,
+                  })
+                }
+                style={{ width: '100%', appearance: 'none' }}
+              >
+                <option value="" disabled>
+                  Select Head of Department
+                </option>
+                {allUsers
+                  .filter(
+                    (u) =>
+                      u.hospitalId ===
+                        (selectedHospital?.rawUser?.hospitalId ||
+                          selectedHospital?.id) ||
+                      u.organisationId ===
+                        selectedHospital?.rawUser?.organisationId
+                  )
+                  .map((u, i) => (
+                    <option key={i} value={u.name || u.username}>
+                      {u.name || u.username} ({u.roles[0]?.replace('_', ' ')})
+                    </option>
+                  ))}
+              </select>
+              <ChevronDown
+                size={14}
+                style={{
+                  position: 'absolute',
+                  right: '12px',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  color: 'var(--text-secondary)',
+                  pointerEvents: 'none',
+                }}
+              />
+            </div>
+          </div>
+          <div
+            className="form-group-premium"
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '20px',
+            }}
+          >
+            <div>
+              <label>Capacity (Beds)</label>
+              <input
+                type="number"
+                className="setup-input-premium"
+                style={{ width: '100%', marginTop: '10px' }}
+                value={deptFormData.totalBedsCapacity}
+                onChange={(e) =>
+                  setDeptFormData({
+                    ...deptFormData,
+                    totalBedsCapacity: parseInt(e.target.value) || 0,
+                  })
+                }
+              />
+            </div>
+            <div>
+              <label>Contact Phone</label>
+              <input
+                type="text"
+                className="setup-input-premium"
+                style={{ width: '100%', marginTop: '10px' }}
+                value={deptFormData.contactPhone}
+                onChange={(e) =>
+                  setDeptFormData({
+                    ...deptFormData,
+                    contactPhone: e.target.value,
+                  })
+                }
+                placeholder="+91-..."
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-footer-premium">
+          <button className="btn-secondary-glass" onClick={onClose}>
+            CANCEL
+          </button>
+          <button className="btn-primary-glass" onClick={onSubmit}>
+            ADD DEPARTMENT
+          </button>
+        </div>
+      </motion.div>
+    </div>
+  );
+};