fix: redesign
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,92 +16,89 @@ interface ReminderListProps {
|
||||
export default function ReminderList({ reminders, packageName, onEdit, onDelete, isLoading }: ReminderListProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
||||
<div className="flex justify-center items-center py-16">
|
||||
<div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!reminders || reminders.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
|
||||
<p className="text-gray-500 dark:text-gray-400">هیچ یادآوری برای این پکیج یافت نشد</p>
|
||||
<div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
|
||||
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
|
||||
<BellIcon className="h-6 w-6 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ یادآوری برای پکیج {packageName} یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sort reminders by time (most recent first)
|
||||
const sortedReminders = [...reminders].sort((a, b) =>
|
||||
const sortedReminders = [...reminders].sort((a, b) =>
|
||||
new Date(a.time).getTime() - new Date(b.time).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg transition-colors">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||
یادآوریهای پکیج {packageName}
|
||||
</h3>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{sortedReminders.map((reminder) => (
|
||||
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<li key={reminder.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2 space-x-reverse">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`h-8 w-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
reminder.type === 'motivate'
|
||||
? 'bg-yellow-100 dark:bg-yellow-500/10'
|
||||
: 'bg-indigo-100 dark:bg-indigo-500/10'
|
||||
}`}>
|
||||
{reminder.type === 'motivate' ? (
|
||||
<SparklesIcon className="h-5 w-5 text-yellow-500" />
|
||||
<SparklesIcon className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
|
||||
) : (
|
||||
<BellIcon className="h-5 w-5 text-indigo-500" />
|
||||
<BellIcon className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
|
||||
)}
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{reminder.title}
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{reminder.title}
|
||||
</p>
|
||||
<span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{getReminderTypeLabel(reminder.type)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
{reminder.description && (
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||||
{reminder.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>زمان: {formatDate(reminder.time)} {formatTime(reminder.time)}</span>
|
||||
<span>تکرار: {reminder.repeatable ? 'فعال' : 'غیرفعال'}</span>
|
||||
{reminder.repeatable && reminder.repeat_days && (
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
|
||||
</div>
|
||||
<span>هر {reminder.repeat_days} روز</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
|
||||
آخرین بهروزرسانی: {formatDate(reminder.updated_at)}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
|
||||
{formatDate(reminder.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => onEdit(reminder)}
|
||||
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-950/40 transition-colors"
|
||||
className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
|
||||
>
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(reminder)}
|
||||
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,4 +107,4 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user