feat(reporting): Implement 'Report Mistake' feature with API and UI [2f388f42]

company-explorer/backend/app.py

@@ -17,7 +17,7 @@ setup_logging()
 import logging
 logger = logging.getLogger(__name__)
 
-from .database import init_db, get_db, Company, Signal, EnrichmentData, RoboticsCategory, Contact, Industry, JobRoleMapping
+from .database import init_db, get_db, Company, Signal, EnrichmentData, RoboticsCategory, Contact, Industry, JobRoleMapping, ReportedMistake
 from .services.deduplication import Deduplicator
 from .services.discovery import DiscoveryService
 from .services.scraping import ScraperService
@@ -61,6 +61,14 @@ class AnalysisRequest(BaseModel):
 class IndustryUpdateModel(BaseModel):
     industry_ai: str
 
+class ReportMistakeRequest(BaseModel):
+    field_name: str
+    wrong_value: Optional[str] = None
+    corrected_value: Optional[str] = None
+    source_url: Optional[str] = None
+    quote: Optional[str] = None
+    user_comment: Optional[str] = None
+
 # --- Events ---
 @app.on_event("startup")
 def on_startup():
@@ -240,6 +248,47 @@ def list_industries(db: Session = Depends(get_db)):
 def list_job_roles(db: Session = Depends(get_db)):
     return db.query(JobRoleMapping).order_by(JobRoleMapping.pattern.asc()).all()
 
+@app.get("/api/mistakes")
+def list_reported_mistakes(
+    status: Optional[str] = Query(None),
+    skip: int = 0,
+    limit: int = 50,
+    db: Session = Depends(get_db)
+):
+    query = db.query(ReportedMistake).options(joinedload(ReportedMistake.company))
+    
+    if status:
+        query = query.filter(ReportedMistake.status == status.upper())
+    
+    total = query.count()
+    items = query.order_by(ReportedMistake.created_at.desc()).offset(skip).limit(limit).all()
+    
+    return {"total": total, "items": items}
+
+class MistakeUpdateStatusRequest(BaseModel):
+    status: str # PENDING, APPROVED, REJECTED
+
+@app.put("/api/mistakes/{mistake_id}")
+def update_reported_mistake_status(
+    mistake_id: int, 
+    request: MistakeUpdateStatusRequest, 
+    db: Session = Depends(get_db)
+):
+    mistake = db.query(ReportedMistake).filter(ReportedMistake.id == mistake_id).first()
+    if not mistake:
+        raise HTTPException(404, detail="Reported mistake not found")
+    
+    if request.status.upper() not in ["PENDING", "APPROVED", "REJECTED"]:
+        raise HTTPException(400, detail="Invalid status. Must be PENDING, APPROVED, or REJECTED.")
+        
+    mistake.status = request.status.upper()
+    mistake.updated_at = datetime.utcnow()
+    db.commit()
+    db.refresh(mistake)
+    
+    logger.info(f"Updated status for mistake {mistake_id} to {mistake.status}")
+    return {"status": "success", "mistake": mistake}
+
 @app.post("/api/enrich/discover")
 def discover_company(req: AnalysisRequest, background_tasks: BackgroundTasks, db: Session = Depends(get_db)):
     company = db.query(Company).filter(Company.id == req.company_id).first()
@@ -317,35 +366,115 @@ def override_website(company_id: int, url: str, db: Session = Depends(get_db)):
     return {"status": "updated", "website": company.website}
 
 @app.post("/api/companies/{company_id}/override/impressum")
+
 def override_impressum(company_id: int, url: str, background_tasks: BackgroundTasks, db: Session = Depends(get_db)):
+
     company = db.query(Company).filter(Company.id == company_id).first()
+
     if not company:
+
         raise HTTPException(404, detail="Company not found")
+
     
+
     # Create or update manual impressum lock
+
     existing = db.query(EnrichmentData).filter(
+
         EnrichmentData.company_id == company_id, 
+
         EnrichmentData.source_type == "impressum_override"
+
     ).first()
+
     
+
     if not existing:
