fix: redesign

components/admin/reminders/ReminderForm.tsx

@@ -23,10 +23,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
     useEffect(() => {
         if (reminder) {
-            // Format datetime for input field (remove milliseconds and timezone)
-            // Convert from "2025-12-13T15:30:00.000" to "2025-12-13T15:30" for input
             const formattedTime = reminder.time ? reminder.time.replace(/\.\d+/, '').slice(0, 16) : '';
-            
             setFormData({
                 title: reminder.title || '',
                 description: reminder.description || '',
@@ -36,23 +33,17 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                 type: reminder.type || 'reminder',
             });
         } else {
-            // Set default time to current date + 1 hour
             const defaultTime = new Date();
             defaultTime.setHours(defaultTime.getHours() + 1);
-            
-            // Format as YYYY-MM-DDTHH:MM for datetime-local input
             const year = defaultTime.getFullYear();
             const month = String(defaultTime.getMonth() + 1).padStart(2, '0');
             const day = String(defaultTime.getDate()).padStart(2, '0');
             const hours = String(defaultTime.getHours()).padStart(2, '0');
             const minutes = String(defaultTime.getMinutes()).padStart(2, '0');
-            
-            const formattedDefaultTime = `${year}-${month}-${day}T${hours}:${minutes}`;
-            
             setFormData({
                 title: '',
                 description: '',
-                time: formattedDefaultTime,
+                time: `${year}-${month}-${day}T${hours}:${minutes}`,
                 repeatable: false,
                 repeat_days: null,
                 type: 'reminder',
@@ -62,182 +53,84 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
         const { name, value, type } = e.target;
-        
         if (type === 'checkbox') {
             const checked = (e.target as HTMLInputElement).checked;
-            setFormData(prev => ({
-                ...prev,
-                [name]: checked,
-            }));
+            setFormData(prev => ({ ...prev, [name]: checked }));
         } else {
-            setFormData(prev => ({
-                ...prev,
-                [name]: value,
-            }));
+            setFormData(prev => ({ ...prev, [name]: value }));
         }
     };
 
     const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value ? parseInt(value, 10) : null,
-        }));
+        setFormData(prev => ({ ...prev, [name]: value ? parseInt(value, 10) : null }));
     };
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        
-        // Format the time properly for API: "2025-12-13 20:00:00.000"
         let formattedTime = '';
-        
         if (formData.time) {
-            // Input comes as "2025-12-13T20:00" from datetime-local
-            // Replace 'T' with space and add milliseconds
             formattedTime = formData.time.replace('T', ' ') + ':00.000';
         }
-        
-        const submitData = {
-            ...formData,
-            time: formattedTime,
-        };
-        
-        await onSubmit(submitData);
+        await onSubmit({ ...formData, time: formattedTime });
     };
 
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow transition-colors">
-            <div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+            <div className="pb-4 border-b border-gray-100 dark:border-gray-800">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
                 </h3>
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                {/* Title */}
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                 <div className="md:col-span-2">
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        عنوان <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        required
-                        value={formData.title || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="مثال: یادآوری روزانه"
-                    />
+                    <label htmlFor="title" className={labelClass}>عنوان <span className="text-red-500">*</span></label>
+                    <input type="text" id="title" name="title" required value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: یادآوری روزانه" />
                 </div>
-
-                {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        نوع <span className="text-red-500">*</span>
-                    </label>
-                    <select
-                        id="type"
-                        name="type"
-                        required
-                        value={formData.type || 'reminder'}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    >
+                    <label htmlFor="type" className={labelClass}>نوع <span className="text-red-500">*</span></label>
+                    <select id="type" name="type" required value={formData.type || 'reminder'} onChange={handleInputChange} className={inputClass}>
                         {Object.entries(REMINDER_TYPES).map(([value, label]) => (
-                            <option key={value} value={value}>
-                                {label}
-                            </option>
+                            <option key={value} value={value}>{label}</option>
                         ))}
                     </select>
                 </div>
-
-                {/* Time */}
                 <div>
-                    <label htmlFor="time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        زمان <span className="text-red-500">*</span>
+                    <label htmlFor="time" className={labelClass}>زمان <span className="text-red-500">*</span></label>
+                    <input type="datetime-local" id="time" name="time" required value={formData.time || ''} onChange={handleInputChange} className={inputClass} />
+                </div>
+                <div>
+                    <label className={`${labelClass} invisible`}>تکرار</label>
+                    <label className="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+                        <input type="checkbox" id="repeatable" name="repeatable" checked={formData.repeatable || false} onChange={handleInputChange} className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded-lg focus:ring-indigo-500" />
+                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">قابل تکرار</span>
                     </label>
-                    <input
-                        type="datetime-local"
-                        id="time"
-                        name="time"
-                        required
-                        value={formData.time || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    />
                 </div>
-
-                {/* Repeatable */}
-                <div>
-                    <div className="flex items-center h-full pt-6">
-                        <input
-                            type="checkbox"
-                            id="repeatable"
-                            name="repeatable"
-                            checked={formData.repeatable || false}
-                            onChange={handleInputChange}
-                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
-                        />
-                        <label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
-                            قابل تکرار
-                        </label>
-                    </div>
-                </div>
-
-                {/* Repeat Days */}
                 {formData.repeatable && (
                     <div>
-                        <label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            فاصله تکرار (روز)
-                        </label>
-                        <input
-                            type="number"
-                            id="repeat_days"
-                            name="repeat_days"
-                            min="1"
-                            value={formData.repeat_days || ''}
-                            onChange={handleNumberChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="مثال: 7"
-                        />
+                        <label htmlFor="repeat_days" className={labelClass}>فاصله تکرار (روز)</label>
+                        <input type="number" id="repeat_days" name="repeat_days" min="1" value={formData.repeat_days || ''} onChange={handleNumberChange} className={inputClass} placeholder="مثال: 7" />
                     </div>
                 )}
             </div>
 
-            {/* Description */}
-            <div>
-                <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    توضیحات
-                </label>
-                <textarea
-                    id="description"
-                    name="description"
-                    rows={3}
-                    value={formData.description || ''}
-                    onChange={handleInputChange}
-                    className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    placeholder="توضیحات یادآوری را وارد کنید..."
-                />
+            <div className="pt-2 border-t border-gray-100 dark:border-gray-800">
+                <label htmlFor="description" className={labelClass}>توضیحات</label>
+                <textarea id="description" name="description" rows={3} value={formData.description || ''} onChange={handleInputChange} className={inputClass} placeholder="توضیحات یادآوری را وارد کنید..." />
             </div>
 
-            {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
-                >
+            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
+                <button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                     انصراف
                 </button>
-                <button
-                    type="submit"
-                    disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
-                >
+                <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                     {isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
             </div>
         </form>
     );
-}
+}