handel login page and logout alson andel create order page to client and build spinner page and complet project structuer , create logo tamplet

2026-06-08 17:24:53 +03:00
parent 5554f5238c
commit 70853958f5
27 changed files with 1425 additions and 303 deletions
--- a/app/NewOrder/page.tsx
+++ b/app/NewOrder/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+// ─────────────────────────────────────────────
+// page.tsx
+// نقطة الدخول — تحقق من الجلسة وتوجيه المستخدم
+// ─────────────────────────────────────────────
+import { useState, useEffect, useCallback } from "react";
+import { loadSession, type ClientSession } from "@/src/utils/helperFun";
+import RegisterStep from "../../src/Components/Client/client";
+import DashboardStep from "../../src/Components/Order/order";
+import Logo from "@/src/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>
+  );
+}