implemented header and dark theme.

src/components/AppTitle.jsx

@@ -0,0 +1,16 @@
+import IpksLogo from '../assets/ipks_logo.svg';
+import DarkModeToggle from './DarkModeToggle';
+
+function AppTitle() {
+  return (
+    <div className='flex items-center justify-between pt-3 pb-5'>
+        <div className='flex gap-5 items-center'>
+            <img src={IpksLogo} alt="IPKS Logo" className="h-16" />
+            <h1 className="text-title font-display font-bold">Integrated PACS Kisan Solution</h1>
+        </div>
+        <DarkModeToggle />
+    </div>
+  );
+}
+
+export default AppTitle;

src/components/BannerInfo.jsx

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import BannerInfoElement from "./BannerInfoElement";
+
+function BannerInfo({info}) {
+    const date = new Date().toLocaleDateString('en-IN', {month: 'long', day: '2-digit', year: 'numeric'}).split(" ");
+    const infoElements = Object.keys(info).map((key) => (
+        <BannerInfoElement key={key} title={key} description={info[key]} />    
+    ))
+    infoElements.push(<BannerInfoElement key="date" title="Date" description={date.join(" ")} />);
+    return (
+        <div className="flex justify-between pb-1">
+            {infoElements}
+        </div>
+    )
+}
+
+BannerInfo.propTypes = {
+    info: PropTypes.object.isRequired
+}
+
+export default BannerInfo;

src/components/BannerInfoElement.jsx

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+
+function BannerInfoElement({ title, description }) {
+  return (
+    <div className='font-body'>
+      <div className='text-base '>{title}</div>
+      <div className='text-[18px] font-medium'>{description}</div>
+    </div>
+  );
+}
+
+BannerInfoElement.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired
+};
+
+export default BannerInfoElement;

src/components/DarkModeToggle.jsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+const DarkModeToggle = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem('darkMode');
+    return savedMode ? JSON.parse(savedMode) : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+    if (darkMode) {
+      document.documentElement.setAttribute('class', 'dark');
+    } else {
+      document.documentElement.removeAttribute('class');
+    }
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode);
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="p-2 rounded-full bg-gray-200 text-gray-800 transition-colors duration-200"
+      data-theme={darkMode ? 'dark' : 'light'}
+      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+    </button>
+  );
+};
+
+export default DarkModeToggle;

src/components/Header.jsx

@@ -0,0 +1,64 @@
+import { getUserInfoFromSession } from "../util/util";
+import AppTitle from "./AppTitle";
+import BannerInfo from "./BannerInfo";
+import MenuBar from "./MenuBar";
+import Separator from "./Separator";
+
+function Header() {
+    const userInfo = getUserInfoFromSession();
+    const menuItems = [
+        { name: "Home", submenu: [], path: "/" },
+        {
+          name: "Module List",
+          submenu: [
+            {name: "KCC", path: "kcc"},
+            {name: "Trading", path: "trading"},
+            {name: "Asset", path: "asset"},
+            {name: "Self Help Group", path: "shg"},
+            {name: "Deposit", path: "deposit"},
+            {name: "Loan", path: "loan"},
+            {name: "Share", path: "share"},
+          ],
+        },
+        { name: "Enquiry", submenu: [{name: "Locker Enquiry", path: "locker-enquiry"}, {name: "Account Enquiry", path: "account-enquiry"}] },
+        {
+          name: "Locker Operation",
+          submenu: [
+            {name: "Account Creation", path: "account-creation"},
+            {name: "Cabinet Maintenance", path: "cabinet-maintenance"},
+            {name: "Locker Maintenance", path: "locker-maintenance"},
+            {name: "Rent/Penalty Collection", path: "rent-collection"},
+            {name: "Charge Management", path: "charge-management"},
+            {name: "Check in/out Management", path: "check-in-out"},
+            {name: "Account Surrender", path: "account-surrender"}
+          ],
+        },
+        {
+          name: "Reports",
+          submenu: [
+            {name: "Deposit Report", path: "deposit-report"},
+            {name: "Trial Balance Report", path: "trial-report"},
+            {name: "Deposit Return Report", path: "deposit-return-report"},
+            {name: "Account Statement Reports", path: "account-statement-report"},
+            {name: "Audit Reports", path: "audit-reports"}
+          ],
+        },
+        { name: "Worklist", submenu: [{name:"My Intimation", path: "my-intimation"}] },
+        {
+          name: "User Management",
+          submenu: [{name: "Reset Loggen In Status", path: "reset-login"}, {name: "Change Password", path: "change-password"}],
+        },
+        { name: "Log Out", submenu: [] },
+      ];
+    
+    return (
+        <div className="transition-color-mode px-7 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+            <AppTitle />
+            <BannerInfo info={userInfo} />
+            <Separator />
+            <MenuBar menuItems={menuItems} />
+        </div>
+    )
+}
+
+export default Header;

src/components/MenuBar.jsx

@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+const SubMenu = ({ items }) => {
+  return (
+    <div className="
+      hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
+       dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
+    >
+      {items.map((subItem, index) => (
+        <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl last:rounded-b-2xl first:pt-4 last:pb-4">
+          <Link to={subItem.path}>{subItem.name}</Link>
+        </div>
+      ))}
+      <svg className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark" width="16" height="13" viewBox="0 0 16 13"  xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
+      </svg>
+    </div>
+  );
+};
+
+function MenuBar({ menuItems }) {
+  return (
+    <div className="flex justify-between text-base pt-5 pb-2 font-body">
+      {menuItems.map((item, index) =>
+        <div key={index} className="group relative pb-3 cursor-pointer">
+          {item.name}
+          {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+MenuBar.propTypes = {
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      submenu: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+          path: PropTypes.string.isRequired,
+        })
+      ),
+      path: PropTypes.string
+    })
+  ).isRequired
+};
+
+SubMenu.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default MenuBar;

src/components/Separator.jsx

@@ -0,0 +1,9 @@
+function Separator() {
+  return (
+    <div className="h-[2px]">
+        <div className="h-full w-full bg-white rounded-md"></div>
+    </div>
+  )
+}
+
+export default Separator;