Operations dashboard screens are added

components/auth/authlayout.tsx

@@ -1,13 +1,15 @@
+import { AuthLayoutProps } from "@/constants/types";
 import LeftPanel from "./leftpanel";
 
-interface AuthLayoutProps {
-  children: React.ReactNode;
-}
 
 export default function AuthLayout({ children }: AuthLayoutProps) {
   return (
     <main className="min-h-screen grid lg:grid-cols-2 bg-[#081321]">
+      {/* Left Panel of the KAFM page  */}
       <LeftPanel />
+
+
+      {/* Login Page Right Side */}
       <div className="flex items-center justify-center p-8">
         {children}
       </div>

components/auth/forgetPassword.tsx

@@ -3,8 +3,11 @@ import Button from "@/utils/button";
 
 
 import {Props} from "@/constants/types"
+
+
 export default function ForgotPassword({ onBack }: Props) {
   return (
+    // Forget Password Screen
     <div className="space-y-4">
       <button
         onClick={onBack}

components/auth/leftpanel.tsx

@@ -37,7 +37,7 @@ export default function LeftPanel() {
             Unified Facility Platform
           </p>
 
-          {/* Punchy Catchphrase */}
+          {/*Text*/}
           <h1 className="max-w-lg text-4xl font-bold tracking-tight text-white leading-[1]">
             One platform.
             <br />
@@ -67,7 +67,7 @@ export default function LeftPanel() {
           </div>
         </div>
 
-        {/* Global Statistics Footer */}
+        {/*StatCard is used   */}
         <div className="   flex gap-2 mt-10  text-slate-300 ">
           <Stat number="4" label="TENANTS" />
           <Stat number="8" label="MODULES" />

components/auth/loginForm.tsx

@@ -8,7 +8,8 @@ import { signIn } from "next-auth/react";
 
 
 export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
-  const [showPassword, setShowPassword] = useState(false);
+
+  const [showPassword, setShowPassword] = useState(false);// For Visibility of Password 
   return (
     
 <div className="w-full max-w-md space-y-3">
@@ -32,6 +33,7 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
         />
 
       <div className="relative">
+       // Password Input
   <FormInput
     label="PASSWORD"
     value=""
@@ -69,7 +71,7 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
         </Button>
       </div>
 
-      {/* Actions / Submit Stack */}
+      {/* Action on Button */}
       <div className="space-y-4">
         <Button
           onClick={onSuccess}
@@ -78,7 +80,7 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
           Sign in
         </Button>
 
-        {/* Custom Visual Divider */}
+        {/* Divider */}
         <div className="flex items-center gap-4 py-2">
           <div className="h-px flex-1 bg-slate-800" />
           <span className="text-xs uppercase tracking-wider text-slate-600 font-medium">or</span>
@@ -95,7 +97,7 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
         </Button>
       </div>
 
-      {/* Bottom Legal Info */}
+      {/* Bottom  Info */}
       <p className="text-center text-xs tracking-wide text-slate-500 font-mono">
         Protected by 2-factor auth • every sign-in is
         <br/> audit-logged

components/auth/verifyCode.tsx

@@ -8,6 +8,7 @@ import {Props} from "@/constants/types"
 export default function VerifyCode({ onBack }: Props) {
     const [timer, setTimer] = useState(30);
    
+    //Timer Functionality Sets 30s to 0s
   useEffect(() => {
     if (timer === 0) return;
 
@@ -21,7 +22,7 @@ export default function VerifyCode({ onBack }: Props) {
   const handleResend = () => {
     if (timer > 0) return;
 
-    // Call your resend OTP API here
+    // Call your resend OTP 
 
     setTimer(30);
   };
@@ -49,6 +50,8 @@ export default function VerifyCode({ onBack }: Props) {
           </p>
       </div>
 
+
+       {/* OTP input box  */}
       <OTPInput />
 
      <div className="flex items-center gap-2">