stable ui

src/app/admin/page.js

@@ -0,0 +1,68 @@
+'use client';
+import Header from '@/components/Header';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { Layers, Users, BarChart3 } from 'lucide-react';
+
+export default function AdminDashboard() {
+  
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1 }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 300, damping: 24 } }
+  };
+
+  return (
+    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20">
+      <Header title="پنل مدیریت" showBack={true} />
+      
+      <motion.div 
+        variants={container}
+        initial="hidden"
+        animate="show"
+        className="p-5 flex flex-col gap-4"
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <motion.div variants={item}>
+            <Link href="/admin/locations" className="bg-white/80 backdrop-blur-sm border border-gray-100 rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] p-6 flex flex-col items-center justify-center aspect-square gap-3 hover:bg-white hover:scale-[1.02] active:scale-95 transition-all">
+              <div className="w-12 h-12 bg-purple-50 text-purple-600 rounded-2xl flex items-center justify-center mb-1">
+                <Layers strokeWidth={1.5} size={24} />
+              </div>
+              <span className="font-extrabold text-xs text-gray-700">مدیریت قفسه‌ها</span>
+            </Link>
+          </motion.div>
+          
+          <motion.div variants={item}>
+            <Link href="/admin/stats" className="bg-white/80 backdrop-blur-sm border border-gray-100 rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] p-6 flex flex-col items-center justify-center aspect-square gap-3 hover:bg-white hover:scale-[1.02] active:scale-95 transition-all">
+              <div className="w-12 h-12 bg-blue-50 text-blue-500 rounded-2xl flex items-center justify-center mb-1">
+                <BarChart3 strokeWidth={1.5} size={24} />
+              </div>
+              <span className="font-extrabold text-xs text-gray-700">آمار طبقات</span>
+            </Link>
+          </motion.div>
+        </div>
+        
+        <motion.div variants={item}>
+          <div className="opacity-60 bg-white/80 backdrop-blur-sm border border-gray-100 rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] p-5 flex items-center justify-between transition-all cursor-not-allowed">
+            <div className="flex items-center gap-4">
+              <div className="w-10 h-10 bg-gray-100 text-gray-400 rounded-xl flex items-center justify-center">
+                <Users strokeWidth={1.5} size={20} />
+              </div>
+              <span className="font-extrabold text-sm text-gray-500">مدیریت کاربران (به زودی)</span>
+            </div>
+            <div className="w-8 h-8 bg-gray-50 rounded-full flex items-center justify-center">
+              <svg className="w-4 h-4 text-gray-300 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

src/app/admin/stats/page.js

@@ -0,0 +1,73 @@
+'use client';
+import { useState, useEffect } from 'react';
+import Header from '@/components/Header';
+import { motion } from 'framer-motion';
+
+export default function AdminStats() {
+  const [stats, setStats] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/admin/stats')
+      .then(res => res.json())
+      .then(data => {
+        setStats(data);
+        setLoading(false);
+      });
+  }, []);
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1 }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className="w-full min-h-screen bg-gray-50 flex flex-col pb-20">
+      <Header title="آمار طبقات" showBack={true} />
+      
+      <div className="p-5 flex flex-col gap-4">
+        {loading ? (
+          <div className="flex justify-center items-center h-40">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
+          </div>
+        ) : stats.length === 0 ? (
+          <div className="text-center text-gray-400 p-10 text-sm font-medium bg-white/60 rounded-3xl border border-gray-100">
+            هیچ آماری یافت نشد.
+          </div>
+        ) : (
+          <motion.div variants={container} initial="hidden" animate="show" className="flex flex-col gap-3">
+            {stats.map((stat, index) => (
+              <motion.div 
+                key={index} 
+                variants={item}
+                className="bg-white/80 backdrop-blur-sm border border-gray-100 rounded-2xl shadow-sm p-4 flex items-center justify-between hover:scale-[1.01] transition-transform"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-blue-50 text-blue-600 font-extrabold text-xl rounded-xl flex items-center justify-center">
+                    {stat.floor}
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="font-extrabold text-gray-800 text-sm">شمارش‌های ثبت شده</span>
+                    <span className="text-xs text-gray-500 mt-0.5">در تمامی مناطق و قطاع‌ها</span>
+                  </div>
+                </div>
+                
+                <div className="text-2xl font-black text-gray-900">
+                  {stat.totalCountings}
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/api/auth/login/route.js

@@ -26,7 +26,7 @@ export async function POST(req) {
 
     const token = signToken({ id: user.id, username: user.username, name: user.name, orgId: user.orgId, role: user.role });
 
-    return Response.json({ message: 'با موفقیت وارد شدید', token, user: { id: user.id, name: user.name, orgId: user.orgId, role: user.role } });
+    return Response.json({ message: 'با موفقیت وارد شدید', token, user: { id: user.id, name: user.name, orgId: user.orgId, role: user.role, avatarUrl: user.avatarUrl } });
   } catch (error) {
     console.error(error);
     return Response.json({ error: 'خطای سرور رخ داد.' }, { status: 500 });

src/app/api/auth/webauthn/login/generate-options/route.js

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+import { generateAuthenticationOptions } from '@simplewebauthn/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function POST(req) {
+  try {
+    const url = new URL(req.url);
+    const rpID = url.hostname;
+    const { username } = await req.json();
+    
+    if (!username) return NextResponse.json({ error: 'لطفاً ابتدا شماره موبایل را وارد کنید' }, { status: 400 });
+
+    const user = await prisma.user.findUnique({ 
+      where: { username }, 
+      include: { authenticators: true } 
+    });
+    
+    if (!user) return NextResponse.json({ error: 'حسابی با این شماره یافت نشد' }, { status: 404 });
+    if (!user.authenticators.length) return NextResponse.json({ error: 'اثر انگشتی روی این حساب فعال نیست' }, { status: 400 });
+
+    const options = await generateAuthenticationOptions({
+      rpID,
+      allowCredentials: user.authenticators.map(auth => ({
+        id: Buffer.from(auth.credentialID, 'base64url'),
+        type: 'public-key',
+        transports: auth.transports ? auth.transports.split(',') : [],
+      })),
+      userVerification: 'preferred',
+    });
+
+    await prisma.user.update({ where: { id: user.id }, data: { challenge: options.challenge } });
+
+    return NextResponse.json(options);
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/auth/webauthn/login/verify/route.js

@@ -0,0 +1,51 @@
+import { NextResponse } from 'next/server';
+import { verifyAuthenticationResponse } from '@simplewebauthn/server';
+import { PrismaClient } from '@prisma/client';
+import { signToken } from '@/lib/auth';
+
+const prisma = new PrismaClient();
+
+export async function POST(req) {
+  try {
+    const url = new URL(req.url);
+    const rpID = url.hostname;
+    const expectedOrigin = url.origin;
+
+    const body = await req.json();
+    const { username, response } = body;
+
+    const user = await prisma.user.findUnique({ 
+      where: { username }, 
+      include: { authenticators: true } 
+    });
+    
+    if (!user) return NextResponse.json({ error: 'کاربر یافت نشد' }, { status: 404 });
+
+    const authenticator = user.authenticators.find(a => a.credentialID === response.id);
+    if (!authenticator) return NextResponse.json({ error: 'اطلاعات سنسور مطابقت ندارد' }, { status: 400 });
+
+    const verification = await verifyAuthenticationResponse({
+      response,
+      expectedChallenge: user.challenge,
+      expectedOrigin,
+      expectedRPID: rpID,
+      authenticator: {
+        credentialID: Buffer.from(authenticator.credentialID, 'base64url'),
+        credentialPublicKey: Buffer.from(authenticator.credentialPublicKey),
+        counter: Number(authenticator.counter),
+      },
+    });
+
+    if (verification.verified) {
+      await prisma.authenticator.update({
+        where: { id: authenticator.id },
+        data: { counter: BigInt(verification.authenticationInfo.newCounter) }
+      });
+      const token = signToken({ id: user.id, username: user.username, name: user.name, role: user.role });
+      return NextResponse.json({ verified: true, token, user: { id: user.id, name: user.name, role: user.role } });
+    }
+    return NextResponse.json({ verified: false }, { status: 400 });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/auth/webauthn/register/generate-options/route.js

@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server';
+import { generateRegistrationOptions } from '@simplewebauthn/server';
+import { PrismaClient } from '@prisma/client';
+import { verifyToken } from '@/lib/auth';
+
+const prisma = new PrismaClient();
+const rpName = 'پردیس رایانه';
+
+export async function GET(req) {
+  try {
+    const url = new URL(req.url);
+    const rpID = url.hostname;
+
+    let token = req.cookies.get('token')?.value;
+    if (!token) {
+      const authHeader = req.headers.get('authorization');
+      if (!authHeader || !authHeader.startsWith('Bearer ')) return NextResponse.json({ error: 'عدم دسترسی' }, { status: 401 });
+      token = authHeader.split(' ')[1];
+    }
+
+    const payload = verifyToken(token);
+    if (!payload || !payload.id) return NextResponse.json({ error: 'عدم دسترسی' }, { status: 401 });
+    
+    const user = await prisma.user.findUnique({ 
+      where: { id: payload.id }, 
+      include: { authenticators: true } 
+    });
+
+    if (!user) return NextResponse.json({ error: 'کاربر یافت نشد' }, { status: 404 });
+
+    const options = await generateRegistrationOptions({
+      rpName,
+      rpID,
+      userID: Buffer.from(user.id.toString(), 'utf-8'),
+      userName: user.username,
+      attestationType: 'none',
+      authenticatorSelection: {
+        residentKey: 'required',
+        userVerification: 'preferred',
+      },
+      excludeCredentials: user.authenticators.map(auth => ({
+        id: Buffer.from(auth.credentialID, 'base64url'),
+        type: 'public-key',
+        transports: auth.transports ? auth.transports.split(',') : [],
+      })),
+    });
+
+    await prisma.user.update({
+      where: { id: user.id },
+      data: { challenge: options.challenge }
+    });
+
+    return NextResponse.json(options);
+  } catch (error) {
+    console.error('generateOptions error:', error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/auth/webauthn/register/verify/route.js

@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server';
+import { verifyRegistrationResponse } from '@simplewebauthn/server';
+import { PrismaClient } from '@prisma/client';
+import { verifyToken } from '@/lib/auth';
+
+const prisma = new PrismaClient();
+
+export async function POST(req) {
+  try {
+    const url = new URL(req.url);
+    const rpID = url.hostname;
+    const expectedOrigin = url.origin;
+
+    let token = req.cookies.get('token')?.value;
+    if (!token) {
+      const authHeader = req.headers.get('authorization');
+      if (!authHeader || !authHeader.startsWith('Bearer ')) return NextResponse.json({ error: 'عدم دسترسی' }, { status: 401 });
+      token = authHeader.split(' ')[1];
+    }
+
+    const payload = verifyToken(token);
+    if (!payload || !payload.id) return NextResponse.json({ error: 'عدم دسترسی' }, { status: 401 });
+
+    const body = await req.json();
+
+    const user = await prisma.user.findUnique({ where: { id: payload.id } });
+    if (!user) return NextResponse.json({ error: 'کاربر یافت نشد' }, { status: 404 });
+
+    const verification = await verifyRegistrationResponse({
+      response: body,
+      expectedChallenge: user.challenge,
+      expectedOrigin,
+      expectedRPID: rpID,
+    });
+
+    if (verification.verified) {
+      const { registrationInfo } = verification;
+      const { credentialPublicKey, credentialID, counter } = registrationInfo;
+
+      await prisma.authenticator.create({
+        data: {
+          credentialID: Buffer.from(credentialID).toString('base64url'),
+          credentialPublicKey: Buffer.from(credentialPublicKey),
+          counter: BigInt(counter),
+          transports: body.response.transports?.join(',') || '',
+          userId: user.id
+        }
+      });
+
+      return NextResponse.json({ verified: true });
+    }
+    
+    return NextResponse.json({ verified: false }, { status: 400 });
+  } catch (error) {
+    console.error('verify error:', error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/user/settings/route.js

@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+import bcrypt from 'bcryptjs';
+import { verifyToken } from '@/lib/auth';
+
+const prisma = new PrismaClient();
+
+export async function PUT(req) {
+  try {
+    const authHeader = req.headers.get('authorization');
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return NextResponse.json({ error: 'عدم دسترسی (توکن ارسال نشده)' }, { status: 401 });
+    }
+
+    const token = authHeader.split(' ')[1];
+    const payload = verifyToken(token);
+
+    if (!payload || !payload.id) {
+      return NextResponse.json({ error: 'عدم دسترسی (توکن نامعتبر)' }, { status: 401 });
+    }
+
+    const body = await req.json();
+    const { name, password, avatarUrl } = body;
+
+    const dataToUpdate = {};
+    if (name) dataToUpdate.name = name;
+    if (avatarUrl) dataToUpdate.avatarUrl = avatarUrl;
+    if (password) {
+      dataToUpdate.password = await bcrypt.hash(password, 10);
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: payload.id },
+      data: dataToUpdate,
+      select: { id: true, username: true, name: true, role: true, avatarUrl: true }
+    });
+
+    return NextResponse.json({ success: true, user: updatedUser });
+  } catch (error) {
+    console.error('Settings error:', error);
+    return NextResponse.json({ error: 'خطای سرور' }, { status: 500 });
+  }
+}

src/app/layout.js

@@ -1,15 +1,29 @@
 import './globals.css'
 
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: '#f8fafc',
+}
+
 export const metadata = {
-  title: 'Pardis Counting',
+  title: 'پردیس رایانه - انبارگردانی',
   description: 'اپلیکیشن انبارگردانی پردیس',
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "انبارگردانی",
+  },
 }
 
 export default function RootLayout({ children }) {
   return (
     <html lang="fa" dir="rtl">
-      <body>
-        <main className="w-full min-h-screen flex flex-col justify-start items-center bg-gray-100">
+      <body className="bg-gray-100 transition-colors">
+        <main className="w-full min-h-screen flex flex-col justify-start items-center">
           <div className="w-full max-w-md bg-white min-h-screen shadow-lg relative pb-16">
             {children}
           </div>

src/app/page.js

@@ -1,20 +1,30 @@
 'use client';
 import { useState, useEffect } from 'react';
+import { Fingerprint } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 
-export default function LoginPage() {
+export default function EntryPage() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+  const [isFocused, setIsFocused] = useState(false);
+  
   const router = useRouter();
 
   useEffect(() => {
-    const token = localStorage.getItem('token');
-    if (token) {
-      router.push('/dashboard');
-    }
+    const checkAuth = async () => {
+      const token = localStorage.getItem('token');
+      await new Promise(resolve => setTimeout(resolve, 2500));
+      if (token) {
+        router.push('/dashboard');
+      } else {
+        setShowSplash(false);
+      }
+    };
+    checkAuth();
   }, [router]);
 
   const handleLogin = async (e) => {
@@ -28,7 +38,6 @@ export default function LoginPage() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ username, password })
       });
-      
       const data = await res.json();
       
       if (res.ok) {
@@ -46,71 +55,223 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="w-full h-screen flex flex-col justify-center items-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 relative overflow-hidden">
+    <div className="fixed inset-0 w-full h-[100dvh] bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden flex flex-col justify-between items-center">
       
       {/* Decorative Blur Backgrounds */}
-      <div className="absolute top-[-10%] left-[-10%] w-64 h-64 bg-purple-400/20 rounded-full blur-3xl"></div>
-      <div className="absolute bottom-[-10%] right-[-10%] w-64 h-64 bg-blue-400/20 rounded-full blur-3xl"></div>
+      <div className="absolute top-[-10%] left-[-10%] w-64 h-64 bg-purple-400/20 rounded-full blur-3xl pointer-events-none"></div>
+      <div className="absolute bottom-[-10%] right-[-10%] w-64 h-64 bg-blue-400/20 rounded-full blur-3xl pointer-events-none"></div>
 
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
-        className="w-full max-w-sm p-8 bg-white/60 backdrop-blur-2xl rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/50 z-10"
-      >
-        <div className="flex flex-col items-center mb-8">
-          <div className="w-16 h-16 bg-gradient-to-tr from-purple-600 to-blue-500 rounded-2xl shadow-lg shadow-purple-500/30 flex items-center justify-center mb-4 text-white font-extrabold text-2xl">
-            P
-          </div>
-          <h1 className="text-xl font-extrabold text-gray-800 tracking-tight">پردیس رایانه</h1>
-          <p className="text-xs text-gray-500 mt-1 font-medium">اپلیکیشن مدیریت انبار</p>
-        </div>
-        
-        {error && (
-          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-6 p-3 bg-red-50/80 border border-red-100 text-red-600 text-xs rounded-xl text-center">
-            {error}
+      <AnimatePresence mode="wait">
+        {showSplash ? (
+          <motion.div 
+            key="splash"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, scale: 1.1, filter: "blur(10px)" }}
+            transition={{ duration: 0.6, ease: "easeInOut" }}
+            className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-gray-50/50 backdrop-blur-md"
+          >
+            <motion.div
+              initial={{ scale: 0.5, opacity: 0, y: 20 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.2 }}
+              className="flex flex-col items-center"
+            >
+              <motion.div 
+                className="w-24 h-24 rounded-3xl shadow-sm border border-gray-100 mb-6 overflow-hidden flex items-center justify-center bg-white"
+              >
+                <img src="/icons/icon-512x512.png" alt="پردیس رایانه" className="w-full h-full object-cover" />
+              </motion.div>
+              
+              <motion.h1 
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.6 }}
+                className="text-2xl font-black text-gray-800 tracking-tight"
+              >
+                انبارگردانی هوشمند
+              </motion.h1>
+              
+              <motion.p 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5, delay: 0.8 }}
+                className="text-sm text-gray-500 mt-2 font-medium"
+              >
+                مدیریت حرفه‌ای انبار و قفسه‌ها
+              </motion.p>
+            </motion.div>
+
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 1, delay: 1 }}
+              className="absolute bottom-12 flex flex-col items-center"
+            >
+              <div className="flex flex-col items-center justify-center opacity-40 hover:opacity-100 transition-opacity gap-1">
+                <span className="text-[11px] text-gray-800 font-black tracking-[0.3em] uppercase font-sans">
+                  H U K A
+                </span>
+                <span className="text-[9px] text-gray-500 font-medium tracking-widest">طراحی توسط هوکا</span>
+              </div>
+            </motion.div>
+
+            <motion.div 
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "120px" }}
+              transition={{ duration: 1.5, delay: 0.5, ease: "easeInOut" }}
+              className="absolute bottom-6 h-1 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full"
+            />
+          </motion.div>
+        ) : (
+          <motion.div 
+            key="login"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6 }}
+            className="w-full h-full flex flex-col justify-between z-10 relative max-w-md mx-auto"
+          >
+            {/* Top Area: Logo & Welcome (Shrinks when focused to make room for keyboard) */}
+            <motion.div 
+              animate={{ 
+                height: isFocused ? "10%" : "auto", 
+                opacity: isFocused ? 0 : 1,
+                y: isFocused ? -50 : 0
+              }}
+              transition={{ type: "spring", stiffness: 300, damping: 25 }}
+              className="flex flex-col items-center justify-center flex-1 pt-10"
+            >
+              <div className="w-20 h-20 rounded-3xl shadow-sm border border-gray-100 mb-6 overflow-hidden flex items-center justify-center bg-white">
+                <img src="/icons/icon-512x512.png" alt="پردیس رایانه" className="w-full h-full object-cover" />
+              </div>
+              <h2 className="text-2xl font-black text-gray-800 tracking-tight mb-2">
+                خوش آمدید
+              </h2>
+              <p className="text-sm text-gray-500 font-medium">
+                لطفاً برای ادامه وارد حساب خود شوید
+              </p>
+            </motion.div>
+            
+            {/* Bottom Area: Bottom Sheet Form */}
+            <motion.div 
+              animate={{ 
+                y: isFocused ? -20 : 0, 
+                paddingBottom: isFocused ? "40px" : "40px" 
+              }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+              className="w-full bg-white/95 backdrop-blur-3xl rounded-t-[40px] p-8 shadow-sm border-t border-gray-100 flex flex-col"
+            >
+              {error && (
+                <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-6 p-3 bg-red-50 text-red-600 text-xs rounded-2xl text-center font-bold">
+                  {error}
+                </motion.div>
+              )}
+              
+              <form onSubmit={handleLogin} className="flex flex-col gap-4">
+                <div className="flex flex-col">
+                  <label className="text-[11px] font-extrabold text-gray-400 mb-1.5 ml-2 uppercase tracking-widest">شماره موبایل</label>
+                  <input 
+                    type="tel"
+                    dir="ltr"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
+                    className="px-5 py-4 bg-gray-50/80 rounded-[20px] focus:outline-none focus:bg-gray-100 transition-colors text-base font-bold text-gray-800 placeholder-gray-400"
+                    placeholder="09xxxxxxxxx"
+                    required
+                  />
+                </div>
+                
+                <div className="flex flex-col">
+                  <label className="text-[11px] font-extrabold text-gray-400 mb-1.5 ml-2 uppercase tracking-widest">رمز عبور</label>
+                  <input 
+                    type="password" 
+                    dir="ltr"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
+                    className="px-5 py-4 bg-gray-50/80 rounded-[20px] focus:outline-none focus:bg-gray-100 transition-colors text-base font-bold text-gray-800 placeholder-gray-400"
+                    placeholder="••••••••"
+                  />
+                </div>
+                
+                <div className="flex gap-2 mt-2">
+                  <motion.button 
+                    whileTap={{ scale: 0.95 }}
+                    type="button" 
+                    onClick={async () => {
+                      if (!username) {
+                        setError('ابتدا شماره موبایل را وارد کنید');
+                        setTimeout(() => setError(''), 3000);
+                        return;
+                      }
+                      try {
+                        const { startAuthentication } = await import('@simplewebauthn/browser');
+                        const res = await fetch('/api/auth/webauthn/login/generate-options', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ username })
+                        });
+                        const options = await res.json();
+                        if (options.error) throw new Error(options.error);
+                        
+                        const asseResp = await startAuthentication(options);
+                        
+                        const verifyRes = await fetch('/api/auth/webauthn/login/verify', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ username, response: asseResp })
+                        });
+                        
+                        const verification = await verifyRes.json();
+                        if (verification.verified) {
+                          localStorage.setItem('token', verification.token);
+                          localStorage.setItem('user', JSON.stringify(verification.user));
+                          router.push('/dashboard');
+                        } else {
+                          throw new Error('احراز هویت ناموفق بود');
+                        }
+                      } catch (err) {
+                        setError(err.message || 'خطا در احراز هویت با اثر انگشت');
+                        setTimeout(() => setError(''), 3000);
+                      }
+                    }}
+                    className="w-14 h-14 bg-gray-50 rounded-[20px] flex items-center justify-center text-gray-400 hover:text-indigo-500 hover:bg-indigo-50 transition-colors shrink-0"
+                  >
+                    <Fingerprint size={24} strokeWidth={2} />
+                  </motion.button>
+
+                  <motion.button 
+                    whileTap={{ scale: 0.98 }}
+                    type="submit" 
+                    disabled={loading}
+                    className="flex-1 py-4 bg-gray-900 text-white text-sm font-extrabold rounded-[20px] transition-all disabled:opacity-70 flex items-center justify-center shadow-sm"
+                  >
+                    {loading ? (
+                      <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                    ) : 'ورود'}
+                  </motion.button>
+                </div>
+              </form>
+              
+              <div className="mt-8 mb-2 flex justify-center">
+                <div className="flex items-center justify-center opacity-60 hover:opacity-100 transition-opacity">
+                  <span className="text-[10px] text-gray-500 font-medium tracking-widest">طراحی توسط هوکا</span>
+                  <span className="mx-2 text-gray-300">|</span>
+                  <span className="text-[9px] text-gray-600 font-black tracking-[0.2em] uppercase font-sans mt-0.5">DESIGNED BY HUKA</span>
+                </div>
+              </div>
+              
+              {/* iOS style bottom home indicator placeholder */}
+              <div className="mt-4 flex items-center justify-center">
+                <div className="w-12 h-1 bg-gray-200 rounded-full"></div>
+              </div>
+            </motion.div>
           </motion.div>
         )}
