"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { LayoutDashboard, Wallet, PieChart, Target, FileText, Settings, Menu, X, CreditCard, PlusCircle, Bell } from "lucide-react"; export default function SoftFloatingPanelSidebar() { const [activeItem, setActiveItem] = useState("Analytics"); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const navItems = [ { id: "Summary", icon: LayoutDashboard }, { id: "Accounts", icon: Wallet }, { id: "Analytics", icon: PieChart, badge: "8" }, { id: "Budgets", icon: Target }, { id: "Invoices", icon: FileText } ]; const bottomItems = [ { id: "Settings", icon: Settings }, ]; const SidebarContent = ({ isMobile = false }: { isMobile?: boolean }) => (

SOFT.FI Core Banking v2

{navItems.map((item) => { const isActive = activeItem === item.id; return ( ); })}

New Service

Instantly create a new savings bucket or virtual card.

{bottomItems.map((item) => ( ))}

); return (

SOFT.FI

{isMobileMenuOpen && ( setIsMobileMenuOpen(false)} /> )} {isMobileMenuOpen && (

SOFT.FI

)}

{activeItem}

Awaiting data synchronization for fiscal period 2026.

{[ { title: "Net Balances", value: "$124,532.09", color: "text-neutral-900 dark:text-white" }, { title: "Fiscal Savings", value: "84.2%", color: "text-emerald-600 dark:text-emerald-400" }, { title: "Risk Factor", value: "Minimal", color: "text-rose-600 dark:text-rose-400" } ].map((stat, i) => (

{stat.title}

{stat.value}

))}

Waiting for backend data synchronization...