@jhustle44 / jcr-guide-pro
Code Commits Issues Pulls Cloud Agent CI/CD
master
copilot/add-firebase copilot/change-app-name-to-jcrguru copilot/create-zip-file copilot/create-zip-file-again copilot/merge-any-updates main master
tsx 140 lines 4.77 KB
Raw
1 import { useState } from "react";
2 import { useLocation } from "wouter";
3 import { useQuery } from "@tanstack/react-query";
4 import { Button } from "@/components/ui/button";
5 import type { TroubleshootingFlow } from "@shared/schema";
6
7 interface TroubleshootingFlowchartProps {
8 selectedFlow?: TroubleshootingFlow;
9 }
10
11 export default function TroubleshootingFlowchart({ selectedFlow }: TroubleshootingFlowchartProps) {
12 const [, setLocation] = useLocation();
13 const [currentStepId, setCurrentStepId] = useState<string | null>(null);
14 const [solution, setSolution] = useState<string | null>(null);
15
16 const { data: flows = [] } = useQuery<TroubleshootingFlow[]>({
17 queryKey: ["/api/troubleshooting-flows"],
18 });
19
20 const troubleshootingTypes = [
21 {
22 id: "power",
23 title: "Device Won't Turn On",
24 description: "Power issues, dead battery, charging problems",
25 icon: "power_off",
26 color: "text-danger-500",
27 },
28 {
29 id: "performance",
30 title: "Slow Performance",
31 description: "Freezing, overheating, software issues",
32 icon: "speed",
33 color: "text-warning-500",
34 },
35 {
36 id: "display",
37 title: "Display Problems",
38 description: "Screen flickering, no display, broken LCD",
39 icon: "monitor",
40 color: "text-primary",
41 },
42 ];
43
44 const handleStartTroubleshooting = (type: string) => {
45 const flow = flows.find(f => f.type === type);
46 if (flow) {
47 setCurrentStepId(flow.steps[0]?.id || null);
48 setSolution(null);
49 setLocation(`/troubleshooting/${type}`);
50 }
51 };
52
53 const handleAnswer = (answer: { text: string; nextStepId?: string; solutionId?: string }) => {
54 if (answer.nextStepId) {
55 setCurrentStepId(answer.nextStepId);
56 } else if (answer.solutionId) {
57 setSolution(answer.solutionId);
58 setCurrentStepId(null);
59 }
60 };
61
62 const reset = () => {
63 setCurrentStepId(null);
64 setSolution(null);
65 };
66
67 if (selectedFlow && (currentStepId || solution)) {
68 const currentStep = selectedFlow.steps.find(s => s.id === currentStepId);
69
70 return (
71 <div className="bg-white rounded-xl shadow-material p-6">
72 <div className="flex items-center justify-between mb-6">
73 <h2 className="text-lg font-medium text-gray-900">{selectedFlow.title}</h2>
74 <Button variant="outline" onClick={reset}>
75 Start Over
76 </Button>
77 </div>
78
79 {solution ? (
80 <div className="text-center py-8">
81 <div className="text-green-500 mb-4">
82 <i className="material-icons text-6xl">check_circle</i>
83 </div>
84 <h3 className="text-xl font-medium text-gray-900 mb-2">Diagnosis Complete</h3>
85 <p className="text-gray-600 mb-6">Recommended solution: {solution}</p>
86 <div className="space-y-2">
87 <Button onClick={reset} className="mr-4">
88 Try Again
89 </Button>
90 <Button variant="outline" onClick={() => setLocation("/")}>
91 Browse Repair Guides
92 </Button>
93 </div>
94 </div>
95 ) : currentStep ? (
96 <div className="max-w-2xl mx-auto">
97 <div className="mb-6">
98 <h3 className="text-lg font-medium text-gray-900 mb-4">{currentStep.question}</h3>
99 <div className="space-y-3">
100 {currentStep.answers.map((answer, index) => (
101 <Button
102 key={index}
103 variant="outline"
104 onClick={() => handleAnswer(answer)}
105 className="w-full justify-start p-4 h-auto text-left"
106 >
107 {answer.text}
108 </Button>
109 ))}
110 </div>
111 </div>
112 </div>
113 ) : null}
114 </div>
115 );
116 }
117
118 return (
119 <div className="bg-white dark:bg-gray-800 rounded-xl shadow-material p-6">
120 <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Quick Troubleshooting</h2>
121 <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">Start here if you're not sure what's wrong with your device</p>
122
123 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
124 {troubleshootingTypes.map((type) => (
125 <button
126 key={type.id}
127 onClick={() => handleStartTroubleshooting(type.id)}
128 className="p-4 border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary-50 transition-colors text-left"
129 >
130 <div className="flex items-center space-x-3 mb-2">
131 <i className={`material-icons ${type.color}`}>{type.icon}</i>
132 <h3 className="font-medium">{type.title}</h3>
133 </div>
134 <p className="text-sm text-gray-600">{type.description}</p>
135 </button>
136 ))}
137 </div>
138 </div>
139 );
140 }