-        
-        <form onSubmit={handleLogin} className="flex flex-col gap-5">
-          <div className="flex flex-col">
-            <label className="text-xs font-bold text-gray-600 mb-1.5 ml-1">شماره موبایل</label>
-            <input 
-              type="text" 
-              dir="ltr"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 focus:bg-white transition-all text-sm"
-              placeholder="09xxxxxxxxx"
-              required
-            />
-          </div>
-          
-          <div className="flex flex-col">
-            <label className="text-xs font-bold text-gray-600 mb-1.5 ml-1">رمز عبور</label>
-            <input 
-              type="password" 
-              dir="ltr"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 focus:bg-white transition-all text-sm"
-              placeholder="••••••••"
-              required
-            />
-          </div>
-          
-          <motion.button 
-            whileHover={{ scale: 1.01 }}
-            whileTap={{ scale: 0.98 }}
-            type="submit" 
-            disabled={loading}
-            className="w-full py-3.5 bg-gray-900 hover:bg-black text-white text-sm font-bold rounded-xl transition-colors mt-2 shadow-lg shadow-gray-900/20 disabled:opacity-70"
-          >
-            {loading ? 'در حال ورود...' : 'ورود به سیستم'}
-          </motion.button>
-        </form>
-        <p className="text-[10px] text-center text-gray-400 mt-6 font-medium">رمز عبور پیش‌فرض: 123456</p>
-      </motion.div>
+      </AnimatePresence>
     </div>
   );
 }

