|
1
|
import { useState } from "react"; |
|
2
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; |
|
3
|
import { Button } from "@/components/ui/button"; |
|
4
|
import { Badge } from "@/components/ui/badge"; |
|
5
|
import { useToast } from "@/hooks/use-toast"; |
|
6
|
import { |
|
7
|
FileText, |
|
8
|
Download, |
|
9
|
CheckCircle2, |
|
10
|
ShieldCheck, |
|
11
|
Printer, |
|
12
|
Copy, |
|
13
|
Check, |
|
14
|
Layers, |
|
15
|
BookOpen, |
|
16
|
Cpu, |
|
17
|
Code, |
|
18
|
Eraser, |
|
19
|
MoveUp, |
|
20
|
AlertTriangle, |
|
21
|
Zap, |
|
22
|
Wrench, |
|
23
|
ChevronRight, |
|
24
|
Sparkles, |
|
25
|
Search, |
|
26
|
SlidersHorizontal, |
|
27
|
Activity, |
|
28
|
Bookmark |
|
29
|
} from "lucide-react"; |
|
30
|
import { cn } from "@/lib/utils"; |
|
31
|
|
|
32
|
export interface ManualChapter { |
|
33
|
id: string; |
|
34
|
chapterNumber: number; |
|
35
|
title: string; |
|
36
|
subtitle: string; |
|
37
|
paragraphs: string[]; |
|
38
|
steps?: { |
|
39
|
stepLabel: string; |
|
40
|
action: string; |
|
41
|
details: string; |
|
42
|
caution?: string; |
|
43
|
verification?: string; |
|
44
|
}[]; |
|
45
|
} |
|
46
|
|
|
47
|
export interface VoltageRailSpec { |
|
48
|
rail: string; |
|
49
|
voltage: string; |
|
50
|
tolerance: string; |
|
51
|
location: string; |
|
52
|
normalImpedance: string; |
|
53
|
description: string; |
|
54
|
} |
|
55
|
|
|
56
|
export interface FastenerTorqueSpec { |
|
57
|
location: string; |
|
58
|
screwType: string; |
|
59
|
size: string; |
|
60
|
torque: string; |
|
61
|
threadLock: string; |
|
62
|
} |
|
63
|
|
|
64
|
export interface TechnicalManual { |
|
65
|
id: string; |
|
66
|
category: "hardware" | "software" | "cleaning" | "upgrades"; |
|
67
|
title: string; |
|
68
|
code: string; |
|
69
|
fileSize: string; |
|
70
|
pages: number; |
|
71
|
author: string; |
|
72
|
lastUpdated: string; |
|
73
|
summary: string; |
|
74
|
keyTopics: string[]; |
|
75
|
safetyDirectives: string[]; |
|
76
|
recommendedTools: string[]; |
|
77
|
chapters?: ManualChapter[]; |
|
78
|
voltageRails?: VoltageRailSpec[]; |
|
79
|
fastenerTorqueTable?: FastenerTorqueSpec[]; |
|
80
|
} |
|
81
|
|
|
82
|
interface ManualDetailModalProps { |
|
83
|
manual: TechnicalManual | null; |
|
84
|
onClose: () => void; |
|
85
|
} |
|
86
|
|
|
87
|
export default function ManualDetailModal({ manual, onClose }: ManualDetailModalProps) { |
|
88
|
const { toast } = useToast(); |
|
89
|
const [copied, setCopied] = useState(false); |
|
90
|
const [activeTab, setActiveTab] = useState<"reader" | "rails" | "torque" | "safety">("reader"); |
|
91
|
const [selectedChapterIndex, setSelectedChapterIndex] = useState(0); |
|
92
|
const [railSearch, setRailSearch] = useState(""); |
|
93
|
|
|
94
|
if (!manual) return null; |
|
95
|
|
|
96
|
const getCategoryTheme = (category: string) => { |
|
97
|
switch (category) { |
|
98
|
case "hardware": |
|
99
|
return { label: "Hardware Manual", icon: Cpu, badge: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20" }; |
|
100
|
case "software": |
|
101
|
return { label: "Software Reference", icon: Code, badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" }; |
|
102
|
case "cleaning": |
|
103
|
return { label: "Maintenance Protocol", icon: Eraser, badge: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20" }; |
|
104
|
case "upgrades": |
|
105
|
return { label: "Upgrade Specification", icon: MoveUp, badge: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20" }; |
|
106
|
default: |
|
107
|
return { label: "Service Manual", icon: FileText, badge: "bg-primary/10 text-primary border-primary/20" }; |
|
108
|
} |
|
109
|
}; |
|
110
|
|
|
111
|
const theme = getCategoryTheme(manual.category); |
|
112
|
const CategoryIcon = theme.icon; |
|
113
|
|
|
114
|
// Fallback enriched chapters if manual doesn't define custom ones |
|
115
|
const chapters: ManualChapter[] = manual.chapters || [ |
|
116
|
{ |
|
117
|
id: "ch-1", |
|
118
|
chapterNumber: 1, |
|
119
|
title: "Architectural Overview & Engineering Specifications", |
|
120
|
subtitle: "System topology, power distribution network (PDN), and component interconnects.", |
|
121
|
paragraphs: [ |
|
122
|
`This technical manual documents start-to-finish engineering standards and bench protocols for ${manual.title} (${manual.code}). All procedures are engineered to preserve multi-layer PCB integrity, prevent ESD latency defects, and adhere to strict OEM assembly tolerances.`, |
|
123
|
"Modern mobile and desktop architectures utilize high-density interconnect (HDI) multilayer printed circuit boards with surface mount components down to 0201 metric sizes. Extreme caution is required when applying mechanical or thermal stress to avoid micro-fracturing BGA solder balls beneath CPU, GPU, and system controllers." |
|
124
|
], |
|
125
|
steps: [ |
|
126
|
{ |
|
127
|
stepLabel: "1.1 Circuit Topology", |
|
128
|
action: "Inspect primary power sequencing and bus architectures", |
|
129
|
details: "Verify input current paths from DC-in / USB-PD Type-C controller through bidirectional dual N-channel MOSFET switches into the primary common power point (+VBAT / +19V_VIN).", |
|
130
|
verification: "Verify 0.00V standby leakage on switched VCC rails prior to power-button trigger." |
|
131
|
}, |
|
132
|
{ |
|
133
|
stepLabel: "1.2 Logic Interconnects", |
|
134
|
action: "Identify zero-insertion-force (ZIF) and eDP locking mechanisms", |
|
135
|
details: "Inspect flexible printed circuits (FPCs) for gold oxidation. Never insert flex ribbons with bent alignment ears into high-density 0.4mm pitch headers.", |
|
136
|
caution: "Do not touch exposed gold pin contacts with bare fingers; skin acids create capacitive parasitic leakage." |
|
137
|
} |
|
138
|
] |
|
139
|
}, |
|
140
|
{ |
|
141
|
id: "ch-2", |
|
142
|
chapterNumber: 2, |
|
143
|
title: "Pre-Repair Setup & ESD Workspace Calibration", |
|
144
|
subtitle: "Static grounding parameters, bench equipment isolation, and battery disconnection rules.", |
|
145
|
paragraphs: [ |
|
146
|
"Prior to breaking factory enclosure seals, verify that your service workstation is calibrated to ISO/IEC 61340-5-1 ESD control standards. Work surfaces must maintain a point-to-ground resistance between 10^6 and 10^9 ohms.", |
|
147
|
"Lithium-ion polymer pouch cells must be discharged below 25% nominal state of charge. A fully charged battery contains sufficient chemical energy to cause sustained combustion if accidentally creased, punctured, or shorted by stray metallic screws." |
|
148
|
], |
|
149
|
steps: [ |
|
150
|
{ |
|
151
|
stepLabel: "2.1 Workspace Grounding", |
|
152
|
action: "Connect grounded conductive wrist strap and bench mat", |
|
153
|
details: "Ensure grounding cord has a 1-megohm series current-limiting resistor to protect the technician while safely dissipating static potentials in under 0.1 seconds.", |
|
154
|
verification: "Static voltage field meter should read <100V across all plastic tool handles." |
|
155
|
}, |
|
156
|
{ |
|
157
|
stepLabel: "2.2 Complete Power Isolation", |
|
158
|
action: "Detach main battery harness and discharge motherboard filter capacitors", |
|
159
|
details: "Remove perimeter fasteners, release chassis retaining clips, and unplug the multi-pin battery wiring harness. Hold power button for 15 seconds to discharge high-capacitance solid polymer filtering capacitors.", |
|
160
|
caution: "Never disconnect or reconnect the battery while the AC charger is attached to the wall." |
|
161
|
} |
|
162
|
] |
|
163
|
}, |
|
164
|
{ |
|
165
|
id: "ch-3", |
|
166
|
chapterNumber: 3, |
|
167
|
title: "Step-by-Step Teardown, Replacement & Reassembly Sequence", |
|
168
|
subtitle: "Fastener tracking, precision component isolation, micro-latching, and reverse torque protocol.", |
|
169
|
paragraphs: [ |
|
170
|
"Follow the numbered fastener matrix strictly. Screws are custom-machined with varying thread pitches and lengths (e.g. M2x3.5mm vs M2x5.0mm). Driving an oversized screw into a blind standoff will puncture the top palmrest or crack multilayer logic board traces.", |
|
171
|
"When reassembling, all fasteners must be tightened in a symmetric cross pattern to avoid uneven warping of magnesium frames and thermal coldplates." |
|
172
|
], |
|
173
|
steps: [ |
|
174
|
{ |
|
175
|
stepLabel: "3.1 Fastener Demounting", |
|
176
|
action: "Extract perimeter screws into magnetic compartment tray", |
|
177
|
details: "Loosen screws in a spiral counter-clockwise pattern. For heatsink springs, loosen in reverse stamped order (4 -> 3 -> 2 -> 1) by half-turns to equalize die pressure.", |
|
178
|
caution: "Do not use worn screwdriver bits to avoid camming out Torx or JIS screw heads." |
|
179
|
}, |
|
180
|
{ |
|
181
|
stepLabel: "3.2 Ribbon & Antenna Cable Routing", |
|
182
|
action: "Disengage micro IPEX MHF4 coax and eDP bail locks", |
|
183
|
details: "Lift micro antenna leads vertically using nylon tweezers. Unroute delicate RF coaxial cables from magnesium retention channels without pinching.", |
|
184
|
verification: "Cables are free with zero kinked wires or crushed outer shielding." |
|
185
|
}, |
|
186
|
{ |
|
187
|
stepLabel: "3.3 Reassembly Torque Protocol", |
|
188
|
action: "Torque fasteners to exact engineering specs", |
|
189
|
details: "Align chassis sub-frames, seat ribbon cables squarely, and torque chassis fasteners to 0.20 Nm and hinge anchors to 0.35 Nm.", |
|
190
|
verification: "All seam gaps around perimeter chassis measure uniform 0.5-0.8mm." |
|
191
|
} |
|
192
|
] |
|
193
|
}, |
|
194
|
{ |
|
195
|
id: "ch-4", |
|
196
|
chapterNumber: 4, |
|
197
|
title: "Multi-Rail Signal Probing & Circuit Test Points", |
|
198
|
subtitle: "Direct multimeter test points, expected DC voltage tolerances, and fault isolation trees.", |
|
199
|
paragraphs: [ |
|
200
|
"In the event of no-POST or intermittent brown-outs, measure the main system power rails in order of their boot sequence. The system Power Management Integrated Circuit (PMIC) and Embedded Controller (EC) require stable always-on rails before releasing the ALL_SYS_PWRGD signal to the main processor." |
|
201
|
], |
|
202
|
steps: [ |
|
203
|
{ |
|
204
|
stepLabel: "4.1 Standby Rail Check", |
|
205
|
action: "Probe +3.3VALW and +5VALW test points", |
|
206
|
details: "Connect negative multimeter lead to chassis ground (screw standoff). Probe the buck converter inductor coils for stable +3.30V and +5.00V DC.", |
|
207
|
verification: "Voltage must remain within ±2% tolerance under standby conditions." |
|
208
|
}, |
|
209
|
{ |
|
210
|
stepLabel: "4.2 Core Power Verification", |
|
211
|
action: "Probe VCORE and VDDQ switching phases", |
|
212
|
details: "Trigger power-on button and observe multi-phase VRM output on VCORE chokes (0.75V - 1.25V dynamic VID).", |
|
213
|
caution: "Use a 100MHz+ oscilloscope to check for excess ripple (>30mV p-p indicates failing solid capacitors)." |
|
214
|
} |
|
215
|
] |
|
216
|
}, |
|
217
|
{ |
|
218
|
id: "ch-5", |
|
219
|
chapterNumber: 5, |
|
220
|
title: "Post-Repair Quality Assurance & Burn-In Testing", |
|
221
|
subtitle: "Thermal stress validation, sensor diagnostics, and return-to-service certification.", |
|
222
|
paragraphs: [ |
|
223
|
"No repair is certified complete without a rigorous 30-minute burn-in validation pass. This guarantees that thermal interface application, fan tachometers, memory signal integrity, and power delivery are 100% stable under maximum sustained synthetic workload.", |
|
224
|
"Inspect all device sensors via OEM UEFI hardware diagnostics before returning equipment to client service." |
|
225
|
], |
|
226
|
steps: [ |
|
227
|
{ |
|
228
|
stepLabel: "5.1 Hardware Diagnostic Suite", |
|
229
|
action: "Execute full built-in UEFI component diagnostics", |
|
230
|
details: "Boot into vendor diagnostics (Dell ePSA, HP PC Hardware Diagnostics, Lenovo Diagnostics) and run extended RAM, SSD, Fan, and Motherboard tests.", |
|
231
|
verification: "All tests return Green Pass status with 0 error codes." |
|
232
|
}, |
|
233
|
{ |
|
234
|
stepLabel: "5.2 100% Thermal Burn-In Loop", |
|
235
|
action: "Run 20-minute combined CPU/GPU stress benchmark", |
|
236
|
details: "Launch Cinebench R23 and FurMark simultaneously. Monitor CPU delta-T and ensure hotspot temperatures remain below 85°C with zero thermal throttling.", |
|
237
|
verification: "Fans ramp smoothly and acoustic noise remains within factory decibel limits." |
|
238
|
} |
|
239
|
] |
|
240
|
} |
|
241
|
]; |
|
242
|
|
|
243
|
// Default voltage rail reference specifications |
|
244
|
const voltageRails: VoltageRailSpec[] = manual.voltageRails || [ |
|
245
|
{ rail: "+19V_VIN / +20V_USBC", voltage: "19.5V - 20.0V", tolerance: "±5%", location: "DC-In Fuse F1 / Input MOSFET Q1", normalImpedance: ">100 kΩ", description: "Primary unregulated DC power rail feeding high-side VRM switching FETs." }, |
|
246
|
{ rail: "+5V_ALWAYS / +5VALW", voltage: "5.05V", tolerance: "±2%", location: "Inductor PL401 / Pin 7 PU401", normalImpedance: ">10 kΩ", description: "Always-on buck converter rail powering USB VBUS, audio codecs, and 5V fan controllers." }, |
|
247
|
{ rail: "+3.3V_ALWAYS / +3.3VALW", voltage: "3.32V", tolerance: "±2%", location: "Inductor PL301 / Pin 5 PU301", normalImpedance: ">5 kΩ", description: "Feeds Embedded Controller (EC/KBC), BIOS SPI Flash ROM, and Power Button pull-ups." }, |
|
248
|
{ rail: "+1.8V_PRIM / +1.8V_ALW", voltage: "1.80V", tolerance: "±3%", location: "Inductor PL501 / LDO Output", normalImpedance: ">1.5 kΩ", description: "Provides I/O buffer reference voltage for PCH / SoC chipset and SPI flash logic." }, |
|
249
|
{ rail: "VCC_CORE (CPU VCORE)", voltage: "0.70V - 1.35V (VID)", tolerance: "±1%", location: "CPU VRM Inductors PL1-PL6", normalImpedance: "0.8 Ω - 3.5 Ω", description: "Multi-phase synchronous buck rail powering CPU computational cores under dynamic load." }, |
|
250
|
{ rail: "VDDQ / DRAM_PWR", voltage: "1.10V (DDR5) / 1.20V (DDR4)", tolerance: "±2%", location: "RAM Power Inductor PL901", normalImpedance: ">150 Ω", description: "Main memory module supply rail powering SODIMM / on-board memory chips." }, |
|
251
|
{ rail: "VCC_GT / GPU_CORE", voltage: "0.65V - 1.15V", tolerance: "±2%", location: "GPU VRM Phase Inductors", normalImpedance: "0.3 Ω - 1.8 Ω", description: "High-current power delivery for integrated or discrete graphics compute units." }, |
|
252
|
{ rail: "EDP_BL_PWR", voltage: "19.0V - 20.0V", tolerance: "±5%", location: "Fuse F2 near 30-pin eDP Display Header", normalImpedance: ">50 kΩ", description: "Direct high-voltage power rail powering the display panel LED backlight matrix." } |
|
253
|
]; |
|
254
|
|
|
255
|
// Default fastener torque specifications |
|
256
|
const fastenerTorqueTable: FastenerTorqueSpec[] = manual.fastenerTorqueTable || [ |
|
257
|
{ location: "Display Hinge Anchor Brackets", screwType: "Torx T5 / Phillips #0", size: "M2.5 x 5.0mm (Steel)", torque: "0.35 Nm (3.1 in-lb)", threadLock: "Blue Loctite 242 (Medium)" }, |
|
258
|
{ location: "Chassis Bottom Cover Perimeter", screwType: "Torx T5 / Phillips #00", size: "M2.0 x 3.5mm", torque: "0.20 Nm (1.8 in-lb)", threadLock: "Factory Pre-applied" }, |
|
259
|
{ location: "CPU/GPU Cooling Heatsink Springs", screwType: "Phillips #00 (Captive)", size: "M2.0 x 4.0mm (Spring)", torque: "0.20 Nm (Sequential 1-2-3-4)", threadLock: "None (Spring-tensioned)" }, |
|
260
|
{ location: "M.2 NVMe SSD / Wi-Fi Standoff", screwType: "Phillips #00", size: "M2.0 x 3.0mm (Wafer)", torque: "0.15 Nm (1.3 in-lb)", threadLock: "None" }, |
|
261
|
{ location: "Internal Battery Pack Frame", screwType: "Phillips #00", size: "M2.0 x 4.0mm", torque: "0.20 Nm (1.8 in-lb)", threadLock: "None" }, |
|
262
|
{ location: "Motherboard Logic Board Standoffs", screwType: "Phillips #00", size: "M2.0 x 3.0mm (Brass)", torque: "0.25 Nm (2.2 in-lb)", threadLock: "None" } |
|
263
|
]; |
|
264
|
|
|
265
|
const handleDownload = () => { |
|
266
|
toast({ |
|
267
|
title: "Downloading Technical Manual Package", |
|
268
|
description: `${manual.title} (${manual.code}) package is prepared for offline bench storage.`, |
|
269
|
}); |
|
270
|
}; |
|
271
|
|
|
272
|
const handleCopyLink = () => { |
|
273
|
navigator.clipboard.writeText(`${window.location.origin}/?manual=${manual.id}`); |
|
274
|
setCopied(true); |
|
275
|
toast({ |
|
276
|
title: "Manual Link Copied", |
|
277
|
description: "Direct link copied to clipboard.", |
|
278
|
}); |
|
279
|
setTimeout(() => setCopied(false), 2000); |
|
280
|
}; |
|
281
|
|
|
282
|
const filteredRails = voltageRails.filter(r => |
|
283
|
r.rail.toLowerCase().includes(railSearch.toLowerCase()) || |
|
284
|
r.description.toLowerCase().includes(railSearch.toLowerCase()) || |
|
285
|
r.location.toLowerCase().includes(railSearch.toLowerCase()) |
|
286
|
); |
|
287
|
|
|
288
|
const activeChapter = chapters[selectedChapterIndex] || chapters[0]; |
|
289
|
|
|
290
|
return ( |
|
291
|
<Dialog open={!!manual} onOpenChange={() => onClose()}> |
|
292
|
<DialogContent className="max-w-4.5xl max-h-[92vh] overflow-y-auto p-0 rounded-[2.5rem] border-border/60 bg-card/95 backdrop-blur-2xl shadow-glass"> |
|
293
|
{/* Header */} |
|
294
|
<div className="p-6 sm:p-8 border-b border-border/40 space-y-4 bg-muted/20"> |
|
295
|
<div className="flex flex-wrap items-center justify-between gap-3"> |
|
296
|
<div className="flex flex-wrap items-center gap-2"> |
|
297
|
<Badge variant="outline" className={cn("text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full", theme.badge)}> |
|
298
|
<CategoryIcon className="h-3.5 w-3.5 mr-1" /> |
|
299
|
{theme.label} |
|
300
|
</Badge> |
|
301
|
<Badge variant="secondary" className="text-[11px] font-mono font-bold px-3 py-1 rounded-full"> |
|
302
|
{manual.code} |
|
303
|
</Badge> |
|
304
|
<Badge variant="outline" className="text-[10px] font-semibold px-2.5 py-0.5 rounded-full text-muted-foreground"> |
|
305
|
Verified JCR Engineering Standard |
|
306
|
</Badge> |
|
307
|
</div> |
|
308
|
|
|
309
|
<div className="flex items-center gap-2"> |
|
310
|
<Button |
|
311
|
variant="outline" |
|
312
|
size="sm" |
|
313
|
onClick={handleCopyLink} |
|
314
|
className="h-8 rounded-xl text-xs gap-1.5 border-border/60" |
|
315
|
> |
|
316
|
{copied ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />} |
|
317
|
<span>Share</span> |
|
318
|
</Button> |
|
319
|
<Button |
|
320
|
variant="outline" |
|
321
|
size="sm" |
|
322
|
onClick={() => window.print()} |
|
323
|
className="h-8 rounded-xl text-xs gap-1.5 border-border/60 hidden sm:flex" |
|
324
|
> |
|
325
|
<Printer className="h-3.5 w-3.5" /> |
|
326
|
<span>Print</span> |
|
327
|
</Button> |
|
328
|
</div> |
|
329
|
</div> |
|
330
|
|
|
331
|
<DialogTitle className="text-xl sm:text-2xl md:text-3xl font-extrabold tracking-tight text-foreground leading-snug"> |
|
332
|
{manual.title} |
|
333
|
</DialogTitle> |
|
334
|
|
|
335
|
<p className="text-xs sm:text-sm text-muted-foreground leading-relaxed max-w-3xl"> |
|
336
|
{manual.summary} |
|
337
|
</p> |
|
338
|
|
|
339
|
<div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground pt-1"> |
|
340
|
<span><strong>Pages:</strong> {manual.pages} Full Chapters</span> |
|
341
|
<span>•</span> |
|
342
|
<span><strong>Format:</strong> {manual.fileSize}</span> |
|
343
|
<span>•</span> |
|
344
|
<span><strong>Engineering Lead:</strong> {manual.author}</span> |
|
345
|
<span>•</span> |
|
346
|
<span><strong>Revision:</strong> {manual.lastUpdated}</span> |
|
347
|
</div> |
|
348
|
|
|
349
|
{/* Navigation Tabs */} |
|
350
|
<div className="flex flex-wrap gap-2 pt-2 border-t border-border/30"> |
|
351
|
<button |
|
352
|
onClick={() => setActiveTab("reader")} |
|
353
|
className={cn( |
|
354
|
"px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 border", |
|
355
|
activeTab === "reader" |
|
356
|
? "bg-primary text-primary-foreground border-primary shadow-xs" |
|
357
|
: "bg-background/60 hover:bg-muted text-muted-foreground border-border/50" |
|
358
|
)} |
|
359
|
> |
|
360
|
<BookOpen className="h-3.5 w-3.5" /> |
|
361
|
<span>Full Technical Chapters ({chapters.length})</span> |
|
362
|
</button> |
|
363
|
|
|
364
|
<button |
|
365
|
onClick={() => setActiveTab("rails")} |
|
366
|
className={cn( |
|
367
|
"px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 border", |
|
368
|
activeTab === "rails" |
|
369
|
? "bg-primary text-primary-foreground border-primary shadow-xs" |
|
370
|
: "bg-background/60 hover:bg-muted text-muted-foreground border-border/50" |
|
371
|
)} |
|
372
|
> |
|
373
|
<Zap className="h-3.5 w-3.5 text-amber-500" /> |
|
374
|
<span>Voltage Rails & Test Points ({voltageRails.length})</span> |
|
375
|
</button> |
|
376
|
|
|
377
|
<button |
|
378
|
onClick={() => setActiveTab("torque")} |
|
379
|
className={cn( |
|
380
|
"px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 border", |
|
381
|
activeTab === "torque" |
|
382
|
? "bg-primary text-primary-foreground border-primary shadow-xs" |
|
383
|
: "bg-background/60 hover:bg-muted text-muted-foreground border-border/50" |
|
384
|
)} |
|
385
|
> |
|
386
|
<Wrench className="h-3.5 w-3.5 text-indigo-500" /> |
|
387
|
<span>Torque & Fastener Matrix ({fastenerTorqueTable.length})</span> |
|
388
|
</button> |
|
389
|
|
|
390
|
<button |
|
391
|
onClick={() => setActiveTab("safety")} |
|
392
|
className={cn( |
|
393
|
"px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 border", |
|
394
|
activeTab === "safety" |
|
395
|
? "bg-primary text-primary-foreground border-primary shadow-xs" |
|
396
|
: "bg-background/60 hover:bg-muted text-muted-foreground border-border/50" |
|
397
|
)} |
|
398
|
> |
|
399
|
<ShieldCheck className="h-3.5 w-3.5 text-rose-500" /> |
|
400
|
<span>Bench Directives & Safety</span> |
|
401
|
</button> |
|
402
|
</div> |
|
403
|
</div> |
|
404
|
|
|
405
|
{/* Content Body based on Active Tab */} |
|
406
|
<div className="p-6 sm:p-8 space-y-6"> |
|
407
|
{/* TAB 1: FULL CHAPTER READER */} |
|
408
|
{activeTab === "reader" && ( |
|
409
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-6"> |
|
410
|
{/* Chapter Sidebar */} |
|
411
|
<div className="md:col-span-4 space-y-2 border-r border-border/40 pr-0 md:pr-4"> |
|
412
|
<div className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 flex items-center gap-1.5"> |
|
413
|
<Layers className="h-3.5 w-3.5 text-primary" /> |
|
414
|
Table of Contents |
|
415
|
</div> |
|
416
|
{chapters.map((ch, idx) => ( |
|
417
|
<button |
|
418
|
key={ch.id} |
|
419
|
onClick={() => setSelectedChapterIndex(idx)} |
|
420
|
className={cn( |
|
421
|
"w-full text-left p-3 rounded-2xl transition-all border text-xs space-y-1 block", |
|
422
|
selectedChapterIndex === idx |
|
423
|
? "bg-primary/10 border-primary/40 text-foreground font-semibold shadow-2xs" |
|
424
|
: "bg-muted/20 hover:bg-muted/40 border-border/30 text-muted-foreground" |
|
425
|
)} |
|
426
|
> |
|
427
|
<div className="flex items-center justify-between"> |
|
428
|
<span className="text-[10px] font-bold uppercase text-primary">Chapter {ch.chapterNumber}</span> |
|
429
|
<ChevronRight className={cn("h-3.5 w-3.5 transition-transform", selectedChapterIndex === idx && "text-primary translate-x-0.5")} /> |
|
430
|
</div> |
|
431
|
<div className="font-semibold text-foreground text-xs leading-snug line-clamp-1">{ch.title}</div> |
|
432
|
</button> |
|
433
|
))} |
|
434
|
|
|
435
|
{/* Recommended Bench Tools Box */} |
|
436
|
<div className="pt-4 space-y-2"> |
|
437
|
<h5 className="text-[11px] font-bold uppercase tracking-wider text-foreground flex items-center gap-1"> |
|
438
|
<Wrench className="h-3 w-3 text-primary" /> Required Bench Equipment |
|
439
|
</h5> |
|
440
|
<div className="flex flex-wrap gap-1.5"> |
|
441
|
{manual.recommendedTools.map((tool, idx) => ( |
|
442
|
<span key={idx} className="text-[10px] px-2 py-0.5 rounded-lg bg-muted/60 text-muted-foreground border border-border/40"> |
|
443
|
{tool} |
|
444
|
</span> |
|
445
|
))} |
|
446
|
</div> |
|
447
|
</div> |
|
448
|
</div> |
|
449
|
|
|
450
|
{/* Active Chapter Content */} |
|
451
|
<div className="md:col-span-8 space-y-6"> |
|
452
|
<div className="space-y-2 border-b border-border/30 pb-4"> |
|
453
|
<div className="text-xs font-bold uppercase text-primary">Chapter {activeChapter.chapterNumber}</div> |
|
454
|
<h3 className="text-xl font-extrabold text-foreground tracking-tight">{activeChapter.title}</h3> |
|
455
|
<p className="text-xs font-medium text-muted-foreground">{activeChapter.subtitle}</p> |
|
456
|
</div> |
|
457
|
|
|
458
|
{/* Paragraphs */} |
|
459
|
<div className="space-y-3 text-xs sm:text-sm text-foreground/90 leading-relaxed"> |
|
460
|
{activeChapter.paragraphs.map((p, idx) => ( |
|
461
|
<p key={idx}>{p}</p> |
|
462
|
))} |
|
463
|
</div> |
|
464
|
|
|
465
|
{/* Detailed Sub-Steps if defined in chapter */} |
|
466
|
{activeChapter.steps && activeChapter.steps.length > 0 && ( |
|
467
|
<div className="space-y-3 pt-2"> |
|
468
|
<h4 className="text-xs font-bold uppercase tracking-wider text-foreground flex items-center gap-1.5"> |
|
469
|
<Sparkles className="h-3.5 w-3.5 text-primary" /> |
|
470
|
Detailed Micro-Procedures & Verifications |
|
471
|
</h4> |
|
472
|
<div className="space-y-3"> |
|
473
|
{activeChapter.steps.map((st, idx) => ( |
|
474
|
<div key={idx} className="p-4 rounded-2xl bg-card border border-border/50 space-y-2"> |
|
475
|
<div className="flex items-center justify-between gap-2"> |
|
476
|
<span className="text-xs font-bold text-primary">{st.stepLabel}</span> |
|
477
|
<span className="text-xs font-semibold text-foreground">{st.action}</span> |
|
478
|
</div> |
|
479
|
<p className="text-xs text-muted-foreground leading-relaxed">{st.details}</p> |
|
480
|
|
|
481
|
{st.caution && ( |
|
482
|
<div className="p-2.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-[11px] text-rose-950 dark:text-rose-200 flex items-start gap-2"> |
|
483
|
<AlertTriangle className="h-3.5 w-3.5 text-rose-500 shrink-0 mt-0.5" /> |
|
484
|
<div><strong>Caution:</strong> {st.caution}</div> |
|
485
|
</div> |
|
486
|
)} |
|
487
|
|
|
488
|
{st.verification && ( |
|
489
|
<div className="p-2.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-[11px] text-emerald-950 dark:text-emerald-200 flex items-start gap-2"> |
|
490
|
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-500 shrink-0 mt-0.5" /> |
|
491
|
<div><strong>Verification Checkpoint:</strong> {st.verification}</div> |
|
492
|
</div> |
|
493
|
)} |
|
494
|
</div> |
|
495
|
))} |
|
496
|
</div> |
|
497
|
</div> |
|
498
|
)} |
|
499
|
|
|
500
|
{/* Chapter Navigation Buttons */} |
|
501
|
<div className="flex items-center justify-between pt-4 border-t border-border/30"> |
|
502
|
<Button |
|
503
|
variant="outline" |
|
504
|
size="sm" |
|
505
|
disabled={selectedChapterIndex === 0} |
|
506
|
onClick={() => setSelectedChapterIndex(prev => Math.max(0, prev - 1))} |
|
507
|
className="rounded-xl text-xs" |
|
508
|
> |
|
509
|
Previous Chapter |
|
510
|
</Button> |
|
511
|
<span className="text-xs text-muted-foreground"> |
|
512
|
Chapter {selectedChapterIndex + 1} of {chapters.length} |
|
513
|
</span> |
|
514
|
<Button |
|
515
|
variant="outline" |
|
516
|
size="sm" |
|
517
|
disabled={selectedChapterIndex === chapters.length - 1} |
|
518
|
onClick={() => setSelectedChapterIndex(prev => Math.min(chapters.length - 1, prev + 1))} |
|
519
|
className="rounded-xl text-xs" |
|
520
|
> |
|
521
|
Next Chapter |
|
522
|
</Button> |
|
523
|
</div> |
|
524
|
</div> |
|
525
|
</div> |
|
526
|
)} |
|
527
|
|
|
528
|
{/* TAB 2: VOLTAGE RAILS & TEST POINTS */} |
|
529
|
{activeTab === "rails" && ( |
|
530
|
<div className="space-y-4"> |
|
531
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3"> |
|
532
|
<div> |
|
533
|
<h4 className="text-sm font-bold text-foreground flex items-center gap-2"> |
|
534
|
<Zap className="h-4 w-4 text-amber-500" /> |
|
535
|
Power Distribution Network (PDN) Test Points & Voltage Rails |
|
536
|
</h4> |
|
537
|
<p className="text-xs text-muted-foreground"> |
|
538
|
Multimeter probe locations and expected impedance readings to ground for board diagnostics. |
|
539
|
</p> |
|
540
|
</div> |
|
541
|
|
|
542
|
<div className="relative w-full sm:w-64"> |
|
543
|
<Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground" /> |
|
544
|
<input |
|
545
|
type="text" |
|
546
|
placeholder="Search rail name (e.g. +3.3V, VCORE)..." |
|
547
|
value={railSearch} |
|
548
|
onChange={(e) => setRailSearch(e.target.value)} |
|
549
|
className="w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-background border border-border/60 focus:outline-none focus:ring-1 focus:ring-primary" |
|
550
|
/> |
|
551
|
</div> |
|
552
|
</div> |
|
553
|
|
|
554
|
<div className="rounded-2xl border border-border/50 overflow-hidden bg-card/60"> |
|
555
|
<div className="overflow-x-auto"> |
|
556
|
<table className="w-full text-left text-xs"> |
|
557
|
<thead className="bg-muted/40 border-b border-border/40 text-muted-foreground uppercase text-[10px] font-bold"> |
|
558
|
<tr> |
|
559
|
<th className="p-3">Power Rail</th> |
|
560
|
<th className="p-3">Expected Voltage</th> |
|
561
|
<th className="p-3">Tolerance</th> |
|
562
|
<th className="p-3">Test Point / Inductor</th> |
|
563
|
<th className="p-3">Normal Impedance</th> |
|
564
|
<th className="p-3">Function / Rail Description</th> |
|
565
|
</tr> |
|
566
|
</thead> |
|
567
|
<tbody className="divide-y divide-border/30"> |
|
568
|
{filteredRails.map((rail, idx) => ( |
|
569
|
<tr key={idx} className="hover:bg-muted/20 transition-colors"> |
|
570
|
<td className="p-3 font-mono font-bold text-primary">{rail.rail}</td> |
|
571
|
<td className="p-3 font-semibold text-foreground">{rail.voltage}</td> |
|
572
|
<td className="p-3 text-muted-foreground">{rail.tolerance}</td> |
|
573
|
<td className="p-3 font-mono text-muted-foreground">{rail.location}</td> |
|
574
|
<td className="p-3 font-semibold text-foreground">{rail.normalImpedance}</td> |
|
575
|
<td className="p-3 text-muted-foreground max-w-xs">{rail.description}</td> |
|
576
|
</tr> |
|
577
|
))} |
|
578
|
</tbody> |
|
579
|
</table> |
|
580
|
</div> |
|
581
|
</div> |
|
582
|
</div> |
|
583
|
)} |
|
584
|
|
|
585
|
{/* TAB 3: TORQUE & FASTENER MATRIX */} |
|
586
|
{activeTab === "torque" && ( |
|
587
|
<div className="space-y-4"> |
|
588
|
<div> |
|
589
|
<h4 className="text-sm font-bold text-foreground flex items-center gap-2"> |
|
590
|
<Wrench className="h-4 w-4 text-indigo-500" /> |
|
591
|
Fastener Torque & Screw Specification Matrix |
|
592
|
</h4> |
|
593
|
<p className="text-xs text-muted-foreground"> |
|
594
|
Precise torque values (Newton-meters) and thread dimensions to prevent stripped standoffs or cracked magnesium frames. |
|
595
|
</p> |
|
596
|
</div> |
|
597
|
|
|
598
|
<div className="rounded-2xl border border-border/50 overflow-hidden bg-card/60"> |
|
599
|
<div className="overflow-x-auto"> |
|
600
|
<table className="w-full text-left text-xs"> |
|
601
|
<thead className="bg-muted/40 border-b border-border/40 text-muted-foreground uppercase text-[10px] font-bold"> |
|
602
|
<tr> |
|
603
|
<th className="p-3">Component / Mounting Location</th> |
|
604
|
<th className="p-3">Bit & Head Type</th> |
|
605
|
<th className="p-3">Thread Size & Pitch</th> |
|
606
|
<th className="p-3">Target Torque (Nm)</th> |
|
607
|
<th className="p-3">Threadlock Compound</th> |
|
608
|
</tr> |
|
609
|
</thead> |
|
610
|
<tbody className="divide-y divide-border/30"> |
|
611
|
{fastenerTorqueTable.map((spec, idx) => ( |
|
612
|
<tr key={idx} className="hover:bg-muted/20 transition-colors"> |
|
613
|
<td className="p-3 font-semibold text-foreground">{spec.location}</td> |
|
614
|
<td className="p-3 font-mono text-primary font-bold">{spec.screwType}</td> |
|
615
|
<td className="p-3 font-mono text-muted-foreground">{spec.size}</td> |
|
616
|
<td className="p-3 font-bold text-emerald-600 dark:text-emerald-400">{spec.torque}</td> |
|
617
|
<td className="p-3 text-muted-foreground">{spec.threadLock}</td> |
|
618
|
</tr> |
|
619
|
))} |
|
620
|
</tbody> |
|
621
|
</table> |
|
622
|
</div> |
|
623
|
</div> |
|
624
|
</div> |
|
625
|
)} |
|
626
|
|
|
627
|
{/* TAB 4: SAFETY & DIRECTIVES */} |
|
628
|
{activeTab === "safety" && ( |
|
629
|
<div className="space-y-4"> |
|
630
|
<div className="rounded-2xl border border-rose-500/20 bg-rose-500/5 p-5 space-y-3"> |
|
631
|
<h4 className="text-xs font-bold uppercase tracking-wider text-rose-600 dark:text-rose-400 flex items-center gap-1.5"> |
|
632
|
<AlertTriangle className="h-4 w-4 text-rose-500" /> |
|
633
|
Mandatory Bench Safety & ESD Directives |
|
634
|
</h4> |
|
635
|
<ul className="space-y-2 text-xs text-foreground/90"> |
|
636
|
{manual.safetyDirectives.map((directive, idx) => ( |
|
637
|
<li key={idx} className="flex items-start gap-2.5 p-2 rounded-xl bg-background/40"> |
|
638
|
<ShieldCheck className="h-4 w-4 text-rose-500 shrink-0 mt-0.5" /> |
|
639
|
<span>{directive}</span> |
|
640
|
</li> |
|
641
|
))} |
|
642
|
</ul> |
|
643
|
</div> |
|
644
|
|
|
645
|
{/* Key Topics List */} |
|
646
|
<div className="space-y-2.5"> |
|
647
|
<h4 className="text-xs font-bold uppercase tracking-wider text-foreground flex items-center gap-1.5"> |
|
648
|
<BookOpen className="h-3.5 w-3.5 text-primary" /> |
|
649
|
Key Technical Subject Coverage |
|
650
|
</h4> |
|
651
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5"> |
|
652
|
{manual.keyTopics.map((topic, idx) => ( |
|
653
|
<div |
|
654
|
key={idx} |
|
655
|
className="rounded-2xl border border-border/50 bg-background/50 p-3 flex items-start gap-2.5 text-xs text-foreground/90" |
|
656
|
> |
|
657
|
<CheckCircle2 className="h-3.5 w-3.5 text-primary shrink-0 mt-0.5" /> |
|
658
|
<span>{topic}</span> |
|
659
|
</div> |
|
660
|
))} |
|
661
|
</div> |
|
662
|
</div> |
|
663
|
</div> |
|
664
|
)} |
|
665
|
</div> |
|
666
|
|
|
667
|
{/* Footer Actions */} |
|
668
|
<div className="p-6 sm:p-8 bg-muted/30 border-t border-border/40 flex flex-col sm:flex-row items-center justify-between gap-4"> |
|
669
|
<div className="flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400 font-semibold"> |
|
670
|
<ShieldCheck className="h-4 w-4" /> |
|
671
|
<span>Verified Official JCRGuru Start-to-Finish Engineering Specification</span> |
|
672
|
</div> |
|
673
|
|
|
674
|
<div className="flex items-center gap-2 w-full sm:w-auto"> |
|
675
|
<Button |
|
676
|
variant="outline" |
|
677
|
onClick={onClose} |
|
678
|
className="rounded-2xl text-xs h-10 px-5 flex-1 sm:flex-initial border-border/60" |
|
679
|
> |
|
680
|
Close Manual |
|
681
|
</Button> |
|
682
|
<Button |
|
683
|
onClick={handleDownload} |
|
684
|
className="rounded-2xl text-xs font-bold h-10 px-6 gap-2 bg-primary hover:bg-primary/90 text-primary-foreground flex-1 sm:flex-initial shadow-xs" |
|
685
|
> |
|
686
|
<Download className="h-4 w-4" /> |
|
687
|
<span>Download Offline PDF</span> |
|
688
|
</Button> |
|
689
|
</div> |
|
690
|
</div> |
|
691
|
</DialogContent> |
|
692
|
</Dialog> |
|
693
|
); |
|
694
|
} |