feat: Enhance reported photos management with cleanup functionality and report comment

This commit introduces a new cleanup feature for reported photos, allowing admins to delete records based on their review status. The API has been updated with a new endpoint for cleanup operations, and the frontend now includes a button to trigger this action. Additionally, a report comment field has been added to the reported photo response model, improving the detail available for each reported photo. The user interface has been updated to display report comments and provide a confirmation dialog for the cleanup action. Documentation has been updated to reflect these changes.
2025-11-25 13:08:40 -05:00
parent 51eaf6a52b
commit f9e8c476bc
4 changed files with 220 additions and 45 deletions
@@ -11,6 +11,7 @@ export interface ReportedPhotoResponse {
  reviewed_at: string | null
  reviewed_by: number | null
  review_notes: string | null
+  report_comment: string | null
  photo_path: string | null
  photo_filename: string | null
 }
@@ -36,6 +37,12 @@ export interface ReviewResponse {
  errors: string[]
 }

+export interface ReportedCleanupResponse {
+  deleted_records: number
+  errors: string[]
+  warnings?: string[]
+}
+
 export const reportedPhotosApi = {
  listReportedPhotos: async (statusFilter?: string): Promise<ReportedPhotosListResponse> => {
    const { data } = await apiClient.get<ReportedPhotosListResponse>(
@@ -54,5 +61,13 @@ export const reportedPhotosApi = {
    )
    return data
  },
+
+  cleanupReportedPhotos: async (): Promise<ReportedCleanupResponse> => {
+    const { data } = await apiClient.post<ReportedCleanupResponse>(
+      '/api/v1/reported-photos/cleanup',
+      {},
+    )
+    return data
+  },
 }

@@ -27,7 +27,6 @@ export default function Layout() {
    { path: '/auto-match', label: 'Auto-Match', icon: '🤖', adminOnly: false },
    { path: '/modify', label: 'Modify', icon: '✏️', adminOnly: false },
    { path: '/tags', label: 'Tag', icon: '🏷️', adminOnly: false },
-    { path: '/manage-photos', label: 'Manage Photos', icon: '📷', adminOnly: false },
    { path: '/faces-maintenance', label: 'Faces Maintenance', icon: '🔧', adminOnly: false },
    { path: '/approve-identified', label: 'Approve identified', icon: '✅', adminOnly: true },
    { path: '/manage-users', label: 'Manage users', icon: '👥', adminOnly: true },
@@ -13,6 +13,7 @@ export default function ReportedPhotos() {
  const [decisions, setDecisions] = useState<Record<number, 'keep' | 'remove' | null>>({})
  const [reviewNotes, setReviewNotes] = useState<Record<number, string>>({})
  const [submitting, setSubmitting] = useState(false)
+  const [clearing, setClearing] = useState(false)
  const [statusFilter, setStatusFilter] = useState<string>('pending')

  const loadReportedPhotos = useCallback(async () => {
@@ -55,10 +56,14 @@ export default function ReportedPhotos() {
  }

  const handleDecisionChange = (id: number, decision: 'keep' | 'remove') => {
-    setDecisions((prev) => ({
-      ...prev,
-      [id]: decision,
-    }))
+    setDecisions((prev) => {
+      const currentDecision = prev[id] ?? null
+      const nextDecision = currentDecision === decision ? null : decision
+      return {
+        ...prev,
+        [id]: nextDecision,
+      }
+    })
  }

  const handleReviewNotesChange = (id: number, notes: string) => {
@@ -124,18 +129,21 @@ export default function ReportedPhotos() {
        decisions: decisionsList,
      })

-      const message = [
+      const messageParts = [
        `✅ Kept: ${response.kept}`,
        `❌ Removed: ${response.removed}`,
-        response.errors.length > 0 ? `⚠️ Errors: ${response.errors.length}` : '',
      ]
-        .filter(Boolean)
-        .join('\n')
+
+      if (import.meta.env.DEV && response.errors.length > 0) {
+        messageParts.push(`⚠️ Errors: ${response.errors.length}`)
+      }
+
+      const message = messageParts.join('\n')

      alert(message)

      if (response.errors.length > 0) {
-        console.error('Errors:', response.errors)
+        console.error('Reported photo review errors:', response.errors)
      }

      // Reload the list to show updated status
@@ -153,6 +161,51 @@ export default function ReportedPhotos() {
    }
  }

+  const handleClearDatabase = async () => {
+    const confirmMessage = [
+      'Delete all kept and removed reported photo records from the auth database?',
+      '',
+      'Only photos with Pending status will remain.',
+      'This action cannot be undone.',
+    ].join('\n')
+
+    if (!confirm(confirmMessage)) {
+      return
+    }
+
+    setClearing(true)
+    try {
+      const response = await reportedPhotosApi.cleanupReportedPhotos()
+      const summary = [
+        `✅ Deleted ${response.deleted_records} record(s)`,
+        response.warnings && response.warnings.length > 0
+          ? `ℹ️ ${response.warnings.join('; ')}`
+          : '',
+        response.errors.length > 0 ? `⚠️ ${response.errors.join('; ')}` : '',
+      ]
+        .filter(Boolean)
+        .join('\n')
+
+      alert(summary || 'Cleanup complete.')
+
+      if (response.errors.length > 0) {
+        console.error('Cleanup errors:', response.errors)
+      }
+      if (response.warnings && response.warnings.length > 0) {
+        console.info('Cleanup warnings:', response.warnings)
+      }
+
+      await loadReportedPhotos()
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.detail || err.message || 'Failed to cleanup reported photos'
+      alert(`Error: ${errorMessage}`)
+      console.error('Error clearing reported photos:', err)
+    } finally {
+      setClearing(false)
+    }
+  }
+
  return (
    <div>
      <div className="bg-white rounded-lg shadow p-6">
@@ -179,32 +232,47 @@ export default function ReportedPhotos() {

        {!loading && !error && (
          <>
-            <div className="mb-4 flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className="text-sm text-gray-600">
-                  Total reported photos: <span className="font-semibold">{reportedPhotos.length}</span>
+            <div className="mb-4 flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="text-sm text-gray-600">
+                    Total reported photos:{' '}
+                    <span className="font-semibold">{reportedPhotos.length}</span>
+                  </div>
+                  <select
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value)}
+                    className="px-3 py-1 border border-gray-300 rounded-md text-sm"
+                  >
+                    <option value="">All Status</option>
+                    <option value="pending">Pending</option>
+                    <option value="reviewed">Reviewed</option>
+                    <option value="dismissed">Dismissed</option>
+                  </select>
                </div>
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="px-3 py-1 border border-gray-300 rounded-md text-sm"
+                <button
+                  onClick={handleSubmit}
+                  disabled={
+                    submitting ||
+                    Object.values(decisions).filter((d) => d !== null).length === 0
+                  }
+                  className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
                >
-                  <option value="">All Status</option>
-                  <option value="pending">Pending</option>
-                  <option value="reviewed">Reviewed</option>
-                  <option value="dismissed">Dismissed</option>
-                </select>
+                  {submitting ? 'Submitting...' : 'Submit Decisions'}
+                </button>
+              </div>
+              <div className="flex flex-wrap items-center gap-3">
+                <button
+                  onClick={handleClearDatabase}
+                  disabled={clearing}
+                  className="px-3 py-1.5 text-sm bg-red-100 text-red-700 rounded-md hover:bg-red-200 disabled:bg-gray-200 disabled:text-gray-500 disabled:cursor-not-allowed font-medium"
+                >
+                  {clearing ? 'Clearing...' : '🗑️ Clear Database'}
+                </button>
+                <span className="text-sm text-gray-700">
+                  Clear kept/removed records
+                </span>
              </div>
-              <button
-                onClick={handleSubmit}
-                disabled={
-                  submitting ||
-                  Object.values(decisions).filter((d) => d !== null).length === 0
-                }
-                className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed font-medium"
-              >
-                {submitting ? 'Submitting...' : 'Submit Decisions'}
-              </button>
            </div>

            {reportedPhotos.length === 0 ? (
@@ -225,6 +293,9 @@ export default function ReportedPhotos() {
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Reported At
                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Report Comment
+                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                      </th>
@@ -299,6 +370,15 @@ export default function ReportedPhotos() {
                              {formatDate(reported.reported_at)}
                            </div>
                          </td>
+                        <td className="px-6 py-4">
+                          {reported.report_comment ? (
+                            <div className="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-2 rounded border border-gray-200">
+                              {reported.report_comment}
+                            </div>
+                          ) : (
+                            <span className="text-sm text-gray-400 italic">-</span>
+                          )}
+                        </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span
                              className={`px-2 py-1 text-xs font-semibold rounded-full ${
@@ -317,8 +397,8 @@ export default function ReportedPhotos() {
                              <div className="flex items-center gap-4">
                                <label className="flex items-center gap-2 cursor-pointer">
                                  <input
-                                    type="radio"
-                                    name={`decision-${reported.id}`}
+                                    type="checkbox"
+                                    name={`decision-${reported.id}-keep`}
                                    value="keep"
                                    checked={decisions[reported.id] === 'keep'}
                                    onChange={() => handleDecisionChange(reported.id, 'keep')}
@@ -328,8 +408,8 @@ export default function ReportedPhotos() {
                                </label>
                                <label className="flex items-center gap-2 cursor-pointer">
                                  <input
-                                    type="radio"
-                                    name={`decision-${reported.id}`}
+                                    type="checkbox"
+                                    name={`decision-${reported.id}-remove`}
                                    value="remove"
                                    checked={decisions[reported.id] === 'remove'}
                                    onChange={() => handleDecisionChange(reported.id, 'remove')}