Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 161 162 163 164 165 166 167 168 169 170 171 | "use client"; import { useState } from "react"; import { clientLogger } from "@/lib/logging/clientLogger"; import { Button, Input, Checkbox } from "@/components/ui"; interface AdminSettingsProps { onClose?: () => void; } const AdminSettings: React.FC<AdminSettingsProps> = ({ onClose }) => { const [settings, setSettings] = useState({ enableNotifications: true, emailReports: true, reportFrequency: "weekly", lowStockThreshold: 10, autoGenerateReports: true, dashboardRefreshRate: 5}); const [saved, setSaved] = useState(false); const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { const { name, value, type } = e.target; setSettings((prev) => ({ ...prev, [name]: type === "number" ? parseInt(value) : value})); setSaved(false); }; const handleCheckboxChange = (name: string, checked: boolean) => { setSettings((prev) => ({ ...prev, [name]: checked})); setSaved(false); }; const handleSave = async () => { try { // In a real app, this would save to the backend clientLogger.action("save_admin_settings", settings); setSaved(true); setTimeout(() => setSaved(false), 3000); } catch (error) { clientLogger.error("Error saving settings", error instanceof Error ? error : new Error(String(error))); } }; return ( <div className="bg-white rounded-xl shadow-lg max-w-[600px] mx-auto sm:mx-4"> <div className="flex justify-between items-center p-8 sm:p-6 border-b border-gray-200"> <h2 className="m-0 text-2xl text-gray-800 font-bold">Admin Settings</h2> {onClose && ( <Button variant="ghost" size="sm" className="bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded-md transition-all duration-200 hover:bg-gray-100 hover:text-gray-800" onClick={onClose} > ✕ </Button> )} </div> {saved && ( <div className="bg-green-100 text-green-800 p-4 border-l-4 border-green-500 font-medium animate-[slideDown_0.3s_ease]"> Settings saved successfully! </div> )} <div className="p-8 sm:p-6"> <div className="mb-7 flex flex-col"> <Checkbox label="Enable System Notifications" checked={settings.enableNotifications} onChange={(checked) => handleCheckboxChange("enableNotifications", checked)} helperText="Receive notifications about orders, stock alerts, and system updates" /> </div> <div className="mb-7 flex flex-col"> <Checkbox label="Email Reports" checked={settings.emailReports} onChange={(checked) => handleCheckboxChange("emailReports", checked)} helperText="Receive periodic analytics reports via email" /> </div> <div className="mb-7 flex flex-col"> <Input as="select" label="Report Frequency" id="reportFrequency" name="reportFrequency" value={settings.reportFrequency} onChange={handleInputChange} disabled={!settings.emailReports} fullWidth > <option value="daily">Daily</option> <option value="weekly">Weekly</option> <option value="monthly">Monthly</option> </Input> </div> <div className="mb-7 flex flex-col"> <Input type="number" label="Low Stock Threshold" id="lowStockThreshold" name="lowStockThreshold" value={settings.lowStockThreshold} onChange={handleInputChange} min={1} max={100} helperText="Alert when product stock falls below this quantity" fullWidth /> </div> <div className="mb-7 flex flex-col"> <Checkbox label="Auto-Generate Reports" checked={settings.autoGenerateReports} onChange={(checked) => handleCheckboxChange("autoGenerateReports", checked)} helperText="Automatically generate reports on schedule" /> </div> <div className="mb-7 flex flex-col"> <Input type="number" label="Dashboard Refresh Rate (minutes)" id="dashboardRefreshRate" name="dashboardRefreshRate" value={settings.dashboardRefreshRate} onChange={handleInputChange} min={1} max={60} helperText="How often to refresh dashboard data (1-60 minutes)" fullWidth /> </div> <div className="flex gap-4 mt-8 pt-6 border-t border-gray-200 sm:flex-col"> <Button variant="primary" size="md" className="flex-1 sm:flex-auto py-3.5 px-6 border-none rounded-lg font-semibold cursor-pointer transition-all duration-200 text-base bg-blue-500 text-white hover:bg-blue-600 hover:-translate-y-px hover:shadow-lg active:translate-y-0" onClick={handleSave} > Save Settings </Button> {onClose && ( <Button variant="secondary" size="md" className="flex-1 sm:flex-auto py-3.5 px-6 border-none rounded-lg font-semibold cursor-pointer transition-all duration-200 text-base bg-gray-200 text-gray-700 hover:bg-gray-300" onClick={onClose} > Cancel </Button> )} </div> </div> </div> ); }; export default AdminSettings; |