feat: facility and google review crud
This commit is contained in:
Kailasdevdas
@@ -0,0 +1,406 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { AxiosError } from 'axios';
|
||||
import { Eye, Plus, Pencil, Loader2, RefreshCw, ChevronLeft, ChevronRight, Trash2 } from 'lucide-react';
|
||||
|
||||
import { getAllFacilitiesApi, createFacilityApi, updateFacilityApi, deleteFacilityApi, Facility } from '@/api/facility';
|
||||
import { getDepartmentsApi, Department } from '@/api/department';
|
||||
|
||||
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 { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
|
||||
import SeoPreview from '@/components/SeoPreview/SeoPreview';
|
||||
import FacilityModal from '@/components/FacilityModal/FacilityModal';
|
||||
|
||||
export default function FacilityPage() {
|
||||
const WEBSITE_URL = import.meta.env.VITE_WEBSITE_URL;
|
||||
|
||||
const [facilities, setFacilities] = useState<Facility[]>([]);
|
||||
const [departments, setDepartments] = useState<Department[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const [editing, setEditing] = useState<Facility | null>(null);
|
||||
const [openSeoPreview, setOpenSeoPreview] = useState(false);
|
||||
const [previewFacility, setPreviewFacility] = useState<any>(null);
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [filterDepartment, setFilterDepartment] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const [form, setForm] = useState<any>({
|
||||
facilityId: '',
|
||||
name: '',
|
||||
slug: '',
|
||||
shortDescription: '',
|
||||
description: '',
|
||||
videoUrl: '',
|
||||
isActive: true,
|
||||
isFeatured: false,
|
||||
sortOrder: 1000,
|
||||
departmentId: '',
|
||||
images: [],
|
||||
seoTitle: '',
|
||||
metaDescription: '',
|
||||
focusKeyphrase: '',
|
||||
tags: [],
|
||||
ogTitle: '',
|
||||
ogDescription: '',
|
||||
ogImage: '',
|
||||
});
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const [facRes, depRes] = await Promise.all([getAllFacilitiesApi(), getDepartmentsApi()]);
|
||||
setFacilities(facRes?.data || []);
|
||||
setDepartments(depRes?.data || []);
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
setError(err.response?.data?.message || 'Failed to load system facilities');
|
||||
} else {
|
||||
setError('An unexpected system error occurred');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const filteredFacilities = useMemo(() => {
|
||||
return facilities.filter((fac) => {
|
||||
const matchesSearch =
|
||||
fac.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
fac.facilityId.toLowerCase().includes(searchText.toLowerCase());
|
||||
|
||||
const matchesDept = filterDepartment
|
||||
? fac.department?.id.toString() === filterDepartment || fac.department?.departmentId === filterDepartment
|
||||
: true;
|
||||
|
||||
return matchesSearch && matchesDept;
|
||||
});
|
||||
}, [facilities, searchText, filterDepartment]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchText, filterDepartment]);
|
||||
|
||||
const totalPages = Math.ceil(filteredFacilities.length / itemsPerPage);
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = filteredFacilities.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handleToggleStatus = async (fac: Facility) => {
|
||||
try {
|
||||
await updateFacilityApi(fac.facilityId, { isActive: !fac.isActive }, 'toggleStatus');
|
||||
toast.success(`Facility ${fac.isActive ? 'hidden' : 'activated'} successfully`);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleFeatured = async (fac: Facility) => {
|
||||
try {
|
||||
await updateFacilityApi(fac.facilityId, { isFeatured: !fac.isFeatured }, 'toggleFeatured');
|
||||
toast.success(`Facility status modified successfully`);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const openAdd = () => {
|
||||
setEditing(null);
|
||||
setForm({
|
||||
facilityId: '',
|
||||
name: '',
|
||||
slug: '',
|
||||
shortDescription: '',
|
||||
description: '',
|
||||
videoUrl: '',
|
||||
isActive: true,
|
||||
isFeatured: false,
|
||||
sortOrder: 1000,
|
||||
departmentId: '',
|
||||
images: [],
|
||||
seoTitle: '',
|
||||
metaDescription: '',
|
||||
focusKeyphrase: '',
|
||||
tags: [],
|
||||
ogTitle: '',
|
||||
ogDescription: '',
|
||||
ogImage: '',
|
||||
});
|
||||
setOpenModal(true);
|
||||
};
|
||||
|
||||
const openEdit = async (fac: Facility) => {
|
||||
setEditing(fac);
|
||||
setForm({
|
||||
facilityId: fac.facilityId,
|
||||
name: fac.name,
|
||||
shortDescription: fac.shortDescription || '',
|
||||
description: fac.description || '',
|
||||
videoUrl: fac.videoUrl || '',
|
||||
isActive: fac.isActive,
|
||||
isFeatured: fac.isFeatured,
|
||||
sortOrder: fac.sortOrder,
|
||||
departmentId: fac.department?.departmentId || '',
|
||||
images:
|
||||
fac.images?.map((img) => ({
|
||||
url: img.url,
|
||||
altText: img.altText || '',
|
||||
description: img.description || '',
|
||||
})) || [],
|
||||
seoTitle: fac.seo?.seoTitle || '',
|
||||
metaDescription: fac.seo?.metaDescription || '',
|
||||
focusKeyphrase: fac.seo?.focusKeyphrase || '',
|
||||
slug: fac.seo?.slug || fac.slug,
|
||||
tags: fac.seo?.tags || [],
|
||||
ogTitle: fac.seo?.ogTitle || '',
|
||||
ogDescription: fac.seo?.ogDescription || '',
|
||||
ogImage: fac.seo?.ogImage || '',
|
||||
});
|
||||
setOpenModal(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (facilityId: string) => {
|
||||
if (
|
||||
!window.confirm(
|
||||
'Are you entirely sure you want to delete this facility profile? This structural shift cannot be reversed.'
|
||||
)
|
||||
)
|
||||
return;
|
||||
try {
|
||||
await deleteFacilityApi(facilityId);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreview = (fac: Facility) => {
|
||||
setPreviewFacility(fac);
|
||||
setOpenSeoPreview(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.facilityId) return toast.error('Facility ID signature is required');
|
||||
if (!form.name?.trim()) return toast.error('Facility Name string configuration is required');
|
||||
if (!form.slug?.trim()) return toast.error('Valid clean URL slug structure is required');
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
|
||||
departmentId: form.departmentId && form.departmentId !== '' ? form.departmentId : null,
|
||||
};
|
||||
|
||||
if (editing) {
|
||||
await updateFacilityApi(editing.facilityId, payload, 'updateDetails');
|
||||
} else {
|
||||
await createFacilityApi(payload);
|
||||
}
|
||||
setOpenModal(false);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getFacilityUrl = (fac: any) => {
|
||||
return `${WEBSITE_URL}/facilities/${fac?.slug || fac?.facilityId}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">Medical & Hospital Facilities</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search facility profiles..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[250px] text-base"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={filterDepartment}
|
||||
onChange={(e) => setFilterDepartment(e.target.value)}
|
||||
className="flex h-10 w-[220px] rounded-md border border-input bg-background px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="">All Departments</option>
|
||||
{departments.map((dep) => (
|
||||
<option key={dep.departmentId} value={dep.departmentId}>
|
||||
{dep.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<Button variant="outline" onClick={fetchData} disabled={loading} className="text-base">
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAdd} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Facility
|
||||
</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">Facilities Portfolio</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 sm:p-6 space-y-4">
|
||||
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
|
||||
<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[80px] bg-background text-sm font-bold">Order</TableHead>
|
||||
<TableHead className="w-[250px] bg-background text-sm font-bold">Facility Name</TableHead>
|
||||
<TableHead className="w-[180px] bg-background text-sm font-bold">Linked Department</TableHead>
|
||||
<TableHead className="w-[120px] bg-background text-sm font-bold">Status (Active)</TableHead>
|
||||
<TableHead className="w-[100px] bg-background text-sm font-bold">Featured</TableHead>
|
||||
<TableHead className="w-[120px] bg-background text-right text-sm font-bold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : currentItems.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-10 text-base">
|
||||
No explicit healthcare or asset facilities found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
currentItems.map((fac) => (
|
||||
<TableRow key={fac.facilityId} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-sm">{fac.sortOrder}</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate" title={fac.name}>
|
||||
{fac.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground font-mono truncate mt-0.5">/{fac.slug}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{fac.department ? (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{fac.department.name}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">None Assigned</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={fac.isActive} onCheckedChange={() => handleToggleStatus(fac)} />
|
||||
<Badge variant={fac.isActive ? 'default' : 'secondary'}>
|
||||
{fac.isActive ? 'Active' : 'Hidden'}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Switch checked={fac.isFeatured} onCheckedChange={() => handleToggleFeatured(fac)} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button size="icon" variant="ghost" className="h-9 w-9" onClick={() => handlePreview(fac)}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-9 w-9" onClick={() => openEdit(fac)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-red-500 hover:text-red-600 hover:bg-red-50"
|
||||
onClick={() => handleDelete(fac.facilityId)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{!loading && filteredFacilities.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2 py-6 border-t">
|
||||
<div className="text-base text-muted-foreground">
|
||||
Showing <span className="font-semibold">{indexOfFirstItem + 1}</span> to{' '}
|
||||
<span className="font-semibold">{Math.min(indexOfLastItem, filteredFacilities.length)}</span> of{' '}
|
||||
<span className="font-semibold">{filteredFacilities.length}</span> entries
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-base font-semibold">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-10 w-10"
|
||||
onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<FacilityModal
|
||||
open={openModal}
|
||||
onOpenChange={setOpenModal}
|
||||
editing={editing}
|
||||
form={form}
|
||||
setForm={setForm}
|
||||
departments={departments}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
|
||||
<SeoPreview
|
||||
open={openSeoPreview}
|
||||
onOpenChange={setOpenSeoPreview}
|
||||
previewData={previewFacility}
|
||||
url={getFacilityUrl(previewFacility)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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