Add UI components: DataTable, Layout, StatCard, and StatusBadge

Author: hammadhttps

front_end/src/components/UI/DataTable.jsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+export default function DataTable({ columns, data, loading, emptyMessage }) {
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+
+    const requestSort = (key) => {
+        let direction = 'asc';
+        if (sortConfig.key === key && sortConfig.direction === 'asc') {
+            direction = 'desc';
+        }
+        setSortConfig({ key, direction });
+    };
+
+    const sortedData = [...data].sort((a, b) => {
+        if (!sortConfig.key) return 0;
+        if (a[sortConfig.key] < b[sortConfig.key]) {
+            return sortConfig.direction === 'asc' ? -1 : 1;
+        }
+        if (a[sortConfig.key] > b[sortConfig.key]) {
+            return sortConfig.direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                    <tr>
+                        {columns.map((column) => (
+                            <th
+                                key={column.accessor}
+                                scope="col"
+                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+                                onClick={() => requestSort(column.accessor)}
+                            >
+                                <div className="flex items-center">
+                                    {column.header}
+                                    {sortConfig.key === column.accessor && (
+                                        <span className="ml-1">
+                                            {sortConfig.direction === 'asc' ? '↑' : '↓'}
+                                        </span>
+                                    )}
+                                </div>
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                    {loading ? (
+                        <tr>
+                            <td colSpan={columns.length} className="px-6 py-4 text-center">
+                                <div className="flex justify-center py-8">
+                                    <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-600"></div>
+                                </div>
+                            </td>
+                        </tr>
+                    ) : sortedData.length === 0 ? (
+                        <tr>
+                            <td colSpan={columns.length} className="px-6 py-4 text-center text-gray-500">
+                                {emptyMessage}
+                            </td>
+                        </tr>
+                    ) : (
+                        sortedData.map((row, rowIndex) => (
+                            <tr key={rowIndex} className="hover:bg-green-50">
+                                {columns.map((column) => (
+                                    <td key={`${rowIndex}-${column.accessor}`} className="px-6 py-4 whitespace-nowrap">
+                                        {column.cell
+                                            ? column.cell(row[column.accessor], row)
+                                            : <span className="text-sm text-gray-900">{row[column.accessor]}</span>
+                                        }
+                                    </td>
+                                ))}
+                            </tr>
+                        ))
+                    )}
+                </tbody>
+            </table>
+        </div>
+    );
+}

front_end/src/components/UI/Layout.jsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import useAuthStore from '../../store/useAuthStore';
+import { LayoutDashboard, Stethoscope, User, Calendar, Activity, Pill, Ambulance, LogOut } from 'lucide-react';
+
+export default function Layout({ children }) {
+    const user = useAuthStore((state) => state.user);
+    const logout = useAuthStore((state) => state.logout);
+    const navigate = useNavigate();
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    const handleLogout = () => {
+        logout();
+        navigate('/login');
+    };
+
+    const navItems = [
+        { path: '/doctor', icon: LayoutDashboard, label: 'Dashboard' },
+        { path: '/doctor/appointments', icon: Calendar, label: 'Appointments' },
+        { path: '/doctor/patients', icon: User, label: 'Patients' },
+        { path: '/doctor/labs', icon: Activity, label: 'Lab Tests' },
+        { path: '/doctor/pharmacy', icon: Pill, label: 'Pharmacy' },
+        { path: '/doctor/ambulance', icon: Ambulance, label: 'Ambulance' }
+    ];
+
+    return (
+        <div className="min-h-screen bg-gray-50 flex">
+            {/* Mobile menu button */}
+            <button
+                className="md:hidden fixed top-4 right-4 z-50 p-2 rounded-md bg-green-600 text-white"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+
+            {/* Sidebar */}
+            <div className={`${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 fixed md:static inset-y-0 left-0 w-64 bg-green-800 text-white transition-transform duration-300 ease-in-out z-40`}>
+                <div className="flex items-center justify-center h-16 px-4 border-b border-green-700">
+                    <div className="flex items-center">
+                        <Stethoscope className="h-8 w-8 mr-2" />
+                        <span className="text-xl font-semibold">HealVista</span>
+                    </div>
+                </div>
+                <div className="flex flex-col h-full p-4">
+                    <div className="mt-6 flex-1">
+                        <nav className="space-y-2">
+                            {navItems.map((item) => (
+                                <Link
+                                    key={item.path}
+                                    to={item.path}
+                                    className="flex items-center px-4 py-3 rounded-lg hover:bg-green-700 transition"
+                                    onClick={() => setMobileMenuOpen(false)}
+                                >
+                                    <item.icon className="w-5 h-5 mr-3" />
+                                    {item.label}
+                                </Link>
+                            ))}
+                        </nav>
+                    </div>
+                    <div className="pb-4">
+                        <div className="flex items-center px-4 py-3 text-sm">
+                            <div className="flex-shrink-0">
+                                <div className="h-10 w-10 rounded-full bg-green-600 flex items-center justify-center">
+                                    {user?.full_name?.charAt(0) || 'D'}
+                                </div>
+                            </div>
+                            <div className="ml-3">
+                                <p className="font-medium">Dr. {user?.full_name}</p>
+                                <p className="text-green-200">{user?.specialization}</p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={handleLogout}
+                            className="w-full flex items-center px-4 py-3 rounded-lg hover:bg-green-700 transition mt-2"
+                        >
+                            <LogOut className="w-5 h-5 mr-3" />
+                            Sign out
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main content */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+                {/* Overlay for mobile menu */}
+                {mobileMenuOpen && (
+                    <div
+                        className="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"
+                        onClick={() => setMobileMenuOpen(false)}
+                    />
+                )}
+
+                {/* Content area */}
+                <main className="flex-1 overflow-y-auto p-4 md:p-8">
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}

front_end/src/components/UI/StatCard.jsx

@@ -0,0 +1,72 @@
+/**
+ * @typedef {Object} StatCardProps
+ * @property {React.ElementType} icon
+ * @property {string} title
+ * @property {string|number} value
+ * @property {'green'|'blue'|'red'|'yellow'|'purple'|'indigo'|'pink'|'teal'|'orange'} [color]
+ * @property {boolean} [loading]
+ */
+
+const colorClasses = {
+    bg: {
+        green: 'bg-green-100',
+        blue: 'bg-blue-100',
+        red: 'bg-red-100',
+        yellow: 'bg-yellow-100',
+        purple: 'bg-purple-100',
+        indigo: 'bg-indigo-100',
+        pink: 'bg-pink-100',
+        teal: 'bg-teal-100',
+        orange: 'bg-orange-100',
+    },
+    text: {
+        green: 'text-green-600',
+        blue: 'text-blue-600',
+        red: 'text-red-600',
+        yellow: 'text-yellow-600',
+        purple: 'text-purple-600',
+        indigo: 'text-indigo-600',
+        pink: 'text-pink-600',
+        teal: 'text-teal-600',
+        orange: 'text-orange-600',
+    },
+    border: {
+        green: 'border-green-200',
+        blue: 'border-blue-200',
+        red: 'border-red-200',
+        yellow: 'border-yellow-200',
+        purple: 'border-purple-200',
+        indigo: 'border-indigo-200',
+        pink: 'border-pink-200',
+        teal: 'border-teal-200',
+        orange: 'border-orange-200',
+    }
+};
+
+export default function StatCard({
+    icon: Icon,
+    title,
+    value,
+    color = 'green',
+    loading = false
+}) {
+    return (
+        <div className={`bg-white rounded-lg shadow-sm p-4 border ${colorClasses.border[color]}`}>
+            <div className="flex items-center justify-between">
+                <div className={`w-12 h-12 rounded-full ${colorClasses.bg[color]} flex items-center justify-center`}>
+                    <Icon className={`w-6 h-6 ${colorClasses.text[color]}`} />
+                </div>
+                <div className="text-right">
+                    <p className="text-sm text-gray-500">{title}</p>
+                    <p className="text-2xl font-bold text-gray-800">
+                        {loading ? (
+                            <span className="inline-block h-6 w-8 bg-gray-200 rounded animate-pulse"></span>
+                        ) : (
+                            value
+                        )}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

front_end/src/components/UI/StatusBadge.jsx

@@ -0,0 +1,85 @@
+export default function StatusBadge({ status }) {
+    // Define status styles
+    const statusStyles = {
+        pending: {
+            bg: 'bg-yellow-100',
+            text: 'text-yellow-800',
+            border: 'border-yellow-200'
+        },
+        completed: {
+            bg: 'bg-green-100',
+            text: 'text-green-800',
+            border: 'border-green-200'
+        },
+        confirmed: {
+            bg: 'bg-blue-100',
+            text: 'text-blue-800',
+            border: 'border-blue-200'
+        },
+        cancelled: {
+            bg: 'bg-red-100',
+            text: 'text-red-800',
+            border: 'border-red-200'
+        },
+        critical: {
+            bg: 'bg-red-100',
+            text: 'text-red-800',
+            border: 'border-red-200'
+        },
+        active: {
+            bg: 'bg-green-100',
+            text: 'text-green-800',
+            border: 'border-green-200'
+        },
+        inactive: {
+            bg: 'bg-gray-100',
+            text: 'text-gray-800',
+            border: 'border-gray-200'
+        },
+        default: {
+            bg: 'bg-gray-100',
+            text: 'text-gray-800',
+            border: 'border-gray-200'
+        }
+    };
+
+    // Get styles for the current status or use default
+    const currentStatus = statusStyles[status.toLowerCase()] || statusStyles.default;
+
+    return (
+        <span
+            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
+        ${currentStatus.bg} ${currentStatus.text} ${currentStatus.border} border`}
+        >
+            {/* Status icon based on status */}
+            {status.toLowerCase() === 'pending' && (
+                <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-500" fill="currentColor" viewBox="0 0 8 8">
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+            )}
+            {status.toLowerCase() === 'completed' && (
+                <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-green-500" fill="currentColor" viewBox="0 0 8 8">
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+            )}
+            {status.toLowerCase() === 'confirmed' && (
+                <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-blue-500" fill="currentColor" viewBox="0 0 8 8">
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+            )}
+            {status.toLowerCase() === 'cancelled' && (
+                <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-red-500" fill="currentColor" viewBox="0 0 8 8">
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+            )}
+            {status.toLowerCase() === 'critical' && (
+                <svg className="-ml-0.5 mr-1.5 h-2 w-2 text-red-500" fill="currentColor" viewBox="0 0 8 8">
+                    <circle cx="4" cy="4" r="3" />
+                </svg>
+            )}
+
+            {/* Status text with capitalization */}
+            {status.toLowerCase().charAt(0).toUpperCase() + status.toLowerCase().slice(1)}
+        </span>
+    );
+}