maskantech/aeroresolve_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement application sidebar and add policy engine creation component with recovery incidents index tab

Browse Source
This commit is contained in:
azeeee05
2026-07-22 14:50:50 +05:30
parent 170930e0dc
commit 2fa3259244
3 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/policyEngine/components/AddPolicyEngine.tsx
+1 -1
View File
@@ -331,7 +331,7 @@ export default function AddPolicyEngine() {
{/* ─── Body Content ──────────────────────────────────────────────── */}
<div className="flex-1 overflow-y-auto px-8 py-6 pb-32">
<div className="max-w-[1200px] mx-auto flex flex-col gap-6">
<div className="w-full flex flex-col gap-6">
{/* Policy Information Card */}
<div className="bg-[#FAFAFA] rounded-[16px] p-6 border border-gray-100">
src/app/recoveryIncidents/tabs/index.tsx
+41 -38
View File
@@ -83,7 +83,7 @@ export default function RecoveryIncidentTabs() {
{/* Main Content Area */}
<div className="flex gap-6 items-start pb-24">
{/* Left Column - Tab Content */}
<div className="flex-1 bg-[#F8F9FA] rounded-[24px] p-6 border border-gray-100">
<div className="flex-1 bg-[#F8F9FA] rounded-[24px] p-3 border border-gray-100">
<CustomTabs
tabs={tabItems}
value={activeTab}
@@ -94,51 +94,54 @@ export default function RecoveryIncidentTabs() {
</div>
{/* Right Column - Sidebar */}
<div className="w-[360px] flex-shrink-0 bg-[#F8F9FA] rounded-[16px] p-6 border border-gray-100">
<div className="w-[360px] flex-shrink-0 bg-[#F8F9FA] rounded-[16px] border border-gray-100 relative">
{/* Blur Overlay */}
<div className="absolute inset-0 z-10 flex items-center justify-center bg-white/20 backdrop-blur-[3px] rounded-[16px]">
<h4 className="text-[18px] font-bold text-[#143d30] italic">"Coming soon"</h4>
</div>
{/* Sidebar Content */}
<div className="flex items-center gap-2 mb-6">
<span className="text-[#1B9869]"><Sparkle size={20} weight="fill" /></span>
<h3 className="text-[13px] font-bold text-gray-400 tracking-wider">AI RECOMMENDATION</h3>
</div>
<div className="p-6 select-none pointer-events-none">
<div className="flex items-center gap-2 mb-6">
<span className="text-[#1B9869]"><Sparkle size={20} weight="fill" /></span>
<h3 className="text-[13px] font-bold text-gray-400 tracking-wider">AI RECOMMENDATION</h3>
</div>
<div className="mb-6">
<div className="flex justify-between items-end mb-2">
<span className="text-xs font-bold text-gray-400 tracking-wider">SATISFACTION PREDICT</span>
<span className="text-sm font-bold text-[#1B9869]">84%</span>
<div className="mb-6">
<div className="flex justify-between items-end mb-2">
<span className="text-xs font-bold text-gray-400 tracking-wider">SATISFACTION PREDICT</span>
<span className="text-sm font-bold text-[#1B9869]">84%</span>
</div>
<div className="h-2 bg-white rounded-full overflow-hidden border border-gray-100">
<div className="h-full bg-[#1B9869] w-[84%] rounded-full opacity-60"></div>
</div>
</div>
<div className="h-2 bg-white rounded-full overflow-hidden border border-gray-100">
<div className="h-full bg-[#1B9869] w-[84%] rounded-full opacity-60"></div>
</div>
</div>
<div className="mb-8">
<div className="flex justify-between items-end mb-2">
<span className="text-xs font-bold text-gray-400 tracking-wider">ESCALATION RISK</span>
<span className="text-sm font-bold text-blue-500">12%</span>
<div className="mb-8">
<div className="flex justify-between items-end mb-2">
<span className="text-xs font-bold text-gray-400 tracking-wider">ESCALATION RISK</span>
<span className="text-sm font-bold text-blue-500">12%</span>
</div>
<div className="h-2 bg-white rounded-full overflow-hidden border border-gray-100">
<div className="h-full bg-blue-500 w-[12%] rounded-full opacity-60"></div>
</div>
</div>
<div className="h-2 bg-white rounded-full overflow-hidden border border-gray-100">
<div className="h-full bg-blue-500 w-[12%] rounded-full opacity-60"></div>
</div>
</div>
<div className="pt-6 border-t border-gray-200">
<h3 className="text-[13px] font-bold text-gray-400 tracking-wider mb-4">NEXT RECOMMENDED ACTION</h3>
<div className="bg-white rounded-xl p-5 mb-4 border border-gray-100 shadow-sm relative overflow-hidden">
<div className="absolute inset-0 bg-white/40 backdrop-blur-[2px] z-10 flex items-center justify-center">
<h4 className="text-2xl font-bold text-gray-900 italic">"Coming soon"</h4>
</div>
<div className="opacity-30">
<div className="pt-6 border-t border-gray-200">
<h3 className="text-[13px] font-bold text-gray-400 tracking-wider mb-4">NEXT RECOMMENDED ACTION</h3>
<div className="bg-white rounded-xl p-5 mb-4 border border-gray-100 shadow-sm">
<p className="text-sm text-gray-500 text-center">Approve the automated recovery payout of [250 EUR]. This will prevent a regulatory complaint and retain this high-value Platinum member.</p>
</div>
</div>
</div>
<CustomButton
disabled
rightIcon={<ArrowLeft size={16} weight="bold" className="rotate-180" />}
className="w-full !py-3 !bg-[#1B9869]/50 !text-white !font-semibold !rounded-lg"
>
EXECUTE RECOMMENDATION
</CustomButton>
<CustomButton
disabled
rightIcon={<ArrowLeft size={16} weight="bold" className="rotate-180" />}
className="w-full !py-3 !bg-[#1B9869]/50 !text-white !font-semibold !rounded-lg"
>
EXECUTE RECOMMENDATION
</CustomButton>
</div>
</div>
</div>
</div>
src/layout/AppSidebar.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {
</button>
<button
onClick={() => setIsCollapsed(!isCollapsed)}
className="hidden lg:block text-slate-400 hover:text-slate-600 transition-colors ml-auto"
className={`hidden lg:block text-slate-400 hover:text-slate-600 transition-colors ${isCollapsed ? '' : 'ml-auto'}`}
>
{isCollapsed ? <CaretDoubleRight size={20} weight="bold" /> : <CaretDoubleLeft size={20} weight="bold" />}
</button>