Skip to content

Commit 2d869b7

Browse files
EGABO-TECHEGABO-TECH
committed
feat: exhaustive 1:1 parity final push - sidebar, trips, and wallet sync
1 parent 37b8c5a commit 2d869b7

3 files changed

Lines changed: 134 additions & 84 deletions

File tree

‎src/pages/Plan.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export default function Plan() {
177177
<h1 className="font-display font-bold text-foreground leading-tight">AI Pilot</h1>
178178
<p className="flex items-center gap-1.5 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
179179
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
180-
Agentic Node Online
180+
Online — Ready to plan
181181
</p>
182182
</div>
183183
</div>
@@ -314,7 +314,7 @@ export default function Plan() {
314314
}
315315
}}
316316
disabled={isTyping || showCheckout}
317-
placeholder="Tell the AI Pilot your travel dreams..."
317+
placeholder="Tell me where you want to go..."
318318
className="flex-1 bg-transparent border-none outline-none py-3.5 text-[15px] resize-none max-h-32 text-foreground placeholder:text-muted-foreground/60 leading-relaxed scrollbar-hide"
319319
/>
320320
<button

‎src/pages/Trips.tsx‎

Lines changed: 58 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,100 @@
1-
import { MapPin } from "lucide-react";
1+
import { MapPin, Calendar, CreditCard } from "lucide-react";
2+
import { motion } from "framer-motion";
23

