Reverted to commit 3f6766878f49c935f33d360f82a924f8fb99799d
gpt-engineer-app[bot] committed
Nov 27, 2025 at 11:48 UTC
c38a33cf38188c678dd602e561b020c87e8ee741
3 files changed
+1
-360
src/App.tsx
-2
@@ -7,7 +7,6 @@ import Home from "./pages/Home";
7
import Pay from "./pages/Pay";
8
import SendMoney from "./pages/SendMoney";
9
import Recipients from "./pages/Recipients";
10
-import TransactionDetails from "./pages/TransactionDetails";
10
import Profile from "./pages/Profile";
11
import NotFound from "./pages/NotFound";
12
@@ -24,7 +23,6 @@ const App = () => (
23
<Route path="/pay" element={<Pay />} />
24
<Route path="/send" element={<SendMoney />} />
25
<Route path="/recipients" element={<Recipients />} />
27
- <Route path="/transaction/:id" element={<TransactionDetails />} />
26
<Route path="/profile" element={<Profile />} />
27
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
28
<Route path="*" element={<NotFound />} />
src/pages/Home.tsx
+1
-5
@@ -79,11 +79,7 @@ const Home = () => {
79
) : (
80
<div className="space-y-3">
81
{transactions.map((transaction) => (
82
- <Card
83
- key={transaction.id}
84
- className="p-5 border-0 shadow-md hover:shadow-lg transition-all cursor-pointer"
85
- onClick={() => navigate(`/transaction/${transaction.id}`)}
86
- >
82
+ <Card key={transaction.id} className="p-5 border-0 shadow-md hover:shadow-lg transition-all cursor-pointer">
83
<div className="flex items-center justify-between">
84
<div className="flex-1">
85
<div className="flex items-center gap-3 mb-1">
src/pages/TransactionDetails.tsx
deleted
-353
@@ -1,353 +0,0 @@
1
-import { useEffect, useState } from "react";
2
-import { useParams, useNavigate } from "react-router-dom";
3
-import Layout from "@/components/Layout";
4
-import { Card } from "@/components/ui/card";
5
-import { Button } from "@/components/ui/button";
6
-import { Badge } from "@/components/ui/badge";
7
-import { Separator } from "@/components/ui/separator";
8
-import {
9
- ArrowLeft,
10
- Download,
11
- CheckCircle2,
12
- Clock,
13
- AlertCircle,
14
- Mail,
15
- MessageCircle,
16
- Share2,
17
-} from "lucide-react";
18
-import { transactionService } from "@/services/transactionService";
19
-import { Transaction } from "@/types/transaction";
20
-import { formatDistanceToNow, format } from "date-fns";
21
-import { toast } from "@/hooks/use-toast";
22
-
23
-const TransactionDetails = () => {
24
- const { id } = useParams();
25
- const navigate = useNavigate();
26
- const [transaction, setTransaction] = useState<Transaction | null>(null);
27
- const [loading, setLoading] = useState(true);
28
-
29
- useEffect(() => {
30
- const loadTransaction = async () => {
31
- if (!id) {
32
- navigate("/");
33
- return;
34
- }
35
-
36
- setLoading(true);
37
- const data = await transactionService.getTransaction(id);
38
-
39
- if (!data) {
40
- toast({
41
- title: "Transaction Not Found",
42
- description: "The transaction you're looking for doesn't exist",
43
- variant: "destructive",
44
- });
45
- navigate("/");
46
- return;
47
- }
48
-
49
- setTransaction(data);
50
- setLoading(false);
51
- };
52
-
53
- loadTransaction();
54
- }, [id, navigate]);
55
-
56
- const getStatusInfo = (status: string) => {
57
- switch (status) {
58
- case "completed":
59
- return {
60
- icon: CheckCircle2,
61
- color: "text-expense-positive",
62
- bgColor: "bg-expense-positive/10",
63
- label: "Completed",
64
- };
65
- case "processing":
66
- return {
67
- icon: Clock,
68
- color: "text-accent",
69
- bgColor: "bg-accent/10",
70
- label: "Processing",
71
- };
72
- case "pending":
73
- return {
74
- icon: Clock,
75
- color: "text-yellow-500",
76
- bgColor: "bg-yellow-500/10",
77
- label: "Pending",
78
- };
79
- case "failed":
80
- return {
81
- icon: AlertCircle,
82
- color: "text-destructive",
83
- bgColor: "bg-destructive/10",
84
- label: "Failed",
85
- };
86
- default:
87
- return {
88
- icon: Clock,
89
- color: "text-muted-foreground",
90
- bgColor: "bg-muted",
91
- label: "Unknown",
92
- };
93
- }
94
- };
95
-
96
- const handleDownloadReceipt = () => {
97
- toast({
98
- title: "Receipt Downloaded",
99
- description: "Your receipt has been saved to your device",
100
- });
101
- };
102
-
103
- const handleShare = () => {
104
- toast({
105
- title: "Share Transaction",
106
- description: "Transaction details copied to clipboard",
107
- });
108
- };
109
-
110
- const handleContactSupport = () => {
111
- toast({
112
- title: "Contact Support",
113
- description: "Opening support chat...",
114
- });
115
- };
116
-
117
- if (loading) {
118
- return (
119
- <Layout title="Transaction">
120
- <div className="p-4">
121
- <Card className="p-8 border-0 shadow-md text-center">
122
- <p className="text-muted-foreground">Loading transaction...</p>
123
- </Card>
124
- </div>
125
- </Layout>
126
- );
127
- }
128
-
129
- if (!transaction) {
130
- return null;
131
- }
132
-
133
- const statusInfo = getStatusInfo(transaction.status);
134
- const StatusIcon = statusInfo.icon;
135
-
136
- return (
137
- <Layout title="Transaction Details">
138
- <div className="p-4 space-y-6">
139
- {/* Header */}
140
- <div className="flex items-center gap-3">
141
- <Button
142
- variant="ghost"
143
- size="icon"
144
- onClick={() => navigate("/")}
145
- className="h-10 w-10"
146
- >
147
- <ArrowLeft className="h-5 w-5" />
148
- </Button>
149
- <div className="flex-1">
150
- <h2 className="text-xl font-bold">Transaction Receipt</h2>
151
- <p className="text-sm text-muted-foreground font-medium">
152
- {transaction.id}
153
- </p>
154
- </div>
155
- </div>
156
-
157
- {/* Status Card */}
158
- <Card className="p-8 border-0 shadow-lg text-center">
159
- <div
160
- className={`h-20 w-20 rounded-full ${statusInfo.bgColor} mx-auto flex items-center justify-center mb-4`}
161
- >
162
- <StatusIcon className={`h-10 w-10 ${statusInfo.color}`} />
163
- </div>
164
- <Badge
165
- variant="outline"
166
- className={`mb-3 text-base px-4 py-1 ${statusInfo.color} border-2`}
167
- >
168
- {statusInfo.label}
169
- </Badge>
170
- <h3 className="text-4xl font-bold mb-2">
171
- {transaction.currency} {transaction.amount.toFixed(2)}
172
- </h3>
173
- <p className="text-muted-foreground font-medium">
174
- {formatDistanceToNow(transaction.timestamp, { addSuffix: true })}
175
- </p>
176
- </Card>
177
-
178
- {/* Timeline */}
179
- <Card className="p-6 border-0 shadow-md">
180
- <h3 className="text-lg font-bold mb-6">Transaction Timeline</h3>
181
- <div className="space-y-6">
182
- {/* Completed/Failed */}
183
- {(transaction.status === "completed" || transaction.status === "failed") && (
184
- <div className="flex gap-4">
185
- <div className="flex flex-col items-center">
186
- <div
187
- className={`h-10 w-10 rounded-full ${
188
- transaction.status === "completed"
189
- ? "bg-expense-positive"
190
- : "bg-destructive"
191
- } flex items-center justify-center`}
192
- >
193
- {transaction.status === "completed" ? (
194
- <CheckCircle2 className="h-6 w-6 text-white" />
195
- ) : (
196
- <AlertCircle className="h-6 w-6 text-white" />
197
- )}
198
- </div>
199
- {transaction.status === "completed" && (
200
- <div className="w-0.5 h-8 bg-border" />
201
- )}
202
- </div>
203
- <div className="flex-1 pb-2">
204
- <p className="font-semibold">
205
- {transaction.status === "completed"
206
- ? "Payment Completed"
207
- : "Payment Failed"}
208
- </p>
209
- <p className="text-sm text-muted-foreground font-medium">
210
- {format(transaction.timestamp, "MMM dd, yyyy 'at' hh:mm a")}
211
- </p>
212
- </div>
213
- </div>
214
- )}
215
-
216
- {/* Processing */}
217
- {transaction.status === "completed" && (
218
- <div className="flex gap-4">
219
- <div className="flex flex-col items-center">
220
- <div className="h-10 w-10 rounded-full bg-accent flex items-center justify-center">
221
- <Clock className="h-6 w-6 text-white" />
222
- </div>
223
- <div className="w-0.5 h-8 bg-border" />
224
- </div>
225
- <div className="flex-1 pb-2">
226
- <p className="font-semibold">Processing Payment</p>
227
- <p className="text-sm text-muted-foreground font-medium">
228
- Verified and processed
229
- </p>
230
- </div>
231
- </div>
232
- )}
233
-
234
- {/* Initiated */}
235
- <div className="flex gap-4">
236
- <div className="flex flex-col items-center">
237
- <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
238
- <CheckCircle2 className="h-6 w-6 text-primary-foreground" />
239
- </div>
240
- </div>
241
- <div className="flex-1">
242
- <p className="font-semibold">Payment Initiated</p>
243
- <p className="text-sm text-muted-foreground font-medium">
244
- Transaction created
245
- </p>
246
- </div>
247
- </div>
248
- </div>
249
- </Card>
250
-
251
- {/* Transaction Details */}
252
- <Card className="p-6 border-0 shadow-md">
253
- <h3 className="text-lg font-bold mb-4">Payment Details</h3>
254
- <div className="space-y-4">
255
- <div className="flex justify-between">
256
- <span className="text-muted-foreground font-medium">Recipient</span>
257
- <span className="font-semibold text-right">
258
- {transaction.recipientName}
259
- </span>
260
- </div>
261
- <Separator />
262
- <div className="flex justify-between">
263
- <span className="text-muted-foreground font-medium">Email</span>
264
- <span className="font-semibold text-right break-all">
265
- {transaction.recipient}
266
- </span>
267
- </div>
268
- <Separator />
269
- {transaction.description && (
270
- <>
271
- <div className="flex justify-between">
272
- <span className="text-muted-foreground font-medium">
273
- Description
274
- </span>
275
- <span className="font-semibold text-right">
276
- {transaction.description}
277
- </span>
278
- </div>
279
- <Separator />
280
- </>
281
- )}
282
- <div className="flex justify-between">
283
- <span className="text-muted-foreground font-medium">Amount</span>
284
- <span className="font-semibold">
285
- {transaction.currency} {transaction.amount.toFixed(2)}
286
- </span>
287
- </div>
288
- <Separator />
289
- <div className="flex justify-between">
290
- <span className="text-muted-foreground font-medium">Fee</span>
291
- <span className="font-semibold">
292
- {transaction.currency} {transaction.fee.toFixed(2)}
293
- </span>
294
- </div>
295
- <Separator />
296
- <div className="flex justify-between text-lg">
297
- <span className="font-bold">Total</span>
298
- <span className="font-bold">
299
- {transaction.currency}{" "}
300
- {(transaction.amount + transaction.fee).toFixed(2)}
301
- </span>
302
- </div>
303
- </div>
304
- </Card>
305
-
306
- {/* Actions */}
307
- <div className="grid grid-cols-2 gap-3">
308
- <Button variant="outline" onClick={handleDownloadReceipt}>
309
- <Download className="h-5 w-5 mr-2" />
310
- Receipt
311
- </Button>
312
- <Button variant="outline" onClick={handleShare}>
313
- <Share2 className="h-5 w-5 mr-2" />
314
- Share
315
- </Button>
316
- </div>
317
-
318
- {/* Support */}
319
- <Card className="p-6 border-0 shadow-md">
320
- <h3 className="text-lg font-bold mb-4">Need Help?</h3>
321
- <div className="space-y-3">
322
- <Button
323
- variant="outline"
324
- className="w-full justify-start"
325
- onClick={handleContactSupport}
326
- >
327
- <MessageCircle className="h-5 w-5 mr-3" />
328
- Chat with Support
329
- </Button>
330
- <Button
331
- variant="outline"
332
- className="w-full justify-start"
333
- onClick={() => {
334
- toast({
335
- title: "Email Support",
336
- description: "Opening email client...",
337
- });
338
- }}
339
- >
340
- <Mail className="h-5 w-5 mr-3" />
341
- Email Support
342
- </Button>
343
- </div>
344
- <p className="text-xs text-muted-foreground mt-4 text-center font-medium">
345
- Our support team typically responds within 24 hours
346
- </p>
347
- </Card>
348
- </div>
349
- </Layout>
350
- );
351
-};
352
-
353
-export default TransactionDetails;