Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:48 UTC
75b43fa3b2ead2725c569ec5c1dcce84da90ee8f
1 file changed
+159
-2
src/pages/PayAIAgent.tsx
+159
-2
@@ -1,7 +1,164 @@
1
+import { Button } from "@/components/ui/button";
2
+import { Card } from "@/components/ui/card";
3
+import { ArrowLeft, Bot, Copy, Send, MoreHorizontal } from "lucide-react";
4
+import { Link } from "react-router-dom";
5
+import { ThemeToggle } from "@/components/ThemeToggle";
6
+import { toast } from "@/hooks/use-toast";
7
+
8
+const agents = [
9
+ {
10
+ id: 1,
11
+ name: "Expense Bot",
12
+ icon: "🤖",
13
+ color: "bg-primary",
14
+ wallet: "0x7aB3...f9E2",
15
+ balance: 12.4523,
16
+ token: "$SNAC",
17
+ status: "Processing 3 receipts",
18
+ },
19
+ {
20
+ id: 2,
21
+ name: "Report Agent",
22
+ icon: "📊",
23
+ color: "bg-blue-500",
24
+ wallet: "0x9cD1...a4B7",
25
+ balance: 8.2156,
26
+ token: "$SNAC",
27
+ status: "Generating monthly report",
28
+ },
29
+ {
30
+ id: 3,
31
+ name: "Approval Bot",
32
+ icon: "✅",
33
+ color: "bg-green-500",
34
+ wallet: "0x2eF8...c3D9",
35
+ balance: 5.8901,
36
+ token: "$SNAC",
37
+ status: "Reviewing 7 requests",
38
+ },
39
+ {
40
+ id: 4,
41
+ name: "Analytics Agent",
42
+ icon: "📈",
43
+ color: "bg-purple-500",
44
+ wallet: "0x5bA2...e1F6",
45
+ balance: 3.7234,
46
+ token: "$SNAC",
47
+ status: "Analyzing spending trends",
48
+ },
49
+];
50
+
51
const PayAIAgent = () => {
52
+ const handleCopyWallet = (wallet: string) => {
53
+ navigator.clipboard.writeText(wallet);
54
+ toast({
55
+ title: "Wallet copied",
56
+ description: "Agent wallet address copied to clipboard",
57
+ });
58
+ };
59
+
60
+ const handlePay = (agentName: string) => {
61
+ toast({
62
+ title: "Payment initiated",
63
+ description: `Opening payment flow for ${agentName}`,
64
+ });
65
+ };
66
+
67
return (
3
- <div className="min-h-screen bg-background">
4
- {/* Empty page - ready for content */}
68
+ <div className="min-h-screen bg-muted/30">
69
+ {/* Header */}
70
+ <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
71
+ <div className="container flex items-center justify-between h-16 md:h-20">
72
+ <Link to="/employee-portal" className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
73
+ <ArrowLeft className="w-5 h-5" />
74
+ <span className="hidden sm:inline text-sm font-medium">Back to Portal</span>
75
+ </Link>
76
+
77
+ <div className="flex items-center gap-2">
78
+ <Bot className="w-6 h-6 text-primary" />
79
+ <span className="text-xl font-bold text-foreground">AI Agents</span>
80
+ </div>
81
+
82
+ <ThemeToggle />
83
+ </div>
84
+ </header>
85
+
86
+ {/* Main Content */}
87
+ <main className="pt-24 pb-12 px-4">
88
+ <div className="container max-w-2xl mx-auto">
89
+ {/* Hero Section */}
90
+ <div className="text-center mb-8 animate-fade-up">
91
+ <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-3">
92
+ Pay Your AI Agents
93
+ </h1>
94
+ <p className="text-muted-foreground text-lg">
95
+ These agents are working hard for you. Reward them for their service.
96
+ </p>
97
+ </div>
98
+
99
+ {/* Agent Cards */}
100
+ <div className="space-y-4">
101
+ {agents.map((agent, index) => (
102
+ <Card
103
+ key={agent.id}
104
+ className="p-6 bg-background border-border hover:shadow-lg transition-shadow animate-fade-up"
105
+ style={{ animationDelay: `${index * 100}ms` }}
106
+ >
107
+ <div className="flex items-start justify-between mb-4">
108
+ <div className="flex items-center gap-3">
109
+ <div className={`w-12 h-12 rounded-full ${agent.color} flex items-center justify-center text-2xl`}>
110
+ {agent.icon}
111
+ </div>
112
+ <div>
113
+ <h3 className="font-semibold text-foreground text-lg">{agent.name}</h3>
114
+ <p className="text-sm text-muted-foreground">{agent.status}</p>
115
+ </div>
116
+ </div>
117
+ <Button variant="ghost" size="icon" className="text-muted-foreground">
118
+ <MoreHorizontal className="w-5 h-5" />
119
+ </Button>
120
+ </div>
121
+
122
+ <div className="bg-muted/50 rounded-xl p-4 mb-4">
123
+ <div className="flex items-center justify-between mb-2">
124
+ <span className="text-sm text-muted-foreground">Agent Balance</span>
125
+ <div className="flex items-center gap-2">
126
+ <span className="text-sm text-muted-foreground font-mono">{agent.wallet}</span>
127
+ <Button
128
+ variant="ghost"
129
+ size="icon"
130
+ className="h-6 w-6 text-muted-foreground hover:text-foreground"
131
+ onClick={() => handleCopyWallet(agent.wallet)}
132
+ >
133
+ <Copy className="w-3.5 h-3.5" />
134
+ </Button>
135
+ </div>
136
+ </div>
137
+ <div className="flex items-baseline gap-2">
138
+ <span className="text-3xl font-bold text-foreground">{agent.balance.toFixed(4)}</span>
139
+ <span className="text-lg text-muted-foreground font-medium">{agent.token}</span>
140
+ </div>
141
+ </div>
142
+
143
+ <Button
144
+ onClick={() => handlePay(agent.name)}
145
+ className="w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full py-6 text-lg font-semibold"
146
+ >
147
+ <Send className="w-5 h-5 mr-2" />
148
+ Send
149
+ </Button>
150
+ </Card>
151
+ ))}
152
+ </div>
153
+
154
+ {/* Bottom Info */}
155
+ <div className="mt-8 text-center animate-fade-up" style={{ animationDelay: '400ms' }}>
156
+ <p className="text-sm text-muted-foreground">
157
+ Payments are processed on the Snac network. <a href="#" className="text-primary hover:underline">Learn more</a>
158
+ </p>
159
+ </div>
160
+ </div>
161
+ </main>
162
</div>
163
);
164
};