+
         db.add(EnrichmentData(
+
             company_id=company_id, 
+
             source_type="impressum_override", 
+
             content={"url": url},
+
             is_locked=True
+
         ))
+
     else:
+
         existing.content = {"url": url}
+
         existing.is_locked = True
+
     
+
     db.commit()
+
     return {"status": "updated"}
 
 
 
+@app.post("/api/companies/{company_id}/report-mistake")
+
+def report_company_mistake(
+
+    company_id: int, 
+
+    request: ReportMistakeRequest, 
+
+    db: Session = Depends(get_db)
+
+):
+
+    company = db.query(Company).filter(Company.id == company_id).first()
+
+    if not company:
+
+        raise HTTPException(404, detail="Company not found")
+
+    
+
+    new_mistake = ReportedMistake(
+
+        company_id=company_id,
+
+        field_name=request.field_name,
+
+        wrong_value=request.wrong_value,
+
+        corrected_value=request.corrected_value,
+
+        source_url=request.source_url,
+
+        quote=request.quote,
+
+        user_comment=request.user_comment
+
+    )
+
+    db.add(new_mistake)
+
+    db.commit()
+
+    db.refresh(new_mistake)
+
+    
+
+    logger.info(f"Reported mistake for company {company_id}: {request.field_name} -> {request.corrected_value}")
+
+    return {"status": "success", "mistake_id": new_mistake.id}
+
+
+
+
+
 def run_wikipedia_reevaluation_task(company_id: int):
+
     from .database import SessionLocal
+
     db = SessionLocal()
     try:
         company = db.query(Company).filter(Company.id == company_id).first()

company-explorer/backend/database.py

@@ -58,6 +58,7 @@ class Company(Base):
     # Relationships
     signals = relationship("Signal", back_populates="company", cascade="all, delete-orphan")
     enrichment_data = relationship("EnrichmentData", back_populates="company", cascade="all, delete-orphan")
+    reported_mistakes = relationship("ReportedMistake", back_populates="company", cascade="all, delete-orphan")
     contacts = relationship("Contact", back_populates="company", cascade="all, delete-orphan")
 
 
@@ -203,6 +204,25 @@ class ImportLog(Base):
     duplicate_rows = Column(Integer)
     created_at = Column(DateTime, default=datetime.utcnow)
 
+
+class ReportedMistake(Base):
+    __tablename__ = "reported_mistakes"
+
+    id = Column(Integer, primary_key=True, index=True)
+    company_id = Column(Integer, ForeignKey("companies.id"), index=True, nullable=False)
+    field_name = Column(String, nullable=False)
+    wrong_value = Column(Text, nullable=True)
+    corrected_value = Column(Text, nullable=True)
+    source_url = Column(String, nullable=True)
+    quote = Column(Text, nullable=True)
+    user_comment = Column(Text, nullable=True)
+    status = Column(String, default="PENDING", nullable=False) # PENDING, APPROVED, REJECTED
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    company = relationship("Company", back_populates="reported_mistakes")
+
+
 # ==============================================================================
 # UTILS
 # ==============================================================================

company-explorer/backend/scripts/migrate_db.py

@@ -69,6 +69,26 @@ def migrate_tables():
                 logger.info(f"Adding column '{col}' to 'companies' table...")
                 cursor.execute(f"ALTER TABLE companies ADD COLUMN {col} {col_type}")
         
