fix(explorer): resolve notion sync, add debug logging, and fix UI display for industries v0.6.1
This commit is contained in:
@@ -10,49 +10,81 @@ interface RoboticsSettingsProps {
|
||||
}
|
||||
|
||||
export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
|
||||
const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>('robotics')
|
||||
const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>(
|
||||
localStorage.getItem('roboticsSettingsActiveTab') as 'robotics' | 'industries' | 'roles' || 'robotics'
|
||||
)
|
||||
|
||||
// Data States
|
||||
const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
|
||||
const [industries, setIndustries] = useState<any[]>([])
|
||||
const [jobRoles, setJobRoles] = useState<any[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const fetchRobotics = async () => {
|
||||
try { const res = await axios.get(`${apiBase}/robotics/categories`); setRoboticsCategories(res.data) } catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
const fetchIndustries = async () => {
|
||||
try { const res = await axios.get(`${apiBase}/industries`); setIndustries(res.data) } catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
const fetchJobRoles = async () => {
|
||||
try { const res = await axios.get(`${apiBase}/job_roles`); setJobRoles(res.data) } catch (e) { console.error(e) }
|
||||
}
|
||||
const fetchAllData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [resRobotics, resIndustries, resJobRoles] = await Promise.all([
|
||||
axios.get(`${apiBase}/robotics/categories`),
|
||||
axios.get(`${apiBase}/industries`),
|
||||
axios.get(`${apiBase}/job_roles`),
|
||||
]);
|
||||
setRoboticsCategories(resRobotics.data);
|
||||
setIndustries(resIndustries.data);
|
||||
setJobRoles(resJobRoles.data);
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch settings data:", e);
|
||||
alert("Fehler beim Laden der Settings. Siehe Konsole.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchRobotics()
|
||||
fetchIndustries()
|
||||
fetchJobRoles()
|
||||
fetchAllData();
|
||||
}
|
||||
}, [isOpen])
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('roboticsSettingsActiveTab', activeTab);
|
||||
}, [activeTab]);
|
||||
|
||||
|
||||
// Robotics Handlers
|
||||
const handleUpdateRobotics = async (id: number, description: string, reasoning: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning })
|
||||
fetchRobotics()
|
||||
} catch (e) { alert("Update failed") }
|
||||
await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning });
|
||||
fetchAllData();
|
||||
} catch (e) {
|
||||
alert("Update failed");
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Industry Handlers Removed (Notion SSoT)
|
||||
|
||||
// Job Role Handlers
|
||||
const handleAddJobRole = async () => {
|
||||
try { await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); fetchJobRoles() } catch (e) { alert("Failed") }
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" });
|
||||
fetchAllData();
|
||||
} catch (e) {
|
||||
alert("Failed to add job role");
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
const handleDeleteJobRole = async (id: number) => {
|
||||
try { await axios.delete(`${apiBase}/job_roles/${id}`); fetchJobRoles() } catch (e) { alert("Failed") }
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await axios.delete(`${apiBase}/job_roles/${id}`);
|
||||
fetchAllData();
|
||||
} catch (e) {
|
||||
alert("Failed to delete job role");
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
@@ -96,42 +128,29 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6 bg-white dark:bg-slate-900">
|
||||
|
||||
{/* ROBOTICS TAB */}
|
||||
{activeTab === 'robotics' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{roboticsCategories.map(cat => (
|
||||
<CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} />
|
||||
))}
|
||||
{isLoading && <div className="text-center py-12 text-slate-500">Loading...</div>}
|
||||
|
||||
{!isLoading && activeTab === 'robotics' && (
|
||||
<div key="robotics-content" className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{roboticsCategories.map(cat => ( <CategoryCard key={cat.id} category={cat} onSave={handleUpdateRobotics} /> ))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* INDUSTRIES TAB */}
|
||||
{activeTab === 'industries' && (
|
||||
<div className="space-y-4">
|
||||
{!isLoading && activeTab === 'industries' && (
|
||||
<div key="industries-content" className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Industry Verticals (Synced from Notion)</h3>
|
||||
{/* Notion SSoT: Creation disabled here
|
||||
<button onClick={handleAddIndustry} 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">
|
||||
<Plus className="h-3 w-3" /> ADD NEW
|
||||
</button>
|
||||
*/}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{industries.map(ind => (
|
||||
<div key={ind.id} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg p-4 flex flex-col gap-3 group relative overflow-hidden">
|
||||
{/* Sync Indicator */}
|
||||
{ind.notion_id && (
|
||||
<div className="absolute top-0 right-0 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-[9px] font-bold px-2 py-0.5 rounded-bl">
|
||||
SYNCED
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-[9px] font-bold px-2 py-0.5 rounded-bl">SYNCED</div>
|
||||
)}
|
||||
|
||||
{/* Top Row: Name, Status, Group */}
|
||||
<div className="flex gap-4 items-start pr-12">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-bold text-slate-900 dark:text-white text-sm">{ind.name}</h4>
|
||||
<div className="flex flex-wrap gap-2 mt-1">
|
||||
{ind.industry_group && <span className="text-[10px] bg-slate-200 dark:bg-slate-800 px-1.5 rounded text-slate-600 dark:text-slate-400">{ind.industry_group}</span>}
|
||||
{ind.status_notion && <span className="text-[10px] border border-slate-300 dark:border-slate-700 px-1.5 rounded text-slate-500">{ind.status_notion}</span>}
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,94 +161,36 @@ export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsP
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-xs text-slate-600 dark:text-slate-300 italic whitespace-pre-wrap">{ind.description || "No definition"}</p>
|
||||
|
||||
{/* Metrics Grid */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10px] bg-white dark:bg-slate-900 p-2 rounded border border-slate-200 dark:border-slate-800">
|
||||
<div>
|
||||
<span className="block text-slate-400 font-bold uppercase">Whale ></span>
|
||||
<span className="text-slate-700 dark:text-slate-200">{ind.whale_threshold || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-slate-400 font-bold uppercase">Min Req</span>
|
||||
<span className="text-slate-700 dark:text-slate-200">{ind.min_requirement || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-slate-400 font-bold uppercase">Unit</span>
|
||||
<span className="text-slate-700 dark:text-slate-200 truncate">{ind.core_unit || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-slate-400 font-bold uppercase">Product</span>
|
||||
<span className="text-slate-700 dark:text-slate-200 truncate">
|
||||
{roboticsCategories.find(c => c.id === ind.primary_category_id)?.name || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div><span className="block text-slate-400 font-bold uppercase">Whale ></span><span className="text-slate-700 dark:text-slate-200">{ind.whale_threshold || "-"}</span></div>
|
||||
<div><span className="block text-slate-400 font-bold uppercase">Min Req</span><span className="text-slate-700 dark:text-slate-200">{ind.min_requirement || "-"}</span></div>
|
||||
<div><span className="block text-slate-400 font-bold uppercase">Unit</span><span className="text-slate-700 dark:text-slate-200 truncate">{ind.scraper_search_term || "-"}</span></div>
|
||||
<div><span className="block text-slate-400 font-bold uppercase">Product</span><span className="text-slate-700 dark:text-slate-200 truncate">{roboticsCategories.find(c => c.id === ind.primary_category_id)?.name || "-"}</span></div>
|
||||
</div>
|
||||
|
||||
{/* Keywords */}
|
||||
{ind.scraper_keywords && (
|
||||
<div className="text-[10px]">
|
||||
<span className="text-slate-400 font-bold uppercase mr-2">Keywords:</span>
|
||||
<span className="text-slate-600 dark:text-slate-400 font-mono">{ind.scraper_keywords}</span>
|
||||
</div>
|
||||
)}
|
||||
{ind.scraper_keywords && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Keywords:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.scraper_keywords}</span></div>}
|
||||
{ind.standardization_logic && <div className="text-[10px]"><span className="text-slate-400 font-bold uppercase mr-2">Standardization:</span><span className="text-slate-600 dark:text-slate-400 font-mono">{ind.standardization_logic}</span></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* JOB ROLES TAB */}
|
||||
{activeTab === 'roles' && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Job Title Mapping Patterns</h3>
|
||||
<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">
|
||||
<Plus className="h-3 w-3" /> ADD PATTERN
|
||||
</button>
|
||||
</div>
|
||||
{!isLoading && activeTab === 'roles' && (
|
||||
<div key="roles-content" className="space-y-4">
|
||||
<div className="flex justify-between items-center"><h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Job Title Mapping Patterns</h3><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"><Plus className="h-3 w-3" /> ADD PATTERN</button></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">Job Title Pattern (Regex/Text)</th>
|
||||
<th className="p-3">Mapped Role</th>
|
||||
<th className="p-3 w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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">Job Title Pattern (Regex/Text)</th><th className="p-3">Mapped Role</th><th className="p-3 w-10"></th></tr></thead>
|
||||
<tbody className="divide-y divide-slate-200 dark:divide-slate-800">
|
||||
{jobRoles.map(role => (
|
||||
<tr key={role.id} className="group">
|
||||
<td className="p-2">
|
||||
<input
|
||||
className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500"
|
||||
defaultValue={role.pattern}
|
||||
// Real-time update would require more state management or blur
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<select
|
||||
className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500"
|
||||
defaultValue={role.role}
|
||||
>
|
||||
<option>Operativer Entscheider</option>
|
||||
<option>Infrastruktur-Verantwortlicher</option>
|
||||
<option>Wirtschaftlicher Entscheider</option>
|
||||
<option>Innovations-Treiber</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="p-2 text-center">
|
||||
<button onClick={() => handleDeleteJobRole(role.id)} className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
<td className="p-2"><input className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.pattern} /></td>
|
||||
<td className="p-2"><select className="w-full bg-transparent border border-transparent hover:border-slate-300 dark:hover:border-slate-700 rounded px-2 py-1 text-slate-900 dark:text-slate-200 outline-none focus:border-blue-500" defaultValue={role.role}><option>Operativer Entscheider</option><option>Infrastruktur-Verantwortlicher</option><option>Wirtschaftlicher Entscheider</option><option>Innovations-Treiber</option></select></td>
|
||||
<td className="p-2 text-center"><button onClick={() => handleDeleteJobRole(role.id)} className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 className="h-4 w-4" /></button></td>
|
||||
</tr>
|
||||
))}
|
||||
{jobRoles.length === 0 && (
|
||||
<tr><td colSpan={3} className="p-8 text-center text-slate-500 italic">No patterns defined yet.</td></tr>
|
||||
)}
|
||||
{jobRoles.length === 0 && (<tr><td colSpan={3} className="p-8 text-center text-slate-500 italic">No patterns defined yet.</td></tr>)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -246,45 +207,17 @@ function CategoryCard({ category, onSave }: { category: any, onSave: any }) {
|
||||
const [guide, setGuide] = useState(category.reasoning_guide)
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsDirty(desc !== category.description || guide !== category.reasoning_guide)
|
||||
}, [desc, guide])
|
||||
useEffect(() => { setIsDirty(desc !== category.description || guide !== category.reasoning_guide) }, [desc, guide])
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 rounded-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded">
|
||||
<Tag className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="p-1.5 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded"><Tag className="h-4 w-4" /></div>
|
||||
<span className="font-bold text-slate-900 dark:text-white uppercase tracking-tight text-sm">{category.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-bold text-slate-500">Definition for LLM</label>
|
||||
<textarea
|
||||
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 h-20"
|
||||
value={desc}
|
||||
onChange={e => setDesc(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-bold text-slate-500">Reasoning Guide (Scoring)</label>
|
||||
<textarea
|
||||
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 h-20"
|
||||
value={guide}
|
||||
onChange={e => setGuide(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isDirty && (
|
||||
<button
|
||||
onClick={() => onSave(category.id, desc, guide)}
|
||||
className="mt-2 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold py-1.5 rounded transition-all animate-in fade-in flex items-center justify-center gap-1"
|
||||
>
|
||||
<Save className="h-3 w-3" /> SAVE CHANGES
|
||||
</button>
|
||||
)}
|
||||
<div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Definition for LLM</label><textarea 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 h-20" value={desc} onChange={e => setDesc(e.target.value)} /></div>
|
||||
<div className="space-y-1"><label className="text-[10px] uppercase font-bold text-slate-500">Reasoning Guide (Scoring)</label><textarea 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 h-20" value={guide} onChange={e => setGuide(e.target.value)} /></div>
|
||||
{isDirty && (<button onClick={() => onSave(category.id, desc, guide)} className="mt-2 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-bold py-1.5 rounded transition-all animate-in fade-in flex items-center justify-center gap-1"><Save className="h-3 w-3" /> SAVE CHANGES</button>)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user