@smbcloud / expenseflow-mobile
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
tsx 134 lines 3.8 KB
Raw
1 import { useNavigate } from "react-router-dom";
2 import Layout from "@/components/Layout";
3 import { Card } from "@/components/ui/card";
4 import { Send, Download, QrCode, Users } from "lucide-react";
5
6 const quickActions = [
7 {
8 id: 1,
9 name: "Send Money",
10 description: "Send payment instantly",
11 icon: Send,
12 color: "text-primary",
13 route: "/send",
14 },
15 {
16 id: 2,
17 name: "Request Money",
18 description: "Request from anyone",
19 icon: Download,
20 color: "text-accent",
21 route: "/request",
22 },
23 {
24 id: 3,
25 name: "QR Code",
26 description: "Receive via QR scan",
27 icon: QrCode,
28 color: "text-expense-positive",
29 route: "/qr",
30 },
31 {
32 id: 4,
33 name: "Recipients",
34 description: "Manage saved contacts",
35 icon: Users,
36 color: "text-muted-foreground",
37 route: "/recipients",
38 },
39 ];
40
41 const linkedCards = [
42 {
43 id: 1,
44 name: "Business Visa",
45 last4: "4242",
46 type: "Visa",
47 primary: true,
48 },
49 {
50 id: 2,
51 name: "Corporate Amex",
52 last4: "8888",
53 type: "Amex",
54 primary: false,
55 },
56 ];
57
58 const Pay = () => {
59 const navigate = useNavigate();
60
61 return (
62 <Layout title="Pay">
63 <div className="p-4 space-y-6">
64 {/* Quick Actions */}
65 <div>
66 <h3 className="text-xl font-bold mb-4">Quick Actions</h3>
67 <div className="grid grid-cols-2 gap-4">
68 {quickActions.map((action) => (
69 <Card
70 key={action.id}
71 className="p-6 hover:shadow-lg transition-all cursor-pointer border-0 shadow-md active:scale-95"
72 onClick={() => navigate(action.route)}
73 >
74 <div className="space-y-4">
75 <action.icon className={`h-10 w-10 ${action.color}`} />
76 <div>
77 <p className="font-semibold text-base mb-1">{action.name}</p>
78 <p className="text-xs text-muted-foreground font-medium">
79 {action.description}
80 </p>
81 </div>
82 </div>
83 </Card>
84 ))}
85 </div>
86 </div>
87
88 {/* Recent Recipients */}
89 <div>
90 <h3 className="text-xl font-bold mb-4">Recent Recipients</h3>
91 <div className="space-y-3">
92 {linkedCards.map((card) => (
93 <Card
94 key={card.id}
95 className="p-5 cursor-pointer hover:shadow-lg transition-all border-0 shadow-md"
96 >
97 <div className="flex items-center gap-4">
98 <div className="h-14 w-14 rounded-full bg-primary/10 flex items-center justify-center">
99 <span className="text-xl font-bold text-primary">
100 {card.name.charAt(0)}
101 </span>
102 </div>
103 <div className="flex-1">
104 <p className="font-semibold text-base">{card.name}</p>
105 <p className="text-sm text-muted-foreground font-medium">
106 {card.type} Account
107 </p>
108 </div>
109 </div>
110 </Card>
111 ))}
112 </div>
113 </div>
114
115 {/* Quick Transfer */}
116 <Card className="p-8 bg-card border-0 shadow-md">
117 <div className="text-center space-y-4">
118 <div className="h-32 w-32 mx-auto bg-muted rounded-2xl flex items-center justify-center">
119 <QrCode className="h-20 w-20 text-foreground" />
120 </div>
121 <div>
122 <h4 className="font-bold text-lg mb-2">Quick Pay QR Code</h4>
123 <p className="text-sm text-muted-foreground font-medium">
124 Scan this code to receive payments instantly
125 </p>
126 </div>
127 </div>
128 </Card>
129 </div>
130 </Layout>
131 );
132 };
133
134 export default Pay;