|
1
|
import { useState } from "react"; |
|
2
|
import { useQuery } from "@tanstack/react-query"; |
|
3
|
import type { DeviceComponent } from "@shared/schema"; |
|
4
|
import { |
|
5
|
Cpu, |
|
6
|
HardDrive, |
|
7
|
Fan, |
|
8
|
BatteryCharging, |
|
9
|
CircuitBoard, |
|
10
|
ShieldAlert, |
|
11
|
Sparkles, |
|
12
|
CheckCircle2, |
|
13
|
Layers, |
|
14
|
Wrench, |
|
15
|
AlertTriangle, |
|
16
|
Zap, |
|
17
|
Info |
|
18
|
} from "lucide-react"; |
|
19
|
import { cn } from "@/lib/utils"; |
|
20
|
import { Badge } from "@/components/ui/badge"; |
|
21
|
|
|
22
|
interface PartsIdentificationProps { |
|
23
|
deviceType: "laptop" | "desktop" | string; |
|
24
|
} |
|
25
|
|
|
26
|
interface ComponentDetail { |
|
27
|
id: string; |
|
28
|
name: string; |
|
29
|
category: string; |
|
30
|
tagline: string; |
|
31
|
description: string; |
|
32
|
deviceType: "laptop" | "desktop" | "both"; |
|
33
|
imageUrl: string; |
|
34
|
specs: { label: string; value: string }[]; |
|
35
|
commonFailures: string[]; |
|
36
|
safetyRules: string[]; |
|
37
|
testingProcedure: string; |
|
38
|
icon: any; |
|
39
|
} |
|
40
|
|
|
41
|
const HARDWARE_COMPONENTS: ComponentDetail[] = [ |
|
42
|
{ |
|
43
|
id: "m2-nvme", |
|
44
|
name: "M.2 PCIe NVMe Solid State Drive", |
|
45
|
category: "Storage", |
|
46
|
tagline: "PCIe Gen4 / Gen5 High-Throughput Flash Storage", |
|
47
|
description: "Compact solid-state drive operating over PCIe lanes using the Non-Volatile Memory Express protocol. Features sequential transfer speeds up to 7,500+ MB/s.", |
|
48
|
deviceType: "both", |
|
49
|
imageUrl: "https://images.unsplash.com/photo-1597733336794-12d05021d510?auto=format&fit=crop&q=80&w=800", |
|
50
|
specs: [ |
|
51
|
{ label: "Form Factors", value: "2280 (Standard), 2230 (Compact), 2242" }, |
|
52
|
{ label: "Interface", value: "PCIe 4.0 x4 / PCIe 5.0 x4 (M-Key)" }, |
|
53
|
{ label: "Max Thermal Threshold", value: "70°C - 75°C before throttling" }, |
|
54
|
], |
|
55
|
commonFailures: [ |
|
56
|
"Controller read-only lockout when NAND endurance is reached", |
|
57
|
"Thermal throttling causing catastrophic freeze under write loads", |
|
58
|
"RAW filesystem corruption caused by unexpected power cuts" |
|
59
|
], |
|
60
|
safetyRules: [ |
|
61
|
"Ground ESD wrist strap before handling bare NAND flash dies.", |
|
62
|
"Always insert at a 30° angle; never force horizontal entry.", |
|
63
|
"Ensure the thermal pad protective film is removed before heatsink contact." |
|
64
|
], |
|
65
|
testingProcedure: "Run CrystalDiskInfo to examine 0E (Media and Data Integrity Errors) and S.M.A.R.T. health percentages.", |
|
66
|
icon: HardDrive, |
|
67
|
}, |
|
68
|
{ |
|
69
|
id: "ddr5-ram", |
|
70
|
name: "DDR5 / DDR4 System Memory (DIMM / SODIMM)", |
|
71
|
category: "Memory", |
|
72
|
tagline: "High-Bandwidth Dual-Channel Volatile Memory", |
|
73
|
description: "High-density RAM modules featuring on-die ECC (DDR5) and independent 32-bit subchannels to supply high-speed bandwidth to the CPU cache hierarchy.", |
|
74
|
deviceType: "both", |
|
75
|
imageUrl: "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&q=80&w=800", |
|
76
|
specs: [ |
|
77
|
{ label: "Standard Frequencies", value: "DDR4 3200MHz / DDR5 5600-7200MHz" }, |
|
78
|
{ label: "Voltage", value: "1.1V (DDR5) / 1.2V (DDR4) / 1.35V+ (XMP/EXPO)" }, |
|
79
|
{ label: "Channel Architecture", value: "Dual Channel (Slots 2 & 4 / A2-B2)" }, |
|
80
|
], |
|
81
|
commonFailures: [ |
|
82
|
"Intermittent Blue Screen BSOD: MEMORY_MANAGEMENT / PAGE_FAULT_IN_NONPAGED_AREA", |
|
83
|
"No POST boot loop with 3 motherboard beep codes or orange DRAM debug LED", |
|
84
|
"Oxidation on gold contact fingers preventing stable signal integrity" |
|
85
|
], |
|
86
|
safetyRules: [ |
|
87
|
"Always hold memory modules strictly by the outer edge perimeter.", |
|
88
|
"Clean contacts using 99% anhydrous isopropyl alcohol and a lint-free swab.", |
|
89
|
"Never mix disparate CAS latencies or memory sub-timings." |
|
90
|
], |
|
91
|
testingProcedure: "Boot MemTest86 via USB for 4 full diagnostic passes to verify zero memory address bitflips.", |
|
92
|
icon: Layers, |
|
93
|
}, |
|
94
|
{ |
|
95
|
id: "gpu-card", |
|
96
|
name: "PCIe Dedicated Graphics Accelerator (GPU)", |
|
97
|
category: "Graphics", |
|
98
|
tagline: "High-Power Graphics Processor & VRAM Subsystem", |
|
99
|
description: "Discrete graphics module with dedicated high-speed GDDR6/GDDR6X VRAM, multi-phase VRM power delivery, and heavy multi-fan or vapor chamber heatsinks.", |
|
100
|
deviceType: "desktop", |
|
101
|
imageUrl: "https://images.unsplash.com/photo-1587202372775-e229f172b9d7?auto=format&fit=crop&q=80&w=800", |
|
102
|
specs: [ |
|
103
|
{ label: "PCIe Slot Spec", value: "PCIe 4.0 / 5.0 x16 Physical & Electrical" }, |
|
104
|
{ label: "Power Delivery", value: "12V-2x6 / 12VHPWR (up to 600W) or Dual 8-Pin" }, |
|
105
|
{ label: "Hotspot Delta", value: "Ideal hotspot delta < 15°C above core temp" }, |
|
106
|
], |
|
107
|
commonFailures: [ |
|
108
|
"Checkerboard artifacting caused by cracked VRAM solder balls", |
|
109
|
"Driver Timeout / Black screen under 3D rasterization workloads", |
|
110
|
"Melted 12VHPWR connector caused by incomplete pin insertion" |
|
111
|
], |
|
112
|
safetyRules: [ |
|
113
|
"Listen for the audible click when plugging 12V-2x6 cables; ensure 0mm gap.", |
|
114
|
"Support heavy triple-slot cards with an adjustable anti-sag bracket.", |
|
115
|
"Unplug main PSU cord before pulling the PCIe latch." |
|
116
|
], |
|
117
|
testingProcedure: "Run FurMark or 3DMark Time Spy while logging VRAM junction and VRM temperature sensors with HWiNFO64.", |
|
118
|
icon: Zap, |
|
119
|
}, |
|
120
|
{ |
|
121
|
id: "thermal-cooling", |
|
122
|
name: "Thermal Cooling System & Vapor Chamber", |
|
123
|
category: "Thermals", |
|
124
|
tagline: "Phase-Change Heatpipes, Fluid Dynamic Fans & Cold Plates", |
|
125
|
description: "Sintered copper heatpipes and vapor chambers transferring thermal energy away from CPU/GPU silicon to aluminum cooling fins exhausted by high-static-pressure fans.", |
|
126
|
deviceType: "both", |
|
127
|
imageUrl: "https://images.unsplash.com/photo-1540103547041-3929427b3708?auto=format&fit=crop&q=80&w=800", |
|
128
|
specs: [ |
|
129
|
{ label: "Thermal Interface", value: "Phase Change Pad (PTM7950) / Thermal Paste" }, |
|
130
|
{ label: "Fan Bearing Type", value: "FDB (Fluid Dynamic) / Dual Ball Bearing" }, |
|
131
|
{ label: "Lifespan", value: "Paste repaste interval: 2-3 years" }, |
|
132
|
], |
|
133
|
commonFailures: [ |
|
134
|
"Thermal throttling drops CPU clock speed from 5.0GHz to 800MHz base", |
|
135
|
"Bearing rattle and high-pitch acoustic whine from hair/dust ingestion", |
|
136
|
"Perforated or dry heatpipe vacuum loss preventing heat conduction" |
|
137
|
], |
|
138
|
safetyRules: [ |
|
139
|
"Never spin fans at high RPM with compressed air without holding the blade.", |
|
140
|
"Tighten heatsink screws in a cross diagonal 1-2-3-4 pattern to prevent core chipping." |
|
141
|
], |
|
142
|
testingProcedure: "Run Cinebench R24 multi-core load for 10 minutes while checking if CPU package stays under 88°C.", |
|
143
|
icon: Fan, |
|
144
|
}, |
|
145
|
{ |
|
146
|
id: "battery-power", |
|
147
|
name: "Lithium-Polymer Internal Battery Pack", |
|
148
|
category: "Power", |
|
149
|
tagline: "Multi-Cell Battery Pack with Integrated Smart Gas Gauge", |
|
150
|
description: "High-density Lithium-ion Polymer (LiPo) multi-cell battery module integrated with safety cutoff MOSFETs, over-voltage protection, and SMBus telemetry.", |
|
151
|
deviceType: "laptop", |
|
152
|
imageUrl: "https://images.unsplash.com/photo-1588508065123-287b28e013da?auto=format&fit=crop&q=80&w=800", |
|
153
|
specs: [ |
|
154
|
{ label: "Cell Chemistry", value: "Lithium-Ion Polymer (Li-Po) 3-Cell / 4-Cell" }, |
|
155
|
{ label: "Nominal Voltage", value: "11.4V - 15.4V DC" }, |
|
156
|
{ label: "Health Threshold", value: "Replace when full charge capacity < 75%" }, |
|
157
|
], |
|
158
|
commonFailures: [ |
|
159
|
"Physical gas pouch swelling (pillowing) pushing up the trackpad", |
|
160
|
"Sudden shutdown at 25-40% charge level due to weak unbalanced cell", |
|
161
|
"Gas gauge calibration drift reporting erroneous remaining time" |
|
162
|
], |
|
163
|
safetyRules: [ |
|
164
|
"NEVER use metal tweezers or pry bars near battery pouches.", |
|
165
|
"Work in a fire-safe space away from flammable materials when handling swollen cells.", |
|
166
|
"Always recycle degraded lithium packs at certified e-waste facilities." |
|
167
|
], |
|
168
|
testingProcedure: "Generate a Windows Battery Report via command `powercfg /batteryreport` to view cycle history and charge capacity.", |
|
169
|
icon: BatteryCharging, |
|
170
|
}, |
|
171
|
{ |
|
172
|
id: "motherboard-vrm", |
|
173
|
name: "Motherboard Power Delivery & VRM Phase Stages", |
|
174
|
category: "Motherboard", |
|
175
|
tagline: "Digital PWM Controller, DrMOS Stages & Chokes", |
|
176
|
description: "Multi-phase Voltage Regulator Module (VRM) stepping down +12V from the power supply to sub-1.4V clean Vcore voltage for the CPU silicon with minimal voltage ripple.", |
|
177
|
deviceType: "both", |
|
178
|
imageUrl: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800", |
|
179
|
specs: [ |
|
180
|
{ label: "Phase Topologies", value: "8+2 to 24+1+2 Direct / Teamed Power Stages" }, |
|
181
|
{ label: "Capacitor Rating", value: "Solid Black Japanese 10K/20K Metallic Capacitors" }, |
|
182
|
{ label: "Standby Standout", value: "+5VSB Standby Rail / +3.3V RTC Circuit" }, |
|
183
|
], |
|
184
|
commonFailures: [ |
|
185
|
"Shorted high-side DrMOS MOSFET pulling 12V rail to ground (instant PSU click off)", |
|
186
|
"Corroded standby 3.3V power regulator circuit after liquid spills", |
|
187
|
"Blown backlight fuse (F1/F2) after display cable disconnect with live battery" |
|
188
|
], |
|
189
|
safetyRules: [ |
|
190
|
"Discharge all bulk capacitors before measuring diode mode resistances.", |
|
191
|
"Use a thermal imaging camera (FLIR/Seek) to instantly isolate shorted capacitors." |
|
192
|
], |
|
193
|
testingProcedure: "Measure diode mode resistance to ground on each inductor coil using a digital multimeter.", |
|
194
|
icon: CircuitBoard, |
|
195
|
}, |
|
196
|
]; |
|
197
|
|
|
198
|
export default function PartsIdentification({ deviceType }: PartsIdentificationProps) { |
|
199
|
const [selectedId, setSelectedId] = useState<string>("m2-nvme"); |
|
200
|
|
|
201
|
const components = HARDWARE_COMPONENTS.filter( |
|
202
|
(c) => c.deviceType === "both" || !deviceType || c.deviceType === deviceType |
|
203
|
); |
|
204
|
|
|
205
|
const selected = HARDWARE_COMPONENTS.find((c) => c.id === selectedId) || components[0] || HARDWARE_COMPONENTS[0]; |
|
206
|
const SelectedIcon = selected.icon; |
|
207
|
|
|
208
|
return ( |
|
209
|
<div className="rounded-3xl border border-border/50 bg-card/60 backdrop-blur-xl p-6 sm:p-8 space-y-8 shadow-sm"> |
|
210
|
|
|
211
|
{/* Header Info */} |
|
212
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-border/40 pb-6"> |
|
213
|
<div className="space-y-1"> |
|
214
|
<div className="flex items-center gap-2"> |
|
215
|
<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-[11px] font-bold uppercase tracking-wider"> |
|
216
|
<CircuitBoard className="h-3 w-3" /> Technical Schematics |
|
217
|
</span> |
|
218
|
<span className="text-xs text-muted-foreground capitalize font-medium"> |
|
219
|
Target: {deviceType || "All Systems"} |
|
220
|
</span> |
|
221
|
</div> |
|
222
|
<h3 className="text-xl sm:text-2xl font-bold tracking-tight"> |
|
223
|
Hardware Component Anatomy & Diagnostic Testing |
|
224
|
</h3> |
|
225
|
<p className="text-xs text-muted-foreground"> |
|
226
|
Explore internal engineering architecture, pinout specifications, safety precautions, and isolation procedures. |
|
227
|
</p> |
|
228
|
</div> |
|
229
|
|
|
230
|
{/* Pro Tip Pill */} |
|
231
|
<div className="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-400 text-xs font-semibold shrink-0"> |
|
232
|
<Zap className="h-4 w-4 shrink-0" /> |
|
233
|
<span>Always isolate power & discharge capacitance before servicing</span> |
|
234
|
</div> |
|
235
|
</div> |
|
236
|
|
|
237
|
{/* Component Navigation Chips */} |
|
238
|
<div className="flex flex-wrap gap-2"> |
|
239
|
{components.map((comp) => { |
|
240
|
const Icon = comp.icon; |
|
241
|
const isSelected = selected.id === comp.id; |
|
242
|
return ( |
|
243
|
<button |
|
244
|
key={comp.id} |
|
245
|
onClick={() => setSelectedId(comp.id)} |
|
246
|
className={cn( |
|
247
|
"inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl border text-xs font-semibold transition-all", |
|
248
|
isSelected |
|
249
|
? "bg-primary text-primary-foreground border-primary shadow-sm" |
|
250
|
: "bg-background/70 border-border/60 hover:bg-muted text-muted-foreground hover:text-foreground" |
|
251
|
)} |
|
252
|
> |
|
253
|
<Icon className={cn("h-4 w-4", isSelected ? "text-primary-foreground" : "text-primary")} /> |
|
254
|
<span>{comp.name.split(' (')[0]}</span> |
|
255
|
</button> |
|
256
|
); |
|
257
|
})} |
|
258
|
</div> |
|
259
|
|
|
260
|
{/* Detailed Component View - Clean, Uncluttered Layout */} |
|
261
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start"> |
|
262
|
|
|
263
|
{/* Left Column: Visual Photo & Specifications */} |
|
264
|
<div className="lg:col-span-5 space-y-6"> |
|
265
|
<div className="relative overflow-hidden rounded-3xl border border-border/60 bg-muted/40 shadow-sm aspect-video sm:aspect-[4/3]"> |
|
266
|
<img |
|
267
|
src={selected.imageUrl} |
|
268
|
alt={selected.name} |
|
269
|
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105" |
|
270
|
/> |
|
271
|
<div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent pointer-events-none" /> |
|
272
|
<div className="absolute bottom-4 left-4 right-4"> |
|
273
|
<Badge variant="secondary" className="mb-1 text-[10px] font-bold uppercase tracking-wider"> |
|
274
|
{selected.category} Subsystem |
|
275
|
</Badge> |
|
276
|
<h4 className="text-base font-bold text-foreground drop-shadow-sm">{selected.name}</h4> |
|
277
|
<p className="text-xs text-muted-foreground line-clamp-1">{selected.tagline}</p> |
|
278
|
</div> |
|
279
|
</div> |
|
280
|
|
|
281
|
{/* Quick Technical Specs */} |
|
282
|
<div className="rounded-2xl border border-border/50 bg-background/50 p-4 space-y-3"> |
|
283
|
<h5 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5"> |
|
284
|
<Wrench className="h-3.5 w-3.5 text-primary" /> Technical Specifications |
|
285
|
</h5> |
|
286
|
<div className="space-y-2"> |
|
287
|
{selected.specs.map((s, idx) => ( |
|
288
|
<div key={idx} className="flex items-start justify-between text-xs py-1 border-b border-border/30 last:border-0"> |
|
289
|
<span className="font-semibold text-muted-foreground">{s.label}:</span> |
|
290
|
<span className="font-medium text-foreground text-right">{s.value}</span> |
|
291
|
</div> |
|
292
|
))} |
|
293
|
</div> |
|
294
|
</div> |
|
295
|
</div> |
|
296
|
|
|
297
|
{/* Right Column: Architectural Description, Failure Modes, Safety & Testing */} |
|
298
|
<div className="lg:col-span-7 space-y-6"> |
|
299
|
|
|
300
|
{/* Functional Overview */} |
|
301
|
<div className="space-y-2"> |
|
302
|
<div className="flex items-center gap-2"> |
|
303
|
<div className="h-8 w-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center"> |
|
304
|
<SelectedIcon className="h-4 w-4" /> |
|
305
|
</div> |
|
306
|
<div> |
|
307
|
<h4 className="text-lg font-bold">{selected.name}</h4> |
|
308
|
<p className="text-xs text-muted-foreground">{selected.tagline}</p> |
|
309
|
</div> |
|
310
|
</div> |
|
311
|
<p className="text-xs sm:text-sm text-foreground/80 leading-relaxed pt-1"> |
|
312
|
{selected.description} |
|
313
|
</p> |
|
314
|
</div> |
|
315
|
|
|
316
|
{/* Common Diagnostic Failure Symptoms */} |
|
317
|
<div className="rounded-2xl border border-rose-500/20 bg-rose-500/5 p-4 space-y-2.5"> |
|
318
|
<h5 className="text-xs font-bold uppercase tracking-wider text-rose-500 flex items-center gap-1.5"> |
|
319
|
<AlertTriangle className="h-3.5 w-3.5" /> Common Failure Modes & Symptoms |
|
320
|
</h5> |
|
321
|
<ul className="space-y-1.5"> |
|
322
|
{selected.commonFailures.map((failure, idx) => ( |
|
323
|
<li key={idx} className="text-xs text-foreground/80 flex items-start gap-2"> |
|
324
|
<span className="h-1.5 w-1.5 rounded-full bg-rose-500 mt-1.5 shrink-0" /> |
|
325
|
<span>{failure}</span> |
|
326
|
</li> |
|
327
|
))} |
|
328
|
</ul> |
|
329
|
</div> |
|
330
|
|
|
331
|
{/* Safety Precautions */} |
|
332
|
<div className="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 space-y-2.5"> |
|
333
|
<h5 className="text-xs font-bold uppercase tracking-wider text-amber-500 flex items-center gap-1.5"> |
|
334
|
<ShieldAlert className="h-3.5 w-3.5" /> Technician Safety Guidelines |
|
335
|
</h5> |
|
336
|
<ul className="space-y-1.5"> |
|
337
|
{selected.safetyRules.map((rule, idx) => ( |
|
338
|
<li key={idx} className="text-xs text-foreground/80 flex items-start gap-2"> |
|
339
|
<CheckCircle2 className="h-3.5 w-3.5 text-amber-500 shrink-0 mt-0.5" /> |
|
340
|
<span>{rule}</span> |
|
341
|
</li> |
|
342
|
))} |
|
343
|
</ul> |
|
344
|
</div> |
|
345
|
|
|
346
|
{/* Bench Verification Procedure */} |
|
347
|
<div className="rounded-2xl border border-primary/20 bg-primary/5 p-4 space-y-1.5"> |
|
348
|
<h5 className="text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5"> |
|
349
|
<Info className="h-3.5 w-3.5" /> Bench Testing & Verification |
|
350
|
</h5> |
|
351
|
<p className="text-xs text-foreground/80 leading-relaxed"> |
|
352
|
{selected.testingProcedure} |
|
353
|
</p> |
|
354
|
</div> |
|
355
|
|
|
356
|
</div> |
|
357
|
</div> |
|
358
|
</div> |
|
359
|
); |
|
360
|
} |
|
361
|
|