Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added a swicher on the properties
All checks were successful
Build frontend / build (push) Successful in 43s
Details

Browse Source
This commit is contained in:
mouazkh
2026-05-26 23:04:00 +03:00
parent f1a14c2f7a
commit 819d5ea802
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/reservations/page.js
View File

@ -115,7 +115,7 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
const isExpired = deadline ? Date.now() > deadline : false;
const isPaying = payingId === r.id;
const [showRating, setShowRating] = useState(false);
const [ratingValue, setRatingValue] = useState(0);
const [ratings, setRatings] = useState({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 });
const [ratingComment, setRatingComment] = useState('');
const [submittingRating, setSubmittingRating] = useState(false);
@ -167,26 +167,36 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
<Star className="w-4 h-4"/> قيّم هذا العقار
</button>}
{canRate && showRating && <div className="mt-3 bg-amber-50 p-3 rounded-xl">
<div className="flex gap-1 justify-center mb-2">
<div className="space-y-2 mb-3">
{[
{ key: 'clean', label: 'النظافة' },
{ key: 'services', label: 'الخدمات' },
{ key: 'ownerBehavior', label: 'تعامل المالك' },
{ key: 'experience', label: 'التجربة العامة' },
].map(cat => <div key={cat.key} className="flex items-center justify-between">
<span className="text-sm text-gray-700">{cat.label}</span>
<div className="flex gap-0.5">
{[1,2,3,4,5].map(n => (
<button key={n} onClick={() => setRatingValue(n)}
className={`p-1 rounded-full transition-colors ${n <= ratingValue ? 'text-amber-500' : 'text-gray-300'}`}>
<Star className={`w-6 h-6 ${n <= ratingValue ? 'fill-amber-500' : ''}`} />
<button key={n} onClick={() => setRatings(p => ({...p, [cat.key]: n}))}
className={`p-0.5 rounded-full transition-colors ${n <= ratings[cat.key] ? 'text-amber-500' : 'text-gray-300'}`}>
<Star className={`w-4 h-4 ${n <= ratings[cat.key] ? 'fill-amber-500' : ''}`} />
</button>
))}
</div>
</div>)}
</div>
<textarea value={ratingComment} onChange={e => setRatingComment(e.target.value)}
placeholder="أكتب تعليقك (اختياري)"
className="w-full p-2 text-sm border border-amber-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-amber-500 mb-2" rows={2} />
<div className="flex gap-2">
<button onClick={async () => {
if (!ratingValue) return toast.error('اختر تقييماً');
if (!ratings.clean || !ratings.services || !ratings.ownerBehavior || !ratings.experience) return toast.error('قيّم جميع الفئات');
setSubmittingRating(true);
try {
await addPropertyRating({ reservationId: r.id, cleanRating: ratingValue, servicesRating: ratingValue, ownerBehaviorRating: ratingValue, experienceRating: ratingValue, comment: ratingComment || null });
await addPropertyRating({ reservationId: r.id, cleanRating: ratings.clean, servicesRating: ratings.services, ownerBehaviorRating: ratings.ownerBehavior, experienceRating: ratings.experience, comment: ratingComment || null });
toast.success('تم إرسال التقييم');
setShowRating(false);
setRatingValue(0);
setRatings({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 });
setRatingComment('');
} catch (e) { toast.error(e?.message || 'فشل إرسال التقييم'); }
finally { setSubmittingRating(false); }
@ -194,7 +204,7 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
className="flex-1 bg-amber-500 text-white py-1.5 rounded-lg text-sm font-medium hover:bg-amber-600 transition-colors disabled:bg-gray-300">
{submittingRating ? 'جاري الإرسال...' : 'إرسال التقييم'}
</button>
<button onClick={() => { setShowRating(false); setRatingValue(0); setRatingComment(''); }}
<button onClick={() => { setShowRating(false); setRatings({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 }); setRatingComment(''); }}
className="px-4 py-1.5 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">إلغاء</button>
</div>
</div>}