Add 'Mark as Cleaned Up' functionality
- Add cleaned_at and cleaned_by_user_id fields to reports table - Create database migration for cleanup tracking - Add markAsCleaned backend endpoint and service method - Add Mark as Cleaned Up button to ReportDetailModal - Update types to include cleaned fields - Add frontend handler to mark reports as cleaned
This commit is contained in:
@@ -9,9 +9,10 @@ interface ReportDetailModalProps {
|
||||
onClose: () => void;
|
||||
onVerify?: (reportId: string, comment?: string) => void;
|
||||
onDispute?: (reportId: string, comment?: string) => void;
|
||||
onMarkCleaned?: (reportId: string) => void;
|
||||
}
|
||||
|
||||
export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute }: ReportDetailModalProps) {
|
||||
export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute, onMarkCleaned }: ReportDetailModalProps) {
|
||||
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
|
||||
const [showVerifyComment, setShowVerifyComment] = useState(false);
|
||||
const [showDisputeComment, setShowDisputeComment] = useState(false);
|
||||
@@ -357,35 +358,55 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
{(onVerify || onDispute) && (
|
||||
{(onVerify || onDispute || onMarkCleaned) && (
|
||||
<div className="border-t border-gray-200 pt-4">
|
||||
<p className="text-sm text-gray-700 mb-3">
|
||||
Help maintain data quality by verifying or disputing this report.
|
||||
</p>
|
||||
{(onVerify || onDispute) && (
|
||||
<p className="text-sm text-gray-700 mb-3">
|
||||
Help maintain data quality by verifying or disputing this report.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!showVerifyComment && !showDisputeComment && (
|
||||
<div className="flex gap-3">
|
||||
{onVerify && (
|
||||
<div className="space-y-3">
|
||||
{/* Mark as Cleaned Button */}
|
||||
{onMarkCleaned && (
|
||||
<button
|
||||
onClick={() => setShowVerifyComment(true)}
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
|
||||
onClick={() => onMarkCleaned(report.id)}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Verify Report
|
||||
Mark as Cleaned Up
|
||||
</button>
|
||||
)}
|
||||
{onDispute && (
|
||||
<button
|
||||
onClick={() => setShowDisputeComment(true)}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Dispute Report
|
||||
</button>
|
||||
|
||||
{/* Verify/Dispute Buttons */}
|
||||
{(onVerify || onDispute) && (
|
||||
<div className="flex gap-3">
|
||||
{onVerify && (
|
||||
<button
|
||||
onClick={() => setShowVerifyComment(true)}
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Verify Report
|
||||
</button>
|
||||
)}
|
||||
{onDispute && (
|
||||
<button
|
||||
onClick={() => setShowDisputeComment(true)}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Dispute Report
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -322,6 +322,37 @@ export function MapPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkCleaned = async (reportId: string) => {
|
||||
try {
|
||||
await reportService.markAsCleaned(reportId);
|
||||
// Refresh the report details
|
||||
const updatedReport = await reportService.getReport(reportId);
|
||||
setSelectedReport(updatedReport);
|
||||
// Refresh the reports list
|
||||
const apiFilters: Parameters<typeof reportService.getReports>[0] = filters.dateRange
|
||||
? {
|
||||
dateRange: {
|
||||
start: filters.dateRange.start.toISOString(),
|
||||
end: filters.dateRange.end.toISOString(),
|
||||
},
|
||||
litterTypes: filters.litterTypes,
|
||||
quantities: filters.quantities,
|
||||
verificationStatus: filters.verificationStatus,
|
||||
}
|
||||
: {
|
||||
litterTypes: filters.litterTypes,
|
||||
quantities: filters.quantities,
|
||||
verificationStatus: filters.verificationStatus,
|
||||
};
|
||||
const data = await reportService.getReports(apiFilters);
|
||||
setReports(data);
|
||||
alert('Report marked as cleaned up!');
|
||||
} catch (error: any) {
|
||||
console.error('Failed to mark report as cleaned:', error);
|
||||
alert(error.message || 'Failed to mark report as cleaned. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMapClick = (lat: number, lng: number) => {
|
||||
console.log('Map clicked at:', lat, lng);
|
||||
// In later tasks, this can be used for manual location selection
|
||||
@@ -454,6 +485,7 @@ export function MapPage() {
|
||||
onClose={handleCloseModal}
|
||||
onVerify={isSignedIn ? handleVerify : undefined}
|
||||
onDispute={isSignedIn ? handleDispute : undefined}
|
||||
onMarkCleaned={isSignedIn ? handleMarkCleaned : undefined}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -133,6 +133,13 @@ class ReportService {
|
||||
return apiClient.post(`/reports/${reportId}/dispute`, { comment });
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark a report as cleaned up
|
||||
*/
|
||||
async markAsCleaned(reportId: string): Promise<void> {
|
||||
return apiClient.post(`/reports/${reportId}/mark-cleaned`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a report (only by owner)
|
||||
*/
|
||||
|
||||
@@ -43,6 +43,8 @@ export interface Report {
|
||||
updatedAt: Date;
|
||||
submittedAt: Date;
|
||||
verificationStatus: VerificationStatus;
|
||||
cleanedAt?: Date;
|
||||
cleanedByUserId?: string;
|
||||
}
|
||||
|
||||
export interface CleanupEvent {
|
||||
|
||||
Reference in New Issue
Block a user