34
export default function Trips() {
45
const trips = [
56
{
67
destination: "Uganda Safari",
78
dates: "Oct 12 – Oct 17, 2026",
8-
cost: "1450 cUSD",
9+
cost: "1,450 cUSD",
910
status: "active",
11+
id: "TRP-UG502"
1012
},
1113
{
1214
destination: "Tokyo, Japan",
1315
dates: "Apr 15 – Apr 22, 2026",
14-
cost: "$2840",
16+
cost: "$2,840",
1517
status: "active",
18+
id: "TRP-TYO10"
1619
},
1720
{
1821
destination: "Barcelona, Spain",
1922
dates: "May 10 – May 16, 2026",
20-
cost: "$1920",
23+
cost: "$1,920",
2124
status: "upcoming",
25+
id: "TRP-BCN04"
2226
},
2327
{
2428
destination: "Bali, Indonesia",
2529
dates: "Feb 1 – Feb 10, 2026",
26-
cost: "$2150",
30+
cost: "$2,150",
2731
status: "completed",
32+
id: "TRP-BAL88"
2833
},
2934
];
3035

3136
return (
32-
<div className="p-6 md:p-10 max-w-4xl mx-auto">
33-
<div className="mb-10">
34-
<h1 className="font-display text-3xl font-bold mb-2">My Trips</h1>
35-
<p className="text-muted-foreground text-sm">
36-
Your AI Pilot is monitoring all active journeys.
37+
<div className="p-6 md:p-10 max-w-5xl mx-auto py-16">
38+
<div className="mb-12">
39+
<h1 className="font-display text-4xl font-bold mb-3 tracking-tight">My Trips</h1>
40+
<p className="text-muted-foreground text-sm font-medium">
41+
Your AI Pilot is monitoring all active journeys and upcoming Flows.
3742
</p>
3843
</div>
3944

40-
<div className="flex flex-col gap-4">
45+
<div className="grid grid-cols-1 gap-6">
4146
{trips.map((trip, i) => (
42-
<div
47+
<motion.div
4348
key={i}
44-
className="group relative rounded-2xl border border-border/50 bg-card/30 backdrop-blur-sm p-6 transition-all hover:bg-card/50 hover:border-border"
49+
initial={{ opacity: 0, y: 20 }}
50+
animate={{ opacity: 1, y: 0 }}
51+
transition={{ delay: i * 0.1 }}
52+
className="group relative rounded-[28px] border border-border/40 bg-card/40 backdrop-blur-xl p-8 transition-all hover:bg-card/60 hover:border-primary/20 shadow-sm"
4553
>
46-
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
47-
<div className="flex items-start gap-4">
48-
<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
49-
<MapPin className="h-5 w-5 text-primary" />
54+
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
55+
<div className="flex items-start gap-6">
56+
<div className="h-14 w-14 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0 border border-primary/20 group-hover:bg-primary/20 transition-colors">
57+
<MapPin className="h-7 w-7 text-primary" />
5058
</div>
5159
<div>
52-
<h3 className="font-display text-xl font-bold text-foreground">
53-
{trip.destination}
54-
</h3>
55-
<p className="text-sm text-muted-foreground mt-1">
56-
{trip.dates}
57-
</p>
60+
<div className="flex items-center gap-3 mb-1">
61+
<h3 className="font-display text-2xl font-bold text-foreground">
62+
{trip.destination}
63+
</h3>
64+
<span
65+
className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${
66+
trip.status === "active"
67+
? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
68+
: trip.status === "upcoming"
69+
? "bg-blue-500/10 text-blue-500 border-blue-500/20"
70+
: "bg-secondary/50 text-muted-foreground border-border/50"
71+
}`}
72+
>
73+
{trip.status}
74+
</span>
75+
</div>
76+
<div className="flex flex-wrap gap-5 mt-3 text-sm text-muted-foreground font-medium">
77+
<div className="flex items-center gap-2">
78+
<Calendar className="h-4 w-4 text-primary/60" /> {trip.dates}
79+
</div>
80+
<div className="flex items-center gap-2">
81+
<span className="text-[10px] font-mono opacity-50">ID: {trip.id}</span>
82+
</div>
83+
</div>
5884
</div>
5985
</div>
6086

61-
<div className="flex sm:flex-col items-center sm:items-end justify-between sm:justify-center gap-2 border-t border-border/50 sm:border-0 pt-4 sm:pt-0 mt-2 sm:mt-0">
62-
<span
63-
className={`px-3 py-1 rounded-full text-xs font-semibold ${
64-
trip.status === "active"
65-
? "bg-emerald-500/10 text-emerald-500 border border-emerald-500/20"
66-
: trip.status === "upcoming"
67-
? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
68-
: "bg-secondary text-muted-foreground border border-border/50"
69-
}`}
70-
>
71-
{trip.status}
72-
</span>
73-
<span className="font-bold text-lg">{trip.cost}</span>
87+
<div className="flex items-center justify-between lg:justify-end gap-10 pt-6 lg:pt-0 border-t lg:border-t-0 border-border/20">
88+
<div className="text-right">
89+
<p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-1">Total Cost</p>
90+
<p className="text-2xl font-display font-bold text-foreground">{trip.cost}</p>
91+
</div>
92+
<button className="h-12 px-6 rounded-xl bg-secondary/50 border border-border/50 text-xs font-bold hover:bg-primary hover:text-primary-foreground hover:border-primary transition-all">
93+
Manage Flow
94+
</button>
7495
</div>
7596
</div>
76-
</div>
97+
</motion.div>
7798
))}
7899
</div>
79100
</div>

‎src/pages/Wallet.tsx‎

Lines changed: 74 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,130 @@
1-
import { Wallet as WalletIcon, ArrowUpRight, ArrowDownLeft, Plus } from "lucide-react";
1+
import { Wallet as WalletIcon, ArrowUpRight, ArrowDownLeft, Plus, History, Activity } from "lucide-react";
2+
import { motion } from "framer-motion";
23

34
export default function Wallet() {
45
const transactions = [
56
{
67
title: "Murchison Falls Safari",
78
date: "Mar 25, 2026",
8-
amount: "1450 cUSD",
9+
amount: "1,450 cUSD",
910
type: "out",
11+
status: "Confirmed"
1012
},
1113
{
1214
title: "Flight to Tokyo",
1315
date: "Mar 15, 2026",
14-
amount: "$890",
16+
amount: "$890.00",
1517
type: "out",
18+
status: "Confirmed"
1619
},
1720
{
1821
title: "Top-up via USDC",
1922
date: "Mar 14, 2026",
20-
amount: "+$2000",
23+
amount: "+$2,000.00",
2124
type: "in",
25+
status: "Completed"
2226
},
2327
{
2428
title: "Park Hyatt Tokyo",
2529
date: "Mar 14, 2026",
26-
amount: "$1540",
30+
amount: "$1,540.00",
2731
type: "out",
32+
status: "Confirmed"
2833
},
2934
{
3035
title: "Top-up via cUSD",
3136
date: "Mar 10, 2026",
32-
amount: "+$1500",
37+
amount: "+$1,500.00",
3338
type: "in",
39+
status: "Completed"
3440
},
3541
];
3642

3743
return (
38-
<div className="p-6 md:p-10 max-w-4xl mx-auto">
39-
<div className="mb-10">
40-
<h1 className="font-display text-3xl font-bold mb-2">MiniPay Wallet</h1>
41-
<p className="text-muted-foreground text-sm">
42-
Manage your crypto balance for seamless travel payments.
44+
<div className="p-6 md:p-10 max-w-5xl mx-auto py-16">
45+
<div className="mb-12">
46+
<h1 className="font-display text-4xl font-bold mb-3 tracking-tight">MiniPay Wallet</h1>
47+
<p className="text-muted-foreground text-sm font-medium">
48+
Manage your travel liquidity and authenticated on-chain transactions.
4349
</p>
4450
</div>
4551

46-
{/* Balance Card */}
47-
<div className="rounded-3xl bg-gradient-to-br from-card/80 to-background border border-border/50 p-8 shadow-xl relative overflow-hidden mb-12">
48-
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[100px] rounded-full pointer-events-none" />
52+
{/* Balance Card - Refined Parity */}
53+
<motion.div
54+
initial={{ opacity: 0, y: 20 }}
55+
animate={{ opacity: 1, y: 0 }}
56+
className="rounded-[32px] bg-gradient-to-br from-card/80 via-card/40 to-background border border-border/50 p-10 shadow-2xl relative overflow-hidden mb-16"
57+
>
58+
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[120px] rounded-full pointer-events-none" />
59+
<div className="absolute -bottom-20 -left-20 w-[300px] h-[300px] bg-purple-500/5 blur-[100px] rounded-full pointer-events-none" />
4960

50-
<div className="flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-end relative z-10">
61+
<div className="flex flex-col lg:flex-row gap-10 justify-between items-start lg:items-center relative z-10">
5162
<div>
52-
<div className="flex items-center gap-2 text-muted-foreground mb-3">
53-
<div className="h-8 w-8 rounded-lg bg-primary/20 flex items-center justify-center">
54-
<WalletIcon className="h-4 w-4 text-primary" />
63+
<div className="flex items-center gap-3 text-muted-foreground mb-4">
64+
<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center border border-primary/20">
65+
<WalletIcon className="h-5 w-5 text-primary" />
5566
</div>
56-
<span className="text-sm font-medium">Available Balance</span>
67+
<span className="text-sm font-bold uppercase tracking-widest opacity-80">Available Balance</span>
5768
</div>
58-
<div className="font-display text-5xl font-bold tracking-tight text-foreground">
59-
$1,535.00
69+
<div className="flex items-baseline gap-4">
70+
<div className="font-display text-6xl font-bold tracking-tighter text-foreground">
71+
$1,535.00
72+
</div>
73+
<div className="text-xl font-medium text-muted-foreground opacity-60 italic">
74+
≈ 1,535 cUSD
75+
</div>
6076
</div>
61-
<div className="flex items-center gap-3 mt-3 text-xs font-semibold text-muted-foreground">
62-
<span className="px-2 py-1 rounded bg-secondary">≈ 1,535 cUSD</span>
63-
<span className="flex items-center gap-1.5">
64-
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" /> MiniPay Network
65-
</span>
77+
<div className="flex items-center gap-4 mt-6">
78+
<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
79+
<Activity className="h-3.5 w-3.5 text-emerald-500" />
80+
<span className="text-[11px] font-bold text-emerald-500 uppercase tracking-wider">MiniPay Network Active</span>
81+
</div>
82+
<span className="text-[11px] font-mono text-muted-foreground opacity-50">Addr: 0x82...fA12</span>
6683
</div>
6784
</div>
6885

69-
<button className="flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-bold hover:opacity-90 transition-opacity glow-primary w-full sm:w-auto justify-center">
70-
<Plus className="h-4 w-4" /> Top Up
86+
<button className="flex items-center gap-3 bg-gradient-primary text-primary-foreground px-8 py-5 rounded-2xl font-bold text-sm shadow-xl shadow-primary/20 hover:scale-[1.02] transition-all active:scale-[0.98] w-full lg:w-auto justify-center">
87+
<Plus className="h-5 w-5" /> Top Up Wallet
7188
</button>
7289
</div>
73-
</div>
90+
</motion.div>
7491

75-
{/* Transactions */}
76-
<div>
77-
<h3 className="font-bold text-lg mb-6 flex items-center gap-2">
78-
Recent Transactions
79-
</h3>
92+
{/* Transactions - Full Parity List */}
93+
<div className="space-y-6">
94+
<div className="flex items-center justify-between px-2">
95+
<h3 className="font-display text-xl font-bold flex items-center gap-3">
96+
<History className="h-5 w-5 text-primary" /> Transaction History
97+
</h3>
98+
<button className="text-xs font-bold text-primary hover:underline">View All</button>
99+
</div>
80100

81-
<div className="flex flex-col gap-3">
101+
<div className="grid grid-cols-1 gap-3">
82102
{transactions.map((tx, i) => (
83-
<div key={i} className="flex items-center justify-between p-4 rounded-xl border border-border/50 bg-card/20 hover:bg-card/40 transition-colors">
84-
<div className="flex items-center gap-4">
85-
<div className={`h-10 w-10 rounded-full flex items-center justify-center ${
86-
tx.type === 'in' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-red-500/10 text-red-500'
103+
<motion.div
104+
key={i}
105+
initial={{ opacity: 0, x: -10 }}
106+
animate={{ opacity: 1, x: 0 }}
107+
transition={{ delay: i * 0.05 }}
108+
className="flex items-center justify-between p-6 rounded-2xl border border-border/40 bg-card/20 hover:bg-card/40 hover:border-border/60 transition-all group"
109+
>
110+
<div className="flex items-center gap-5">
111+
<div className={`h-12 w-12 rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110 ${
112+
tx.type === 'in' ? 'bg-emerald-500/10 text-emerald-500' : 'bg-primary/10 text-primary uppercase'
87113
}`}>
88-
{tx.type === 'in' ? <ArrowDownLeft className="h-5 w-5" /> : <ArrowUpRight className="h-5 w-5" />}
114+
{tx.type === 'in' ? <ArrowDownLeft className="h-6 w-6" /> : <ArrowUpRight className="h-6 w-6" />}
89115
</div>
90116
<div>
91-
<p className="font-semibold text-sm">{tx.title}</p>
92-
<p className="text-xs text-muted-foreground mt-0.5">{tx.date}</p>
117+
<p className="font-bold text-foreground tracking-tight">{tx.title}</p>
118+
<p className="text-[11px] text-muted-foreground font-medium mt-1 uppercase tracking-wider">{tx.date} • {tx.status}</p>
93119
</div>
94120
</div>
95-
<div className={`font-bold ${tx.type === 'in' ? 'text-emerald-500' : 'text-foreground'}`}>
96-
{tx.amount}
121+
<div className="text-right">
122+
<p className={`text-lg font-bold ${tx.type === 'in' ? 'text-emerald-500' : 'text-foreground'}`}>
123+
{tx.amount}
124+
</p>
125+
<span className="text-[10px] font-mono opacity-30">Confirmed</span>
97126
</div>
98-
</div>
127+
</motion.div>
99128
))}
100129
</div>
101130
</div>

0 commit comments

Comments
 (0)