Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: Aktualisierung der Dokumentation für Task [2ea88f42]

Browse Source
This commit is contained in:
Floke
2026-03-04 15:14:11 +00:00
parent 6b89c68edc
commit fdca0e5f54
6 changed files with 858 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
company-explorer/frontend/src/components/RoboticsSettings.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState, useMemo } from 'react'
import axios from 'axios'
import { X, Bot, Tag, Target, Users, Plus, Trash2, Save, Flag, Check, Ban, ExternalLink, ChevronDown, Grid } from 'lucide-react'
import { X, Bot, Tag, Target, Users, Plus, Trash2, Save, Flag, Check, Ban, ExternalLink, ChevronDown, Grid, Database, Download, UploadCloud, Play, AlertTriangle, Lightbulb, Sparkles } from 'lucide-react'
import clsx from 'clsx'
import { MarketingMatrixManager } from './MarketingMatrixManager'
@@ -47,9 +47,22 @@ type ReportedMistake = {
updated_at: string;
}
type SuggestionItem = { word: string, count: number };
type RoleSuggestions = Record<string, SuggestionItem[]>;
type OptimizationProposal = {
target_role: string;
regex: string;
explanation: string;
priority: number;
covered_pattern_ids: number[];
covered_titles: string[];
false_positives: string[];
}
export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles' | 'mistakes' | 'matrix'>(
localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' | 'mistakes' | 'matrix' || 'robotics'
const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles' | 'matrix' | 'mistakes' | 'database'>(
localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' | 'matrix' | 'mistakes' | 'database' || 'robotics'
)
const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
@@ -57,11 +70,25 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
const [jobRoles, setJobRoles] = useState<JobRolePatternType[]>([])
const [rawJobTitles, setRawJobTitles] = useState<RawJobTitleType[]>([])
const [reportedMistakes, setReportedMistakes] = useState<ReportedMistake[]>([])
const [suggestions, setSuggestions] = useState<RoleSuggestions>({});
const [optimizationProposals, setOptimizationProposals] = useState<OptimizationProposal[]>([]);
const [showOptimizationModal, setShowOptimizationModal] = useState(false);
const [currentMistakeStatusFilter, setCurrentMistakeStatusFilter] = useState<string>("PENDING");
const [isLoading, setIsLoading] = useState(false);
const [isClassifying, setIsClassifying] = useState(false);
const [isOptimizing, setIsOptimizing] = useState(false);
const [roleSearch, setRoleSearch] = useState("");
// Database & Regex State
const [fileToUpload, setFileToUpload] = useState<File | null>(null);
const [uploadStatus, setUploadStatus] = useState<string>("");
const [testPattern, setTestPattern] = useState("");
const [testPatternType, setTestPatternType] = useState("regex");
const [testString, setTestString] = useState("");
const [testResult, setTestResult] = useState<boolean | null>(null);
const [testError, setTestError] = useState<string | null>(null);
const groupedAndFilteredRoles = useMemo(() => {
const grouped = jobRoles.reduce((acc: Record<string, JobRolePatternType[]>, role) => {
const key = role.role || 'Unassigned';
@@ -91,18 +118,20 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
const fetchAllData = async () => {
setIsLoading(true);
try {
const [resRobotics, resIndustries, resJobRoles, resRawTitles, resMistakes] = await Promise.all([
const [resRobotics, resIndustries, resJobRoles, resRawTitles, resMistakes, resSuggestions] = await Promise.all([
axios.get(`${apiBase}/robotics/categories`),
axios.get(`${apiBase}/industries`),
axios.get(`${apiBase}/job_roles`),
axios.get(`${apiBase}/job_roles/raw?unmapped_only=true`), // Ensure we only get unmapped
axios.get(`${apiBase}/mistakes?status=${currentMistakeStatusFilter}`),
axios.get(`${apiBase}/job_roles/suggestions`),
]);
setRoboticsCategories(resRobotics.data);
setIndustries(resIndustries.data);
setJobRoles(resJobRoles.data);
setRawJobTitles(resRawTitles.data);
setReportedMistakes(resMistakes.data.items);
setSuggestions(resSuggestions.data);
} catch (e) {
console.error("Failed to fetch settings data:", e);
alert("Fehler beim Laden der Settings. Siehe Konsole.");
@@ -171,8 +200,6 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
try {
await axios.post(`${apiBase}/job_roles/classify-batch`);
alert("Batch classification started in the background. The list will update automatically as titles are processed. You can close this window.");
// Optionally, you can poll for completion or just let the user see the number go down on next refresh.
// For now, we just inform the user.
} catch (e) {
alert("Failed to start batch classification.");
console.error(e);
@@ -180,6 +207,74 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
setIsClassifying(false);
}
};
const handleOptimizePatterns = async () => {
setIsOptimizing(true);
setOptimizationProposals([]);
setShowOptimizationModal(true);
try {
// 1. Start Task
await axios.post(`${apiBase}/job_roles/optimize-start`);
// 2. Poll for Status
const pollInterval = 2000; // 2 seconds
const maxAttempts = 150; // 5 minutes
let attempts = 0;
const checkStatus = async () => {
if (attempts >= maxAttempts) {
alert("Optimization timed out. Please check logs.");
setIsOptimizing(false);
return;
}
try {
const res = await axios.get(`${apiBase}/job_roles/optimize-status`);
const status = res.data.state;
if (status === 'completed') {
setOptimizationProposals(res.data.result);
setIsOptimizing(false);
} else if (status === 'error') {
alert(`Optimization failed: ${res.data.error}`);
setIsOptimizing(false);
} else {
attempts++;
setTimeout(checkStatus, pollInterval);
}
} catch (e) {
console.error("Polling error", e);
setIsOptimizing(false);
}
};
setTimeout(checkStatus, 1000);
} catch (e) {
alert("Failed to start optimization.");
console.error(e);
setShowOptimizationModal(false);
setIsOptimizing(false);
}
};
const handleApplyOptimization = async (proposal: OptimizationProposal) => {
try {
await axios.post(`${apiBase}/job_roles/apply-optimization`, {
target_role: proposal.target_role,
regex: proposal.regex,
priority: proposal.priority,
ids_to_delete: proposal.covered_pattern_ids
});
// Remove applied proposal from list
setOptimizationProposals(prev => prev.filter(p => p.regex !== proposal.regex));
fetchAllData(); // Refresh main list
} catch (e) {
alert("Failed to apply optimization.");
console.error(e);
}
};
const handleUpdateJobRole = async (roleId: number, field: string, value: any) => {
const roleToUpdate = jobRoles.find(r => r.id === roleId);
@@ -199,19 +294,17 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
} catch (e) {
alert("Failed to update job role");
console.error(e);
// Revert on failure if needed, but for now just log it
}
};
const handleAddJobRole = async (title?: string) => {
const patternValue = title || "New Pattern";
const handleAddJobRole = async (value: string, type: 'exact' | 'regex' = 'exact', roleName?: string) => {
setIsLoading(true);
try {
await axios.post(`${apiBase}/job_roles`, {
pattern_type: "exact",
pattern_value: patternValue,
role: "Influencer",
priority: 100
pattern_type: type,
pattern_value: value,
role: roleName || "Influencer",
priority: type === 'regex' ? 80 : 100
});
fetchAllData();
} catch (e) {
@@ -238,11 +331,66 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
}
}
const handleDownloadDb = () => {
window.location.href = `${apiBase}/admin/database/download`;
};
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
setFileToUpload(event.target.files[0]);
setUploadStatus("");
}
};
const handleUploadDb = async () => {
if (!fileToUpload) return;
if (!window.confirm("WARNING: This will overwrite the current database! A backup will be created, but any recent changes might be lost. You MUST restart the container afterwards. Continue?")) return;
const formData = new FormData();
formData.append("file", fileToUpload);
setUploadStatus("uploading");
try {
await axios.post(`${apiBase}/admin/database/upload`, formData, {
headers: { "Content-Type": "multipart/form-data" },
});
setUploadStatus("success");
alert("Upload successful! Please RESTART the Docker container to apply changes.");
} catch (e: any) {
console.error(e);
setUploadStatus("error");
alert(`Upload failed: ${e.response?.data?.detail || e.message}`);
}
};
const handleTestPattern = async () => {
setTestResult(null);
setTestError(null);
if (!testPattern || !testString) return;
try {
const res = await axios.post(`${apiBase}/job_roles/test-pattern`, {
pattern: testPattern,
pattern_type: testPatternType,
test_string: testString
});
if (res.data.error) {
setTestError(res.data.error);
} else {
setTestResult(res.data.match);
}
} catch (e: any) {
setTestError(e.message);
}
};
if (!isOpen) return null
return (
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-white dark:bg-slate-900 w-full max-w-4xl max-h-[85vh] rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 flex flex-col overflow-hidden">
<div className="bg-white dark:bg-slate-900 w-full max-w-4xl max-h-[85vh] rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 flex flex-col overflow-hidden relative">
{/* Header */}
<div className="p-6 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center bg-slate-50 dark:bg-slate-950/50">
<div>
@@ -262,6 +410,7 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
{ id: 'roles', label: 'Job Role Mapping', icon: Users },
{ id: 'matrix', label: 'Marketing Matrix', icon: Grid },
{ id: 'mistakes', label: 'Reported Mistakes', icon: Flag },
{ id: 'database', label: 'Database & Regex', icon: Database },
].map(t => (
<button
key={t.id}
@@ -384,7 +533,10 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
className="w-full bg-white dark:bg-slate-950 border border-slate-300 dark:border-slate-700 rounded-md px-3 py-1.5 text-xs text-slate-900 dark:text-white focus:ring-1 focus:ring-blue-500 outline-none"
/>
</div>
<button onClick={() => handleAddJobRole()} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded shadow-lg shadow-blue-500/20"><Plus className="h-3 w-3" /> ADD PATTERN</button>
<button onClick={handleOptimizePatterns} className="flex items-center gap-1 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded shadow-lg shadow-indigo-500/20 mr-2">
<Sparkles className="h-3 w-3" /> OPTIMIZE
</button>
<button onClick={() => handleAddJobRole("New Pattern", "exact", "Influencer")} className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded shadow-lg shadow-blue-500/20"><Plus className="h-3 w-3" /> ADD PATTERN</button>
</div>
<div className="space-y-2">
@@ -397,7 +549,36 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
</div>
<ChevronDown className="h-4 w-4 text-slate-400 transform group-open:rotate-180 transition-transform" />
</summary>
<div className="border-t border-slate-200 dark:border-slate-800">
{/* AI Suggestions Area */}
{suggestions[roleName] && suggestions[roleName].length > 0 && (
<div className="p-3 bg-blue-50/50 dark:bg-blue-900/10 border-b border-slate-100 dark:border-slate-800/50">
<div className="flex items-center gap-2 mb-2 text-[10px] uppercase font-bold text-blue-600 dark:text-blue-400">
<Lightbulb className="h-3 w-3" />
AI Suggestions (Common Keywords)
</div>
<div className="flex flex-wrap gap-2">
{suggestions[roleName].map(s => (
<button
key={s.word}
onClick={() => {
const regex = `(?i).*${s.word}.*`; // Simple starting point
if(window.confirm(`Create Regex pattern "${regex}" for role "${roleName}"?`)) {
handleAddJobRole(regex, 'regex', roleName);
}
}}
className="flex items-center gap-1.5 px-2 py-1 bg-white dark:bg-slate-900 border border-blue-200 dark:border-blue-900 rounded-full text-[10px] text-slate-700 dark:text-slate-300 hover:border-blue-400 hover:text-blue-600 transition-colors"
title={`Found ${s.count} times`}
>
{s.word} <span className="opacity-50 text-[9px]">({s.count})</span>
<Plus className="h-2 w-2 text-blue-400" />
</button>
))}
</div>
</div>
)}
<table className="w-full text-left text-xs">
<thead className="bg-slate-50 dark:bg-slate-900/50 text-slate-500 font-bold uppercase tracking-wider">
<tr>
@@ -455,7 +636,7 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
<tr key={raw.id} className="group hover:bg-white dark:hover:bg-slate-800 transition-colors">
<td className="p-3 font-medium text-slate-600 dark:text-slate-400 italic">{raw.title}</td>
<td className="p-3 text-center"><span className="px-2 py-1 bg-slate-200 dark:bg-slate-800 rounded-full font-bold text-[10px] text-slate-500">{raw.count}x</span></td>
<td className="p-3 text-center"><button onClick={() => handleAddJobRole(raw.title)} className="p-1 text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded transition-all"><Plus className="h-4 w-4" /></button></td>
<td className="p-3 text-center"><button onClick={() => handleAddJobRole(raw.title, "exact", "Influencer")} className="p-1 text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded transition-all"><Plus className="h-4 w-4" /></button></td>
</tr>
))}
{rawJobTitles.length === 0 && (<tr><td colSpan={3} className="p-12 text-center text-slate-400 italic">Discovery inbox is empty. Import raw job titles to see data here.</td></tr>)}
@@ -470,6 +651,7 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
</div>
<div key="mistakes-content" className={clsx("space-y-4", { 'hidden': isLoading || activeTab !== 'mistakes' })}>
{/* ... existing mistakes content ... */}
<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">
@@ -548,7 +730,202 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
</table>
</div>
</div>
<div key="database-content" className={clsx("space-y-6", { 'hidden': isLoading || activeTab !== 'database' })}>
{/* Regex Tester */}
<div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-4 space-y-4">
<div>
<h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 flex items-center gap-2"><Bot className="h-4 w-4" /> Regex Tester</h3>
<p className="text-xs text-slate-500">Validate your patterns before adding them to the database.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-[10px] uppercase font-bold text-slate-500">Pattern</label>
<div className="flex gap-2">
<select
value={testPatternType}
onChange={e => setTestPatternType(e.target.value)}
className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded text-xs px-2 focus:ring-1 focus:ring-blue-500 outline-none"
>
<option value="regex">Regex</option>
<option value="exact">Exact</option>
<option value="startswith">Starts With</option>
</select>
<input
type="text"
value={testPattern}
onChange={e => setTestPattern(e.target.value)}
placeholder="e.g. (leiter|head).{0,15}vertrieb"
className="flex-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs font-mono text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none"
/>
</div>
</div>
<div className="space-y-2">
<label className="text-[10px] uppercase font-bold text-slate-500">Test String (Job Title)</label>
<input
type="text"
value={testString}
onChange={e => setTestString(e.target.value)}
placeholder="e.g. Leiter Vertrieb und Marketing"
className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-xs text-slate-800 dark:text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none"
/>
</div>
</div>
<div className="flex justify-between items-center pt-2">
<div className="flex items-center gap-2">
<button onClick={handleTestPattern} className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded shadow-lg shadow-blue-500/20">
<Play className="h-3 w-3" /> TEST PATTERN
</button>
{testResult !== null && (
<span className={clsx("px-3 py-1.5 rounded text-xs font-bold flex items-center gap-1", testResult ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700")}>
{testResult ? <Check className="h-3 w-3" /> : <Ban className="h-3 w-3" />}
{testResult ? "MATCH" : "NO MATCH"}
</span>
)}
{testError && <span className="text-xs text-red-500 font-mono">{testError}</span>}
</div>
</div>
</div>
{/* Database Management */}
<div className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-4 space-y-4">
<div>
<h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 flex items-center gap-2"><Database className="h-4 w-4" /> Database Management</h3>
<p className="text-xs text-slate-500">Download the full database for offline analysis or restore a backup.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
{/* Download */}
<div className="space-y-3">
<h4 className="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase">Export</h4>
<button onClick={handleDownloadDb} className="w-full flex items-center justify-center gap-2 px-4 py-8 bg-white dark:bg-slate-900 border-2 border-dashed border-slate-300 dark:border-slate-700 hover:border-blue-500 hover:text-blue-500 dark:hover:border-blue-400 dark:hover:text-blue-400 rounded-xl text-slate-500 transition-all group">
<Download className="h-6 w-6 group-hover:scale-110 transition-transform" />
<span className="font-semibold text-sm">Download Database (SQLite)</span>
</button>
</div>
{/* Upload */}
<div className="space-y-3">
<h4 className="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase">Restore / Import</h4>
<div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-4 space-y-3">
<div className="flex items-center gap-2 text-amber-600 bg-amber-50 dark:bg-amber-900/20 p-2 rounded text-[10px]">
<AlertTriangle className="h-4 w-4 flex-shrink-0" />
<span>Warning: Uploading will overwrite the current database. A backup will be created automatically.</span>
</div>
<input
type="file"
onChange={handleFileSelect}
className="block w-full text-xs text-slate-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-xs file:font-semibold
file:bg-blue-50 file:text-blue-700
hover:file:bg-blue-100
"
/>
<button
onClick={handleUploadDb}
disabled={!fileToUpload || uploadStatus === 'uploading'}
className={clsx(
"w-full flex items-center justify-center gap-2 px-4 py-2 text-white text-xs font-bold rounded transition-all",
!fileToUpload ? "bg-slate-300 dark:bg-slate-800 cursor-not-allowed" : "bg-red-600 hover:bg-red-500 shadow-lg shadow-red-500/20"
)}
>
{uploadStatus === 'uploading' ? (
<span className="animate-pulse">Uploading...</span>
) : (
<>
<UploadCloud className="h-3 w-3" /> UPLOAD & REPLACE DB
</>
)}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Optimization Modal */}
{showOptimizationModal && (
<div className="absolute inset-0 z-[70] bg-white dark:bg-slate-900 p-6 overflow-y-auto">
<div className="max-w-3xl mx-auto space-y-6">
<div className="flex justify-between items-center pb-4 border-b border-slate-200 dark:border-slate-800">
<div>
<h2 className="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2"><Sparkles className="h-5 w-5 text-indigo-500" /> Pattern Optimization Proposals</h2>
<p className="text-xs text-slate-500 mt-1">AI-generated Regex suggestions to consolidate exact matches.</p>
</div>
<button onClick={() => setShowOptimizationModal(false)} className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full"><X className="h-5 w-5 text-slate-500" /></button>
</div>
{isOptimizing ? (
<div className="py-20 text-center space-y-4">
<div className="animate-spin h-8 w-8 border-4 border-indigo-500 border-t-transparent rounded-full mx-auto"></div>
<p className="text-sm text-slate-500 font-medium">Analyzing patterns & checking for conflicts...</p>
</div>
) : optimizationProposals.length === 0 ? (
<div className="py-20 text-center text-slate-500">
<Check className="h-10 w-10 mx-auto text-green-500 mb-4" />
<p>No optimization opportunities found. Your patterns are already efficient!</p>
</div>
) : (
<div className="space-y-6">
{optimizationProposals.map((prop, idx) => (
<div key={idx} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm">
<div className="flex justify-between items-start mb-4">
<div>
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-bold uppercase tracking-wider bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded">{prop.target_role}</span>
<span className="text-[10px] font-bold text-slate-400">Priority: {prop.priority}</span>
</div>
<h3 className="font-mono text-sm font-bold text-slate-800 dark:text-slate-200 bg-white dark:bg-slate-900 px-2 py-1 rounded border border-slate-200 dark:border-slate-800 inline-block">{prop.regex}</h3>
</div>
<button onClick={() => handleApplyOptimization(prop)} className="bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold px-4 py-2 rounded shadow-lg shadow-indigo-500/20 transition-all flex items-center gap-2">
APPLY & REPLACE {prop.covered_pattern_ids.length} PATTERNS
</button>
</div>
<p className="text-xs text-slate-600 dark:text-slate-400 mb-4 italic">{prop.explanation}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-green-50/50 dark:bg-green-900/10 border border-green-100 dark:border-green-900/30 rounded p-3">
<div className="text-[10px] font-bold uppercase text-green-600 mb-2 flex items-center gap-1"><Check className="h-3 w-3" /> Covers ({prop.covered_titles.length})</div>
<div className="flex flex-wrap gap-1.5">
{prop.covered_titles.map(t => (
<span key={t} className="text-[9px] px-1.5 py-0.5 bg-white dark:bg-slate-900 rounded border border-green-200 dark:border-green-800 text-slate-600 dark:text-slate-300">{t}</span>
))}
</div>
</div>
{prop.false_positives.length > 0 ? (
<div className="bg-red-50/50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30 rounded p-3">
<div className="text-[10px] font-bold uppercase text-red-600 mb-2 flex items-center gap-1"><AlertTriangle className="h-3 w-3" /> Conflicts (Matches other roles!)</div>
<div className="flex flex-wrap gap-1.5">
{prop.false_positives.map(t => (
<span key={t} className="text-[9px] px-1.5 py-0.5 bg-white dark:bg-slate-900 rounded border border-red-200 dark:border-red-800 text-slate-600 dark:text-slate-300">{t}</span>
))}
</div>
</div>
) : (
<div className="flex items-center justify-center text-[10px] text-slate-400 italic bg-slate-100 dark:bg-slate-900 rounded border border-dashed border-slate-200 dark:border-slate-800">
No conflicts with other roles detected.
</div>
)}
</div>
</div>
))}
</div>
)}
</div>
</div>
)}
</div>
</div>
)