feat(ce): upgrade to v0.5.0 with contacts management, advanced settings and ui modernization
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import { X, Save, Settings, Loader2 } from 'lucide-react'
|
||||
import { X, Bot, Tag, Target, Users, Plus, Trash2, Save } from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
interface RoboticsSettingsProps {
|
||||
isOpen: boolean
|
||||
@@ -8,127 +9,268 @@ interface RoboticsSettingsProps {
|
||||
apiBase: string
|
||||
}
|
||||
|
||||
type Category = {
|
||||
id: number
|
||||
key: string
|
||||
name: string
|
||||
description: string
|
||||
reasoning_guide: string
|
||||
}
|
||||
|
||||
export function RoboticsSettings({ isOpen, onClose, apiBase }: RoboticsSettingsProps) {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [savingId, setSavingId] = useState<number | null>(null)
|
||||
const [activeTab, setActiveTab] = useState<'robotics' | 'industries' | 'roles'>('robotics')
|
||||
|
||||
// Data States
|
||||
const [roboticsCategories, setRoboticsCategories] = useState<any[]>([])
|
||||
const [industries, setIndustries] = useState<any[]>([])
|
||||
const [jobRoles, setJobRoles] = useState<any[]>([])
|
||||
|
||||
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) }
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setLoading(true)
|
||||
axios.get(`${apiBase}/robotics/categories`)
|
||||
.then(res => setCategories(res.data))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
fetchRobotics()
|
||||
fetchIndustries()
|
||||
fetchJobRoles()
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const handleSave = async (cat: Category) => {
|
||||
setSavingId(cat.id)
|
||||
try {
|
||||
await axios.put(`${apiBase}/robotics/categories/${cat.id}`, {
|
||||
description: cat.description,
|
||||
reasoning_guide: cat.reasoning_guide
|
||||
})
|
||||
// Success indicator?
|
||||
} catch (e) {
|
||||
alert("Failed to save settings")
|
||||
} finally {
|
||||
setSavingId(null)
|
||||
}
|
||||
// Robotics Handlers
|
||||
const handleUpdateRobotics = async (id: number, description: string, reasoning: string) => {
|
||||
try {
|
||||
await axios.put(`${apiBase}/robotics/categories/${id}`, { description, reasoning_guide: reasoning })
|
||||
fetchRobotics()
|
||||
} catch (e) { alert("Update failed") }
|
||||
}
|
||||
|
||||
const handleChange = (id: number, field: keyof Category, value: string) => {
|
||||
setCategories(prev => prev.map(c =>
|
||||
c.id === id ? { ...c, [field]: value } : c
|
||||
))
|
||||
// Industry Handlers
|
||||
const handleAddIndustry = async () => {
|
||||
try { await axios.post(`${apiBase}/industries`, { name: "New Industry" }); fetchIndustries() } catch (e) { alert("Failed") }
|
||||
}
|
||||
const handleUpdateIndustry = async (id: number, data: any) => {
|
||||
try { await axios.put(`${apiBase}/industries/${id}`, data); fetchIndustries() } catch (e) { alert("Failed") }
|
||||
}
|
||||
const handleDeleteIndustry = async (id: number) => {
|
||||
try { await axios.delete(`${apiBase}/industries/${id}`); fetchIndustries() } catch (e) { alert("Failed") }
|
||||
}
|
||||
|
||||
// Job Role Handlers
|
||||
const handleAddJobRole = async () => {
|
||||
try { await axios.post(`${apiBase}/job_roles`, { pattern: "New Pattern", role: "Operativer Entscheider" }); fetchJobRoles() } catch (e) { alert("Failed") }
|
||||
}
|
||||
const handleDeleteJobRole = async (id: number) => {
|
||||
try { await axios.delete(`${apiBase}/job_roles/${id}`); fetchJobRoles() } catch (e) { alert("Failed") }
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col">
|
||||
<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">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-800 flex justify-between items-center bg-slate-950/50 rounded-t-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-600/20 rounded-lg text-blue-400">
|
||||
<Settings className="h-6 w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">Robotics Logic Configuration</h2>
|
||||
<p className="text-sm text-slate-400">Define how the AI assesses potential for each category.</p>
|
||||
</div>
|
||||
<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>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Settings & Classification Logic</h2>
|
||||
<p className="text-sm text-slate-500">Define how AI evaluates leads and matches roles.</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500">
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Nav */}
|
||||
<div className="flex border-b border-slate-200 dark:border-slate-800 px-6 bg-white dark:bg-slate-900 overflow-x-auto">
|
||||
{[
|
||||
{ id: 'robotics', label: 'Robotics Potential', icon: Bot },
|
||||
{ id: 'industries', label: 'Industry Focus', icon: Target },
|
||||
{ id: 'roles', label: 'Job Role Mapping', icon: Users },
|
||||
].map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setActiveTab(t.id as any)}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-all whitespace-nowrap",
|
||||
activeTab === t.id
|
||||
? "border-blue-500 text-blue-600 dark:text-blue-400"
|
||||
: "border-transparent text-slate-500 hover:text-slate-800 dark:hover:text-slate-300"
|
||||
)}
|
||||
>
|
||||
<t.icon className="h-4 w-4" /> {t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20 text-slate-500">
|
||||
<Loader2 className="h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{categories.map(cat => (
|
||||
<div key={cat.id} className="bg-slate-800/30 border border-slate-700/50 rounded-lg p-5">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-lg font-bold text-white flex items-center gap-2">
|
||||
<span className="capitalize">{cat.name}</span>
|
||||
<span className="text-xs font-mono text-slate-500 bg-slate-900 px-1.5 py-0.5 rounded border border-slate-800">{cat.key}</span>
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => handleSave(cat)}
|
||||
disabled={savingId === cat.id}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white text-xs font-bold rounded transition-colors"
|
||||
>
|
||||
{savingId === cat.id ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
|
||||
SAVE
|
||||
</button>
|
||||
</div>
|
||||
<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} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Definition (When to trigger?)</label>
|
||||
<textarea
|
||||
value={cat.description}
|
||||
onChange={(e) => handleChange(cat.id, 'description', e.target.value)}
|
||||
className="w-full h-32 bg-slate-950 border border-slate-700 rounded p-3 text-sm text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none resize-none font-mono leading-relaxed"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">
|
||||
Instructions for the AI on what business models or assets imply this need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Scoring Guide (High/Med/Low)</label>
|
||||
<textarea
|
||||
value={cat.reasoning_guide}
|
||||
onChange={(e) => handleChange(cat.id, 'reasoning_guide', e.target.value)}
|
||||
className="w-full h-32 bg-slate-950 border border-slate-700 rounded p-3 text-sm text-slate-200 focus:ring-1 focus:ring-blue-500 outline-none resize-none font-mono leading-relaxed"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500">
|
||||
Explicit examples for scoring logic to ensure consistency.
|
||||
</p>
|
||||
</div>
|
||||
{/* INDUSTRIES TAB */}
|
||||
{activeTab === 'industries' && (
|
||||
<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">Industry Verticals</h3>
|
||||
<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>
|
||||
))}
|
||||
</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 gap-4 items-start group">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="bg-transparent border-b border-transparent focus:border-blue-500 outline-none font-bold text-slate-900 dark:text-white text-sm w-full"
|
||||
defaultValue={ind.name}
|
||||
onBlur={(e) => handleUpdateIndustry(ind.id, { name: e.target.value })}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={ind.is_focus}
|
||||
onChange={(e) => handleUpdateIndustry(ind.id, { is_focus: e.target.checked })}
|
||||
className="rounded border-slate-300 dark:border-slate-700"
|
||||
/>
|
||||
<span className="text-xs text-slate-500">Focus?</span>
|
||||
</div>
|
||||
</div>
|
||||
<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-600 dark:text-slate-300 focus:ring-1 focus:ring-blue-500 outline-none h-16 resize-none"
|
||||
defaultValue={ind.description}
|
||||
placeholder="Description / Abgrenzung..."
|
||||
onBlur={(e) => handleUpdateIndustry(ind.id, { description: e.target.value })}
|
||||
/>
|
||||
<select
|
||||
className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-1.5 text-xs text-slate-600 dark:text-slate-300 outline-none"
|
||||
value={ind.primary_category_id || ""}
|
||||
onChange={(e) => handleUpdateIndustry(ind.id, { primary_category_id: e.target.value ? parseInt(e.target.value) : null })}
|
||||
>
|
||||
<option value="">-- No Primary Product --</option>
|
||||
{roboticsCategories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<button onClick={() => handleDeleteIndustry(ind.id)} className="p-2 text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CategoryCard({ category, onSave }: { category: any, onSave: any }) {
|
||||
const [desc, setDesc] = useState(category.description)
|
||||
const [guide, setGuide] = useState(category.reasoning_guide)
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
|
||||
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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user