Skip to content

Commit bcacd5f

Browse files
0xkid-root0xkid-root
committed
assets page cleanup
1 parent 342e104 commit bcacd5f

6 files changed

Lines changed: 420 additions & 415 deletions

File tree

‎src/pages/asset/AddAsset/FeeStructure/index.tsx‎

Lines changed: 152 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,209 +1,183 @@
1-
// =========================================================================
2-
// FeeStructure.tsx – Tokenisation Cost Calculator (Fully Updated)
3-
// Built with React 18, Framer-motion, TailwindCSS, shadcn/ui
4-
// =========================================================================
5-
import React from 'react';
6-
import { motion } from 'framer-motion';
1+
import React, { useState } from 'react';
72
import { useFormContext } from 'react-hook-form';
8-
93
import { FeeStructureComponent } from '@/components/FeeStructure';
10-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
11-
import { Alert, AlertDescription } from '@/components/ui/alert';
124
import { Badge } from '@/components/ui/badge';
13-
14-
import {
15-
Calculator,
16-
DollarSign,
17-
TrendingUp,
18-
Shield,
19-
Info,
5+
import { Input } from '@/components/ui/input';
6+
import {
7+
Calculator,
8+
DollarSign,
9+
TrendingUp,
10+
Shield,
11+
Info,
2012
CheckCircle2,
21-
AlertTriangle,
13+
LucideIcon
2214
} from 'lucide-react';
2315

24-
// -------------------------------------------------------------------------
25-
// Animation presets
26-
// -------------------------------------------------------------------------
27-
const container = {
28-
hidden: { opacity: 0 },
29-
visible: {
30-
opacity: 1,
31-
transition: { staggerChildren: 0.1, delayChildren: 0.2 },
32-
},
33-
};
16+
// Feature Card Component
17+
interface FeatureCardProps {
18+
icon: LucideIcon;
19+
title: string;
20+
description: string;
21+
}
3422

35-
const fadeUp = {
36-
hidden: { opacity: 0, y: 30 },
37-
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
38-
};
23+
const FeatureCard: React.FC<FeatureCardProps> = ({ icon: Icon, title, description }) => (
24+
<div className="flex items-center gap-4 p-4 rounded-xl border border-gray-100 shadow-sm bg-white">
25+
<div className={`p-2 rounded-lg ${Icon === TrendingUp ? 'bg-green-100' :
26+
Icon === Shield ? 'bg-blue-100' :
27+
Icon === Calculator ? 'bg-purple-100' :
28+
'bg-orange-100'}`}>
29+
<Icon className={`w-4 h-4 ${Icon === TrendingUp ? 'text-green-600' :
30+
Icon === Shield ? 'text-blue-600' :
31+
Icon === Calculator ? 'text-purple-600' :
32+
'text-orange-600'}`} />
33+
</div>
34+
<div>
35+
<div className="font-medium text-sm">{title}</div>
36+
<div className="text-xs text-gray-500">{description}</div>
37+
</div>
38+
</div>
39+
);
3940

40-
// -------------------------------------------------------------------------
41-
// Component
42-
// -------------------------------------------------------------------------
4341
const FeeStructure: React.FC = () => {
44-
const { watch } = useFormContext();
42+
const { watch, setValue } = useFormContext();
4543
const category = watch('category');
46-
const basePropertyValue = watch('basePropertyValue');
44+
const [propertyValue, setPropertyValue] = useState("");
4745

48-
const benefitCards = [
46+
const handlePropertyValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
47+
const value = e.target.value;
48+
setPropertyValue(value);
49+
setValue('basePropertyValue', value ? Number(value) : 0);
50+
};
51+
52+
// Features data
53+
const features = [
4954
{
50-
Icon: TrendingUp,
51-
title: 'Transparent Pricing',
52-
desc: 'Category-specific fee structures',
53-
color: 'text-emerald-600',
54-
bg: 'bg-emerald-100',
55+
icon: TrendingUp,
56+
title: "Transparent Pricing",
57+
description: "Category-specific fee structures"
5558
},
5659
{
57-
Icon: Shield,
58-
title: 'Regulatory Compliant',
59-
desc: 'All legal & compliance costs included',
60-
color: 'text-blue-600',
61-
bg: 'bg-blue-100',
60+
icon: Shield,
61+
title: "Regulatory Compliant",
62+
description: "All legal & compliance costs included"
6263
},
6364
{
64-
Icon: Calculator,
65-
title: 'Real-Time Calculation',
66-
desc: 'Instant updates on value change',
67-
color: 'text-purple-600',
68-
bg: 'bg-purple-100',
65+
icon: Calculator,
66+
title: "Real-Time Calculation",
67+
description: "Instant updates on value change"
6968
},
7069
{
71-
Icon: CheckCircle2,
72-
title: 'All-Inclusive',
73-
desc: 'Zero hidden or surprise fees',
74-
color: 'text-orange-600',
75-
bg: 'bg-orange-100',
76-
},
70+
icon: CheckCircle2,
71+
title: "All-Inclusive",
72+
description: "Zero hidden or surprise fees"
73+
}
7774
];
7875

7976
return (
80-
<motion.section
81-
variants={container}
82-
initial="hidden"
83-
animate="visible"
84-
className="flex flex-col w-full space-y-8"
85-
>
86-
87-
{/* ------------------------------------------------------------------ */}
88-
{/* Hero Header */}
89-
{/* ------------------------------------------------------------------ */}
90-
<motion.header
91-
variants={fadeUp}
92-
className="relative overflow-hidden rounded-xl p-6 m-4 shadow-sm border"
93-
>
94-
{/* subtle animated blobs */}
95-
{/* <div className="absolute -top-10 -right-10 w-40 h-40 bg-blue-400/10 rounded-full blur-3xl animate-pulse" />
96-
<div className="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-400/10 rounded-full blur-3xl animate-pulse delay-1000" /> */}
97-
98-
<div className="relative flex items-center gap-4">
99-
<motion.div
100-
whileHover={{ scale: 1.05, rotate: 3 }}
101-
className="p-3 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl shadow-lg"
102-
>
103-
<Calculator className="w-7 h-7 text-white" />
104-
</motion.div>
77+
<div className="flex flex-col w-full space-y-6">
78+
{/* Header */}
79+
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
80+
<div className="flex items-center gap-3">
81+
<div className="p-3 bg-blue-100 rounded-lg">
82+
<Calculator className="w-5 h-5 text-blue-600" />
83+
</div>
10584
<div>
106-
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-60\ bg-clip-text text-transparent">
107-
Tokenisation Fee Structure
108-
</h1>
109-
<p className="text-gray-600 mt-1 flex items-center gap-2">
110-
<DollarSign className="w-4 h-4" />
111-
Understand the total cost of digitalising your real-estate asset.
112-
</p>
85+
<h1 className="text-xl font-bold text-gray-900">Tokenisation Fee Structure</h1>
86+
<p className="text-sm text-gray-600">$ Understand the total cost of digitalising your real-estate asset.</p>
11387
</div>
11488
</div>
115-
</motion.header>
116-
117-
{/* ------------------------------------------------------------------ */}
118-
{/* Key Benefits */}
119-
{/* ------------------------------------------------------------------ */}
120-
<motion.div variants={fadeUp} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 m-4">
121-
{benefitCards.map(({ Icon, title, desc, color, bg }, idx) => (
122-
<motion.div
123-
key={title}
124-
variants={fadeUp}
125-
whileHover={{ scale: 1.03, y: -2 }}
126-
className={`p-4 rounded-xl border border-gray-200 bg-white shadow-sm hover:shadow-md transition-all ${bg}`}
127-
>
128-
<div className="flex items-center gap-3">
129-
<Icon className={`w-6 h-6 ${color}`} />
130-
<div>
131-
<h3 className="font-semibold text-gray-900 text-sm">{title}</h3>
132-
<p className="text-xs text-gray-600 mt-0.5">{desc}</p>
133-
</div>
134-
</div>
135-
</motion.div>
136-
))}
137-
</motion.div>
138-
139-
{/* ------------------------------------------------------------------ */}
140-
{/* Missing Category Alert */}
141-
{/* ------------------------------------------------------------------ */}
142-
{!category && (
143-
<motion.div variants={fadeUp}>
144-
<Alert className="bg-amber-50 border-amber-300 text-amber-800">
145-
<AlertTriangle className="w-5 h-5" />
146-
<AlertDescription>
147-
<strong>Asset category required.</strong>
148-
Please select the asset category in the previous step to load the correct fee schedule.
149-
</AlertDescription>
150-
</Alert>
151-
</motion.div>
152-
)}
89+
</div>
15390

154-
{/* ------------------------------------------------------------------ */}
155-
{/* Core Fee Component */}
156-
{/* ------------------------------------------------------------------ */}
157-
{category && (
158-
<motion.div variants={fadeUp}>
159-
<FeeStructureComponent
160-
showComparison
161-
allowCustomization={false}
162-
compactMode={false}
91+
{/* Features */}
92+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
93+
{features.map((feature, index) => (
94+
<FeatureCard
95+
key={index}
96+
icon={feature.icon}
97+
title={feature.title}
98+
description={feature.description}
16399
/>
164-
</motion.div>
165-
)}
100+
))}
101+
</div>
166102

167-
{/* ------------------------------------------------------------------ */}
168-
{/* Important Information Card */}
169-
{/* ------------------------------------------------------------------ */}
170-
{category && (
171-
<motion.div variants={fadeUp}>
172-
<Card className="border-l-4 border-l-blue-500 bg-blue-50/60">
173-
<CardHeader>
174-
<CardTitle className="flex items-center gap-2">
175-
<Info className="w-5 h-5 text-blue-600" />
176-
Need-to-Know
177-
</CardTitle>
178-
</CardHeader>
179-
<CardContent className="space-y-4">
180-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
181-
<div>
182-
<h4 className="font-semibold text-gray-900 mb-1">Token Supply Basis</h4>
183-
<p className="text-sm text-gray-600">
184-
Tokens are issued against the <strong>Gross Total Property Value</strong>,
185-
i.e. purchase price plus all fees—no surprises.
186-
</p>
187-
</div>
188-
<div>
189-
<h4 className="font-semibold text-gray-900 mb-1">Payment Milestones</h4>
190-
<p className="text-sm text-gray-600">
191-
Registration & legal fees are due at closing; platform fees are settled at token issuance.
192-
</p>
193-
</div>
194-
</div>
103+
{/* Fee Structure */}
104+
<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
105+
<div className="flex items-center gap-3 mb-4">
106+
<div className="p-2 bg-blue-100 rounded-lg">
107+
<DollarSign className="w-4 h-4 text-blue-600" />
108+
</div>
109+
<h2 className="text-lg font-semibold text-gray-900">Fee Structure</h2>
110+
<Badge className="ml-1 bg-blue-100 text-blue-700 hover:bg-blue-200">Asset Category Fees</Badge>
111+
</div>
112+
113+
<div className="mb-8">
114+
<div className="flex items-center gap-2 mb-2">
115+
<DollarSign className="w-4 h-4 text-gray-500" />
116+
<h3 className="text-base font-medium text-gray-800">Base Property Value</h3>
117+
</div>
118+
119+
<div className="flex items-center gap-2">
120+
<div className="text-sm font-medium text-gray-700 w-32">Property Value (USD)</div>
121+
<Input
122+
type="text"
123+
value={propertyValue}
124+
onChange={handlePropertyValueChange}
125+
placeholder="Enter property value"
126+
className="w-full max-w-md"
127+
/>
128+
</div>
129+
</div>
130+
131+
{/* Fee Structure Component */}
132+
<div className="mb-6">
133+
<div className="flex items-center gap-2 mb-4">
134+
<div className="w-6 h-6 bg-blue-100 flex items-center justify-center rounded-full">
135+
<span className="text-blue-600 text-sm font-semibold">$</span>
136+
</div>
137+
<h3 className="text-base font-medium text-gray-800">Fee Structure</h3>
138+
<Badge className="ml-1 bg-blue-50 text-blue-700">Asset Category Fees</Badge>
139+
</div>
140+
141+
{category && (
142+
<FeeStructureComponent
143+
showComparison={false}
144+
allowCustomization={false}
145+
compactMode={true}
146+
/>
147+
)}
148+
</div>
149+
</div>
195150

196-
<div className="bg-white p-4 rounded-lg border">
197-
<Badge className="bg-blue-100 text-blue-700 mb-2">Pro Tip</Badge>
198-
<p className="text-sm text-gray-700">
199-
Fee percentages are pre-optimised per asset category and jurisdiction; adjust base value to see live updates.
200-
</p>
201-
</div>
202-
</CardContent>
203-
</Card>
204-
</motion.div>
205-
)}
206-
</motion.section>
151+
{/* Need-to-Know Information */}
152+
<div className="bg-blue-50 rounded-xl p-6 border border-blue-100">
153+
<div className="flex items-center mb-4">
154+
<Info className="w-5 h-5 text-blue-600 mr-2" />
155+
<h3 className="text-lg font-semibold text-gray-900">Need-to-Know</h3>
156+
</div>
157+
158+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
159+
<div>
160+
<h4 className="font-medium text-gray-800 mb-1">Token Supply Basis</h4>
161+
<p className="text-sm text-gray-600">
162+
Tokens are issued against the Gross Total Property Value (i.e. purchase price plus all fees—no surprises).
163+
</p>
164+
</div>
165+
<div>
166+
<h4 className="font-medium text-gray-800 mb-1">Payment Milestones</h4>
167+
<p className="text-sm text-gray-600">
168+
Registration & legal fees are due at closing; platform fees are settled at token issuance.
169+
</p>
170+
</div>
171+
</div>
172+
173+
<div className="bg-white p-4 rounded-lg border border-blue-100">
174+
<Badge className="bg-blue-100 text-blue-700 mb-2">Pro Tip</Badge>
175+
<p className="text-sm text-gray-700">
176+
Fee percentages are pre-optimised per asset category and jurisdiction; adjust base value to see live updates.
177+
</p>
178+
</div>
179+
</div>
180+
</div>
207181
);
208182
};
209183

0 commit comments

Comments
 (0)