feat: add feature notification
This commit is contained in:
@@ -2,7 +2,8 @@
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import { UsersIcon, CubeIcon, TagIcon } from '@heroicons/react/24/outline';
|
||||
import { UsersIcon, CubeIcon, TagIcon , BellIcon } from '@heroicons/react/24/outline';
|
||||
// import { BellIcon } from 'lucide-react';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth();
|
||||
@@ -57,6 +58,15 @@ export default function Dashboard() {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/admin/reminders" className="block">
|
||||
<div className="bg-yellow-50 hover:bg-yellow-100 rounded-lg p-6 transition-colors">
|
||||
<BellIcon className="h-8 w-8 text-yellow-600 mb-3" />
|
||||
<h3 className="text-lg font-medium text-gray-900">مدیریت یادآوریها</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
ایجاد و مدیریت یادآوریها و پیامهای انگیزشی
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { packagesApi } from '@/lib/api/packages';
|
||||
import { remindersApi } from '@/lib/api/reminders';
|
||||
import ReminderList from '@/components/admin/reminders/ReminderList';
|
||||
import ReminderForm from '@/components/admin/reminders/ReminderForm';
|
||||
import { PackageName } from '@/types/package';
|
||||
import { Reminder, CreateReminderData, UpdateReminderData } from '@/types/reminder';
|
||||
import { PlusIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function RemindersPage() {
|
||||
const { token } = useAuth();
|
||||
const [packages, setPackages] = useState<PackageName[]>([]);
|
||||
const [selectedPackage, setSelectedPackage] = useState<PackageName | null>(null);
|
||||
const [reminders, setReminders] = useState<Reminder[]>([]);
|
||||
const [selectedReminder, setSelectedReminder] = useState<Reminder | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingPackages, setIsLoadingPackages] = useState(false);
|
||||
const [isFormVisible, setIsFormVisible] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
const initialLoadRef = useRef(false);
|
||||
const prevPackageRef = useRef<string | null>(null);
|
||||
|
||||
// Load packages on mount
|
||||
useEffect(() => {
|
||||
if (token && !initialLoadRef.current) {
|
||||
initialLoadRef.current = true;
|
||||
loadPackages();
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
const loadPackages = async () => {
|
||||
setIsLoadingPackages(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await packagesApi.getAllPackages(token!);
|
||||
setPackages(data);
|
||||
if (data.length > 0 && !selectedPackage) {
|
||||
setSelectedPackage(data[0]);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('خطا در دریافت لیست پکیجها');
|
||||
} finally {
|
||||
setIsLoadingPackages(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadReminders = useCallback(async (packageName: string, force = false) => {
|
||||
if (!force && prevPackageRef.current === packageName) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
prevPackageRef.current = packageName;
|
||||
|
||||
try {
|
||||
const data = await remindersApi.getReminders(packageName, token!);
|
||||
setReminders(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'خطا در دریافت یادآوریها');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
// Load reminders when package changes
|
||||
useEffect(() => {
|
||||
if (selectedPackage?.name && token) {
|
||||
loadReminders(selectedPackage.name);
|
||||
} else {
|
||||
setReminders([]);
|
||||
}
|
||||
}, [selectedPackage?.name, token, loadReminders]);
|
||||
|
||||
const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const pkg = packages.find(p => p.name === e.target.value);
|
||||
setSelectedPackage(pkg || null);
|
||||
setIsFormVisible(false);
|
||||
setSelectedReminder(null);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setSelectedReminder(null);
|
||||
setIsFormVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (reminder: Reminder) => {
|
||||
setSelectedReminder(reminder);
|
||||
setIsFormVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (reminder: Reminder) => {
|
||||
if (!selectedPackage) return;
|
||||
|
||||
if (!confirm(`آیا از حذف یادآوری "${reminder.title}" اطمینان دارید؟`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
try {
|
||||
await remindersApi.deleteReminder(selectedPackage.name!, reminder.id, token!);
|
||||
setSuccess('یادآوری با موفقیت حذف شد');
|
||||
if (selectedPackage.name) {
|
||||
prevPackageRef.current = null;
|
||||
await loadReminders(selectedPackage.name, true);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'خطا در حذف یادآوری');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (data: CreateReminderData | UpdateReminderData) => {
|
||||
if (!selectedPackage) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
|
||||
try {
|
||||
if (selectedReminder) {
|
||||
// Update existing reminder
|
||||
await remindersApi.updateReminder(selectedPackage.name!, selectedReminder.id, data, token!);
|
||||
setSuccess('یادآوری با موفقیت بهروزرسانی شد');
|
||||
} else {
|
||||
// Create new reminder
|
||||
await remindersApi.createReminder(selectedPackage.name!, data as CreateReminderData, token!);
|
||||
setSuccess('یادآوری با موفقیت ایجاد شد');
|
||||
}
|
||||
|
||||
if (selectedPackage.name) {
|
||||
prevPackageRef.current = null;
|
||||
await loadReminders(selectedPackage.name, true);
|
||||
}
|
||||
|
||||
setIsFormVisible(false);
|
||||
setSelectedReminder(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'خطا در ذخیره یادآوری');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsFormVisible(false);
|
||||
setSelectedReminder(null);
|
||||
setError(null);
|
||||
setSuccess(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
مدیریت یادآوریها
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Package Selector */}
|
||||
<div className="bg-white p-4 rounded-lg shadow mb-6">
|
||||
<label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
انتخاب پکیج
|
||||
</label>
|
||||
<select
|
||||
id="package"
|
||||
value={selectedPackage?.name || ''}
|
||||
onChange={handlePackageChange}
|
||||
disabled={isLoadingPackages}
|
||||
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
|
||||
>
|
||||
{isLoadingPackages ? (
|
||||
<option>در حال بارگذاری پکیجها...</option>
|
||||
) : (
|
||||
packages.map((pkg) => (
|
||||
<option key={pkg.id} value={pkg.name || ''}>
|
||||
{pkg.title} ({pkg.name})
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-50 p-4">
|
||||
<p className="text-sm text-red-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 rounded-md bg-green-50 p-4">
|
||||
<p className="text-sm text-green-800">{success}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form or List */}
|
||||
{selectedPackage && (
|
||||
<>
|
||||
{!isFormVisible && (
|
||||
<div className="mb-4 flex justify-end">
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center 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 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 ml-2" />
|
||||
یادآوری جدید
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFormVisible ? (
|
||||
<ReminderForm
|
||||
reminder={selectedReminder}
|
||||
packageName={selectedPackage.name!}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={handleCancel}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
) : (
|
||||
<ReminderList
|
||||
reminders={reminders}
|
||||
packageName={selectedPackage.name!}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Reminder, CreateReminderData, UpdateReminderData, REMINDER_TYPES } from '@/types/reminder';
|
||||
|
||||
interface ReminderFormProps {
|
||||
reminder?: Reminder | null;
|
||||
packageName: string;
|
||||
onSubmit: (data: CreateReminderData | UpdateReminderData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function ReminderForm({ reminder, packageName, onSubmit, onCancel, isLoading }: ReminderFormProps) {
|
||||
const [formData, setFormData] = useState<CreateReminderData | UpdateReminderData>({
|
||||
title: '',
|
||||
description: '',
|
||||
time: '',
|
||||
repeatable: false,
|
||||
repeat_days: null,
|
||||
type: 'reminder',
|
||||
});
|
||||
|
||||
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 || '',
|
||||
time: formattedTime,
|
||||
repeatable: reminder.repeatable || false,
|
||||
repeat_days: reminder.repeat_days,
|
||||
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,
|
||||
repeatable: false,
|
||||
repeat_days: null,
|
||||
type: 'reminder',
|
||||
});
|
||||
}
|
||||
}, [reminder]);
|
||||
|
||||
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,
|
||||
}));
|
||||
} else {
|
||||
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,
|
||||
}));
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
{reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{/* Title */}
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
placeholder="مثال: یادآوری روزانه"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label htmlFor="type" className="block text-sm font-medium text-gray-700 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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
>
|
||||
{Object.entries(REMINDER_TYPES).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Time */}
|
||||
<div>
|
||||
<label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
زمان <span className="text-red-500">*</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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
/>
|
||||
</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 rounded"
|
||||
/>
|
||||
<label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900">
|
||||
قابل تکرار
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Repeat Days */}
|
||||
{formData.repeatable && (
|
||||
<div>
|
||||
<label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
placeholder="مثال: 7"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 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 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
placeholder="توضیحات یادآوری را وارد کنید..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
انصراف
|
||||
</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 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'در حال ذخیره...' : reminder ? 'بهروزرسانی' : 'ایجاد'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import { Reminder } from '@/types/reminder';
|
||||
import { getReminderTypeLabel } from '@/types/reminder';
|
||||
import { PencilIcon, TrashIcon, BellIcon, SparklesIcon } from '@heroicons/react/24/outline';
|
||||
import { formatDate, formatTime } from '@/lib/utils';
|
||||
|
||||
interface ReminderListProps {
|
||||
reminders: Reminder[];
|
||||
packageName: string;
|
||||
onEdit: (reminder: Reminder) => void;
|
||||
onDelete: (reminder: Reminder) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
if (!reminders || reminders.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-white rounded-lg shadow">
|
||||
<p className="text-gray-500">هیچ یادآوری برای این پکیج یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sort reminders by time (most recent first)
|
||||
const sortedReminders = [...reminders].sort((a, b) =>
|
||||
new Date(a.time).getTime() - new Date(b.time).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
یادآوریهای پکیج {packageName}
|
||||
</h3>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{sortedReminders.map((reminder) => (
|
||||
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<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">
|
||||
{reminder.type === 'motivate' ? (
|
||||
<SparklesIcon className="h-5 w-5 text-yellow-500" />
|
||||
) : (
|
||||
<BellIcon className="h-5 w-5 text-indigo-500" />
|
||||
)}
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{reminder.title}
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
{getReminderTypeLabel(reminder.type)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{reminder.description && (
|
||||
<p className="mt-1 text-sm text-gray-600">
|
||||
{reminder.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
|
||||
<div className="text-xs text-gray-500">
|
||||
<span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-500">
|
||||
<span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
|
||||
</div>
|
||||
|
||||
{reminder.repeatable && reminder.repeat_days && (
|
||||
<div className="text-xs text-gray-500">
|
||||
<span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-xs text-gray-400">
|
||||
آخرین بهروزرسانی: {formatDate(reminder.updated_at)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
|
||||
<button
|
||||
onClick={() => onEdit(reminder)}
|
||||
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
|
||||
>
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(reminder)}
|
||||
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { apiClient } from './client';
|
||||
import { Reminder, CreateReminderData, UpdateReminderData, ApiResponse } from '@/types/reminder';
|
||||
|
||||
export const remindersApi = {
|
||||
// Get all reminders for a package
|
||||
getReminders: async (packageName: string, token: string): Promise<Reminder[]> => {
|
||||
return apiClient.get<Reminder[]>(`/package-names/${packageName}/reminders`, token);
|
||||
},
|
||||
|
||||
// Get single reminder
|
||||
getReminder: async (packageName: string, reminderId: number, token: string): Promise<Reminder> => {
|
||||
return apiClient.get<Reminder>(`/package-names/${packageName}/reminders/${reminderId}`, token);
|
||||
},
|
||||
|
||||
// Create new reminder
|
||||
createReminder: async (packageName: string, data: CreateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
|
||||
const formData = new FormData();
|
||||
|
||||
// Append all fields to FormData
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
if (value !== null && value !== undefined) {
|
||||
if (key === 'data' && typeof value === 'object') {
|
||||
formData.append(key, JSON.stringify(value));
|
||||
} else {
|
||||
formData.append(key, String(value));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return apiClient.post<ApiResponse<Reminder>>(`/package-names/${packageName}/reminders`, formData, token);
|
||||
},
|
||||
|
||||
// Update reminder (using PUT)
|
||||
updateReminder: async (packageName: string, reminderId: number, data: UpdateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
|
||||
return apiClient.put<ApiResponse<Reminder>>(
|
||||
`/package-names/${packageName}/reminders/${reminderId}`,
|
||||
data,
|
||||
token
|
||||
);
|
||||
},
|
||||
|
||||
// Delete reminder
|
||||
deleteReminder: async (packageName: string, reminderId: number, token: string): Promise<ApiResponse<any>> => {
|
||||
return apiClient.delete<ApiResponse<any>>(`/package-names/${packageName}/reminders/${reminderId}`, undefined, token);
|
||||
},
|
||||
|
||||
// Alternative update method using POST with _method spoofing (if PUT is not supported)
|
||||
updateReminderWithSpoof: async (packageName: string, reminderId: number, data: UpdateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
|
||||
const formData = new FormData();
|
||||
formData.append('_method', 'PUT');
|
||||
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
if (value !== null && value !== undefined) {
|
||||
if (key === 'data' && typeof value === 'object') {
|
||||
formData.append(key, JSON.stringify(value));
|
||||
} else {
|
||||
formData.append(key, String(value));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return apiClient.post<ApiResponse<Reminder>>(`/package-names/${packageName}/reminders/${reminderId}`, formData, token);
|
||||
}
|
||||
};
|
||||
@@ -50,3 +50,17 @@ export const getEmail = (email: string | null): string => {
|
||||
export const getMobile = (mobile: string | null): string => {
|
||||
return mobile || 'شماره موبایل ثبت نشده';
|
||||
};
|
||||
|
||||
export const formatTime = (dateString: string | null): string => {
|
||||
if (!dateString) return '';
|
||||
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date);
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
Vendored
+1
-1
@@ -1,6 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
export type ReminderType = 'reminder' | 'motivate';
|
||||
|
||||
export const REMINDER_TYPES = {
|
||||
reminder: 'یادآوری',
|
||||
motivate: 'انگیزشی'
|
||||
} as const;
|
||||
|
||||
export interface Reminder {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
time: string;
|
||||
repeatable: boolean;
|
||||
repeat_days: number | null;
|
||||
data: any | null;
|
||||
type: ReminderType;
|
||||
package_name?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateReminderData {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
time: string;
|
||||
repeatable?: boolean;
|
||||
repeat_days?: number | null;
|
||||
data?: any | null;
|
||||
type: ReminderType;
|
||||
}
|
||||
|
||||
export interface UpdateReminderData {
|
||||
title?: string;
|
||||
description?: string | null;
|
||||
time?: string;
|
||||
repeatable?: boolean;
|
||||
repeat_days?: number | null;
|
||||
data?: any | null;
|
||||
type?: ReminderType;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
data: T;
|
||||
message?: string;
|
||||
status?: number;
|
||||
}
|
||||
|
||||
export const getReminderTypeLabel = (type: ReminderType): string => {
|
||||
return REMINDER_TYPES[type] || type;
|
||||
};
|
||||
Reference in New Issue
Block a user