mirror of
http://88.130.71.182:3000/BlitTech/Projet1-RealEstate.git
synced 2026-06-13 08:43:13 +00:00
Initial commit
This commit is contained in:
Dosseh91
291
src/components/admin/AgencyManagement.tsx
Normal file
291
src/components/admin/AgencyManagement.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CheckCircle, XCircle, Eye, MessageCircle } from 'lucide-react';
|
||||
import Card, { CardContent, CardHeader } from '../common/Card';
|
||||
import Button from '../common/Button';
|
||||
import { Agency } from '../../types';
|
||||
import { agencies as mockAgencies } from '../../data/mockData';
|
||||
|
||||
const AgencyManagement: React.FC = () => {
|
||||
const [agencies, setAgencies] = useState<Agency[]>(mockAgencies);
|
||||
const [selectedAgency, setSelectedAgency] = useState<Agency | null>(null);
|
||||
const [isViewingDetails, setIsViewingDetails] = useState(false);
|
||||
|
||||
const handleVerifyAgency = (id: string) => {
|
||||
setAgencies(
|
||||
agencies.map(agency =>
|
||||
agency.id === id ? { ...agency, verified: true } : agency
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleRevokeVerification = (id: string) => {
|
||||
setAgencies(
|
||||
agencies.map(agency =>
|
||||
agency.id === id ? { ...agency, verified: false } : agency
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleViewDetails = (agency: Agency) => {
|
||||
setSelectedAgency(agency);
|
||||
setIsViewingDetails(true);
|
||||
};
|
||||
|
||||
const handleCloseDetails = () => {
|
||||
setIsViewingDetails(false);
|
||||
setSelectedAgency(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-primary-800">Agency Management</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isViewingDetails && selectedAgency ? (
|
||||
<div className="animate-fade-in">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold text-primary-800">
|
||||
Agency Details
|
||||
</h3>
|
||||
<Button variant="outline" size="sm" onClick={handleCloseDetails}>
|
||||
Back to List
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
{selectedAgency.logo ? (
|
||||
<img
|
||||
src={selectedAgency.logo}
|
||||
alt={selectedAgency.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-gray-400">
|
||||
No Logo
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-primary-600">Status:</span>
|
||||
<span className={`text-sm font-medium ${selectedAgency.verified ? 'text-success-600' : 'text-warning-600'}`}>
|
||||
{selectedAgency.verified ? 'Verified' : 'Unverified'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-primary-600">ID:</span>
|
||||
<span className="text-sm">{selectedAgency.id}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-primary-600">User ID:</span>
|
||||
<span className="text-sm">{selectedAgency.userId}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-2">
|
||||
{selectedAgency.verified ? (
|
||||
<Button
|
||||
variant="error"
|
||||
size="sm"
|
||||
fullWidth
|
||||
onClick={() => handleRevokeVerification(selectedAgency.id)}
|
||||
icon={<XCircle className="h-4 w-4" />}
|
||||
>
|
||||
Revoke Verification
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="success"
|
||||
size="sm"
|
||||
fullWidth
|
||||
onClick={() => handleVerifyAgency(selectedAgency.id)}
|
||||
icon={<CheckCircle className="h-4 w-4" />}
|
||||
>
|
||||
Verify Agency
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
fullWidth
|
||||
icon={<MessageCircle className="h-4 w-4" />}
|
||||
>
|
||||
Contact Agency
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<h4 className="text-lg font-medium text-primary-800 mb-4">
|
||||
{selectedAgency.name}
|
||||
</h4>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-primary-700 mb-1">Description</h5>
|
||||
<p className="text-primary-600">{selectedAgency.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-primary-700 mb-1">Contact Information</h5>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex">
|
||||
<span className="text-sm text-primary-600 w-20">Email:</span>
|
||||
<span className="text-sm">{selectedAgency.email}</span>
|
||||
</li>
|
||||
<li className="flex">
|
||||
<span className="text-sm text-primary-600 w-20">Phone:</span>
|
||||
<span className="text-sm">{selectedAgency.phone}</span>
|
||||
</li>
|
||||
<li className="flex">
|
||||
<span className="text-sm text-primary-600 w-20">Website:</span>
|
||||
<span className="text-sm">
|
||||
{selectedAgency.website ? (
|
||||
<a
|
||||
href={selectedAgency.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent-600 hover:underline"
|
||||
>
|
||||
{selectedAgency.website}
|
||||
</a>
|
||||
) : (
|
||||
'N/A'
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-primary-700 mb-1">Address</h5>
|
||||
<p className="text-sm text-primary-600">{selectedAgency.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h5 className="text-sm font-medium text-primary-700 mb-2">Verification Notes</h5>
|
||||
<textarea
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
|
||||
rows={4}
|
||||
placeholder="Add notes about verification process..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Agency</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Email</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Phone</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Status</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{agencies.map(agency => (
|
||||
<tr
|
||||
key={agency.id}
|
||||
className="border-b border-gray-200 hover:bg-gray-50"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 flex-shrink-0 rounded-full overflow-hidden bg-gray-100 mr-3">
|
||||
{agency.logo ? (
|
||||
<img
|
||||
src={agency.logo}
|
||||
alt={agency.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-primary-800">{agency.name}</p>
|
||||
<p className="text-xs text-primary-500">{agency.id.substring(0, 8)}...</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-primary-600">
|
||||
{agency.email}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-primary-600">
|
||||
{agency.phone}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
||||
agency.verified
|
||||
? 'bg-success-50 text-success-700'
|
||||
: 'bg-warning-50 text-warning-700'
|
||||
}`}
|
||||
>
|
||||
{agency.verified ? 'Verified' : 'Unverified'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleViewDetails(agency)}
|
||||
className="p-1"
|
||||
title="View Details"
|
||||
>
|
||||
<Eye className="h-4 w-4 text-primary-600" />
|
||||
</Button>
|
||||
|
||||
{agency.verified ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRevokeVerification(agency.id)}
|
||||
className="p-1"
|
||||
title="Revoke Verification"
|
||||
>
|
||||
<XCircle className="h-4 w-4 text-error-500" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleVerifyAgency(agency.id)}
|
||||
className="p-1"
|
||||
title="Verify Agency"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-success-500" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="p-1"
|
||||
title="Contact Agency"
|
||||
>
|
||||
<MessageCircle className="h-4 w-4 text-accent-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgencyManagement;
|
||||
228
src/components/admin/CategoryManagement.tsx
Normal file
228
src/components/admin/CategoryManagement.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import React, { useState } from 'react';
|
||||
import { PlusCircle, Edit, Trash2, Save, X } from 'lucide-react';
|
||||
import Button from '../common/Button';
|
||||
import Card, { CardContent, CardHeader } from '../common/Card';
|
||||
import { Category } from '../../types';
|
||||
import { categories as mockCategories, generateId } from '../../data/mockData';
|
||||
|
||||
const CategoryManagement: React.FC = () => {
|
||||
const [categories, setCategories] = useState<Category[]>(mockCategories);
|
||||
const [isAddingCategory, setIsAddingCategory] = useState(false);
|
||||
const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
|
||||
const [newCategory, setNewCategory] = useState<Partial<Category>>({
|
||||
name: '',
|
||||
description: '',
|
||||
icon: 'tag',
|
||||
slug: '',
|
||||
});
|
||||
|
||||
const handleAddCategory = () => {
|
||||
setIsAddingCategory(true);
|
||||
setNewCategory({
|
||||
name: '',
|
||||
description: '',
|
||||
icon: 'tag',
|
||||
slug: '',
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditCategory = (category: Category) => {
|
||||
setEditingCategoryId(category.id);
|
||||
setNewCategory({ ...category });
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setIsAddingCategory(false);
|
||||
setEditingCategoryId(null);
|
||||
};
|
||||
|
||||
const handleSaveCategory = () => {
|
||||
if (!newCategory.name || !newCategory.description) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isAddingCategory) {
|
||||
const slug = newCategory.name?.toLowerCase().replace(/\s+/g, '-') || '';
|
||||
const category: Category = {
|
||||
id: generateId(),
|
||||
name: newCategory.name || '',
|
||||
description: newCategory.description || '',
|
||||
icon: newCategory.icon || 'tag',
|
||||
slug,
|
||||
};
|
||||
setCategories([...categories, category]);
|
||||
setIsAddingCategory(false);
|
||||
} else if (editingCategoryId) {
|
||||
setCategories(
|
||||
categories.map(cat =>
|
||||
cat.id === editingCategoryId
|
||||
? { ...cat, ...newCategory, slug: newCategory.slug || cat.slug }
|
||||
: cat
|
||||
)
|
||||
);
|
||||
setEditingCategoryId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCategory = (id: string) => {
|
||||
// In a real app, we would check if there are any listings using this category
|
||||
setCategories(categories.filter(cat => cat.id !== id));
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setNewCategory(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const iconOptions = [
|
||||
'tag', 'home', 'car', 'smartphone', 'briefcase', 'shopping-bag',
|
||||
'package', 'gift', 'coffee', 'music', 'book', 'camera', 'heart',
|
||||
'user', 'users', 'star', 'globe', 'map-pin', 'flag', 'bell'
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold text-primary-800">Category Management</h2>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={handleAddCategory}
|
||||
icon={<PlusCircle className="h-4 w-4" />}
|
||||
>
|
||||
Add Category
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(isAddingCategory || editingCategoryId) && (
|
||||
<div className="mb-6 p-4 border border-gray-200 rounded-md bg-gray-50 animate-fade-in">
|
||||
<h3 className="text-lg font-medium text-primary-800 mb-4">
|
||||
{isAddingCategory ? 'Add New Category' : 'Edit Category'}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Category Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={newCategory.name || ''}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="icon" className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Icon
|
||||
</label>
|
||||
<select
|
||||
id="icon"
|
||||
name="icon"
|
||||
value={newCategory.icon || 'tag'}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
|
||||
>
|
||||
{iconOptions.map(icon => (
|
||||
<option key={icon} value={icon}>
|
||||
{icon.charAt(0).toUpperCase() + icon.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="description" className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={newCategory.description || ''}
|
||||
onChange={handleChange}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent-500"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancelEdit}
|
||||
icon={<X className="h-4 w-4" />}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={handleSaveCategory}
|
||||
icon={<Save className="h-4 w-4" />}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Name</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Description</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Icon</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Slug</th>
|
||||
<th className="px-4 py-3 text-sm font-semibold text-primary-700">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categories.map(category => (
|
||||
<tr
|
||||
key={category.id}
|
||||
className="border-b border-gray-200 hover:bg-gray-50"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<span className="font-medium text-primary-800">{category.name}</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-primary-600">
|
||||
{category.description}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-primary-600">
|
||||
{category.icon}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-primary-600">
|
||||
{category.slug}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditCategory(category)}
|
||||
className="p-1"
|
||||
>
|
||||
<Edit className="h-4 w-4 text-primary-600" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteCategory(category.id)}
|
||||
className="p-1"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-error-500" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryManagement;
|
||||
164
src/components/admin/ListingReviewCard.tsx
Normal file
164
src/components/admin/ListingReviewCard.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Eye, CheckCircle, XCircle, MessageCircle } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Card, { CardContent, CardFooter } from '../common/Card';
|
||||
import Button from '../common/Button';
|
||||
import StatusBadge from '../common/StatusBadge';
|
||||
import { Listing } from '../../types';
|
||||
import { getCategoryById } from '../../data/mockData';
|
||||
import { useListings } from '../../contexts/ListingContext';
|
||||
|
||||
interface ListingReviewCardProps {
|
||||
listing: Listing;
|
||||
}
|
||||
|
||||
const ListingReviewCard: React.FC<ListingReviewCardProps> = ({ listing }) => {
|
||||
const { updateListingStatus } = useListings();
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [showRejectReason, setShowRejectReason] = useState(false);
|
||||
const [rejectReason, setRejectReason] = useState('');
|
||||
|
||||
const category = getCategoryById(listing.categoryId);
|
||||
|
||||
const formatter = new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
|
||||
const handleApprove = async () => {
|
||||
setIsUpdating(true);
|
||||
try {
|
||||
await updateListingStatus(listing.id, 'approved');
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async () => {
|
||||
if (!showRejectReason) {
|
||||
setShowRejectReason(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!rejectReason.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUpdating(true);
|
||||
try {
|
||||
await updateListingStatus(listing.id, 'rejected');
|
||||
// In a real app, we would save the rejection reason as well
|
||||
console.log(`Rejection reason for listing ${listing.id}: ${rejectReason}`);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
setShowRejectReason(false);
|
||||
setRejectReason('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="h-full overflow-hidden">
|
||||
<div className="relative">
|
||||
<div className="aspect-w-16 aspect-h-9 overflow-hidden">
|
||||
<img
|
||||
src={listing.images[0] || 'https://images.pexels.com/photos/1546168/pexels-photo-1546168.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
|
||||
alt={listing.title}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<StatusBadge status={listing.status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent>
|
||||
<div className="mb-2">
|
||||
<span className="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
|
||||
{category?.name || 'Uncategorized'}
|
||||
</span>
|
||||
<span className="inline-block ml-2 text-primary-500 text-xs">
|
||||
ID: {listing.id.substring(0, 6)}...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-primary-800 mb-1">{listing.title}</h3>
|
||||
|
||||
<p className="text-primary-600 text-sm mb-3 line-clamp-2">
|
||||
{listing.description}
|
||||
</p>
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="text-xl font-bold text-accent-700">
|
||||
{formatter.format(listing.price)}
|
||||
</span>
|
||||
<Link to={`/listings/${listing.id}`} className="text-accent-600 hover:text-accent-800 flex items-center">
|
||||
<Eye className="w-4 h-4 mr-1" />
|
||||
<span className="text-sm">View</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{showRejectReason && (
|
||||
<div className="mt-2 mb-4 animate-fade-in">
|
||||
<label htmlFor="rejectReason" className="block text-sm font-medium text-primary-700 mb-1">
|
||||
Reason for rejection
|
||||
</label>
|
||||
<textarea
|
||||
id="rejectReason"
|
||||
value={rejectReason}
|
||||
onChange={e => setRejectReason(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-error-500"
|
||||
rows={3}
|
||||
placeholder="Please provide a reason for rejection..."
|
||||
></textarea>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex justify-between">
|
||||
{listing.status === 'pending' && (
|
||||
<>
|
||||
<Button
|
||||
variant="success"
|
||||
size="sm"
|
||||
disabled={isUpdating}
|
||||
onClick={handleApprove}
|
||||
icon={<CheckCircle className="w-4 h-4" />}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
variant="error"
|
||||
size="sm"
|
||||
disabled={isUpdating}
|
||||
onClick={handleReject}
|
||||
icon={<XCircle className="w-4 h-4" />}
|
||||
>
|
||||
{showRejectReason ? 'Submit Rejection' : 'Reject'}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{listing.status !== 'pending' && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon={<MessageCircle className="w-4 h-4" />}
|
||||
>
|
||||
Contact Agency
|
||||
</Button>
|
||||
<Button
|
||||
variant={listing.status === 'rejected' ? 'outline' : 'primary'}
|
||||
size="sm"
|
||||
onClick={() => updateListingStatus(listing.id, 'pending')}
|
||||
>
|
||||
Reset Status
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListingReviewCard;
|
||||
Reference in New Issue
Block a user