|
1
|
import { useState } from "react"; |
|
2
|
import { |
|
3
|
Activity, |
|
4
|
CircuitBoard, |
|
5
|
HelpCircle, |
|
6
|
Sparkles, |
|
7
|
Cpu, |
|
8
|
Layers, |
|
9
|
ChevronRight, |
|
10
|
ShieldAlert, |
|
11
|
Info |
|
12
|
} from "lucide-react"; |
|
13
|
import TroubleshootingFlowchart from "@/components/repair/troubleshooting-flowchart"; |
|
14
|
import PartsIdentification from "@/components/repair/parts-identification"; |
|
15
|
import { Badge } from "@/components/ui/badge"; |
|
16
|
import { cn } from "@/lib/utils"; |
|
17
|
|
|
18
|
interface TechnicianWorkbenchProps { |
|
19
|
deviceType: "all" | "laptop" | "desktop"; |
|
20
|
} |
|
21
|
|
|
22
|
export default function TechnicianWorkbench({ deviceType }: TechnicianWorkbenchProps) { |
|
23
|
const [activeTab, setActiveTab] = useState<"flowchart" | "anatomy">("flowchart"); |
|
24
|
const effectiveDeviceType = deviceType === "all" ? "laptop" : deviceType; |
|
25
|
|
|
26
|
return ( |
|
27
|
<section id="technician-workbench" className="rounded-3xl border border-border/60 bg-card/70 backdrop-blur-xl p-6 sm:p-8 space-y-6 shadow-xs relative overflow-hidden"> |
|
28
|
{/* Background Accent Glow */} |
|
29
|
<div className="absolute top-0 right-1/4 w-96 h-96 bg-gradient-to-bl from-indigo-500/10 via-primary/5 to-transparent rounded-full blur-3xl opacity-40 pointer-events-none -z-0" /> |
|
30
|
|
|
31
|
{/* Workbench Header & Tab Switcher */} |
|
32
|
<div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-border/40 pb-5"> |
|
33
|
<div className="space-y-1"> |
|
34
|
<div className="flex items-center gap-2"> |
|
35
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20 text-[10px] font-bold uppercase tracking-wider"> |
|
36
|
<Activity className="h-3 w-3" /> Interactive Diagnostics Workbench |
|
37
|
</span> |
|
38
|
<Badge variant="outline" className="text-[10px] font-semibold"> |
|
39
|
Live {deviceType} Tools |
|
40
|
</Badge> |
|
41
|
</div> |
|
42
|
<h2 className="text-xl sm:text-2xl font-extrabold tracking-tight"> |
|
43
|
Decision Tree Flowcharts & Component Anatomy |
|
44
|
</h2> |
|
45
|
<p className="text-xs text-muted-foreground"> |
|
46
|
Interactive fault isolation algorithms and verified {deviceType} hardware pinouts & safety specifications. |
|
47
|
</p> |
|
48
|
</div> |
|
49
|
|
|
50
|
{/* Tab Controls */} |
|
51
|
<div className="flex items-center p-1 rounded-2xl bg-muted/60 border border-border/50 self-start md:self-auto shrink-0 shadow-inner"> |
|
52
|
<button |
|
53
|
onClick={() => setActiveTab("flowchart")} |
|
54
|
className={cn( |
|
55
|
"flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer", |
|
56
|
activeTab === "flowchart" |
|
57
|
? "bg-background text-foreground shadow-sm ring-1 ring-border/50" |
|
58
|
: "text-muted-foreground hover:text-foreground" |
|
59
|
)} |
|
60
|
> |
|
61
|
<HelpCircle className="h-3.5 w-3.5 text-indigo-500" /> |
|
62
|
<span>Diagnostic Flowchart</span> |
|
63
|
</button> |
|
64
|
|
|
65
|
<button |
|
66
|
onClick={() => setActiveTab("anatomy")} |
|
67
|
className={cn( |
|
68
|
"flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer", |
|
69
|
activeTab === "anatomy" |
|
70
|
? "bg-background text-foreground shadow-sm ring-1 ring-border/50" |
|
71
|
: "text-muted-foreground hover:text-foreground" |
|
72
|
)} |
|
73
|
> |
|
74
|
<CircuitBoard className="h-3.5 w-3.5 text-emerald-500" /> |
|
75
|
<span>Component Anatomy</span> |
|
76
|
</button> |
|
77
|
</div> |
|
78
|
</div> |
|
79
|
|
|
80
|
{/* Tab Content Container */} |
|
81
|
<div className="relative z-10 pt-2"> |
|
82
|
{activeTab === "flowchart" ? ( |
|
83
|
<div className="space-y-3"> |
|
84
|
<div className="flex items-center justify-between text-xs text-muted-foreground px-1"> |
|
85
|
<span className="font-semibold text-foreground flex items-center gap-1.5"> |
|
86
|
<Sparkles className="h-3.5 w-3.5 text-indigo-500" /> |
|
87
|
Step-by-Step Problem Isolation Engine |
|
88
|
</span> |
|
89
|
<span>Click nodes to follow the diagnostic path</span> |
|
90
|
</div> |
|
91
|
<TroubleshootingFlowchart /> |
|
92
|
</div> |
|
93
|
) : ( |
|
94
|
<div className="space-y-3"> |
|
95
|
<div className="flex items-center justify-between text-xs text-muted-foreground px-1"> |
|
96
|
<span className="font-semibold text-foreground flex items-center gap-1.5"> |
|
97
|
<Cpu className="h-3.5 w-3.5 text-emerald-500" /> |
|
98
|
Hardware Anatomy, Pinouts & Safety Protocols |
|
99
|
</span> |
|
100
|
<span>Select any component for test points and voltage limits</span> |
|
101
|
</div> |
|
102
|
<PartsIdentification deviceType={effectiveDeviceType} /> |
|
103
|
</div> |
|
104
|
)} |
|
105
|
</div> |
|
106
|
</section> |
|
107
|
); |
|
108
|
} |