staff otp page added and sigin page updated

client/.prettierrc.json

@@ -1,6 +1,6 @@
 {
    "trailingComma": "es5",
-   "tabWidth": 3,
+   "tabWidth": 2,
    "semi": true,
    "printWidth": 80,
    "arrowParens": "avoid"

client/app/staff/@signin/(.)otp-verification/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import OtpVerificationModel from '@/components/OtpVerificationModel'
+
+const OptInterceptor = () => <OtpVerificationModel returnRoute='/staff/' />
+
+
+export default OptInterceptor

client/app/staff/@signin/default.tsx

@@ -0,0 +1,13 @@
+
+import React from 'react'
+import SignIn from './page'
+
+const DefaultSigninPage = () => {
+  return (
+    <div>
+        <SignIn />
+    </div>
+  )
+}
+
+export default DefaultSigninPage

client/app/staff/@signin/otp-verification/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+import OtpForm from "@/components/forms/OtpForms";
+import Image from "next/image";
+import Link from "next/link";
+import { FormEvent } from "react";
+
+const OtpVerificationPage = () => {
+   const handleVerify =(e:FormEvent)=>{
+      e.preventDefault();
+      console.log('');
+
+   }
+   const handleResend = ()=>{
+      console.log('');  
+   }
+  return (
+    <div>
+      <div className="flex h-screen max-h-screen">
+         <section className="remove-scrollbar container my-auto">
+            <div className="sub-container max-[496px]">
+               <Image
+                  src={"/assets/icons/logo-full.svg"}
+                  width={1000}
+                  height={1000}
+                  alt="patient"
+                  className="mb-12 h-10 w-fit"
+               />
+               <OtpForm handleResend={handleResend} timer={30} handleVerify={handleVerify} />
+               <div className="text-14-regular py-12 flex justify-between">
+                  <p className="justify-items-end text-dark-600 xl:text-left">
+                     © 2024 AVM Ayurveda&apos;s
+                  </p>
+                  <Link href={"/staff"} className="text-green-500">
+                     Go Back
+                  </Link>
+               </div>
+            </div>
+         </section>
+
+         <Image
+            src="/assets/images/onboarding-img.png"
+            height={1000}
+            width={1000}
+            alt="patient"
+            className="side-img max-w-[50%]"
+         />
+      </div>
+    </div>
+  )
+}
+
+
+export default OtpVerificationPage

client/app/staff/signin/page.tsx → client/app/staff/@signin/page.tsx

@@ -19,8 +19,8 @@ const SignIn = () => {
                   <p className="justify-items-end text-dark-600 xl:text-left">
                      © 2024 AVM Ayurveda&apos;s
                   </p>
-                  <Link href={"/signin"} className="text-green-500">
-                     Patient
+                  <Link href={"/staff/otp-verification"} className="text-green-500">
+                     opt
                   </Link>
                </div>
             </div>

client/app/staff/default.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import Dashboard from './page'
+
+const DashboardDefaultPage = () => {
+  return <Dashboard />
+}
+
+export default DashboardDefaultPage

client/app/staff/layout.tsx

@@ -1,19 +1,22 @@
-import React from "react";
+import { ReactNode, FC } from "react";
 import SideBar from "@/components/SideBar";
 import { Metadata } from "next";
 
 interface AdminLayoutWrapperProps {
-   children: React.ReactNode;
+   children: ReactNode;
+   signin: ReactNode;
 }
 
 export const metadata: Metadata = {
    title: "Dashboard",
 };
 
-const AdminLayoutWrapper: React.FC<AdminLayoutWrapperProps> = ({
+const AdminLayoutWrapper: FC<AdminLayoutWrapperProps> = ({
+   signin,
    children,
 }) => {
-   return (
+   const isLoggedIn = false;
+   return isLoggedIn ? (
       <div className="flex min-h-screen bg-background">
          <SideBar />
          <div className="flex-1 overflow-auto">
@@ -22,6 +25,8 @@ const AdminLayoutWrapper: React.FC<AdminLayoutWrapperProps> = ({
             </main>
          </div>
       </div>
+   ) : (
+      signin
    );
 };
 

client/app/staff/page.tsx

@@ -15,21 +15,3 @@ const Dashboard = () => {
 
 export default Dashboard;
 
-// import React from "react";
-
-// const Dashboard = () => {
-//   return (
-//     <main className="lex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
-//       <div className="flex items-center">
-//         <h1 className="text-lg font-semibold md:text-2xl">Dashboard</h1>
-//       </div>
-//       <div className="flex flex-1 items-center justify-center rounded-lg shadow-sm">
-//         <div className="flex flex-col items-center gap-1 text-center">
-
-//         </div>
-//       </div>
-//     </main>
-//   );
-// };
-
-// export default Dashboard;

client/app/staff/products/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ProductsPage = () => {
+  return (
+    <div>ProductsPage</div>
+  )
+}
+
+export default ProductsPage

client/components/Footer.tsx

@@ -26,7 +26,7 @@ const Footer = () => {
                />
             </Link>
             <div className="text-sm text-muted-foreground">
-               © {new Date().getFullYear()} AVM Ayurvedic. All rights reserved.
+               © {new Date().getFullYear()} AVM Ayurvedic.
             </div>
          </div>
       </footer>

client/components/otp-verfication.tsx → client/components/OtpVerificationModel.tsx

@@ -1,9 +1,7 @@
 "use client";
-
 import { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-
 import {
    AlertDialog,
    AlertDialogAction,
@@ -19,16 +17,17 @@ import {
    InputOTPSlot,
 } from "@/components/ui/input-otp";
 import { Otptimer } from "otp-timer-ts";
+import { OptModelProps } from "@/types";
 
-const OtpVerificationModel = () => {
+const OtpVerificationModel = ({ returnRoute }: OptModelProps) => {
    const router = useRouter();
    const [open, setOpen] = useState(true);
    const [otp, setOtp] = useState("");
    const [error, setError] = useState("");
 
    const closeModal = () => {
       setOpen(false);
-      router.push(`/`);
+      router.push(returnRoute);
    };
 
    const handleResend = () => {

client/components/forms/OtpForms.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState} from "react";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { Button } from "@/components/ui/button";
+import { Otptimer } from "otp-timer-ts";
+import { OtpFromProps } from "@/types/fromTypes";
+
+export default function OtpVerificationSection({handleVerify,handleResend,timer}:OtpFromProps) {
+  const [otp, setOtp] = useState("");
+
+  return (
+    <form className="space-y-6 flex-1">
+      <section className="mb-12 space-y-4">
+        <h1 className="header">OTP Verification </h1>
+        <p className="text-dark-700">
+          Please enter the OTP sent to your registered mobile number.
+        </p>
+      </section>
+      <InputOTP
+        maxLength={6}
+        value={otp}
+        onChange={value => setOtp(value)}
+        className="mb-6"
+      >
+        <InputOTPGroup className="shad-otp">
+          <InputOTPSlot index={0} className="shad-otp-slot" />
+          <InputOTPSlot index={1} className="shad-otp-slot" />
+          <InputOTPSlot index={2} className="shad-otp-slot" />
+          <InputOTPSlot index={3} className="shad-otp-slot" />
+          <InputOTPSlot index={4} className="shad-otp-slot" />
+          <InputOTPSlot index={5} className="shad-otp-slot" />
+        </InputOTPGroup>
+      </InputOTP>
+      <div className="mt-4 mb-5 flex justify-between items-center">
+        <Otptimer seconds={timer} onResend={handleResend} />
+      </div>
+      <Button
+        onClick={e => handleVerify(e)}
+        type="submit"
+        className="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-4 rounded"
+        disabled={otp.length !== 6}
+      >
+        Verify OTP
+      </Button>
+    </form>
+  );
+}

client/components/forms/staff/SigninForm.tsx

@@ -33,7 +33,7 @@ const SigninForm = () => {
             className="space-y-6 flex-1"
          >
             <section className="mb-12 space-y-4">
-               <h1 className="header">Doctor Signin</h1>
+               <h1 className="header">Staffs Signin</h1>
                <p className="text-dark-700">Please signin to go to dashboard</p>
             </section>
 

client/types/fromTypes.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, FormEvent } from "react";
 import { Control } from "react-hook-form";
 
 export enum FormFieldType {
@@ -30,3 +30,10 @@ export interface CustomProps {
    Icon?: FC<{ className?: string }>;
    doctor?: string;
 }
+
+
+export interface OtpFromProps {
+   handleVerify:(e:FormEvent)=>void;
+   handleResend:()=>void;
+   timer:number;
+}

client/types/index.ts

@@ -28,3 +28,7 @@ export type AnimatedCardProps = {
    imageClassName?: string;
    children?: ReactNode;
 };
+
+export type OptModelProps = {
+   returnRoute:string;
+}