@smbcloud / snac
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
tsx 148 lines 4.39 KB
Raw
1 import { useNavigate } from "react-router-dom";
2 import { Card } from "@/components/ui/card";
3 import { Send, Download, QrCode, Users } from "lucide-react";
4 import { useLang } from "@/context/LanguageContext";
5 import { useAccount } from "@/context/AccountContext";
6
7 const linkedCards = [
8 {
9 id: 1,
10 name: "Business Visa",
11 last4: "4242",
12 type: "Visa",
13 primary: true,
14 },
15 {
16 id: 2,
17 name: "Corporate Amex",
18 last4: "8888",
19 type: "Amex",
20 primary: false,
21 },
22 ];
23
24 const Pay = () => {
25 const navigate = useNavigate();
26 const { t, lang } = useLang();
27 const isRTL = lang === "fa";
28 const { loggedIn, user } = useAccount();
29
30 const quickActions = [
31 {
32 id: 1,
33 name: t.sendMoneyAction,
34 description: t.sendMoneyDesc,
35 icon: Send,
36 color: "text-primary",
37 route: "/send",
38 },
39 {
40 id: 2,
41 name: t.requestMoney,
42 description: t.requestMoneyDesc,
43 icon: Download,
44 color: "text-accent",
45 route: "/request",
46 },
47 {
48 id: 3,
49 name: t.qrCode,
50 description: t.qrCodeDesc,
51 icon: QrCode,
52 color: "text-expense-positive",
53 route: "/qr",
54 },
55 {
56 id: 4,
57 name: t.recipients,
58 description: t.recipientsDesc,
59 icon: Users,
60 color: "text-muted-foreground",
61 route: "/recipients",
62 },
63 ];
64
65 return (
66 <div className="p-4 space-y-6" dir={isRTL ? "rtl" : "ltr"}>
67 {!loggedIn && (
68 <Card className="p-8 bg-card border-0 shadow-lg">
69 <div className="space-y-2">Login to see your account</div>
70 </Card>
71 )}
72 {/* LOGGED IN */}
73 {user && (
74 <>
75 {/* Quick Actions */}
76 <div>
77 <h3 className="text-xl font-bold mb-4">{t.quickActions}</h3>
78 <div className="grid grid-cols-2 gap-4">
79 {quickActions.map((action) => (
80 <Card
81 key={action.id}
82 className="p-6 hover:shadow-lg transition-all cursor-pointer border-0 shadow-md active:scale-95"
83 onClick={() => navigate(action.route)}
84 >
85 <div className="space-y-4">
86 <action.icon className={`h-10 w-10 ${action.color}`} />
87 <div>
88 <p className="font-semibold text-base mb-1">
89 {action.name}
90 </p>
91 <p className="text-xs text-muted-foreground font-medium">
92 {action.description}
93 </p>
94 </div>
95 </div>
96 </Card>
97 ))}
98 </div>
99 </div>
100
101 {/* Recent Recipients */}
102 <div>
103 <h3 className="text-xl font-bold mb-4">{t.recentRecipients}</h3>
104 <div className="space-y-3">
105 {linkedCards.map((card) => (
106 <Card
107 key={card.id}
108 className="p-5 cursor-pointer hover:shadow-lg transition-all border-0 shadow-md"
109 >
110 <div className="flex items-center gap-4">
111 <div className="h-14 w-14 rounded-full bg-primary/10 flex items-center justify-center">
112 <span className="text-xl font-bold text-primary">
113 {card.name.charAt(0)}
114 </span>
115 </div>
116 <div className="flex-1">
117 <p className="font-semibold text-base">{card.name}</p>
118 <p className="text-sm text-muted-foreground font-medium">
119 {card.type} {t.account}
120 </p>
121 </div>
122 </div>
123 </Card>
124 ))}
125 </div>
126 </div>
127
128 {/* Quick Transfer */}
129 <Card className="p-8 bg-card border-0 shadow-md">
130 <div className="text-center space-y-4">
131 <div className="h-32 w-32 mx-auto bg-muted rounded-2xl flex items-center justify-center">
132 <QrCode className="h-20 w-20 text-foreground" />
133 </div>
134 <div>
135 <h4 className="font-bold text-lg mb-2">{t.quickPayQR}</h4>
136 <p className="text-sm text-muted-foreground font-medium">
137 {t.quickPayQRDesc}
138 </p>
139 </div>
140 </div>
141 </Card>
142 </>
143 )}
144 </div>
145 );
146 };
147
148 export default Pay;