+        # 3. Create REPORTED_MISTAKES Table
+        logger.info("Checking 'reported_mistakes' table schema...")
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS reported_mistakes (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                company_id INTEGER NOT NULL,
+                field_name TEXT NOT NULL,
+                wrong_value TEXT,
+                corrected_value TEXT,
+                source_url TEXT,
+                quote TEXT,
+                user_comment TEXT,
+                status TEXT NOT NULL DEFAULT 'PENDING',
+                created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+                updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (company_id) REFERENCES companies (id)
+            )
+        """)
+        logger.info("Table 'reported_mistakes' ensured to exist.")
+        
         conn.commit()
         logger.info("All migrations completed successfully.")
 

company-explorer/frontend/src/components/Inspector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import axios from 'axios'
-import { X, ExternalLink, Bot, Briefcase, Calendar, Globe, Users, DollarSign, MapPin, Tag, RefreshCw as RefreshCwIcon, Search as SearchIcon, Pencil, Check, Download, Clock, Lock, Unlock, Calculator, Ruler, Database, Trash2 } from 'lucide-react'
+import { X, ExternalLink, Bot, Briefcase, Calendar, Globe, Users, DollarSign, MapPin, Tag, RefreshCw as RefreshCwIcon, Search as SearchIcon, Pencil, Check, Download, Clock, Lock, Unlock, Calculator, Ruler, Database, Trash2, Flag } from 'lucide-react'
 import clsx from 'clsx'
 import { ContactsManager, Contact } from './ContactsManager'
 
@@ -54,6 +54,15 @@ export function Inspector({ companyId, initialContactId, onClose, apiBase }: Ins
   const [isProcessing, setIsProcessing] = useState(false)
   const [activeTab, setActiveTab] = useState<'overview' | 'contacts'>('overview')
 
+  // NEW: Report Mistake State
+  const [isReportingMistake, setIsReportingMistake] = useState(false)
+  const [reportedFieldName, setReportedFieldName] = useState("")
+  const [reportedWrongValue, setReportedWrongValue] = useState("")
+  const [reportedCorrectedValue, setReportedCorrectedValue] = useState("")
+  const [reportedSourceUrl, setReportedSourceUrl] = useState("")
+  const [reportedQuote, setReportedQuote] = useState("")
+  const [reportedComment, setReportedComment] = useState("")
+
   // Polling Logic
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -297,6 +306,52 @@ export function Inspector({ companyId, initialContactId, onClose, apiBase }: Ins
     }
   }
 
+  // NEW: Interface for reporting mistakes
+  interface ReportedMistakeRequest {
+    field_name: string;
+    wrong_value?: string | null;
+    corrected_value?: string | null;
+    source_url?: string | null;
+    quote?: string | null;
+    user_comment?: string | null;
+  }
+
+  const handleReportMistake = async () => {
+    if (!companyId) return;
+    if (!reportedFieldName) {
+      alert("Field Name is required.");
+      return;
+    }
+
+    setIsProcessing(true);
+    try {
+      const payload: ReportedMistakeRequest = {
+        field_name: reportedFieldName,
+        wrong_value: reportedWrongValue || null,
+        corrected_value: reportedCorrectedValue || null,
+        source_url: reportedSourceUrl || null,
+        quote: reportedQuote || null,
+        user_comment: reportedComment || null,
+      };
+
+      await axios.post(`${apiBase}/companies/${companyId}/report-mistake`, payload);
+      alert("Mistake reported successfully!");
+      setIsReportingMistake(false);
+      // Reset form fields
+      setReportedFieldName("");
+      setReportedWrongValue("");
+      setReportedCorrectedValue("");
+      setReportedSourceUrl("");
+      setReportedQuote("");
+      setReportedComment("");
+    } catch (e) {
+      alert("Failed to report mistake.");
+      console.error(e);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
   const handleAddContact = async (contact: Contact) => {
     if (!companyId) return
     try {
@@ -362,6 +417,13 @@ export function Inspector({ companyId, initialContactId, onClose, apiBase }: Ins
                 >
                   <Download className="h-4 w-4" />
                 </button>
+                <button
+                  onClick={() => setIsReportingMistake(true)}
+                  className="p-1.5 text-slate-500 hover:text-orange-600 dark:hover:text-orange-500 transition-colors"
+                  title="Report a Mistake"
+                >
+                  <Flag className="h-4 w-4" />
+                </button>
                 <button
                   onClick={() => fetchData(true)}
                   className="p-1.5 text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors"
@@ -993,10 +1055,135 @@ export function Inspector({ companyId, initialContactId, onClose, apiBase }: Ins
                 initialContactId={initialContactId}
                 onAddContact={handleAddContact}
                 onEditContact={handleEditContact}
-              />
-            )}              </div>
-        </div>
-      )}
-    </div>
-  )
-}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    )}
+              
+                    {/* Report Mistake Modal */}
+                    {isReportingMistake && (
+                      <div className="fixed inset-0 bg-slate-900/50 dark:bg-slate-950/70 z-[60] flex items-center justify-center p-4 animate-in fade-in">
+                        <div className="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md p-6 space-y-4 animate-in zoom-in-95 ease-out duration-200">
+                          <h3 className="text-lg font-bold text-slate-900 dark:text-white">Report a Data Mistake</h3>
+                                      <p className="text-sm text-slate-600 dark:text-slate-400">Help us improve data quality by reporting incorrect information.</p>
+                          
+                                      <div>
+                                        <label htmlFor="fieldName" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Field to Correct <span className="text-red-500">*</span></label>
+                                        <select
+                                          id="fieldName"
+                                          value={reportedFieldName}
+                                          onChange={e => {
+                                            const selectedField = e.target.value;
+                                            setReportedFieldName(selectedField);
+                                            // Pre-fill the wrong value based on selection
+                                            switch (selectedField) {
+                                              case "Name": setReportedWrongValue(data?.name || ""); break;
+                                              case "Website": setReportedWrongValue(data?.website || ""); break;
+                                              case "AI Industry": setReportedWrongValue(data?.industry_ai || ""); break;
+                                              case "Potential Metric Value": setReportedWrongValue(data?.calculated_metric_value?.toString() || ""); break;
+                                              case "Wikipedia URL": setReportedWrongValue(wiki?.url || ""); break;
+                                              default: setReportedWrongValue("");
+                                            }
+                                          }}
+                                          className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                                        >
+                                          <option value="">-- Select a field --</option>
+                                          <option value="Name">Name</option>
+                                          <option value="Website">Website</option>
+                                          <option value="AI Industry">AI Industry</option>
+                                          <option value="Potential Metric Value">Potential Metric Value</option>
+                                          <option value="Wikipedia URL">Wikipedia URL</option>
+                                          <option value="Other">Other...</option>
+                                        </select>
+                                      </div>
+                                      
+                                      {reportedFieldName === 'Other' && (
+                                        <div>
+                                          <label htmlFor="fieldNameOther" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Other Field Name <span className="text-red-500">*</span></label>
+                                          <input
+                                            type="text"
+                                            id="fieldNameOther"
+                                            onChange={e => setReportedFieldName(e.target.value)}
+                                            className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                                            required
+                                            placeholder="e.g., Impressum City"
+                                          />
+                                        </div>
+                                      )}              
+                          <div>
+                            <label htmlFor="wrongValue" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Currently Displayed Value (Optional)</label>
+                            <input
+                              type="text"
+                              id="wrongValue"
+                              value={reportedWrongValue}
+                              onChange={e => setReportedWrongValue(e.target.value)}
+                              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                            />
+                          </div>
+              
+                          <div>
+                            <label htmlFor="correctedValue" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Corrected Value (Optional)</label>
+                            <input
+                              type="text"
+                              id="correctedValue"
+                              value={reportedCorrectedValue}
+                              onChange={e => setReportedCorrectedValue(e.target.value)}
+                              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                            />
+                          </div>
+              
+                          <div>
+                            <label htmlFor="sourceUrl" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Source URL (e.g., official company page)</label>
+                            <input
+                              type="url"
+                              id="sourceUrl"
+                              value={reportedSourceUrl}
+                              onChange={e => setReportedSourceUrl(e.target.value)}
+                              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                            />
+                          </div>
+              
+                          <div>
+                            <label htmlFor="quote" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Quote from Source (Optional)</label>
+                            <textarea
+                              id="quote"
+                              value={reportedQuote}
+                              onChange={e => setReportedQuote(e.target.value)}
+                              rows={3}
+                              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                            ></textarea>
+                          </div>
+              
+                          <div>
+                            <label htmlFor="comment" className="block text-xs font-medium text-slate-700 dark:text-slate-300">Your Comment (Why do you prefer this information?)</label>
+                            <textarea
+                              id="comment"
+                              value={reportedComment}
+                              onChange={e => setReportedComment(e.target.value)}
+                              rows={3}
+                              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
+                            ></textarea>
+                          </div>
+              
+                          <div className="flex justify-end gap-3 mt-4">
+                            <button
+                              onClick={() => setIsReportingMistake(false)}
+                              className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
+                            >
+                              Cancel
+                            </button>
+                            <button
+                              onClick={handleReportMistake}
+                              disabled={isProcessing || !reportedFieldName}
+                              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                            >
+                              {isProcessing ? "Submitting..." : "Submit Report"}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )
+              }

company-explorer/frontend/src/components/RoboticsSettings.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import axios from 'axios'
-import { X, Bot, Tag, Target, Users, Plus, Trash2, Save } from 'lucide-react'
+import { X, Bot, Tag, Target, Users, Plus, Trash2, Save, Flag, Check, Ban, ExternalLink } from 'lucide-react'
 import clsx from 'clsx'
 
 interface RoboticsSettingsProps {
@@ -9,27 +9,46 @@ interface RoboticsSettingsProps {
   apiBase: string
 }
 
+type ReportedMistake = {
+  id: number;
+  company_id: number;
+  company: { name: string }; // Assuming company name is eagerly loaded
+  field_name: string;
+  wrong_value: string | null;
+  corrected_value: string | null;
+  source_url: string | null;
+  quote: string | null;
+  user_comment: string | null;
+  status: 'PENDING' | 'APPROVED' | 'REJECTED';
+  created_at: string;
+  updated_at: string;
+}
+
 export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
-  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>(
-    localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' || 'robotics'
+  const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles' | 'mistakes'>(
+    localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' | 'mistakes' || 'robotics'
   )
   
   const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
   const [industries, setIndustries] = useState<any[]>([])
   const [jobRoles, setJobRoles] = useState<any[]>([])
+  const [reportedMistakes, setReportedMistakes] = useState<ReportedMistake[]>([])
+  const [currentMistakeStatusFilter, setCurrentMistakeStatusFilter] = useState<string>("PENDING");
   const [isLoading, setIsLoading] = useState(false);
 
   const fetchAllData = async () => {
     setIsLoading(true);
     try {
-      const [resRobotics, resIndustries, resJobRoles] = await Promise.all([
+      const [resRobotics, resIndustries, resJobRoles, resMistakes] = await Promise.all([
         axios.get(`${apiBase}/robotics/categories`),
         axios.get(`${apiBase}/industries`),
         axios.get(`${apiBase}/job_roles`),
+        axios.get(`${apiBase}/mistakes?status=${currentMistakeStatusFilter}`),
       ]);
       setRoboticsCategories(resRobotics.data);
       setIndustries(resIndustries.data);
       setJobRoles(resJobRoles.data);
+      setReportedMistakes(resMistakes.data.items);
     } catch (e) {
       console.error("Failed to fetch settings data:", e);
       alert("Fehler beim Laden der Settings. Siehe Konsole.");
@@ -62,6 +81,19 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
       }
   }
 
+  const handleUpdateMistakeStatus = async (mistakeId: number, newStatus: 'APPROVED' | 'REJECTED') => {
+    setIsLoading(true);
+    try {
+      await axios.put(`${apiBase}/mistakes/${mistakeId}`, { status: newStatus });
+      fetchAllData(); // Refresh all data, including mistakes
+    } catch (e) {
+      alert("Failed to update mistake status");
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleAddJobRole = async () => {
       setIsLoading(true);
       try { 
@@ -109,6 +141,7 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
                  { id: 'robotics', label: 'Robotics Potential', icon: Bot },
                  { id: 'industries', label: 'Industry Focus', icon: Target },
                  { id: 'roles', label: 'Job Role Mapping', icon: Users },
+                 { id: 'mistakes', label: 'Reported Mistakes', icon: Flag },
              ].map(t => (
                  <button 
                     key={t.id}
@@ -190,6 +223,86 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
                   </table>
               </div>
           </div>
+
+          <div key="mistakes-content" className={clsx("space-y-4", { 'hidden': isLoading || activeTab !== 'mistakes' })}>
+              <div className="flex justify-between items-center">
+                  <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Reported Data Mistakes</h3>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-slate-500">Filter:</span>
+                    <select
+                      value={currentMistakeStatusFilter}
+                      onChange={e => setCurrentMistakeStatusFilter(e.target.value)}
+                      className="bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1 text-xs text-slate-900 dark:text-white focus:ring-1 focus:ring-blue-500 outline-none"
+                    >
+                      <option value="PENDING">Pending</option>
+                      <option value="APPROVED">Approved</option>
+                      <option value="REJECTED">Rejected</option>
+                      <option value="ALL">All</option>
+                    </select>
+                  </div>
+              </div>
+              <div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg overflow-hidden">
+                  <table className="w-full text-left text-xs">
+                      <thead className="bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 text-slate-500 font-bold uppercase"><tr>
+                        <th className="p-3">Company</th>
+                        <th className="p-3">Field</th>
+                        <th className="p-3">Wrong Value</th>
+                        <th className="p-3">Corrected Value</th>
+                        <th className="p-3">Source / Quote / Comment</th>
+                        <th className="p-3">Status</th>
+                        <th className="p-3 w-10">Actions</th>
+                      </tr></thead>
+                      <tbody className="divide-y divide-slate-200 dark:divide-slate-800">
+                          {reportedMistakes.length > 0 ? (
+                              reportedMistakes.map(mistake => (
+                                  <tr key={mistake.id} className="group">
+                                      <td className="p-2 font-medium text-slate-900 dark:text-slate-200">{mistake.company.name}</td>
+                                      <td className="p-2 text-slate-700 dark:text-slate-300">{mistake.field_name}</td>
+                                      <td className="p-2 text-red-600 dark:text-red-400">{mistake.wrong_value || '-'}</td>
+                                      <td className="p-2 text-green-600 dark:text-green-400">{mistake.corrected_value || '-'}</td>
+                                      <td className="p-2 text-slate-500">
+                                          {mistake.source_url && <a href={mistake.source_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1 mb-1"><ExternalLink className="h-3 w-3" /> Source</a>}
+                                          {mistake.quote && <p className="italic text-[10px] my-1">"{mistake.quote}"</p>}
+                                          {mistake.user_comment && <p className="text-[10px]">Comment: {mistake.user_comment}</p>}
+                                      </td>
+                                      <td className="p-2">
+                                        <span className={clsx("px-2 py-0.5 rounded-full text-[10px] font-semibold", {
+                                          "bg-yellow-100 text-yellow-700": mistake.status === "PENDING",
+                                          "bg-green-100 text-green-700": mistake.status === "APPROVED",
+                                          "bg-red-100 text-red-700": mistake.status === "REJECTED",
+                                        })}>
+                                          {mistake.status}
+                                        </span>
+                                      </td>
+                                      <td className="p-2 text-center">
+                                        {mistake.status === "PENDING" && (
+                                          <div className="flex gap-1 justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <button
+                                              onClick={() => handleUpdateMistakeStatus(mistake.id, "APPROVED")}
+                                              className="text-green-600 hover:text-green-700"
+                                              title="Approve Mistake"
+                                            >
+                                              <Check className="h-4 w-4" />
+                                            </button>
+                                            <button
+                                              onClick={() => handleUpdateMistakeStatus(mistake.id, "REJECTED")}
+                                              className="text-red-600 hover:text-red-700"
+                                              title="Reject Mistake"
+                                            >
+                                              <Ban className="h-4 w-4" />
+                                            </button>
+                                          </div>
+                                        )}
+                                      </td>
+                                  </tr>
+                              ))
+                          ) : (
+                              <tr><td colSpan={7} className="p-8 text-center text-slate-500 italic">No reported mistakes found.</td></tr>
+                          )}
+                      </tbody>
+                  </table>
+              </div>
+          </div>
         </div>
       </div>
     </div>