src/app/settings/page.js

@@ -0,0 +1,258 @@
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import Header from '@/components/Header';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Fingerprint, Lock, User, Save, Camera } from 'lucide-react';
+import { startRegistration } from '@simplewebauthn/browser';
+
+export default function SettingsPage() {
+  const [user, setUser] = useState(null);
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [avatarBase64, setAvatarBase64] = useState(null);
+  const [biometricEnabled, setBiometricEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [isError, setIsError] = useState(false);
+  const fileInputRef = useRef(null);
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const parsedUser = JSON.parse(userData);
+      setUser(parsedUser);
+      setName(parsedUser.name || '');
+    }
+    const bio = localStorage.getItem('biometric_enabled');
+    if (bio === 'true') setBiometricEnabled(true);
+  }, []);
+
+  const showToast = (msg, error = false) => {
+    setMessage(msg);
+    setIsError(error);
+    setTimeout(() => setMessage(''), 4000);
+  };
+
+  const handleBiometricToggle = async () => {
+    if (biometricEnabled) {
+      setBiometricEnabled(false);
+      localStorage.setItem('biometric_enabled', 'false');
+      showToast('ورود با اثر انگشت غیرفعال شد');
+      return;
+    }
+
+    try {
+      showToast('در حال آماده‌سازی سنسور...', false);
+      const res = await fetch('/api/auth/webauthn/register/generate-options', {
+        headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+      });
+      const options = await res.json();
+      
+      if (options.error) throw new Error(options.error);
+
+      // Trigger native biometric prompt
+      const attResp = await startRegistration(options);
+      
+      const verificationRes = await fetch('/api/auth/webauthn/register/verify', {
+        method: 'POST',
+        headers: { 
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}` 
+        },
+        body: JSON.stringify(attResp),
+      });
+
+      const verification = await verificationRes.json();
+      if (verification.verified) {
+        setBiometricEnabled(true);
+        localStorage.setItem('biometric_enabled', 'true');
+        showToast('اثر انگشت با موفقیت فعال شد');
+      } else {
+        throw new Error('Verification failed');
+      }
+    } catch (error) {
+      console.error(error);
+      showToast('خطا در فعال‌سازی یا لغو توسط کاربر', true);
+    }
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => setAvatarBase64(reader.result);
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/user/settings', {
+        method: 'PUT',
+        headers: { 
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: JSON.stringify({ 
+          name, 
+          password: password ? password : undefined,
+          avatarUrl: avatarBase64 ? avatarBase64 : undefined
+        })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        localStorage.setItem('user', JSON.stringify(data.user));
+        setUser(data.user);
+        setPassword('');
+        showToast('تغییرات شما با موفقیت ذخیره شد.');
+      } else {
+        showToast(data.error || 'خطا در ذخیره تغییرات', true);
+      }
+    } catch (err) {
+      showToast('خطا در ارتباط با سرور', true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: { opacity: 1, transition: { staggerChildren: 0.1 } }
+  };
+  const item = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0 } };
+
+  return (
+    <div className="w-full min-h-screen bg-[#F8FAFC] flex flex-col pb-20 relative">
+      <Header title="تنظیمات حساب" showBack={true} />
+      
+      {/* Global Toast Notification */}
+      <AnimatePresence>
+        {message && (
+          <motion.div 
+            initial={{ opacity: 0, y: 50, scale: 0.9 }} 
+            animate={{ opacity: 1, y: 0, scale: 1 }} 
+            exit={{ opacity: 0, y: 20, scale: 0.9 }}
+            className={`fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] px-5 py-3 rounded-full shadow-[0_10px_40px_rgb(0,0,0,0.1)] backdrop-blur-xl border text-[11px] font-extrabold whitespace-nowrap flex items-center justify-center ${isError ? 'bg-red-500/95 border-red-400 text-white shadow-red-500/30' : 'bg-gray-800/95 border-gray-700 text-white shadow-gray-900/30'}`}
+          >
+            {message}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.div variants={container} initial="hidden" animate="show" className="px-6 pt-2 flex flex-col gap-8">
+        
+        <motion.section variants={item} className="flex flex-col gap-5 items-center">
+          <div className="relative group mt-2">
+            <div className="w-28 h-28 rounded-full shadow-[0_10px_40px_rgb(0,0,0,0.08)] overflow-hidden border-[4px] border-white bg-gradient-to-tr from-indigo-50 to-purple-50">
+              <img src={avatarBase64 || user?.avatarUrl || "/images/default_avatar.png"} alt="avatar" className="w-full h-full object-cover" />
+            </div>
+            <button 
+              onClick={() => fileInputRef.current?.click()}
+              className="absolute bottom-0 right-0 w-10 h-10 bg-white border border-gray-100 text-indigo-500 rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-all"
+            >
+              <Camera size={18} strokeWidth={2.5} />
+            </button>
+            <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
+          </div>
+          
+          <div className="text-center">
+            <h3 className="text-lg font-black text-gray-800">{user?.name || 'کاربر'}</h3>
+            <p className="text-xs text-gray-400 font-medium mt-1 uppercase tracking-wider">{user?.role === 'ADMIN' ? 'مدیریت کل' : 'کاربر عادی'}</p>
+          </div>
+        </motion.section>
+
+        <motion.section variants={item} className="flex flex-col gap-4">
+          <h2 className="text-[11px] font-extrabold text-gray-400 mr-2 uppercase tracking-widest">مشخصات کاربری</h2>
+          
+          <div className="bg-white/90 backdrop-blur-3xl border border-gray-100/50 rounded-[28px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] p-2">
+            <div className="flex flex-col gap-2">
+              
+              <div className="flex items-center gap-4 bg-gray-50/50 hover:bg-gray-50 p-4 rounded-[20px] transition-colors">
+                <div className="w-10 h-10 bg-white text-indigo-500 rounded-[14px] flex items-center justify-center shadow-sm">
+                  <User size={18} strokeWidth={2.5} />
+                </div>
+                <div className="flex flex-col flex-1">
+                  <label className="text-[10px] font-bold text-gray-400 mb-0.5">نام و نام خانوادگی</label>
+                  <input 
+                    type="text" 
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    className="bg-transparent border-none text-sm font-bold text-gray-800 outline-none w-full"
+                    placeholder="نام شما"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4 bg-gray-50/50 hover:bg-gray-50 p-4 rounded-[20px] transition-colors">
+                <div className="w-10 h-10 bg-white text-rose-500 rounded-[14px] flex items-center justify-center shadow-sm">
+                  <Lock size={18} strokeWidth={2.5} />
+                </div>
+                <div className="flex flex-col flex-1">
+                  <label className="text-[10px] font-bold text-gray-400 mb-0.5">رمز عبور جدید (اختیاری)</label>
+                  <input 
+                    type="password" 
+                    dir="ltr"
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    className="bg-transparent border-none text-sm font-bold text-gray-800 outline-none w-full placeholder-gray-300"
+                    placeholder="••••••••"
+                  />
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </motion.section>
+
+        <motion.section variants={item} className="flex flex-col gap-4">
+          <h2 className="text-[11px] font-extrabold text-gray-400 mr-2 uppercase tracking-widest">امنیت</h2>
+          <div className="bg-white/90 backdrop-blur-3xl border border-gray-100/50 rounded-[28px] shadow-[0_8px_30px_rgb(0,0,0,0.04)] p-2">
+            
+            <div className="flex items-center justify-between p-4 hover:bg-gray-50 rounded-[20px] transition-colors">
+              <div className="flex items-center gap-4">
+                <div className={`w-10 h-10 rounded-[14px] flex items-center justify-center transition-colors shadow-sm ${biometricEnabled ? 'bg-green-500 text-white shadow-green-500/20' : 'bg-gray-100 text-gray-400'}`}>
+                  <Fingerprint size={18} strokeWidth={2.5} />
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-sm font-bold text-gray-800">ورود با اثر انگشت</span>
+                  <span className="text-[10px] text-gray-400 font-medium mt-0.5">Face ID / Touch ID</span>
+                </div>
+              </div>
+              
+              <button 
+                onClick={handleBiometricToggle}
+                className={`relative flex items-center w-12 h-6 rounded-full px-1 transition-colors duration-300 ease-in-out shrink-0 ${biometricEnabled ? 'bg-green-500' : 'bg-gray-200'}`}
+              >
+                <motion.div 
+                  className="w-4 h-4 bg-white rounded-full shadow-sm"
+                  animate={{ x: biometricEnabled ? -24 : 0 }}
+                  transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                />
+              </button>
+            </div>
+            
+          </div>
+        </motion.section>
+
+        <motion.div variants={item} className="mt-4">
+           <button 
+             onClick={handleSave} 
+             disabled={loading} 
+             className="w-full py-4 bg-gradient-to-r from-gray-900 to-gray-800 hover:from-black hover:to-gray-900 text-white text-sm font-extrabold rounded-[20px] transition-all shadow-xl shadow-gray-900/20 disabled:opacity-70 flex items-center justify-center gap-2"
+           >
+             {loading ? (
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+             ) : (
+                <>
+                  <Save size={18} strokeWidth={2.5} />
+                  ذخیره اطلاعات
+                </>
+             )}
+           </button>
+        </motion.div>
+
+      </motion.div>
+    </div>
+  );
+}