94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
"use client";
|
||
// ─────────────────────────────────────────────
|
||
// page.tsx
|
||
// نقطة الدخول — تحقق من الجلسة وتوجيه المستخدم
|
||
// ─────────────────────────────────────────────
|
||
import { useState, useEffect, useCallback } from "react";
|
||
import { loadSession, type ClientSession } from "@/utils/helperFun";
|
||
import RegisterStep from "../../Components/Client/client";
|
||
import DashboardStep from "../../Components/Order/order";
|
||
import Logo from "@/utils/logo";
|
||
|
||
type Step = "bootstrap" | "register" | "dashboard";
|
||
|
||
/* شريط التنقل */
|
||
function Navbar({ session }: { session: ClientSession | null }) {
|
||
return (
|
||
<nav className="bg-white border-b border-[#E5E7EB] flex items-center justify-between px-5 h-14 sticky top-0 z-30">
|
||
<div className="flex items-center gap-2">
|
||
{session?.name && (
|
||
<span className="text-[12px] text-[#6B7280] hidden sm:block">{session.name}</span>
|
||
)}
|
||
<div className="w-8 h-8 rounded-full bg-[#EBF3FF] flex items-center justify-center">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1A73E8" strokeWidth="2">
|
||
<circle cx="12" cy="8" r="4"/>
|
||
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<Logo />
|
||
</nav>
|
||
);
|
||
}
|
||
|
||
/* شاشة التحميل */
|
||
function BootstrapScreen() {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-10 gap-3">
|
||
<div className="w-10 h-10 rounded-full border-4 border-[#1A73E8] border-t-transparent animate-spin" />
|
||
<p className="text-[13px] text-[#6B7280]">جارٍ تحميل بيانات الجلسة…</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function ClientOrderPage() {
|
||
const [step, setStep] = useState<Step>("bootstrap");
|
||
const [session, setSession] = useState<ClientSession | null>(null);
|
||
|
||
useEffect(() => {
|
||
const saved = loadSession();
|
||
|
||
if (saved?.id && saved.name) {
|
||
// user has valid session → dashboard
|
||
setSession(saved);
|
||
setStep("dashboard");
|
||
} else {
|
||
// new or invalid session → register
|
||
setStep("register");
|
||
}
|
||
}, []);
|
||
|
||
const handleRegistered = useCallback((s: ClientSession) => {
|
||
setSession(s);
|
||
setStep("dashboard");
|
||
}, []);
|
||
|
||
return (
|
||
<div
|
||
className="min-h-screen bg-[#ECEEF2]"
|
||
dir="rtl"
|
||
lang="ar"
|
||
style={{ fontFamily: "'Cairo', 'IBM Plex Sans Arabic', Tahoma, sans-serif" }}
|
||
>
|
||
<Navbar session={session} />
|
||
|
||
<div className="max-w-lg mx-auto px-4 py-8">
|
||
<div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 shadow-sm">
|
||
{step === "bootstrap" && <BootstrapScreen />}
|
||
|
||
{step === "register" && (
|
||
<RegisterStep onSuccess={handleRegistered} />
|
||
)}
|
||
|
||
{step === "dashboard" && session && (
|
||
<DashboardStep session={session} />
|
||
)}
|
||
</div>
|
||
|
||
<p className="text-center text-[11px] text-[#9CA3AF] mt-4">
|
||
LogiFlow · آمن ومشفر · المملكة العربية السعودية 🇸🇦
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |