Login and dashboard added

components/dashboard/sideBarItem.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import {Props} from "@/constants/types";
+
+
+
+export default function SidebarItem({ item }: Props) {
+  const [open, setOpen] = useState(item.title === "Overview");
+
+  return (
+    <div className="border-b border-slate-800">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center justify-between px-5 py-4 hover:bg-slate-900"
+      >
+        <div className="flex items-center gap-3">
+          <item.icon size={20} />
+
+          <span className="font-medium">{item.title}</span>
+        </div>
+
+        <ChevronDown
+          size={18}
+          className={`transition-transform ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {open && item.children.length > 0 && (
+        <div className="ml-8 border-l border-slate-700 pl-5 pb-3">
+          {item.children.map((child: any) => (
+            <Link
+              key={child.title}
+              href={child.href}
+              className="group mt-2 flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-teal-500/20 hover:text-teal-400"
+            >
+              <child.icon size={18} />
+
+              <span>{child.title}</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/dashboard/sidebar.tsx

@@ -0,0 +1,73 @@
+import { SIDEBAR_ITEMS } from "@/constants/constant";
+import SidebarItem from "./sideBarItem";
+import {
+ 
+  ShieldCheck,
+  
+  Activity,
+  ChevronDown,
+  ChevronsLeft,
+  
+
+} from "lucide-react";
+
+export default function Sidebar() {
+  return (
+    <aside className="w-80 bg-[#071321] text-white h-screen overflow-y-auto">
+        <div className="flex items-center gap-2.5 px-4 pt-4 pb-3">
+        <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3de0c4] font-bold text-[#05111d] text-lg">
+          K
+        </div>
+        <span className="text-xl font-bold tracking-tight text-white">
+          KA<span className="text-[#3de0c4]">FM</span>
+        </span>
+      </div>
+      <div className="mx-3 my-2 flex rounded-xl bg-[#091624] p-1 border border-[#142538]">
+        <button className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-[#3de0c4] py-1.5 text-xs text-black font-semibold shadow-sm">
+          <Activity size={14} />
+          Operations
+        </button>
+        <button className="flex flex-1 items-center justify-center gap-1.5 rounded-lg py-1.5 text-xs text-slate-400 font-medium hover:text-white transition-colors">
+          <ShieldCheck size={14} />
+          Admin
+        </button>
+      </div>
+
+      <p className="px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wider text-slate-500">
+        Tenant runtime
+      </p>
+      <div className="py-4">
+        {SIDEBAR_ITEMS.map((item) => (
+          <SidebarItem
+            key={item.title}
+            item={item}
+          />
+        ))}
+      </div>
+      <div className="px-3 pb-2 pt-1 border-t border-[#0f1f30]">
+        <button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
+          <ChevronsLeft size={16} />
+          Minimise menu
+        </button>
+      </div>
+
+      {/* Profile Card Section */}
+      <div className="m-3 mt-0 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
+        <div className="flex items-center justify-between">
+          <div className="flex gap-2.5 items-center">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-600/50 bg-[#0d2430] text-cyan-400 text-xs font-bold">
+              DT
+            </div>
+            <div className="min-w-0 leading-tight">
+              <h4 className="font-semibold text-xs text-white truncate">Dhananjay T</h4>
+              <p className="text-[11px] text-slate-500 truncate">
+                dhananjay@kafm.io
+              </p>
+            </div>
+          </div>
+          <ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14} />
+        </div>
+        </div>
+    </aside>
+  );
+}