From a3703c30807621ddd4dce7b3cae0918d79fa8de1 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 24 Apr 2025 09:33:48 +0530 Subject: feat: updated advance ui and animation --- frontend/package-lock.json | 40 ++++ frontend/package.json | 1 + frontend/src/app/(main)/layout.tsx | 246 ++++++++++++++++++++-- frontend/src/components/shared/PageTransition.tsx | 55 +++++ frontend/src/components/shared/ThemeToggle.tsx | 53 ++++- frontend/src/components/ui/button.tsx | 31 ++- frontend/src/components/ui/card.tsx | 23 +- frontend/src/components/ui/input.tsx | 34 +-- 8 files changed, 425 insertions(+), 58 deletions(-) create mode 100644 frontend/src/components/shared/PageTransition.tsx (limited to 'frontend') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b46cf51..5eaa75f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "@tanstack/react-query": "^5.74.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "framer-motion": "^11.18.2", "lucide-react": "^0.503.0", "next": "15.3.1", "react": "^19.0.0", @@ -3353,6 +3354,32 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/framer-motion": { + "version": "11.18.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz", + "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==", + "dependencies": { + "motion-dom": "^11.18.1", + "motion-utils": "^11.18.1", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -4495,6 +4522,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/motion-dom": { + "version": "11.18.1", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz", + "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==", + "dependencies": { + "motion-utils": "^11.18.1" + } + }, + "node_modules/motion-utils": { + "version": "11.18.1", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz", + "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1b8aac7..eb04e83 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@tanstack/react-query": "^5.74.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "framer-motion": "^11.18.2", "lucide-react": "^0.503.0", "next": "15.3.1", "react": "^19.0.0", diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx index 846a118..5902dd6 100644 --- a/frontend/src/app/(main)/layout.tsx +++ b/frontend/src/app/(main)/layout.tsx @@ -6,6 +6,18 @@ import Link from 'next/link'; import { Button } from '@/components/ui/button'; import { authApi, userApi } from '@/lib/api'; import { ThemeToggle } from '@/components/shared/ThemeToggle'; +import { PageTransition } from '@/components/shared/PageTransition'; +import { + ChevronLeftIcon, + ChevronRightIcon, + LayoutDashboardIcon, + CoinsIcon, + TargetIcon, + SettingsIcon, + LogOutIcon, + MenuIcon +} from 'lucide-react'; +import { usePathname } from 'next/navigation'; export default function MainLayout({ @@ -14,8 +26,11 @@ export default function MainLayout({ children: React.ReactNode; }>) { const router = useRouter(); + const pathname = usePathname(); const [userName, setUserName] = useState(''); const [isLoading, setIsLoading] = useState(true); + const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); useEffect(() => { // Check if user is authenticated @@ -35,58 +50,251 @@ export default function MainLayout({ // If error fetching profile, redirect to login router.push('/login'); }); + + // Load sidebar state from localStorage + const savedSidebarState = localStorage.getItem('sidebarCollapsed'); + if (savedSidebarState !== null) { + setIsSidebarCollapsed(savedSidebarState === 'true'); + } }, [router]); + // Close mobile menu when changing routes + useEffect(() => { + setIsMobileMenuOpen(false); + }, [pathname]); + const handleLogout = () => { authApi.logout(); }; + const toggleSidebar = () => { + const newState = !isSidebarCollapsed; + setIsSidebarCollapsed(newState); + localStorage.setItem('sidebarCollapsed', newState.toString()); + }; + + const toggleMobileMenu = () => { + setIsMobileMenuOpen(!isMobileMenuOpen); + }; + if (isLoading) { - return
Loading...
; + return ( +
+
+
+
+
+

Loading...

+
+
+ ); } return ( -
+
{/* Top Navigation */} -
-
+
+
-
Finance Management
+ {/* Mobile menu button - only visible on small screens */} + +
+ + Finance Management + +
- Welcome!, {userName} +
+ + + + + + {userName} + +
-
- {/* Main Content */} -
- {/* Sidebar */} -
diff --git a/frontend/src/components/shared/PageTransition.tsx b/frontend/src/components/shared/PageTransition.tsx new file mode 100644 index 0000000..fc95865 --- /dev/null +++ b/frontend/src/components/shared/PageTransition.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { usePathname } from 'next/navigation'; +import { ReactNode, useEffect, useState } from 'react'; + +interface PageTransitionProps { + children: ReactNode; +} + +export function PageTransition({ children }: PageTransitionProps) { + const pathname = usePathname(); + const [isFirstRender, setIsFirstRender] = useState(true); + + useEffect(() => { + const timeout = setTimeout(() => { + setIsFirstRender(false); + }, 500); + + return () => clearTimeout(timeout); + }, []); + + const variants = { + hidden: { opacity: 0, y: 20 }, + enter: { opacity: 1, y: 0 }, + exit: { opacity: 0, y: -20 }, + }; + + // Only apply softer animation on initial render + const initialAnimation = isFirstRender ? { + initial: { opacity: 0 }, + animate: { opacity: 1 }, + transition: { duration: 0.5 } + } : { + initial: "hidden", + animate: "enter", + exit: "exit", + variants, + transition: { + type: "tween", + ease: "easeInOut", + duration: 0.3 + } + }; + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/frontend/src/components/shared/ThemeToggle.tsx b/frontend/src/components/shared/ThemeToggle.tsx index 679bbc5..b54bda9 100644 --- a/frontend/src/components/shared/ThemeToggle.tsx +++ b/frontend/src/components/shared/ThemeToggle.tsx @@ -1,36 +1,69 @@ 'use client'; +import { useState, useEffect } from 'react'; import { Moon, Sun } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useTheme } from './ThemeProvider'; export function ThemeToggle() { const { theme, setTheme } = useTheme(); + const [isAnimating, setIsAnimating] = useState(false); + + // Track initial mount to prevent animation on first render + const [isMounted, setIsMounted] = useState(false); + useEffect(() => { + setIsMounted(true); + }, []); const toggleTheme = () => { - if (theme === 'dark') { - setTheme('light'); - } else { - setTheme('dark'); - } + if (isAnimating) return; + + setIsAnimating(true); + + // Set new theme after a small delay for animation + const newTheme = theme === 'dark' ? 'light' : 'dark'; + setTimeout(() => { + setTheme(newTheme); + setTimeout(() => { + setIsAnimating(false); + }, 300); + }, 200); }; + if (!isMounted) { + return ( + + ); + } + return ( ); } \ No newline at end of file diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index a2df8dc..347beaf 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -5,32 +5,44 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98] will-change-transform", { variants: { variant: { default: - "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + "bg-primary text-primary-foreground shadow-sm hover:shadow-md hover:bg-primary/90 hover:translate-y-[-1px]", destructive: - "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + "bg-destructive text-white shadow-sm hover:shadow-md hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 hover:translate-y-[-1px]", outline: - "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + "border bg-background shadow-sm hover:shadow-md hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:border-primary/50", secondary: - "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + "bg-secondary text-secondary-foreground shadow-sm hover:shadow-md hover:bg-secondary/80 hover:translate-y-[-1px]", ghost: - "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", - link: "text-primary underline-offset-4 hover:underline", + "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.02]", + link: "text-primary underline-offset-4 hover:underline hover:text-primary/80", + gradient: + "bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-sm hover:shadow-md hover:opacity-90 hover:translate-y-[-1px] transition-all duration-300", }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", - icon: "size-9", + xl: "h-12 rounded-md px-8 text-base has-[>svg]:px-6", + icon: "size-9 p-0 aspect-square", + "icon-sm": "size-8 p-0 aspect-square rounded-md", }, + animation: { + none: "", + pulse: "animate-pulse", + bounce: "animate-bounce", + spin: "[&_svg]:animate-spin", + fadeIn: "animate-in fade-in", + } }, defaultVariants: { variant: "default", size: "default", + animation: "none", }, } ) @@ -39,6 +51,7 @@ function Button({ className, variant, size, + animation, asChild = false, ...props }: React.ComponentProps<"button"> & @@ -50,7 +63,7 @@ function Button({ return ( ) diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx index d05bbc6..9ec9328 100644 --- a/frontend/src/components/ui/card.tsx +++ b/frontend/src/components/ui/card.tsx @@ -2,12 +2,24 @@ import * as React from "react" import { cn } from "@/lib/utils" -function Card({ className, ...props }: React.ComponentProps<"div">) { +const cardVariants = { + default: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all duration-300", + interactive: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm hover:shadow-md transition-all duration-300 hover:border-primary/20 hover:translate-y-[-2px]", + elevated: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border-0 py-6 shadow-md transition-all duration-300", + outline: "bg-transparent text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-none transition-all duration-300", + gradient: "bg-gradient-to-br from-card to-background text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all duration-300", +} + +interface CardProps extends React.ComponentProps<"div"> { + variant?: keyof typeof cardVariants; +} + +function Card({ className, variant = "default", ...props }: CardProps) { return (
) {
) { return (
) @@ -75,7 +87,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (
) @@ -89,4 +101,5 @@ export { CardAction, CardDescription, CardContent, + cardVariants, } diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx index 03295ca..91d3df1 100644 --- a/frontend/src/components/ui/input.tsx +++ b/frontend/src/components/ui/input.tsx @@ -2,20 +2,24 @@ import * as React from "react" import { cn } from "@/lib/utils" -function Input({ className, type, ...props }: React.ComponentProps<"input">) { - return ( - - ) -} +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" export { Input } -- cgit v1.2.3-59-g8ed1b