Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): complete ProCanvas role-based overhaul and fix Recharts crash

Browse Source 
- Implement unified Neomorphic tactical layout for ProCanvas across Agent, Admin, and Owner roles.

- Add Quick Operations Log widget for immediate action logging.

- Integrate discrete Checkpoint/Stages progression system to replace static prize tracks.

- Build custom AnimatedCounter for GSAP-style numerical state changes.

- Fix Recharts ResponsiveContainer loading crash in OwnerSnapshot.jsx.
This commit is contained in:
Satyam
2026-02-21 21:23:37 +05:30
parent 7e166726da
commit 058b5bb217
8 changed files with 741 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/owner/OwnerSnapshot.jsx
+5 -5
View File
@@ -198,7 +198,7 @@ const OwnerSnapshot = () => {
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Budget vs Actual Spend</h3>
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Per project (in $k)</p>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="100%" height={256}>
<BarChart data={budgetChartData} barGap={4}>
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
@@ -215,7 +215,7 @@ const OwnerSnapshot = () => {
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Project Status</h3>
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Distribution</p>
<div className="h-64 flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="100%" height={256}>
<PieChart>
<Pie
data={statusChartData}
@@ -244,7 +244,7 @@ const OwnerSnapshot = () => {
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Monthly Spend Trend</h3>
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Last 12 months (in $k)</p>
<div className="h-56">
<ResponsiveContainer width="100%" height="100%">
<ResponsiveContainer width="100%" height={224}>
<BarChart data={monthlySpendData}>
<XAxis dataKey="month" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
@@ -275,8 +275,8 @@ const OwnerSnapshot = () => {
{activityFeed.length > 0 ? activityFeed.map((item, i) => (
<div key={i} className="flex items-start space-x-3 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
<div className={`w-2 h-2 mt-2 rounded-full shrink-0 ${item.action?.toLowerCase().includes('payment') ? 'bg-emerald-400' :
item.action?.toLowerCase().includes('issue') || item.action?.toLowerCase().includes('dispute') ? 'bg-red-400' :
'bg-blue-400'
item.action?.toLowerCase().includes('issue') || item.action?.toLowerCase().includes('dispute') ? 'bg-red-400' :
'bg-blue-400'
}`}></div>
<div>
<p className="text-sm text-zinc-600 dark:text-zinc-300">