feat: add feature notification
This commit is contained in:
@@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
import { useAuth } from '@/contexts/AuthContext';
|
import { useAuth } from '@/contexts/AuthContext';
|
||||||
import Link from 'next/link';
|
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() {
|
export default function Dashboard() {
|
||||||
const { user, logout } = useAuth();
|
const { user, logout } = useAuth();
|
||||||
@@ -57,6 +58,15 @@ export default function Dashboard() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</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>
|
</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 => {
|
export const getMobile = (mobile: string | null): string => {
|
||||||
return mobile || 'شماره موبایل ثبت نشده';
|
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" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <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
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
// 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