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

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
@@ -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">
+11 -8
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,8 +94,15 @@ 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="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>
@@ -123,14 +130,9 @@ export default function RecoveryIncidentTabs() {
<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="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>
<CustomButton
disabled
@@ -142,6 +144,7 @@ export default function RecoveryIncidentTabs() {
</div>
</div>
</div>
</div>
{/* Bottom Sticky Action Bar */}
<div className="sticky bottom-[-24px] -mx-8 px-8 py-4 bg-white/90 backdrop-blur-md border-t border-gray-100 flex justify-between items-center z-10 mt-auto shadow-[0_-10px_20px_-10px_rgba(0,0,0,0.05)]">
+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>