feat: facility and google review crud
This commit is contained in:
Kailasdevdas
@@ -0,0 +1,326 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
import {
|
||||
getGoogleReviewsApi,
|
||||
createGoogleReviewApi,
|
||||
updateGoogleReviewApi,
|
||||
deleteGoogleReviewApi,
|
||||
GoogleReview,
|
||||
} from '@/api/googleReview';
|
||||
|
||||
import GoogleReviewModal from '@/components/GoogleReviewModal/GoogleReviewModal';
|
||||
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
import { Loader2, RefreshCw, Plus, Pencil, Trash2, ExternalLink, Star } from 'lucide-react';
|
||||
|
||||
export default function GoogleReviewPage() {
|
||||
const [reviews, setReviews] = useState<GoogleReview[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [reviewModal, setReviewModal] = useState(false);
|
||||
const [editingReview, setEditingReview] = useState<GoogleReview | null>(null);
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const [reviewForm, setReviewForm] = useState<Partial<GoogleReview>>({
|
||||
reviewerName: '',
|
||||
reviewerImage: '',
|
||||
rating: 5,
|
||||
review: '',
|
||||
reviewDate: null,
|
||||
googleReviewUrl: '',
|
||||
isFeatured: false,
|
||||
isActive: true,
|
||||
sortOrder: 1000,
|
||||
});
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await getGoogleReviewsApi();
|
||||
setReviews(res.data || []);
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
setError(err.response?.data?.message || 'Failed to sync Google review records.');
|
||||
} else {
|
||||
setError('An unhandled database communication error occurred.');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const handleToggleStatus = async (review: GoogleReview) => {
|
||||
if (review.id === undefined) return;
|
||||
try {
|
||||
await updateGoogleReviewApi(review.id, { isActive: !review.isActive });
|
||||
toast.success(`Review status updated successfully`);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleFeatured = async (review: GoogleReview) => {
|
||||
if (review.id === undefined) return;
|
||||
try {
|
||||
await updateGoogleReviewApi(review.id, { isFeatured: !review.isFeatured });
|
||||
toast.success(`Review featured status updated`);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteReview = async (id: number) => {
|
||||
const confirmDelete = window.confirm(
|
||||
'Are you completely sure you want to remove this testimonial record? This step is irreversible.'
|
||||
);
|
||||
if (!confirmDelete) return;
|
||||
|
||||
try {
|
||||
await deleteGoogleReviewApi(id);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const openAddReview = () => {
|
||||
setEditingReview(null);
|
||||
setReviewForm({
|
||||
reviewerName: '',
|
||||
reviewerImage: '',
|
||||
rating: 5,
|
||||
review: '',
|
||||
reviewDate: null,
|
||||
googleReviewUrl: '',
|
||||
isFeatured: false,
|
||||
isActive: true,
|
||||
sortOrder: 1000,
|
||||
});
|
||||
setReviewModal(true);
|
||||
};
|
||||
|
||||
const openEditReview = (review: GoogleReview) => {
|
||||
setEditingReview(review);
|
||||
setReviewForm({ ...review });
|
||||
setReviewModal(true);
|
||||
};
|
||||
|
||||
const saveReview = async () => {
|
||||
if (!reviewForm.reviewerName) return toast.error('Reviewer name is required.');
|
||||
if (!reviewForm.review) return toast.error('Review message content is required.');
|
||||
|
||||
try {
|
||||
const finalData = { ...reviewForm };
|
||||
|
||||
if (editingReview?.id) {
|
||||
const changedFields: Record<string, any> = {};
|
||||
Object.keys(finalData).forEach((key) => {
|
||||
const k = key as keyof GoogleReview;
|
||||
if (JSON.stringify(finalData[k]) !== JSON.stringify(editingReview[k])) {
|
||||
changedFields[k] = finalData[k];
|
||||
}
|
||||
});
|
||||
|
||||
delete changedFields.id;
|
||||
|
||||
if (Object.keys(changedFields).length === 0) {
|
||||
setReviewModal(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await updateGoogleReviewApi(editingReview.id, changedFields);
|
||||
} else {
|
||||
await createGoogleReviewApi(finalData as GoogleReview);
|
||||
}
|
||||
|
||||
setReviewModal(false);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredReviews = reviews.filter((r) => r.reviewerName.toLowerCase().includes(searchText.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Google Reviews</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search reviews by name..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[260px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchData} disabled={loading} className="text-base">
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAddReview} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Review
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">{error}</div>}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Testimonials Sequence Directory</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 sm:p-6">
|
||||
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[680px] relative">
|
||||
<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[70px] bg-background text-sm font-bold">Order</TableHead>
|
||||
<TableHead className="w-[110px] bg-background text-sm font-bold">Avatar</TableHead>
|
||||
<TableHead className="w-[170px] bg-background text-sm font-bold">Reviewer</TableHead>
|
||||
<TableHead className="w-[90px] bg-background text-sm font-bold">Rating</TableHead>
|
||||
<TableHead className="w-[260px] bg-background text-sm font-bold">Testimonial</TableHead>
|
||||
<TableHead className="w-[110px] bg-background text-sm font-bold">Source Link</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-sm font-bold">Featured</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-sm font-bold">Status</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-right text-sm font-bold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredReviews.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center text-muted-foreground py-10 text-base">
|
||||
No reviews found matching your criteria.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredReviews.map((review) => (
|
||||
<TableRow key={review.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-sm">{review.sortOrder}</TableCell>
|
||||
<TableCell>
|
||||
{review.reviewerImage ? (
|
||||
<img
|
||||
src={review.reviewerImage}
|
||||
alt={review.reviewerName}
|
||||
className="w-10 h-10 rounded-full object-cover border"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center border text-muted-foreground font-bold">
|
||||
{review.reviewerName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate" title={review.reviewerName}>
|
||||
{review.reviewerName}
|
||||
</div>
|
||||
{review.reviewDate && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(review.reviewDate).toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1 font-medium text-sm">
|
||||
{review.rating}
|
||||
<Star className="h-4 w-4 fill-amber-400 text-amber-500" />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm truncate max-w-[240px]" title={review.review}>
|
||||
"{review.review}"
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{review.googleReviewUrl ? (
|
||||
<a
|
||||
href={review.googleReviewUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-sky-600 hover:underline flex items-center gap-1"
|
||||
>
|
||||
Link <ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Switch checked={review.isFeatured} onCheckedChange={() => handleToggleFeatured(review)} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={review.isActive} onCheckedChange={() => handleToggleStatus(review)} />
|
||||
<Badge variant={review.isActive ? 'default' : 'secondary'}>
|
||||
{review.isActive ? 'Active' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => openEditReview(review)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 text-red-500 hover:text-red-600"
|
||||
onClick={() => review.id && handleDeleteReview(review.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<GoogleReviewModal
|
||||
open={reviewModal}
|
||||
onOpenChange={setReviewModal}
|
||||
editingReview={editingReview}
|
||||
reviewForm={reviewForm}
|
||||
setReviewForm={setReviewForm}
|
||||
onSave={saveReview}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user