Merge pull request 'dev/ui-changes-atul' (#1) from dev/ui-changes-atul into main
Reviewed-on: #1
This commit is contained in:
commit
34a4d7b05a
@ -1,5 +1,5 @@
|
||||
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
NEXT_PUBLIC_APPWRITE_PROJECT_ID=67e1445400053dca1d9b
|
||||
NEXT_PUBLIC_APPWRITE_DATABASE_ID=67e1452b00016444b37f
|
||||
NEXT_PUBLIC_APPWRITE_COLLECTION_ID=67fe4029000f7e0a7b92
|
||||
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION_ID=67ff72bd00370366ae3e
|
||||
NEXT_PUBLIC_APPWRITE_COLLECTION_ID=681c367b0016f9ba0e8e
|
||||
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION_ID=681c35690038f9798152
|
||||
|
||||
@ -6,8 +6,6 @@ import { useRouter } from "next/navigation";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import { account } from "../lib/appwrite";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { Bell } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { MdOutlineSettings, MdSupport } from "react-icons/md";
|
||||
import { AiOutlineUser } from "react-icons/ai";
|
||||
import NotificationBell from './NotificationBell';
|
||||
@ -68,18 +66,44 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
|
||||
console.error("Logout failed:", error);
|
||||
}
|
||||
};
|
||||
// ----------------notificatio logic------------------
|
||||
|
||||
if (darkMode === undefined) {
|
||||
return (
|
||||
<nav className="bg-white dark:bg-gray-900 shadow-md sticky top-0 w-full z-30 p-2 sm:p-4 flex items-center justify-between">
|
||||
<div className="animate-pulse flex space-x-4">
|
||||
<div className="h-10 w-10 rounded-lg bg-gray-200 dark:bg-gray-700"></div>
|
||||
<div className="h-10 w-[300px] rounded bg-gray-200 dark:bg-gray-700 hidden md:block"></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="bg-white dark:bg-gray-900 shadow-md sticky top-0 w-full z-30 p-2 sm:p-4 flex items-center justify-between">
|
||||
<nav className={`
|
||||
${darkMode ? 'bg-gray-900 border-gray-700 shadow-gray-800/30' : 'bg-white border-gray-200 shadow-md'}
|
||||
sticky top-0 w-full z-30
|
||||
p-2 sm:p-4
|
||||
flex items-center justify-between
|
||||
transition-colors duration-300
|
||||
`}>
|
||||
{/* Left Side */}
|
||||
<div className="flex items-center">
|
||||
{/* Hamburger Menu Button - Always visible */}
|
||||
{/* Hamburger Menu Button */}
|
||||
<button
|
||||
onClick={handleSidebarToggle}
|
||||
className={`flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 mr-2 ${
|
||||
sidebarOpen || isCollapsed ? 'bg-gray-100 dark:bg-gray-800' : ''
|
||||
}`}
|
||||
className={`
|
||||
flex h-10 w-10 items-center justify-center rounded-lg
|
||||
border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
|
||||
${sidebarOpen || isCollapsed ? (darkMode ? 'bg-gray-700' : 'bg-gray-100') : ''}
|
||||
text-gray-500 dark:text-gray-300
|
||||
mr-2
|
||||
transition-all duration-200
|
||||
hover:bg-gray-100 dark:hover:bg-gray-700
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
|
||||
`}
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
{sidebarOpen || isCollapsed ? (
|
||||
@ -115,17 +139,39 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Search Box - Hidden on mobile */}
|
||||
<div className="hidden md:flex items-center gap-[2px] border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-2 rounded h-[45px] w-[300px] lg:w-[400px] ml-2">
|
||||
{/* Search Box */}
|
||||
<div className={`
|
||||
hidden md:flex items-center gap-[2px]
|
||||
border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'}
|
||||
p-2 rounded-lg
|
||||
h-[45px] w-[300px] lg:w-[400px] ml-2
|
||||
transition-colors duration-300
|
||||
focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50
|
||||
${darkMode ? 'focus-within:border-gray-500' : 'focus-within:border-blue-500'}
|
||||
`}>
|
||||
<div className="relative flex-1">
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
|
||||
<FaSearch className={`
|
||||
absolute left-3 top-1/2 transform -translate-y-1/2
|
||||
${darkMode ? 'text-gray-400' : 'text-gray-500'}
|
||||
`} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search or type command..."
|
||||
className="w-full bg-transparent border-none pl-10 pr-10 py-2 focus:outline-none text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
|
||||
className={`
|
||||
w-full bg-transparent border-none
|
||||
pl-10 pr-10 py-2
|
||||
focus:outline-none
|
||||
${darkMode ? 'text-gray-200 placeholder-gray-500' : 'text-gray-800 placeholder-gray-400'}
|
||||
text-sm
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-300 text-xs rounded-md">
|
||||
<div className={`
|
||||
px-2 py-1
|
||||
${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'}
|
||||
text-xs rounded-md
|
||||
font-mono
|
||||
`}>
|
||||
⌘K
|
||||
</div>
|
||||
</div>
|
||||
@ -134,14 +180,26 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
|
||||
{/* Right Side */}
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{/* Mobile Search Button */}
|
||||
<button className="md:hidden p-2 rounded-full text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
|
||||
<button className={`
|
||||
md:hidden p-2 rounded-full
|
||||
${darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-800'}
|
||||
hover:bg-gray-200 dark:hover:bg-gray-700
|
||||
transition-colors duration-200
|
||||
`}>
|
||||
<FaSearch className="text-lg" />
|
||||
</button>
|
||||
|
||||
{/* Dark Mode Toggle */}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="p-2 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 transition duration-300 hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
className={`
|
||||
p-2 rounded-full
|
||||
${darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'}
|
||||
flex items-center justify-center
|
||||
w-8 h-8 sm:w-10 sm:h-10
|
||||
transition-all duration-200
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
|
||||
`}
|
||||
aria-label={darkMode ? "Switch to light mode" : "Switch to dark mode"}
|
||||
>
|
||||
{darkMode ? (
|
||||
@ -174,13 +232,20 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<NotificationBell />
|
||||
<NotificationBell darkMode={darkMode} />
|
||||
|
||||
{/* User Profile */}
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={toggleDropdown}
|
||||
className="flex items-center gap-1 sm:gap-2 cursor-pointer hover:text-blue-500 dark:hover:text-blue-400"
|
||||
className={`
|
||||
flex items-center gap-1 sm:gap-2
|
||||
cursor-pointer
|
||||
hover:text-blue-500 dark:hover:text-blue-400
|
||||
transition-colors duration-200
|
||||
p-1 rounded-full
|
||||
${dropdownOpen ? (darkMode ? 'bg-gray-700' : 'bg-gray-100') : ''}
|
||||
`}
|
||||
aria-label="User menu"
|
||||
>
|
||||
<img
|
||||
@ -188,49 +253,113 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, isCollapsed, setIsCollapsed }) =>
|
||||
alt="User profile"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full w-8 h-8 sm:w-10 sm:h-10"
|
||||
className={`
|
||||
rounded-full w-8 h-8 sm:w-10 sm:h-10
|
||||
border-2 ${darkMode ? 'border-gray-600' : 'border-gray-200'}
|
||||
transition-all duration-200
|
||||
${dropdownOpen ? 'ring-2 ring-blue-500' : ''}
|
||||
`}
|
||||
/>
|
||||
<span className="hidden sm:inline text-gray-700 dark:text-gray-200">
|
||||
<span className={`
|
||||
hidden sm:inline
|
||||
${darkMode ? 'text-gray-500' : 'text-gray-700'}
|
||||
text-sm font-medium
|
||||
`}>
|
||||
{currentUser?.name || "User"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{dropdownOpen && currentUser && (
|
||||
<div className="absolute right-0 mt-2 w-56 sm:w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-2 sm:p-4 z-50 border border-gray-200 dark:border-gray-700">
|
||||
<div className={`
|
||||
absolute right-0 mt-2 w-56 sm:w-64
|
||||
${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}
|
||||
shadow-lg rounded-lg
|
||||
p-2 sm:p-4
|
||||
z-50 border
|
||||
transition-all duration-200
|
||||
origin-top-right
|
||||
animate-scaleIn
|
||||
`}>
|
||||
{/* User Info */}
|
||||
<div className="mb-2 sm:mb-3">
|
||||
<h3 className="font-semibold text-gray-800 dark:text-gray-200 text-sm sm:text-base">
|
||||
<h3 className={`
|
||||
font-semibold
|
||||
${darkMode ? 'text-gray-800' : 'text-gray-500'}
|
||||
text-sm sm:text-base
|
||||
`}>
|
||||
{currentUser.name || "User Name"}
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
|
||||
<p className={`
|
||||
text-xs sm:text-sm
|
||||
${darkMode ? 'text-gray-400' : 'text-gray-500'}
|
||||
truncate
|
||||
`}>
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr className="border-gray-200 dark:border-gray-700 my-1 sm:my-2" />
|
||||
<hr className={`
|
||||
${darkMode ? 'border-gray-700' : 'border-gray-200'}
|
||||
my-1 sm:my-2
|
||||
`} />
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="space-y-1 sm:space-y-2">
|
||||
<button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
|
||||
<AiOutlineUser className="text-gray-500 dark:text-gray-400" />
|
||||
<button className={`
|
||||
flex items-center gap-2 w-full text-left
|
||||
p-1 sm:p-2
|
||||
${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
|
||||
rounded-md
|
||||
text-sm sm:text-base
|
||||
${darkMode ? 'text-gray-200' : 'text-gray-700'}
|
||||
transition-colors duration-200
|
||||
`}>
|
||||
<AiOutlineUser className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
|
||||
Edit profile
|
||||
</button>
|
||||
<button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
|
||||
<MdOutlineSettings className="text-gray-500 dark:text-gray-400" />
|
||||
<button className={`
|
||||
flex items-center gap-2 w-full text-left
|
||||
p-1 sm:p-2
|
||||
${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
|
||||
rounded-md
|
||||
text-sm sm:text-base
|
||||
${darkMode ? 'text-gray-200' : 'text-gray-700'}
|
||||
transition-colors duration-200
|
||||
`}>
|
||||
<MdOutlineSettings className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
|
||||
Account settings
|
||||
</button>
|
||||
<button className="flex items-center gap-2 w-full text-left p-1 sm:p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base text-gray-700 dark:text-gray-200">
|
||||
<MdSupport className="text-gray-500 dark:text-gray-400" />
|
||||
<button className={`
|
||||
flex items-center gap-2 w-full text-left
|
||||
p-1 sm:p-2
|
||||
${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
|
||||
rounded-md
|
||||
text-sm sm:text-base
|
||||
${darkMode ? 'text-gray-200' : 'text-gray-700'}
|
||||
transition-colors duration-200
|
||||
`}>
|
||||
<MdSupport className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
|
||||
Support
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr className="border-gray-200 dark:border-gray-700 my-1 sm:my-2" />
|
||||
<hr className={`
|
||||
${darkMode ? 'border-gray-700' : 'border-gray-200'}
|
||||
my-1 sm:my-2
|
||||
`} />
|
||||
|
||||
{/* Sign Out */}
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="flex items-center gap-2 w-full text-left p-1 sm:p-2 text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md text-sm sm:text-base"
|
||||
className={`
|
||||
flex items-center gap-2 w-full text-left
|
||||
p-1 sm:p-2
|
||||
text-red-500 hover:text-red-600 dark:hover:text-red-400
|
||||
${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}
|
||||
rounded-md
|
||||
text-sm sm:text-base
|
||||
transition-colors duration-200
|
||||
`}
|
||||
>
|
||||
<FiLogOut />
|
||||
Sign out
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { FileText, Moon, Sun } from "lucide-react";
|
||||
@ -29,6 +29,40 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
|
||||
localStorage.removeItem("token"); // or account.deleteSession("current") if using Appwrite
|
||||
router.push("/signup");
|
||||
};
|
||||
// ---------------logo handling in dark mode-----------------------
|
||||
// Create a separate LogoImage component for better error handling
|
||||
function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) {
|
||||
const [imgSrc, setImgSrc] = useState(darkMode ? darkSrc : lightSrc);
|
||||
const [errored, setErrored] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setImgSrc(darkMode ? darkSrc : lightSrc);
|
||||
setErrored(false); // Reset error state when mode changes
|
||||
}, [darkMode, darkSrc, lightSrc]);
|
||||
|
||||
const handleError = () => {
|
||||
if (!errored) {
|
||||
// Try falling back to opposite mode's image
|
||||
setImgSrc(darkMode ? lightSrc : darkSrc);
|
||||
setErrored(true);
|
||||
} else {
|
||||
// Ultimate fallback to placeholder
|
||||
setImgSrc('/images/logo/placeholder.svg');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt={alt}
|
||||
className={className}
|
||||
onError={handleError}
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
}
|
||||
// ----------------------------------------
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`fixed lg:relative z-50 h-screen transition-all duration-300 ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-900'
|
||||
@ -37,21 +71,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
|
||||
>
|
||||
<div className="h-full flex flex-col border-r border-gray-200 p-4 overflow-y-auto scrollbar-hide">
|
||||
{/* Logo Section */}
|
||||
<div className={`flex items-center gap-2 mb-6 ${isCollapsed ? 'justify-center' : ''}`}>
|
||||
{isCollapsed ? (
|
||||
<img
|
||||
src={darkMode ? "/images/logo/logo-icon-white.svg" : "/images/logo/logo-icon.svg"}
|
||||
alt="Logo"
|
||||
className="w-8"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={darkMode ? "/images/logo/logo-white.svg" : "/images/logo/logo.svg"}
|
||||
alt="Logo"
|
||||
className="h-8"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* MENU section - Only show when not collapsed */}
|
||||
{!isCollapsed && (
|
||||
@ -67,24 +87,27 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/dashboard")
|
||||
? darkMode
|
||||
? "bg-blue-900 text-blue-200"
|
||||
: "bg-blue-100 text-blue-800"
|
||||
: darkMode
|
||||
? "hover:bg-gray-700"
|
||||
: "hover:bg-gray-200"
|
||||
? darkMode
|
||||
? "bg-blue-900 text-blue-200"
|
||||
: "bg-blue-100 text-blue-800"
|
||||
: darkMode
|
||||
? "hover:bg-gray-700 text-gray-200"
|
||||
: "hover:bg-gray-200"
|
||||
} ${isCollapsed ? 'justify-center' : ''}`}
|
||||
onClick={closeSidebarOnMobile}
|
||||
>
|
||||
<img
|
||||
src={darkMode ? "/images/icons/grid-white.svg" : "/images/icons/grid.svg"}
|
||||
src={darkMode ? "/images/icons/grid.svg" : "/images/icons/grid.svg"}
|
||||
alt="Dashboard"
|
||||
width={18}
|
||||
className="w-5"
|
||||
className={`w-5 ${darkMode ? 'filter brightness-0 invert' : ''}`}
|
||||
onError={(e) => {
|
||||
e.target.src = darkMode ? "/images/icons/grid.svg" : "/images/icons/grid.svg";
|
||||
e.target.className = 'w-5'; // Remove filter if fallback
|
||||
}}
|
||||
/>
|
||||
{!isCollapsed && "Dashboard"}
|
||||
</Link>
|
||||
{/* -----------singleBooking-------------- */}
|
||||
{/* -----------singleBooking/Add token-------------- */}
|
||||
<Link
|
||||
href="/pages/SingleBooking"
|
||||
className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/pages/UserProfile")
|
||||
|
||||
@ -94,54 +94,97 @@ export default function TokenTable({ statusFilter }) {
|
||||
const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
|
||||
const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
|
||||
|
||||
if (loading) return (
|
||||
<div className="text-center mt-50">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold`}>Loading...</p>
|
||||
|
||||
|
||||
// Handle theme loading state
|
||||
if (darkMode === undefined) {
|
||||
return (
|
||||
<div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
|
||||
<div className="text-center">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (loading) return (
|
||||
<div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${
|
||||
darkMode ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode ? 'text-gray-100' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
|
||||
if (error) return (
|
||||
<div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
|
||||
Error: {error}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by token or name"
|
||||
className="mb-4 p-2 border rounded bg-white w-full max-w-sm"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
return (
|
||||
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by token or name"
|
||||
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${
|
||||
darkMode
|
||||
? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
|
||||
: 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
|
||||
}`}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
|
||||
{filteredEntries.length === 0 ? (
|
||||
<div className="p-4">No entries found.</div>
|
||||
) : (
|
||||
<>
|
||||
{filteredEntries.length === 0 ? (
|
||||
<div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
|
||||
No entries found.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
|
||||
<tr>
|
||||
<th className="p-3 text-left">Token</th>
|
||||
<th className="p-3 text-left">Name</th>
|
||||
<th className="p-3 text-left">Status</th>
|
||||
<th className="p-3 text-left">Actions</th>
|
||||
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
|
||||
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
|
||||
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
|
||||
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentEntries.map((entry) => (
|
||||
<tr
|
||||
key={entry.$id}
|
||||
className={`border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
|
||||
className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
|
||||
>
|
||||
<td className="p-3 font-mono">{entry.tokenNumber}</td>
|
||||
<td className="p-3">{entry.patientName}</td>
|
||||
<td className="p-3">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
|
||||
? "bg-green-100 text-green-800"
|
||||
: entry.status === "booked"
|
||||
? "bg-yellow-100 text-yellow-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
} font-semibold`}
|
||||
className={`px-2 py-1 rounded-full text-xs font-semibold ${
|
||||
entry.status === "done"
|
||||
? darkMode
|
||||
? "bg-green-900 text-green-100"
|
||||
: "bg-green-100 text-green-800"
|
||||
: entry.status === "booked"
|
||||
? darkMode
|
||||
? "bg-yellow-900 text-yellow-100"
|
||||
: "bg-yellow-100 text-yellow-800"
|
||||
: darkMode
|
||||
? "bg-red-900 text-red-100"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{entry.status === "booked" ? "In-Queue" : entry.status}
|
||||
</span>
|
||||
@ -151,13 +194,21 @@ export default function TokenTable({ statusFilter }) {
|
||||
<>
|
||||
<button
|
||||
onClick={() => updateStatus(entry.$id, "done")}
|
||||
className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
|
||||
className={`border rounded-full px-2 py-1 text-xs transition-colors ${
|
||||
darkMode
|
||||
? 'border-green-400 text-green-400 hover:bg-green-900'
|
||||
: 'border-green-600 text-green-600 hover:bg-green-50'
|
||||
}`}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateStatus(entry.$id, "missed")}
|
||||
className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
|
||||
className={`border rounded-full px-2 py-1 text-xs transition-colors ${
|
||||
darkMode
|
||||
? 'border-red-400 text-red-400 hover:bg-red-900'
|
||||
: 'border-red-600 text-red-600 hover:bg-red-50'
|
||||
}`}
|
||||
>
|
||||
Missed
|
||||
</button>
|
||||
@ -168,28 +219,39 @@ export default function TokenTable({ statusFilter }) {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'}`}>
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="text-sm">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
className="px-3 py-1 border rounded disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
<div className={`flex justify-between items-center mt-4 p-2 rounded ${
|
||||
darkMode ? 'bg-gray-800' : 'bg-gray-100'
|
||||
}`}>
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
|
||||
darkMode
|
||||
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
|
||||
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
|
||||
}`}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="text-sm">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
|
||||
darkMode
|
||||
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
|
||||
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
|
||||
}`}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
// components/LineChart.js
|
||||
'use client';
|
||||
import { useEffect } from 'react';
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
const LineChart = () => {
|
||||
useEffect(() => {
|
||||
const chartThreeOptions = {
|
||||
series: [
|
||||
{
|
||||
name: "Sales",
|
||||
data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
|
||||
},
|
||||
{
|
||||
name: "Revenue",
|
||||
data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: false,
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
},
|
||||
colors: ["#465FFF", "#9CB9FF"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
height: 310,
|
||||
type: "area",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 800,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.55,
|
||||
opacityTo: 0,
|
||||
stops: [0, 90, 100],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "straight",
|
||||
width: [2, 2],
|
||||
dashArray: [0, 0],
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 5,
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
grid: {
|
||||
borderColor: "#F1F1F1",
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
x: {
|
||||
format: "MMM yyyy",
|
||||
},
|
||||
y: {
|
||||
formatter: function(val) {
|
||||
return "$" + val;
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: "category",
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: "Amount ($)",
|
||||
style: {
|
||||
color: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return "$" + val;
|
||||
},
|
||||
style: {
|
||||
colors: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const chart = new ApexCharts(document.querySelector("#chartThree"), chartThreeOptions);
|
||||
chart.render();
|
||||
|
||||
return () => {
|
||||
chart.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div id="chartThree" />;
|
||||
};
|
||||
|
||||
export default LineChart;
|
||||
@ -1,142 +0,0 @@
|
||||
// components/charts/chart-01.jsx
|
||||
'use client';
|
||||
import { useEffect } from 'react';
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
const Chart01 = () => {
|
||||
useEffect(() => {
|
||||
const chartOneOptions = {
|
||||
series: [
|
||||
{
|
||||
name: "Sales",
|
||||
data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
|
||||
},
|
||||
],
|
||||
colors: ["#465fff"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
type: "bar",
|
||||
height: 180,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 800,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: "39%",
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: "end",
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 4,
|
||||
colors: ["transparent"],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: "left",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
markers: {
|
||||
radius: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: "Amount ($)",
|
||||
style: {
|
||||
color: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return "$" + val;
|
||||
},
|
||||
style: {
|
||||
colors: "#6B7280",
|
||||
fontSize: "12px",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: "#F1F1F1",
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(val) {
|
||||
return "$" + val;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const chart = new ApexCharts(document.querySelector("#chartOne"), chartOneOptions);
|
||||
chart.render();
|
||||
|
||||
return () => {
|
||||
chart.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div id="chartOne" />;
|
||||
};
|
||||
|
||||
export default Chart01;
|
||||
@ -1,100 +0,0 @@
|
||||
// components/charts/chart-02.jsx
|
||||
'use client';
|
||||
import { useEffect } from 'react';
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
const Chart02 = () => {
|
||||
useEffect(() => {
|
||||
const chartTwoOptions = {
|
||||
series: [75.55],
|
||||
colors: ["#465FFF"],
|
||||
chart: {
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
type: "radialBar",
|
||||
height: 330,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 800,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: "80%",
|
||||
},
|
||||
track: {
|
||||
background: "#E4E7EC",
|
||||
strokeWidth: "100%",
|
||||
margin: 5,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
fontSize: "36px",
|
||||
fontWeight: "600",
|
||||
offsetY: 60,
|
||||
color: "#1D2939",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shade: "dark",
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: ["#465FFF"],
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.8,
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
labels: ["Progress"],
|
||||
responsive: [{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280,
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
value: {
|
||||
fontSize: "28px",
|
||||
offsetY: 50,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}],
|
||||
};
|
||||
|
||||
const chart = new ApexCharts(document.querySelector("#chartTwo"), chartTwoOptions);
|
||||
chart.render();
|
||||
|
||||
return () => {
|
||||
chart.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div id="chartTwo" />;
|
||||
};
|
||||
|
||||
export default Chart02;
|
||||
@ -1,26 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function GridShape() {
|
||||
return (
|
||||
<>
|
||||
<div className="absolute right-0 top-0 -z-10 w-full max-w-[250px] xl:max-w-[450px]">
|
||||
<Image
|
||||
width={540}
|
||||
height={254}
|
||||
src="/images/shape/grid-01.svg"
|
||||
alt="grid"
|
||||
className="h-auto w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 -z-10 w-full max-w-[250px] rotate-180 xl:max-w-[450px]">
|
||||
<Image
|
||||
width={540}
|
||||
height={254}
|
||||
src="/images/shape/grid-01.svg"
|
||||
alt="grid"
|
||||
className="h-auto w-full"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function SuccessMessage() {
|
||||
return (
|
||||
<>
|
||||
{/* First Message with Link */}
|
||||
<div
|
||||
className="rounded-xl border p-4"
|
||||
style={{
|
||||
borderColor: '#f04438',
|
||||
backgroundColor: '#fef3f2',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5" style={{ color: '#3b82f6' }}>
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Success Message
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
You can insert a description for the message here. The text relates
|
||||
to the action that has been performed.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-block text-sm font-medium underline"
|
||||
style={{ color: '#f87171' }} // optional: changed to a more visible red
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Message without Link */}
|
||||
<div
|
||||
className="rounded-xl border p-4 mt-4"
|
||||
style={{
|
||||
borderColor: '#f04438',
|
||||
backgroundColor: '#fef3f2',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5" style={{ color: '#3b82f6' }}>
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
|
||||
Success Message
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
You can insert a description for the message here. The text relates
|
||||
to the action that has been performed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const AlertInfo = () => {
|
||||
return (
|
||||
<div className="space-y-4 p-4">
|
||||
{/* First Alert with Learn More link */}
|
||||
<div className="rounded-xl border border-[#36bffa] bg-[#f0f9ff] p-4 dark:border-[#36bffa]/30 dark:bg-[#36bffa]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#36bffa]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1d2939] dark:text-white/90">
|
||||
Success Message
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-[#667085] dark:text-[#98a2b3]">
|
||||
You can insert a description for the message here.The text relates to
|
||||
the action that has been performed.
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98a2b3]"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Alert without Learn More link */}
|
||||
<div className="rounded-xl border border-[#36bffa] bg-[#f0f9ff] p-4 dark:border-[#36bffa]/30 dark:bg-[#36bffa]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#36bffa]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1d2939] dark:text-white/90">
|
||||
Success Message
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-[#667085] dark:text-[#98a2b3]">
|
||||
You can insert a description for the message here.The text relates to
|
||||
the action that has been performed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertInfo;
|
||||
@ -1,78 +0,0 @@
|
||||
// app/alert-success/page.js
|
||||
export default function AlertSuccessPage() {
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
{/* Alert 1 */}
|
||||
<div className="rounded-xl border border-[#12B76A] bg-[#ECFDF3] p-4 dark:border-[#12B76A]/30 dark:bg-[#12B76A]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#12B76A]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
|
||||
fill="#12B76A"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
|
||||
Success Message
|
||||
</h4>
|
||||
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
|
||||
You can insert a description for the message here. The text relates to
|
||||
the action that has been performed.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98A2B3]"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert 2 (without link) */}
|
||||
<div className="rounded-xl border border-[#12B76A] bg-[#ECFDF3] p-4 dark:border-[#12B76A]/30 dark:bg-[#12B76A]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#12B76A]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
|
||||
fill="#12B76A"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
|
||||
Success Message
|
||||
</h4>
|
||||
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
|
||||
You can insert a description for the message here. The text relates to
|
||||
the action that has been performed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export default function AlertWarning() {
|
||||
return (
|
||||
<div className="space-y-4 p-6">
|
||||
{/* Alert 1 */}
|
||||
<div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
|
||||
fill="#F79009"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
|
||||
Warning Message
|
||||
</h4>
|
||||
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
|
||||
You can insert a description for the message here. The text
|
||||
relates to the action that has been performed.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98A2B3]"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert 2 */}
|
||||
<div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
|
||||
fill="#F79009"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
|
||||
Warning Message
|
||||
</h4>
|
||||
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
|
||||
You can insert a description for the message here. The text
|
||||
relates to the action that has been performed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
// components/partials/avatar/Avatar01.tsx
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Avatar01 = () => {
|
||||
const sizes = [
|
||||
{ container: 'h-6 w-6', max: 'max-w-6' },
|
||||
{ container: 'h-8 w-8', max: 'max-w-8' },
|
||||
{ container: 'h-10 w-10', max: 'max-w-10' },
|
||||
{ container: 'h-12 w-12', max: 'max-w-12' },
|
||||
{ container: 'h-14 w-14', max: 'max-w-14' },
|
||||
{ container: 'h-16 w-16', max: 'max-w-16' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
{sizes.map((size, index) => (
|
||||
<div key={index} className={`relative ${size.container} ${size.max} rounded-full`}>
|
||||
<Image
|
||||
src="/images/user/user-01.jpg"
|
||||
alt="user"
|
||||
width={parseInt(size.container.split('-')[1]) * 4} // Convert to pixels
|
||||
height={parseInt(size.container.split('-')[1]) * 4}
|
||||
className="overflow-hidden rounded-full"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar01;
|
||||
@ -1,35 +0,0 @@
|
||||
// components/partials/avatar/Avatar02.tsx
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Avatar02 = () => {
|
||||
const sizes = [
|
||||
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
|
||||
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
|
||||
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
|
||||
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
|
||||
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
|
||||
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
{sizes.map((size, index) => (
|
||||
<div key={index} className={`relative ${size.container} rounded-full`}>
|
||||
<Image
|
||||
src="/images/user/user-01.jpg"
|
||||
alt="user"
|
||||
width={parseInt(size.container.split('-')[1]) * 4} // Convert tailwind size to pixels
|
||||
height={parseInt(size.container.split('-')[1]) * 4}
|
||||
className="overflow-hidden rounded-full"
|
||||
/>
|
||||
<span
|
||||
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#12b76a] dark:border-gray-900`}
|
||||
></span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar02;
|
||||
@ -1,35 +0,0 @@
|
||||
// components/partials/avatar/Avatar03.tsx
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Avatar03 = () => {
|
||||
const sizes = [
|
||||
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
|
||||
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
|
||||
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
|
||||
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
|
||||
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
|
||||
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
{sizes.map((size, index) => (
|
||||
<div key={index} className={`relative ${size.container} rounded-full`}>
|
||||
<Image
|
||||
src="/images/user/user-01.jpg"
|
||||
alt="user"
|
||||
width={parseInt(size.container.split('-')[1]) * 4}
|
||||
height={parseInt(size.container.split('-')[1]) * 4}
|
||||
className="overflow-hidden rounded-full"
|
||||
/>
|
||||
<span
|
||||
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f04438] dark:border-gray-900`}
|
||||
></span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar03;
|
||||
@ -1,35 +0,0 @@
|
||||
// components/partials/avatar/Avatar04.tsx
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Avatar04 = () => {
|
||||
const sizes = [
|
||||
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
|
||||
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
|
||||
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
|
||||
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
|
||||
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
|
||||
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
|
||||
{sizes.map((size, index) => (
|
||||
<div key={index} className={`relative ${size.container} rounded-full`}>
|
||||
<Image
|
||||
src="/images/user/user-01.jpg"
|
||||
alt="user"
|
||||
width={parseInt(size.container.split('-')[1]) * 4}
|
||||
height={parseInt(size.container.split('-')[1]) * 4}
|
||||
className="overflow-hidden rounded-full"
|
||||
/>
|
||||
<span
|
||||
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f79009] dark:border-gray-900`}
|
||||
></span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar04;
|
||||
@ -1,45 +0,0 @@
|
||||
// components/partials/badge/Badge01.tsx
|
||||
import React from 'react';
|
||||
|
||||
const Badge01 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecf3ff] px-2.5 py-0.5 text-sm font-medium text-[#465fff] dark:bg-[#465fff]/15 dark:text-[#3641f5]">
|
||||
Primary
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecfdf3] px-2.5 py-0.5 text-sm font-medium text-[#12b76a] dark:bg-[#12b76a]/15 dark:text-[#039855]">
|
||||
Success
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fef3f2] px-2.5 py-0.5 text-sm font-medium text-[#f04438] dark:bg-[#f04438]/15 dark:text-[#d92d20]">
|
||||
Error
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fffaeb] px-2.5 py-0.5 text-sm font-medium text-[#f79009] dark:bg-[#f79009]/15 dark:text-[#fd853a]">
|
||||
Warning
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f0f9ff] px-2.5 py-0.5 text-sm font-medium text-[#0ba5ec] dark:bg-[#0ba5ec]/15 dark:text-[#0086c9]">
|
||||
Info
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f2f4f7] px-2.5 py-0.5 text-sm font-medium text-[#475467] dark:bg-white/5 dark:text-white/80">
|
||||
Light
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#667085] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white">
|
||||
Dark
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge01;
|
||||
@ -1,45 +0,0 @@
|
||||
// components/partials/badge/Badge02.tsx
|
||||
import React from 'react';
|
||||
|
||||
const Badge02 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] px-2.5 py-0.5 text-sm font-medium text-white">
|
||||
Primary
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] px-2.5 py-0.5 text-sm font-medium text-white">
|
||||
Success
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] px-2.5 py-0.5 text-sm font-medium text-white">
|
||||
Error
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] px-2.5 py-0.5 text-sm font-medium text-white">
|
||||
Warning
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] px-2.5 py-0.5 text-sm font-medium text-white">
|
||||
Info
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
|
||||
Light
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
|
||||
Dark
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge02;
|
||||
@ -1,69 +0,0 @@
|
||||
// components/partials/badge/Badge03.tsx
|
||||
import React from 'react';
|
||||
|
||||
const PlusIcon = () => (
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Badge03 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecf3ff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#465fff] dark:bg-[#465fff]/15 dark:text-[#3641f5]">
|
||||
<PlusIcon />
|
||||
Primary
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecfdf3] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#12b76a] dark:bg-[#12b76a]/15 dark:text-[#039855]">
|
||||
<PlusIcon />
|
||||
Success
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fef3f2] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#f04438] dark:bg-[#f04438]/15 dark:text-[#d92d20]">
|
||||
<PlusIcon />
|
||||
Error
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fffaeb] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#f79009] dark:bg-[#f79009]/15 dark:text-[#fd853a]">
|
||||
<PlusIcon />
|
||||
Warning
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f0f9ff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#0ba5ec] dark:bg-[#0ba5ec]/15 dark:text-[#0086c9]">
|
||||
<PlusIcon />
|
||||
Info
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f2f4f7] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#475467] dark:bg-white/5 dark:text-white/80">
|
||||
<PlusIcon />
|
||||
Light
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#667085] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white">
|
||||
<PlusIcon />
|
||||
Dark
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge03;
|
||||
@ -1,69 +0,0 @@
|
||||
// components/partials/badge/Badge04.tsx
|
||||
import React from 'react';
|
||||
|
||||
const PlusIcon = () => (
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Badge04 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
|
||||
<PlusIcon />
|
||||
Primary
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
|
||||
<PlusIcon />
|
||||
Success
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
|
||||
<PlusIcon />
|
||||
Error
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
|
||||
<PlusIcon />
|
||||
Warning
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
|
||||
<PlusIcon />
|
||||
Info
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
|
||||
<PlusIcon />
|
||||
Light
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
|
||||
<PlusIcon />
|
||||
Dark
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge04;
|
||||
@ -1,90 +0,0 @@
|
||||
// components/partials/badge/Badge05.tsx
|
||||
import React from 'react';
|
||||
|
||||
const PlusIcon = () => (
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Badge05 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#ecf3ff', color: '#465fff' }}
|
||||
>
|
||||
Primary
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#ecfdf3', color: '#039855' }}
|
||||
>
|
||||
Success
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#fef3f2', color: '#d92d20' }}
|
||||
>
|
||||
Error
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#fffaeb', color: '#fd853a' }}
|
||||
>
|
||||
Warning
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#f0f9ff', color: '#0ba5ec' }}
|
||||
>
|
||||
Info
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#f2f4f7', color: '#344054' }}
|
||||
>
|
||||
Light
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
|
||||
style={{ backgroundColor: '#667085', color: '#ffffff' }}
|
||||
>
|
||||
Dark
|
||||
<PlusIcon />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge05;
|
||||
@ -1,95 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const PlusIcon = () => (
|
||||
<svg
|
||||
className="fill-current"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Badge06 = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
|
||||
{/* Primary Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#3B82F6' }} // Tailwind's brand-500 equivalent
|
||||
>
|
||||
Primary
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Success Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#22C55E' }} // Tailwind's success-500 equivalent
|
||||
>
|
||||
Success
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Error Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#EF4444' }} // Tailwind's error-500 equivalent
|
||||
>
|
||||
Error
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Warning Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#F59E0B' }} // Tailwind's warning-500 equivalent
|
||||
>
|
||||
Warning
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Info Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{ backgroundColor: '#38BDF8' }} // Tailwind's blue-light-500 equivalent
|
||||
>
|
||||
Info
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Light Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{
|
||||
backgroundColor: '#9CA3AF', // Tailwind's gray-400
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
}}
|
||||
>
|
||||
Light
|
||||
<PlusIcon />
|
||||
</span>
|
||||
|
||||
{/* Dark Badge */}
|
||||
<span
|
||||
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
|
||||
style={{
|
||||
backgroundColor: '#1F2937', // Tailwind's gray-800
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
Dark
|
||||
<PlusIcon />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge06;
|
||||
@ -1,23 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
const Image01 = () => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div id="pane" className="overflow-hidden">
|
||||
<Image
|
||||
src="/images/grid-image/image-01.png"
|
||||
alt="Cover"
|
||||
width={800} // Set appropriate width
|
||||
height={600} // Set appropriate height
|
||||
className="w-full rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="ghostpane"
|
||||
className="absolute left-0 top-0 duration-300 ease-in-out"
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Image01;
|
||||
@ -1,29 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
const Image02 = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<div>
|
||||
<Image
|
||||
src="/images/grid-image/image-02.png"
|
||||
alt="image grid"
|
||||
width={600} // Set appropriate width
|
||||
height={400} // Set appropriate height
|
||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Image
|
||||
src="/images/grid-image/image-03.png"
|
||||
alt="image grid"
|
||||
width={600} // Set appropriate width
|
||||
height={400} // Set appropriate height
|
||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Image02;
|
||||
@ -1,39 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
const Image03 = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
||||
<div>
|
||||
<Image
|
||||
src="/images/grid-image/image-04.png"
|
||||
alt="image grid"
|
||||
width={400} // Set appropriate width
|
||||
height={300} // Set appropriate height
|
||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Image
|
||||
src="/images/grid-image/image-05.png"
|
||||
alt="image grid"
|
||||
width={400}
|
||||
height={300}
|
||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Image
|
||||
src="/images/grid-image/image-06.png"
|
||||
alt="image grid"
|
||||
width={400}
|
||||
height={300}
|
||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Image03;
|
||||
@ -1,90 +1,105 @@
|
||||
"use client";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
export default function Header({
|
||||
currentToken,
|
||||
previousToken,
|
||||
nextToken,
|
||||
missedTokens,
|
||||
entries = [] // Add entries prop to calculate counts
|
||||
entries = []
|
||||
}) {
|
||||
// Calculate counts from entries
|
||||
const totalTokens = entries.length;
|
||||
const doneTokens = entries.filter(entry => entry.status === "done").length;
|
||||
const missedTokensCount = entries.filter(entry => entry.status === "missed").length;
|
||||
const inQueueTokens = entries.filter(entry => entry.status === "booked").length;
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
|
||||
<div className="hidden sm:hidden md:hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{/* ----------Total Tokens Card---------------- */}
|
||||
<div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
|
||||
<h2 className="font-semibold text-[14px] text-[#667085]">Total Tokens</h2>
|
||||
<div className="flex gap-5 -mt-1">
|
||||
<p className="text-[25px]">{totalTokens}</p>
|
||||
<p className="text-[8px] text-[#667085] mt-[18px]">
|
||||
<span className="text-green-400">+{inQueueTokens}</span> in queue
|
||||
</p>
|
||||
</div>
|
||||
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
||||
View All
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-900' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}> <div className="hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
|
||||
<div className={`flex flex-col gap-3 p-4 rounded-lg ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-gray-50 text-gray-600'}`}>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{/* ----------Total Tokens Card---------------- */}
|
||||
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
||||
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Total Tokens</h2>
|
||||
<div className="flex gap-5 items-baseline">
|
||||
<p className="text-2xl font-medium dark:text-white">{totalTokens}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="text-green-500 dark:text-green-400">+{inQueueTokens}</span> in queue
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ----------Done Tokens Card---------------- */}
|
||||
<div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
|
||||
<h2 className="font-semibold text-[14px] text-[#667085]">Done</h2>
|
||||
<div className="flex gap-5 -mt-1">
|
||||
<p className="text-[25px]">{doneTokens}</p>
|
||||
<p className="text-[8px] text-[#667085] mt-[18px]">
|
||||
<span className="text-green-400">
|
||||
{totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
|
||||
</span> of total
|
||||
</p>
|
||||
</div>
|
||||
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
||||
View List
|
||||
</button>
|
||||
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
||||
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ----------Done Tokens Card---------------- */}
|
||||
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
||||
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Done</h2>
|
||||
<div className="flex gap-5 items-baseline">
|
||||
<p className="text-2xl font-medium dark:text-white">{doneTokens}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="text-green-500 dark:text-green-400">
|
||||
{totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
|
||||
</span> of total
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ----------Missed Tokens Card---------------- */}
|
||||
<div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
|
||||
<h2 className="font-semibold text-[14px] text-[#667085]">Missed Tokens</h2>
|
||||
<div className="flex gap-5 -mt-1">
|
||||
<p className="text-[25px]">{missedTokensCount}</p>
|
||||
<p className="text-[8px] text-[#667085] mt-[18px]">
|
||||
{missedTokensCount > 0 ? (
|
||||
<span className="text-red-400">{missedTokens}</span>
|
||||
) : (
|
||||
"All attended"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
||||
View List
|
||||
</button>
|
||||
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
||||
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
||||
View List
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ----------Missed Tokens Card---------------- */}
|
||||
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
||||
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Missed Tokens</h2>
|
||||
<div className="flex gap-5 items-baseline">
|
||||
<p className="text-2xl font-medium dark:text-white">{missedTokensCount}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{missedTokensCount > 0 ? (
|
||||
<span className="text-red-500 dark:text-red-400">{missedTokens}</span>
|
||||
) : (
|
||||
"All attended"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ----------Current Token Card---------------- */}
|
||||
<div className="border-3 border-gray-300 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
|
||||
<h2 className="font-semibold text-[14px] text-[#667085]">Current Token</h2>
|
||||
<div className="flex flex-col gap-1 -mt-1">
|
||||
<p className="text-[25px] text-center">
|
||||
{currentToken || "---"}
|
||||
</p>
|
||||
<div className="flex justify-between text-[8px] text-[#667085]">
|
||||
<span>Prev: {previousToken || "---"}</span>
|
||||
<span>Next: {nextToken || "---"}</span>
|
||||
</div>
|
||||
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
||||
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
||||
View List
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ----------Current Token Card---------------- */}
|
||||
<div className={`border rounded-lg px-3 py-3 flex flex-col gap-3 w-[10rem] transition-colors ${
|
||||
darkMode ? 'bg-gray-700 border-gray-600' : 'bg-white border-gray-200'
|
||||
}`}>
|
||||
<h2 className="font-semibold text-sm text-gray-500 dark:text-gray-300">Current Token</h2>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-2xl font-medium text-center dark:text-white">
|
||||
{currentToken || "---"}
|
||||
</p>
|
||||
<div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Prev: {previousToken || "---"}</span>
|
||||
<span>Next: {nextToken || "---"}</span>
|
||||
</div>
|
||||
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
||||
Call Next
|
||||
</button>
|
||||
</div>
|
||||
<button className={`bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
|
||||
text-white text-xs py-1.5 w-full rounded transition-colors`}>
|
||||
Call Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,203 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
const TableOne = () => {
|
||||
// Table data
|
||||
const tableData = [
|
||||
{
|
||||
id: 1,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "Done",
|
||||
variant: "success",
|
||||
color: "text-success-600",
|
||||
bg: "bg-success-50",
|
||||
dark: {
|
||||
color: "dark:text-success-500",
|
||||
bg: "dark:bg-success-500/15"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "In-Queue",
|
||||
variant: "warning",
|
||||
color: "text-warning-600",
|
||||
bg: "bg-warning-50",
|
||||
dark: {
|
||||
color: "dark:text-orange-400",
|
||||
bg: "dark:bg-warning-500/15"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "Cancelled",
|
||||
variant: "error",
|
||||
color: "text-error-600",
|
||||
bg: "bg-error-50",
|
||||
dark: {
|
||||
color: "dark:text-error-500",
|
||||
bg: "dark:bg-error-500/15"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "Done",
|
||||
variant: "success",
|
||||
color: "text-success-600",
|
||||
bg: "bg-success-50",
|
||||
dark: {
|
||||
color: "dark:text-success-500",
|
||||
bg: "dark:bg-success-500/15"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "In-Queue",
|
||||
variant: "warning",
|
||||
color: "text-warning-600",
|
||||
bg: "bg-warning-50",
|
||||
dark: {
|
||||
color: "dark:text-orange-400",
|
||||
bg: "dark:bg-warning-500/15"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
token: "1",
|
||||
name: "John Doe",
|
||||
status: {
|
||||
text: "Cancelled",
|
||||
variant: "error",
|
||||
color: "text-error-600",
|
||||
bg: "bg-error-50",
|
||||
dark: {
|
||||
color: "dark:text-error-500",
|
||||
bg: "dark:bg-error-500/15"
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Action button component
|
||||
const ActionButton = ({ type }) => (
|
||||
<p className="rounded-full border-[1px] px-2 py-0.5 text-theme-xs flex flex-row items-center gap-2 2xl:px-3 2xl:py-1.5 2xl:text-[14px] 2xl:font-normal">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="10"
|
||||
height="10"
|
||||
fill="currentColor"
|
||||
className="bi bi-pencil"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
|
||||
</svg>
|
||||
{type}
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
{/* Table Header */}
|
||||
<thead>
|
||||
<tr className="border-y border-gray-100 dark:border-gray-800">
|
||||
<th className="py-3">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Token
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 sm:columns-2 2xl:columns-2">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Name
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 columns-0 sm:columns-0 2xl:columns-0">
|
||||
<div className="flex items-center justify-normal sm:justify-normal 2xl:justify-normal">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Status
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3">
|
||||
<div className="flex items-center justify-center col-span-1">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400 hidden md:block 2xl:block">
|
||||
Options
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Table Body */}
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{tableData.map((item) => (
|
||||
<tr key={item.id}>
|
||||
{/* Token Column */}
|
||||
<td className="py-3">
|
||||
<div className="flex items-center -mt-7 ml-3 md:mt-0 md:mb-0 2xl:mb-0">
|
||||
<p>{item.token}</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Name Column */}
|
||||
<td className="py-3">
|
||||
<div className="flex items-center -mt-8 md:mt-0 md:mb-0 2xl:mb-0">
|
||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
||||
{item.name}
|
||||
</p>
|
||||
{/* Mobile Actions */}
|
||||
<div className="flex items-center justify-center gap-2 mt-20 -ml-[4rem] sm:-ml-[4rem] md:hidden md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
||||
<ActionButton type="Done" />
|
||||
<ActionButton type="Missed" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Status Column */}
|
||||
<td className="py-3">
|
||||
<div className="flex items-center justify-normal -mt-7 sm:justify-normal md:mt-0 md:mb-0 2xl:mb-0 2xl:justify-normal">
|
||||
<p className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${item.status.bg} ${item.status.color} ${item.status.dark.bg} ${item.status.dark.color}`}>
|
||||
{item.status.text}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Options Column (Desktop) */}
|
||||
<td className="py-3">
|
||||
<div className="hidden items-center justify-center gap-2 mt-8 -ml-[18rem] sm:-ml-[49rem] md:flex md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
||||
<ActionButton type="Done" />
|
||||
<ActionButton type="Missed" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableOne;
|
||||
@ -1,240 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
const TableSix = () => {
|
||||
// Table data array
|
||||
const tableData = [
|
||||
{
|
||||
id: 1,
|
||||
user: {
|
||||
name: "Lindsey Curtis",
|
||||
role: "Web Designer",
|
||||
avatar: "/images/user/user-17.jpg"
|
||||
},
|
||||
project: "Agency Website",
|
||||
team: [
|
||||
"/images/user/user-22.jpg",
|
||||
"/images/user/user-23.jpg",
|
||||
"/images/user/user-24.jpg"
|
||||
],
|
||||
status: {
|
||||
text: "Active",
|
||||
variant: "success"
|
||||
},
|
||||
budget: "3.9K"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
user: {
|
||||
name: "Kaiya George",
|
||||
role: "Project Manager",
|
||||
avatar: "/images/user/user-18.jpg"
|
||||
},
|
||||
project: "Technology",
|
||||
team: [
|
||||
"/images/user/user-25.jpg",
|
||||
"/images/user/user-26.jpg"
|
||||
],
|
||||
status: {
|
||||
text: "Pending",
|
||||
variant: "warning"
|
||||
},
|
||||
budget: "24.9K"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
user: {
|
||||
name: "Zain Geidt",
|
||||
role: "Content Writer",
|
||||
avatar: "/images/user/user-19.jpg"
|
||||
},
|
||||
project: "Blog Writing",
|
||||
team: [
|
||||
"/images/user/user-27.jpg"
|
||||
],
|
||||
status: {
|
||||
text: "Active",
|
||||
variant: "success"
|
||||
},
|
||||
budget: "12.7K"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
user: {
|
||||
name: "Abram Schleifer",
|
||||
role: "Digital Marketer",
|
||||
avatar: "/images/user/user-20.jpg"
|
||||
},
|
||||
project: "Social Media",
|
||||
team: [
|
||||
"/images/user/user-28.jpg",
|
||||
"/images/user/user-29.jpg",
|
||||
"/images/user/user-30.jpg"
|
||||
],
|
||||
status: {
|
||||
text: "Cancel",
|
||||
variant: "error"
|
||||
},
|
||||
budget: "2.8K"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
user: {
|
||||
name: "Carla George",
|
||||
role: "Front-end Developer",
|
||||
avatar: "/images/user/user-21.jpg"
|
||||
},
|
||||
project: "Website",
|
||||
team: [
|
||||
"/images/user/user-31.jpg",
|
||||
"/images/user/user-32.jpg",
|
||||
"/images/user/user-33.jpg"
|
||||
],
|
||||
status: {
|
||||
text: "Active",
|
||||
variant: "success"
|
||||
},
|
||||
budget: "4.5K"
|
||||
}
|
||||
];
|
||||
|
||||
// Status style variants
|
||||
const statusVariants = {
|
||||
success: "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500",
|
||||
warning: "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400",
|
||||
error: "bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-500"
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="max-w-full overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
{/* Table Header */}
|
||||
<thead>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-800">
|
||||
<th className="px-5 py-3 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
User
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-5 py-3 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Project Name
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-5 py-3 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Team
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-5 py-3 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Status
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-5 py-3 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
Budget
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Table Body */}
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{tableData.map((item) => (
|
||||
<tr key={item.id}>
|
||||
{/* User Column */}
|
||||
<td className="px-5 py-4 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src={item.user.avatar}
|
||||
alt={item.user.name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
||||
{item.user.name}
|
||||
</span>
|
||||
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
||||
{item.user.role}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Project Column */}
|
||||
<td className="px-5 py-4 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
||||
{item.project}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Team Column */}
|
||||
<td className="px-5 py-4 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex -space-x-2">
|
||||
{item.team.map((member, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
|
||||
>
|
||||
<Image
|
||||
src={member}
|
||||
alt={`Team member ${index + 1}`}
|
||||
width={24}
|
||||
height={24}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Status Column */}
|
||||
<td className="px-5 py-4 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p
|
||||
className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${statusVariants[item.status.variant]}`}
|
||||
>
|
||||
{item.status.text}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Budget Column */}
|
||||
<td className="px-5 py-4 sm:px-6">
|
||||
<div className="flex items-center">
|
||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
||||
{item.budget}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableSix;
|
||||
@ -1,18 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function YouTubeVideo() {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg aspect-video">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full h-full"
|
||||
// Next.js specific attributes
|
||||
loading="lazy"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function YouTubeVideo4x3({
|
||||
videoId = "dQw4w9WgXcQ",
|
||||
title = "YouTube video player"
|
||||
}) {
|
||||
return (
|
||||
<div className="aspect-[4/3] overflow-hidden rounded-lg">
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
title={title}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full h-full"
|
||||
frameBorder="0"
|
||||
loading="lazy"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
'use client';
|
||||
|
||||
export default function SquareYouTubeVideo({
|
||||
videoId = "dQw4w9WgXcQ",
|
||||
title = "YouTube video player",
|
||||
className = ""
|
||||
}) {
|
||||
return (
|
||||
<div className={`overflow-hidden rounded-lg aspect-square ${className}`}>
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
title={title}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full h-full"
|
||||
frameBorder="0"
|
||||
loading="lazy"
|
||||
referrerPolicy="strict-origin-when-cross-origin"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -41,7 +41,7 @@ export const AuthProvider = ({ children }) => {
|
||||
if (error.code === 401) {
|
||||
localStorage.removeItem("isLoggedIn");
|
||||
setIsAuthenticated(false);
|
||||
router.push("/signup");
|
||||
router.push("/");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// src/context/ThemeContext.js
|
||||
"use client";
|
||||
import { createContext, useContext, useState, useEffect } from "react";
|
||||
|
||||
const ThemeContext = createContext();
|
||||
|
||||
export function ThemeProvider({ children }) {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
// Initialize with undefined to detect client-side
|
||||
const [darkMode, setDarkMode] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
// Check for saved preference or system preference
|
||||
@ -14,6 +14,8 @@ export function ThemeProvider({ children }) {
|
||||
setDarkMode(savedMode === 'true');
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setDarkMode(true);
|
||||
} else {
|
||||
setDarkMode(false); // Explicitly set light mode if no preference
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
@ -6,25 +6,28 @@ import { useEffect } from "react";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import EntriesTable from "../pages/entries/EntriesTable";
|
||||
|
||||
|
||||
export default function DashboardPage() {
|
||||
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, loading, userRole } = useAuth();
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !isAuthenticated) {
|
||||
router.push("/signup");
|
||||
router.push("/");
|
||||
}
|
||||
}, [isAuthenticated, loading, router]);
|
||||
|
||||
if (loading) {
|
||||
// Handle theme loading state
|
||||
if (darkMode === undefined || loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${darkMode ? 'border-gray-100' : 'border-gray-900'} mx-auto`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'}`}>
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
@ -37,8 +40,12 @@ export default function DashboardPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900 p-6">
|
||||
<EntriesTable />
|
||||
</div>
|
||||
<main className={`min-h-screen transition-colors duration-300 ${
|
||||
darkMode ? 'dark bg-gray-900' : 'bg-white'
|
||||
}`}>
|
||||
<div className="p-1">
|
||||
<EntriesTable />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -6,6 +6,6 @@
|
||||
|
||||
// lib/config.js
|
||||
export const DATABASE_ID = "67e1452b00016444b37f";
|
||||
export const COLLECTION_ID = "67fe4029000f7e0a7b92";
|
||||
export const COLLECTION_ID = "681c367b0016f9ba0e8e";
|
||||
export const SETTINGS_COLLECTION_ID = "settings";
|
||||
export const AVG_CONSULTATION_KEY = "avg_consultation";
|
||||
384
src/app/page.js
384
src/app/page.js
@ -1,32 +1,152 @@
|
||||
// src/app/page.js
|
||||
"use client"; // Mark this as a client component
|
||||
|
||||
"use client";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "./context/AuthContext"; // Import useAuth
|
||||
import { useEffect } from "react"; // Import useEffect
|
||||
import { useAuth } from "./context/AuthContext";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import Button1 from "./ui/buttons/button1";
|
||||
import { account, ID } from "./lib/appwrite";
|
||||
|
||||
export default function Home() {
|
||||
export default function AuthPage() {
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
const { isAuthenticated, loading: authLoading, setIsAuthenticated } = useAuth();
|
||||
const [isLoginForm, setIsLoginForm] = useState(true);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
// Form states
|
||||
const [loginData, setLoginData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
});
|
||||
|
||||
const [signupData, setSignupData] = useState({
|
||||
fname: "",
|
||||
lname: "",
|
||||
email: "",
|
||||
password: "",
|
||||
agreeTerms: false,
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState({
|
||||
agreeTerms: "",
|
||||
general: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
if (isAuthenticated) {
|
||||
router.push("/dashboard");
|
||||
} else {
|
||||
router.push("/signup");
|
||||
}
|
||||
if (!authLoading && isAuthenticated) {
|
||||
router.push("/dashboard");
|
||||
}
|
||||
}, [isAuthenticated, loading, router]);
|
||||
}, [isAuthenticated, authLoading, router]);
|
||||
|
||||
if (loading) {
|
||||
const handleLoginChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setLoginData({
|
||||
...loginData,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSignupChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setSignupData({
|
||||
...signupData,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
});
|
||||
if (name === "agreeTerms") {
|
||||
setErrors({ ...errors, agreeTerms: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const validateSignupForm = () => {
|
||||
let isValid = true;
|
||||
const newErrors = { ...errors };
|
||||
|
||||
if (!signupData.agreeTerms) {
|
||||
newErrors.agreeTerms = "You must agree to the terms and conditions";
|
||||
isValid = false;
|
||||
} else {
|
||||
newErrors.agreeTerms = "";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setErrors({ ...errors, general: "" });
|
||||
|
||||
try {
|
||||
const session = await account.createEmailPasswordSession(
|
||||
loginData.email,
|
||||
loginData.password
|
||||
);
|
||||
|
||||
if (session) {
|
||||
const user = await account.get();
|
||||
if (user) {
|
||||
localStorage.setItem("isLoggedIn", "true");
|
||||
setIsAuthenticated(true);
|
||||
router.push("/dashboard");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
let errorMessage = 'Login failed. Please try again.';
|
||||
if (error.type === 'user_invalid_credentials') {
|
||||
errorMessage = 'Invalid email or password';
|
||||
} else if (error.type === 'general_argument_invalid') {
|
||||
errorMessage = 'Invalid email format';
|
||||
}
|
||||
setErrors({ ...errors, general: errorMessage });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignup = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateSignupForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setErrors({ ...errors, general: "" });
|
||||
|
||||
try {
|
||||
await account.create(
|
||||
ID.unique(),
|
||||
signupData.email,
|
||||
signupData.password,
|
||||
`${signupData.fname} ${signupData.lname}`
|
||||
);
|
||||
await account.createEmailPasswordSession(signupData.email, signupData.password);
|
||||
const user = await account.get();
|
||||
if (user) {
|
||||
localStorage.setItem("isLoggedIn", "true");
|
||||
setIsAuthenticated(true);
|
||||
router.push("/dashboard");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Signup error:", error);
|
||||
setErrors({
|
||||
...errors,
|
||||
general: error.message || "Signup failed. Please try again.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
{/* Spinner */}
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100 mx-auto"></div>
|
||||
{/* Loading Text */}
|
||||
<p className="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100 ">
|
||||
<p className="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
@ -34,5 +154,231 @@ export default function Home() {
|
||||
);
|
||||
}
|
||||
|
||||
return null; // No need to render anything here
|
||||
if (isAuthenticated) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen ${darkMode ? "dark bg-gray-900" : "bg-white"}`}>
|
||||
<div className="flex flex-col items-center justify-center p-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-800 dark:text-white/90">
|
||||
{isLoginForm ? "Sign In" : "Sign Up"}
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{isLoginForm
|
||||
? "Enter your email and password to sign In!"
|
||||
: "Enter your deatils to create an account!"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{errors.general && (
|
||||
<div className="mb-4 p-3 text-sm text-red-600 bg-red-50 rounded-lg dark:bg-red-900/20 dark:text-red-300">
|
||||
{errors.general}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoginForm ? (
|
||||
// Login Form
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={loginData.email}
|
||||
onChange={handleLoginChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password*
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
value={loginData.password}
|
||||
onChange={handleLoginChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{showPassword ? "Hide" : "Show"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rememberMe"
|
||||
checked={loginData.rememberMe}
|
||||
onChange={handleLoginChange}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
||||
/>
|
||||
<span>Remember me</span>
|
||||
</label>
|
||||
|
||||
<a href="#" className="text-sm text-blue-600 hover:underline dark:text-blue-400">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Button1
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Signing in..." : "Sign in"}
|
||||
</Button1>
|
||||
</form>
|
||||
) : (
|
||||
// Sign Up Form
|
||||
<form onSubmit={handleSignup} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
First Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="fname"
|
||||
value={signupData.fname}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="John"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Last Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lname"
|
||||
value={signupData.lname}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Email*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={signupData.email}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password*
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
value={signupData.password}
|
||||
onChange={handleSignupChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{showPassword ? "Hide" : "Show"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-start space-x-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="agreeTerms"
|
||||
checked={signupData.agreeTerms}
|
||||
onChange={handleSignupChange}
|
||||
className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
||||
/>
|
||||
<span>
|
||||
By creating an account means you agree to <a href="#" className="text-blue-600 hover:underline dark:text-blue-400">Terms</a>and<a href="#" className="text-blue-600 hover:underline dark:text-blue-400">Conditions</a> and our <a href="#" className="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</a>
|
||||
</span>
|
||||
</label>
|
||||
{errors.agreeTerms && (
|
||||
<p className="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{errors.agreeTerms}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button1
|
||||
type="submit"
|
||||
className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Creating account..." : "Sign up"}
|
||||
</Button1>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{isLoginForm ? "Don't have an account?" : "Already have an account?"}
|
||||
<button
|
||||
onClick={() => setIsLoginForm(!isLoginForm)}
|
||||
className="ml-1 text-blue-600 hover:underline dark:text-blue-400 font-medium"
|
||||
>
|
||||
{isLoginForm ? "Sign up" : "Sign in"}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dark mode toggle */}
|
||||
<button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className="fixed bottom-6 right-6 p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
||||
>
|
||||
{darkMode ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Head from 'next/head';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Preloader from "../../components/partials/preloaders";
|
||||
// import Sidebar from '../partials/sidebar';
|
||||
import Overlay from "../../components/partials/overlay";
|
||||
import Header from "../../components/partials/header";
|
||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
||||
|
||||
// Dynamically import the chart component with SSR disabled
|
||||
const ChartOne = dynamic(
|
||||
() => import("../../components/charts/chart-01"),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function BarChartPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(true);
|
||||
|
||||
// Initialize dark mode from localStorage
|
||||
useEffect(() => {
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
if (savedDarkMode !== null) {
|
||||
setDarkMode(savedDarkMode);
|
||||
}
|
||||
setLoaded(true); // Simulate loading completion
|
||||
}, []);
|
||||
|
||||
// Save dark mode preference when it changes
|
||||
useEffect(() => {
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
return (
|
||||
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
{/* Preloader */}
|
||||
{!loaded && <Preloader />}
|
||||
|
||||
{/* Sidebar */}
|
||||
{/* <Sidebar /> */}
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
||||
{/* Small Device Overlay */}
|
||||
<Overlay />
|
||||
|
||||
{/* Header */}
|
||||
<div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
|
||||
<Header />
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<div className="p-4 mx-auto max-w-screen-2xl md:p-6">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumb pageName="Bar Chart" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Bar Chart 1
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
||||
{/* Chart One Component */}
|
||||
<ChartOne />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,893 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from 'react';
|
||||
|
||||
const FormElementPage = () => {
|
||||
const [checkboxStates, setCheckboxStates] = useState({
|
||||
default: false,
|
||||
checked: true,
|
||||
disabled: true
|
||||
});
|
||||
|
||||
const [radioStates, setRadioStates] = useState({
|
||||
default: false,
|
||||
secondary: true,
|
||||
disabled: false
|
||||
});
|
||||
|
||||
const [toggleStates, setToggleStates] = useState({
|
||||
default: false,
|
||||
checked: true,
|
||||
disabled: false,
|
||||
defaultDark: false,
|
||||
checkedDark: true,
|
||||
disabledDark: false
|
||||
});
|
||||
|
||||
const [selectedCountry, setSelectedCountry] = useState('US');
|
||||
const [phoneNumber, setPhoneNumber] = useState('');
|
||||
|
||||
const countryCodes = {
|
||||
'US': '+1',
|
||||
'GB': '+44',
|
||||
'CA': '+1',
|
||||
'AU': '+61'
|
||||
};
|
||||
|
||||
const handleCountryChange = (e) => {
|
||||
const country = e.target.value;
|
||||
setSelectedCountry(country);
|
||||
setPhoneNumber(countryCodes[country]);
|
||||
};
|
||||
|
||||
const copyToClipboard = () => {
|
||||
const input = document.getElementById('website-input');
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
const copyText = document.getElementById('copy-text');
|
||||
copyText.textContent = 'Copied!';
|
||||
setTimeout(() => {
|
||||
copyText.textContent = 'Copy';
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div className="space-y-6">
|
||||
{/* Default Inputs */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Default Inputs
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
{/* Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Input
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input with Placeholder */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Input with Placeholder
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="info@gmail.com"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Select Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Select Input
|
||||
</label>
|
||||
<div className="relative z-20 bg-transparent">
|
||||
<select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Select Option
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Marketing
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Template
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Development
|
||||
</option>
|
||||
</select>
|
||||
<span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Password Input
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer">
|
||||
<svg className="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date Picker Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Date Picker Input
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="date"
|
||||
placeholder="Select date"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Select Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Time Select Input
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
placeholder="12:00 AM"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input with Payment */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Input with Payment
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Card number"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="absolute top-1/2 left-0 flex h-11 w-[46px] -translate-y-1/2 items-center justify-center border-r border-gray-200 dark:border-gray-800">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6.25" cy="10" r="5.625" fill="#E80B26" />
|
||||
<circle cx="13.75" cy="10" r="5.625" fill="#F59D31" />
|
||||
<path d="M10 14.1924C11.1508 13.1625 11.875 11.6657 11.875 9.99979C11.875 8.33383 11.1508 6.8371 10 5.80713C8.84918 6.8371 8.125 8.33383 8.125 9.99979C8.125 11.6657 8.84918 13.1625 10 14.1924Z" fill="#FC6020" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select Inputs */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Select Inputs
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
{/* Select Input */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Select Input
|
||||
</label>
|
||||
<div className="relative z-20 bg-transparent">
|
||||
<select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Select Option
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Marketing
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Template
|
||||
</option>
|
||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
Development
|
||||
</option>
|
||||
</select>
|
||||
<span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-700 dark:text-gray-400">
|
||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Multiple Select Options */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Multiple Select Options
|
||||
</label>
|
||||
<div>
|
||||
<select className="hidden" id="select">
|
||||
<option value="1">Option 2</option>
|
||||
<option value="2">Option 3</option>
|
||||
<option value="3">Option 4</option>
|
||||
<option value="4">Option 5</option>
|
||||
</select>
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
<input name="values" type="hidden" />
|
||||
<div className="relative z-20 inline-block w-full">
|
||||
<div className="relative flex flex-col items-center">
|
||||
<div className="w-full">
|
||||
<div className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pr-3 pl-3 outline-hidden transition dark:border-gray-700 dark:bg-gray-900">
|
||||
<div className="flex flex-auto flex-wrap gap-2">
|
||||
{/* Selected options would be rendered here */}
|
||||
</div>
|
||||
<div className="flex w-7 items-center py-1 pr-1 pl-1">
|
||||
<button type="button" className="h-5 w-5 cursor-pointer text-gray-700 outline-hidden focus:outline-hidden dark:text-gray-400">
|
||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full px-4">
|
||||
<div className="max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900">
|
||||
<div className="flex w-full flex-col">
|
||||
{/* Options would be rendered here */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Textarea input field */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Textarea input field
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
placeholder="Enter a description..."
|
||||
type="text"
|
||||
rows="6"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* Disabled Description */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
placeholder="Enter a description..."
|
||||
type="text"
|
||||
rows="6"
|
||||
disabled
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-0 focus:outline-hidden disabled:border-gray-100 disabled:bg-gray-50 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:disabled:border-gray-800 dark:disabled:bg-white/[0.03] dark:disabled:placeholder:text-white/15"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* Error Description */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
placeholder="Enter a description..."
|
||||
type="text"
|
||||
rows="6"
|
||||
className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
></textarea>
|
||||
<p className="text-[11px] text-red-500">
|
||||
Please enter a message in the textarea.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input States */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Input States
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Validation styles for error, success and disabled states on form controls.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
{/* Error State */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value="demoemail"
|
||||
className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="absolute top-1/2 right-3.5 -translate-y-1/2">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M2.58325 7.99967C2.58325 5.00813 5.00838 2.58301 7.99992 2.58301C10.9915 2.58301 13.4166 5.00813 13.4166 7.99967C13.4166 10.9912 10.9915 13.4163 7.99992 13.4163C5.00838 13.4163 2.58325 10.9912 2.58325 7.99967ZM7.99992 1.08301C4.17995 1.08301 1.08325 4.17971 1.08325 7.99967C1.08325 11.8196 4.17995 14.9163 7.99992 14.9163C11.8199 14.9163 14.9166 11.8196 14.9166 7.99967C14.9166 4.17971 11.8199 1.08301 7.99992 1.08301ZM7.09932 5.01639C7.09932 5.51345 7.50227 5.91639 7.99932 5.91639H7.99999C8.49705 5.91639 8.89999 5.51345 8.89999 5.01639C8.89999 4.51933 8.49705 4.11639 7.99999 4.11639H7.99932C7.50227 4.11639 7.09932 4.51933 7.09932 5.01639ZM7.99998 11.8306C7.58576 11.8306 7.24998 11.4948 7.24998 11.0806V7.29627C7.24998 6.88206 7.58576 6.54627 7.99998 6.54627C8.41419 6.54627 8.74998 6.88206 8.74998 7.29627V11.0806C8.74998 11.4948 8.41419 11.8306 7.99998 11.8306Z" fill="#F04438" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-red-500 mt-1.5">
|
||||
This is an error message.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Success State */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value="demoemail@gmail.com"
|
||||
className="dark:bg-dark-900 border-success-300 shadow-theme-xs focus:border-success-300 focus:ring-success-500/10 dark:border-success-700 dark:focus:border-success-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
<span className="absolute top-1/2 right-3.5 -translate-y-1/2">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M2.61792 8.00034C2.61792 5.02784 5.0276 2.61816 8.00009 2.61816C10.9726 2.61816 13.3823 5.02784 13.3823 8.00034C13.3823 10.9728 10.9726 13.3825 8.00009 13.3825C5.0276 13.3825 2.61792 10.9728 2.61792 8.00034ZM8.00009 1.11816C4.19917 1.11816 1.11792 4.19942 1.11792 8.00034C1.11792 11.8013 4.19917 14.8825 8.00009 14.8825C11.801 14.8825 14.8823 11.8013 14.8823 8.00034C14.8823 4.19942 11.801 1.11816 8.00009 1.11816ZM10.5192 7.266C10.8121 6.97311 10.8121 6.49823 10.5192 6.20534C10.2264 5.91245 9.75148 5.91245 9.45858 6.20534L7.45958 8.20434L6.54162 7.28638C6.24873 6.99349 5.77385 6.99349 5.48096 7.28638C5.18807 7.57927 5.18807 8.05415 5.48096 8.34704L6.92925 9.79533C7.0699 9.93599 7.26067 10.015 7.45958 10.015C7.6585 10.015 7.84926 9.93599 7.98991 9.79533L10.5192 7.266Z" fill="#12B76A" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-green-700 mt-1.5">
|
||||
This is an success message.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Disabled State */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="info@gmail.com"
|
||||
disabled
|
||||
className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-hidden disabled:border-gray-100 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-400 dark:disabled:border-gray-800 dark:disabled:placeholder:text-white/15"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Input Group */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Input Group
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
{/* Email with icon */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute top-1/2 left-0 -translate-y-1/2 border-r border-gray-200 px-3.5 py-3 text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.04175 7.06206V14.375C3.04175 14.6511 3.26561 14.875 3.54175 14.875H16.4584C16.7346 14.875 16.9584 14.6511 16.9584 14.375V7.06245L11.1443 11.1168C10.457 11.5961 9.54373 11.5961 8.85638 11.1168L3.04175 7.06206ZM16.9584 5.19262C16.9584 5.19341 16.9584 5.1942 16.9584 5.19498V5.20026C16.9572 5.22216 16.946 5.24239 16.9279 5.25501L10.2864 9.88638C10.1145 10.0062 9.8862 10.0062 9.71437 9.88638L3.07255 5.25485C3.05342 5.24151 3.04202 5.21967 3.04202 5.19636C3.042 5.15695 3.07394 5.125 3.11335 5.125H16.8871C16.9253 5.125 16.9564 5.15494 16.9584 5.19262ZM18.4584 5.21428V14.375C18.4584 15.4796 17.563 16.375 16.4584 16.375H3.54175C2.43718 16.375 1.54175 15.4796 1.54175 14.375V5.19498C1.54175 5.1852 1.54194 5.17546 1.54231 5.16577C1.55858 4.31209 2.25571 3.625 3.11335 3.625H16.8871C17.7549 3.625 18.4584 4.32843 18.4585 5.19622C18.4585 5.20225 18.4585 5.20826 18.4584 5.21428Z" fill="#667085" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="info@gmail.com"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone with country code */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Phone
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute">
|
||||
<select
|
||||
value={selectedCountry}
|
||||
onChange={handleCountryChange}
|
||||
className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-l-lg border-0 border-r border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
||||
>
|
||||
<option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
US
|
||||
</option>
|
||||
<option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
GB
|
||||
</option>
|
||||
<option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
CA
|
||||
</option>
|
||||
<option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
AU
|
||||
</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
|
||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
placeholder="+1 (555) 000-0000"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
type="tel"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-4 pl-[84px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone with right country code */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Phone
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute right-0">
|
||||
<select
|
||||
value={selectedCountry}
|
||||
onChange={handleCountryChange}
|
||||
className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-r-lg border-0 border-l border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
||||
>
|
||||
<option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
US
|
||||
</option>
|
||||
<option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
GB
|
||||
</option>
|
||||
<option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
CA
|
||||
</option>
|
||||
<option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
||||
AU
|
||||
</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
|
||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
placeholder="+1 (555) 000-0000"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
type="tel"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[84px] pl-3 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* URL with prefix */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
URL
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute top-1/2 left-0 inline-flex h-11 -translate-y-1/2 items-center justify-center border-r border-gray-200 py-3 pr-3 pl-3.5 text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
||||
http://
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="www.tailadmin.com"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[90px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Website with copy button */}
|
||||
<div id="copy-input">
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Website
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
id="copy-button"
|
||||
onClick={copyToClipboard}
|
||||
className="absolute top-1/2 right-0 inline-flex -translate-y-1/2 cursor-pointer items-center gap-1 border-l border-gray-200 py-3 pr-3 pl-3.5 text-sm font-medium text-gray-700 dark:border-gray-800 dark:text-gray-400"
|
||||
>
|
||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M6.58822 4.58398C6.58822 4.30784 6.81207 4.08398 7.08822 4.08398H15.4154C15.6915 4.08398 15.9154 4.30784 15.9154 4.58398L15.9154 12.9128C15.9154 13.189 15.6916 13.4128 15.4154 13.4128H7.08821C6.81207 13.4128 6.58822 13.189 6.58822 12.9128V4.58398ZM7.08822 2.58398C5.98365 2.58398 5.08822 3.47942 5.08822 4.58398V5.09416H4.58496C3.48039 5.09416 2.58496 5.98959 2.58496 7.09416V15.4161C2.58496 16.5207 3.48039 17.4161 4.58496 17.4161H12.9069C14.0115 17.4161 14.9069 16.5207 14.9069 15.4161L14.9069 14.9128H15.4154C16.52 14.9128 17.4154 14.0174 17.4154 12.9128L17.4154 4.58398C17.4154 3.47941 16.52 2.58398 15.4154 2.58398H7.08822ZM13.4069 14.9128H7.08821C5.98364 14.9128 5.08822 14.0174 5.08822 12.9128V6.59416H4.58496C4.30882 6.59416 4.08496 6.81801 4.08496 7.09416V15.4161C4.08496 15.6922 4.30882 15.9161 4.58496 15.9161H12.9069C13.183 15.9161 13.4069 15.6922 13.4069 15.4161L13.4069 14.9128Z" fill="" />
|
||||
</svg>
|
||||
<div id="copy-text">Copy</div>
|
||||
</button>
|
||||
<input
|
||||
value="www.tailadmin.com"
|
||||
type="url"
|
||||
id="website-input"
|
||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[90px] pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Input */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
File Input
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
||||
Upload file
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
className="focus:border-ring-brand-300 shadow-theme-xs focus:file:ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pr-3 file:pl-3.5 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkboxes */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Checkboxes
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
<div className="flex flex-wrap items-center gap-8">
|
||||
{/* Default Checkbox */}
|
||||
<div>
|
||||
<label htmlFor="checkboxLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkboxLabelOne"
|
||||
className="sr-only"
|
||||
checked={checkboxStates.default}
|
||||
onChange={() => setCheckboxStates({...checkboxStates, default: !checkboxStates.default})}
|
||||
/>
|
||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
||||
<span className={checkboxStates.default ? '' : 'opacity-0'}>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Checked Checkbox */}
|
||||
<div>
|
||||
<label htmlFor="checkboxLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkboxLabelTwo"
|
||||
className="sr-only"
|
||||
checked={checkboxStates.checked}
|
||||
onChange={() => setCheckboxStates({...checkboxStates, checked: !checkboxStates.checked})}
|
||||
/>
|
||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.checked ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
||||
<span className={checkboxStates.checked ? '' : 'opacity-0'}>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Disabled Checkbox */}
|
||||
<div>
|
||||
<label htmlFor="checkboxLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkboxLabelThree"
|
||||
className="peer sr-only"
|
||||
checked={checkboxStates.disabled}
|
||||
onChange={() => setCheckboxStates({...checkboxStates, disabled: !checkboxStates.disabled})}
|
||||
disabled
|
||||
/>
|
||||
<div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.disabled ? 'bg-transparent border-gray-200 dark:border-gray-800' : 'border-brand-500 bg-brand-500'}`}>
|
||||
<span className={checkboxStates.disabled ? '' : 'opacity-0'}>
|
||||
<svg className="stroke-gray-200 dark:stroke-gray-800" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Radio Buttons */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Radio Buttons
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
<div className="flex flex-wrap items-center gap-8">
|
||||
{/* Default Radio */}
|
||||
<div>
|
||||
<label htmlFor="radioLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
id="radioLabelOne"
|
||||
name="radioGroup"
|
||||
className="sr-only"
|
||||
checked={radioStates.default}
|
||||
onChange={() => setRadioStates({...radioStates, default: !radioStates.default})}
|
||||
/>
|
||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
||||
<span className={`h-2 w-2 rounded-full ${radioStates.default ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
||||
</div>
|
||||
</div>
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Secondary Radio */}
|
||||
<div>
|
||||
<label htmlFor="radioLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
id="radioLabelTwo"
|
||||
name="radioGroup"
|
||||
className="sr-only"
|
||||
checked={radioStates.secondary}
|
||||
onChange={() => setRadioStates({...radioStates, secondary: !radioStates.secondary})}
|
||||
/>
|
||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.secondary ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
||||
<span className={`h-2 w-2 rounded-full ${radioStates.secondary ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
||||
</div>
|
||||
</div>
|
||||
Secondary
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Disabled Radio */}
|
||||
<div>
|
||||
<label htmlFor="radioLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="radio"
|
||||
id="radioLabelThree"
|
||||
name="radioGroup"
|
||||
className="peer sr-only"
|
||||
checked={radioStates.disabled}
|
||||
onChange={() => setRadioStates({...radioStates, disabled: !radioStates.disabled})}
|
||||
disabled
|
||||
/>
|
||||
<div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.disabled ? 'bg-transparent border-gray-300 dark:border-gray-700' : 'border-brand-500 bg-brand-500'}`}>
|
||||
<span className={`h-2 w-2 rounded-full ${radioStates.disabled ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
||||
</div>
|
||||
</div>
|
||||
Disabled Secondary
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle switch input */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Toggle switch input
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
<div className="mb-6 flex flex-wrap items-center gap-6 sm:gap-8">
|
||||
{/* Default Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle1" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle1"
|
||||
className="sr-only"
|
||||
checked={toggleStates.default}
|
||||
onChange={() => setToggleStates({...toggleStates, default: !toggleStates.default})}
|
||||
/>
|
||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.default ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.default ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Checked Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle2" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle2"
|
||||
className="sr-only"
|
||||
checked={toggleStates.checked}
|
||||
onChange={() => setToggleStates({...toggleStates, checked: !toggleStates.checked})}
|
||||
/>
|
||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.checked ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checked ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Disabled Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle3" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle3"
|
||||
className="sr-only"
|
||||
checked={toggleStates.disabled}
|
||||
onChange={() => setToggleStates({...toggleStates, disabled: !toggleStates.disabled})}
|
||||
disabled
|
||||
/>
|
||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.disabled ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-100 dark:bg-gray-800'}`}></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabled ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 sm:gap-8">
|
||||
{/* Default Dark Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle11" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle11"
|
||||
className="sr-only"
|
||||
checked={toggleStates.defaultDark}
|
||||
onChange={() => setToggleStates({...toggleStates, defaultDark: !toggleStates.defaultDark})}
|
||||
/>
|
||||
<div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.defaultDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Checked Dark Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle22" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle22"
|
||||
className="sr-only"
|
||||
checked={toggleStates.checkedDark}
|
||||
onChange={() => setToggleStates({...toggleStates, checkedDark: !toggleStates.checkedDark})}
|
||||
/>
|
||||
<div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checkedDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Disabled Dark Toggle */}
|
||||
<div>
|
||||
<label htmlFor="toggle33" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle33"
|
||||
className="sr-only"
|
||||
checked={toggleStates.disabledDark}
|
||||
onChange={() => setToggleStates({...toggleStates, disabledDark: !toggleStates.disabledDark})}
|
||||
disabled
|
||||
/>
|
||||
<div className="block h-6 w-11 rounded-full bg-gray-100 dark:bg-gray-800"></div>
|
||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabledDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
||||
</div>
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dropzone */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Dropzone
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
||||
<div className="hover:border-brand-500! dark:hover:border-brand-500! rounded-xl border border-dashed! border-gray-300! bg-gray-50 p-7 lg:p-10 dark:border-gray-700! dark:bg-gray-900">
|
||||
<div className="dz-message m-0!">
|
||||
<div className="mb-[22px] flex justify-center">
|
||||
<div className="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
||||
<svg className="fill-current" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z" fill="" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="text-theme-xl mb-3 font-semibold text-gray-800 dark:text-white/90">
|
||||
Drop File Here
|
||||
</h4>
|
||||
<span className="mx-auto mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400">
|
||||
Drag and drop your PNG, JPG, WebP, SVG images here or browse
|
||||
</span>
|
||||
|
||||
<span className="text-theme-sm text-brand-500 font-medium underline">
|
||||
Browse File
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormElementPage;
|
||||
@ -1,90 +0,0 @@
|
||||
// app/page.js or app/dashboard/page.js (depending on your structure)
|
||||
'use client'; // This is needed because we'll use client-side state
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
// Dynamically import the chart component to avoid SSR issues
|
||||
const LineChart = dynamic(() => import("../../components/charts/LineChart"), {
|
||||
ssr: false
|
||||
});
|
||||
|
||||
export default function LineChartPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Load dark mode preference from localStorage
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
if (savedDarkMode !== null) {
|
||||
setDarkMode(savedDarkMode);
|
||||
}
|
||||
setIsLoaded(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Save dark mode preference to localStorage when it changes
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
if (!isLoaded) {
|
||||
// Preloader while checking dark mode preference
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
{/* Main Content Area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<div className="p-4 mx-auto max-w-screen-2xl md:p-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-6">
|
||||
<nav className="flex" aria-label="Breadcrumb">
|
||||
<ol className="inline-flex items-center space-x-1 md:space-x-2">
|
||||
<li className="inline-flex items-center">
|
||||
<a href="#" className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li aria-current="page">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
<span className="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Line Chart</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Chart Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Line Chart 1
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
||||
{/* Line Chart Component */}
|
||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
||||
<div className="min-w-[1000px]">
|
||||
<LineChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -82,7 +82,7 @@ const createEntries = async () => {
|
||||
}
|
||||
|
||||
setBookings(updatedBookings);
|
||||
alert(`${validBookings.length} tokens created successfully!`);
|
||||
// alert(`${validBookings.length} tokens created successfully!`);
|
||||
} catch (error) {
|
||||
console.error("Creation error:", error);
|
||||
setError(error.message);
|
||||
|
||||
@ -58,13 +58,13 @@ export default function MultiBooking() {
|
||||
<div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
|
||||
{/* Sticky Header */}
|
||||
<header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Header />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<main className="flex-1 overflow-y-auto scrollbar-hide">
|
||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-100 text-red-700 rounded-md">
|
||||
|
||||
@ -17,16 +17,24 @@ export default function ResetPasswordPage() {
|
||||
const { darkMode, toggleDarkMode } = useTheme();
|
||||
const [email, setEmail] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState({ text: "", type: "" }); // type can be "success" or "error"
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage({ text: "", type: "" });
|
||||
try {
|
||||
await account.createRecovery(email, "http://localhost:3000/reset-password");
|
||||
alert("Password reset link sent to your email!");
|
||||
setMessage({
|
||||
text: "Password reset link sent to your email!",
|
||||
type: "success"
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert(`Failed to send reset link: ${error.message}`);
|
||||
setMessage({
|
||||
text: `Failed to send reset link: ${error.message}`,
|
||||
type: "error"
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -53,6 +61,15 @@ export default function ResetPasswordPage() {
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Enter your email address linked to your account, and we'll send you a link to reset your password.
|
||||
</p>
|
||||
{message.text && (
|
||||
<div className={`mt-4 p-3 rounded-md ${
|
||||
message.type === "success"
|
||||
? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200"
|
||||
: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200"
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
@ -85,4 +102,4 @@ export default function ResetPasswordPage() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,7 @@ import Button1 from "../../ui/buttons/button1";
|
||||
import { account } from "../../lib/appwrite";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import GridShape from "../../components/common/GridShape";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
|
||||
export default function SignInPage() {
|
||||
@ -88,7 +87,7 @@ export default function SignInPage() {
|
||||
{/* Left Side - Form */}
|
||||
<div className="w-full flex flex-col justify-center p-6 sm:p-12 lg:p-16">
|
||||
<div className="w-full max-w-md mx-auto">
|
||||
<Link
|
||||
{/* <Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-10"
|
||||
>
|
||||
@ -109,7 +108,7 @@ export default function SignInPage() {
|
||||
/>
|
||||
</svg>
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</Link> */}
|
||||
|
||||
<div className="mb-8">
|
||||
<h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white/90 sm:text-3xl">
|
||||
|
||||
@ -86,7 +86,7 @@ export default function SignUpPage() {
|
||||
{/* Form */}
|
||||
<div className="flex flex-col flex-1 w-full">
|
||||
<div className="w-full max-w-md pt-5 mx-auto sm:py-10">
|
||||
<Link
|
||||
{/* <Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
>
|
||||
@ -107,7 +107,7 @@ export default function SignUpPage() {
|
||||
/>
|
||||
</svg>
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
|
||||
<div className="mb-5 sm:mb-8">
|
||||
|
||||
@ -2,26 +2,12 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Head from 'next/head';
|
||||
import Preloader from '../../components/partials/preloaders';
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
export default function SingleBooking() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
if (savedDarkMode !== null) {
|
||||
setDarkMode(savedDarkMode);
|
||||
}
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
@ -31,31 +17,47 @@ export default function SingleBooking() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current date in YYYY-MM-DD format
|
||||
const today = new Date();
|
||||
const appointmentDate = today.toISOString().split('T')[0];
|
||||
|
||||
// Navigate to confirmation page with name and current date as query params
|
||||
router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
|
||||
};
|
||||
|
||||
if (!loaded) {
|
||||
return <Preloader />;
|
||||
// Handle theme loading state (same as dashboard)
|
||||
if (darkMode === undefined) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
|
||||
|
||||
<div className={`min-h-screen transition-colors duration-300 ${
|
||||
darkMode ? 'dark bg-gray-900' : 'bg-white'
|
||||
}`}>
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
||||
<main>
|
||||
<div className="p-4 mx-auto max-w-4xl md:p-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white">Book Appointment</h2>
|
||||
<p className='mb-6'>Date: {new Date().toLocaleDateString('en-GB')}</p>
|
||||
<h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
Book Appointment
|
||||
</h2>
|
||||
<p className={`mb-6 dark:text-gray-300`}>
|
||||
Date: {new Date().toLocaleDateString('en-GB')}
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
@ -63,20 +65,20 @@ export default function SingleBooking() {
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="h-11 w-full rounded-lg border border-gray-300 bg-white dark:bg-gray-900 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="h-11 w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded-lg bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-800 transition duration-200"
|
||||
className="w-full rounded-lg bg-blue-600 dark:bg-blue-700 px-5 py-3.5 text-sm font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-800 transition duration-200"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-300">
|
||||
<div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
Note: Token booking is available for today's date only.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Preloader from "../../components/partials/preloaders";
|
||||
// import Sidebar from './partials/sidebar';
|
||||
import Overlay from "../../components/partials/overlay";
|
||||
import Header from "../../components/partials/header";
|
||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
||||
import AlertSuccess from '../../components/partials/alert/alert-success';
|
||||
import AlertWarning from "../../components/partials/alert/alert-warning";
|
||||
import AlertError from '../../components/partials/alert/alert-error';
|
||||
import AlertInfo from '../../components/partials/alert/alert-info';
|
||||
|
||||
export default function AlertsPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize dark mode from localStorage
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
|
||||
setDarkMode(savedDarkMode);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Save dark mode preference to localStorage
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
if (!loaded) {
|
||||
return <Preloader />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${darkMode ? 'dark bg-[#101828]' : ''}`}>
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* <Sidebar /> */}
|
||||
|
||||
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
|
||||
<Overlay />
|
||||
<div className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
|
||||
<Header />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
||||
<Breadcrumb pageName="Alerts" />
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
|
||||
Success Alert
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
|
||||
<div className="space-y-6">
|
||||
<AlertSuccess />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
|
||||
Warning Alert
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
|
||||
<div className="space-y-6">
|
||||
<AlertWarning />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
|
||||
Error Alert
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
|
||||
<div className="space-y-6">
|
||||
<AlertError />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
|
||||
Info Alert
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
|
||||
<div className="space-y-6">
|
||||
<AlertInfo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
@ -1,137 +0,0 @@
|
||||
// app/avatars/page.tsx
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Preloader from "../../components/partials/preloaders";
|
||||
// import Sidebar from '@/components/partials/Sidebar';
|
||||
import Overlay from "../../components/partials/overlay";
|
||||
import Header from "../../components/partials/header";
|
||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
||||
import Avatar01 from "../../components/partials/avatar/avatar01";
|
||||
import Avatar02 from"../../components/partials/avatar/avatar02";
|
||||
import Avatar03 from "../../components/partials/avatar/avatar03";
|
||||
import Avatar04 from "../../components/partials/avatar/avatar04";
|
||||
|
||||
export default function AvatarsPage() {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [stickyMenu, setStickyMenu] = useState(false);
|
||||
const [sidebarToggle, setSidebarToggle] = useState(false);
|
||||
const [scrollTop, setScrollTop] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
|
||||
setDarkMode(savedDarkMode);
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setLoaded(true);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
const pageName = 'Avatars';
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
{/* Preloader */}
|
||||
{!loaded && <Preloader />}
|
||||
|
||||
{/* Page Wrapper */}
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
{/* <Sidebar
|
||||
activePage="avatars"
|
||||
darkMode={darkMode}
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/> */}
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
||||
{/* Small Device Overlay */}
|
||||
<Overlay
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<Header
|
||||
darkMode={darkMode}
|
||||
setDarkMode={setDarkMode}
|
||||
stickyMenu={stickyMenu}
|
||||
setStickyMenu={setStickyMenu}
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumb pageName={pageName} />
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
{/* Default Avatar */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Default Avatar
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
|
||||
<Avatar01 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatar with online indicator */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Avatar with online indicator
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
|
||||
<Avatar02 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatar with Offline indicator */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Avatar with Offline indicator
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
|
||||
<Avatar03 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatar with busy indicator */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Avatar with busy indicator
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
|
||||
<Avatar04 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,161 +0,0 @@
|
||||
// app/badge/page.tsx
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Preloader from "../../components/partials/preloaders";
|
||||
// import Sidebar from '@/components/partials/Sidebar';
|
||||
import Overlay from "../../components/partials/overlay";
|
||||
import Header from "../../components/partials/header";
|
||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
||||
import Badge01 from "../../components/partials/badge/Badge01";
|
||||
import Badge02 from "../../components/partials/badge/Badge02";
|
||||
import Badge03 from "../../components/partials/badge/Badge03";
|
||||
import Badge04 from "../../components/partials/badge/Badge04";
|
||||
import Badge05 from "../../components/partials/badge/Badge05";
|
||||
import Badge06 from "../../components/partials/badge/Badge06";
|
||||
|
||||
export default function BadgePage() {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [stickyMenu, setStickyMenu] = useState(false);
|
||||
const [sidebarToggle, setSidebarToggle] = useState(false);
|
||||
const [scrollTop, setScrollTop] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Load dark mode preference from localStorage
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
|
||||
setDarkMode(savedDarkMode);
|
||||
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
setLoaded(true);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Save dark mode preference to localStorage
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
const pageName = 'Badge';
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
{/* Preloader */}
|
||||
{!loaded && <Preloader />}
|
||||
|
||||
{/* Page Wrapper */}
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
{/* <Sidebar
|
||||
activePage="badge"
|
||||
darkMode={darkMode}
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/> */}
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
|
||||
{/* Small Device Overlay */}
|
||||
<Overlay
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
|
||||
<Header />
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumb pageName={pageName} />
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
{/* With Light Background */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
With Light Background
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge01 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* With Solid Background */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
With Solid Background
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge02 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Light Background with Left Icon */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Light Background with Left Icon
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge03 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Solid Background with Left Icon */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Solid Background with Left Icon
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge04 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Light Background with Right Icon */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Light Background with Right Icon
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge05 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Solid Background with Right Icon */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Solid Background with Right Icon
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
||||
<Badge06 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
// Dynamically import components with no SSR
|
||||
const Preloader = dynamic(() => import("../../components/partials/preloaders"), { ssr: false });
|
||||
const Sidebar = dynamic(() => import("../../components/Sidebar"), { ssr: false });
|
||||
const Overlay = dynamic(() => import("../../components/partials/overlay"), { ssr: false });
|
||||
const Header = dynamic(() => import("../../components/partials/header"), { ssr: false });
|
||||
const Breadcrumb = dynamic(() => import("../../components/partials/breadcrumb"), { ssr: false });
|
||||
const TableSix = dynamic(() => import("../../components/partials/table/TableSix"), { ssr: false });
|
||||
|
||||
export default function BasicTables() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize dark mode from localStorage
|
||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
if (savedDarkMode !== null) {
|
||||
setDarkMode(savedDarkMode);
|
||||
}
|
||||
|
||||
// Simulate loading completion
|
||||
const timer = setTimeout(() => setLoaded(true), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Save dark mode preference to localStorage
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
return (
|
||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
|
||||
{/* Preloader */}
|
||||
{!loaded && <Preloader />}
|
||||
|
||||
{/* Page Wrapper */}
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
{/* <Sidebar activePage="basicTables" darkMode={darkMode} setDarkMode={setDarkMode} /> */}
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
|
||||
{/* Small Device Overlay */}
|
||||
<Overlay />
|
||||
|
||||
{/* Header */}
|
||||
<div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
|
||||
<Header />
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<main>
|
||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
||||
{/* Breadcrumb */}
|
||||
<div>
|
||||
<Breadcrumb pageName="Basic Tables" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Basic Table 1
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-100 p-5 dark:border-gray-800 sm:p-6">
|
||||
{/* Table Six */}
|
||||
<TableSix />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,40 @@
|
||||
"use client";
|
||||
import TokenTable from "../../components/TokenTable";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
export default function DoneTokensPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-4">Done Tokens</h1>
|
||||
<TokenTable statusFilter="done" />
|
||||
</div>
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
// Handle theme loading state (consistent with dashboard)
|
||||
if (darkMode === undefined) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode === true ? 'text-gray-800' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen p-6 transition-colors duration-300 ${
|
||||
darkMode ? 'dark bg-gray-900' : 'bg-white'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className={`text-2xl font-bold mb-4 ${
|
||||
darkMode ? 'text-gray-100' : 'text-gray-300'
|
||||
}`}>
|
||||
Done Tokens
|
||||
</h1>
|
||||
<TokenTable statusFilter="done" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import Image01 from "../../components/partials/grid-images/image01";
|
||||
import Image02 from "../../components/partials/grid-images/image02";
|
||||
import Image03 from "../../components/partials/grid-images/image03";
|
||||
|
||||
export default function ImagesPage() {
|
||||
return (
|
||||
<div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
{/* Responsive Image Section */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Responsive image
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
||||
<Image01 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2 Grid Images Section */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Image in 2 Grid
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
||||
<Image02 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3 Grid Images Section */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Image in 3 Grid
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
||||
<Image03 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,10 +1,40 @@
|
||||
"use client";
|
||||
import TokenTable from "../../components/TokenTable";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
export default function MissedTokensPage() {
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
// Handle theme loading state (consistent with dashboard)
|
||||
if (darkMode === undefined) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
|
||||
darkMode === true ? 'border-gray-100' : 'border-gray-900'
|
||||
}`}></div>
|
||||
<p className={`mt-4 text-lg font-semibold ${
|
||||
darkMode === true ? 'text-gray-100' : 'text-gray-900'
|
||||
}`}>
|
||||
Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-4">Missed Tokens</h1>
|
||||
<TokenTable statusFilter="missed" />
|
||||
<div className={`min-h-screen p-6 transition-colors duration-300 ${
|
||||
darkMode ? 'dark bg-gray-900' : 'bg-white'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className={`text-2xl font-bold mb-4 ${
|
||||
darkMode ? 'text-gray-100' : 'text-gray-800'
|
||||
}`}>
|
||||
Missed Tokens
|
||||
</h1>
|
||||
<TokenTable statusFilter="missed" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,112 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Preloader from "../../components/partials/preloaders";
|
||||
// import Sidebar from "../../components/partials/header";
|
||||
import Overlay from "../../components/partials/overlay";
|
||||
// import Header from '../../components/partials/Header';
|
||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
||||
import Video01 from "../../components/partials/video/video-01";
|
||||
import Video02 from "../../components/partials/video/video-02";
|
||||
import Video04 from "../../components/partials/video/video-04";
|
||||
|
||||
export default function VideosPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [sidebarToggle, setSidebarToggle] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedDarkMode = JSON.parse(
|
||||
localStorage.getItem('darkMode') || 'false'
|
||||
);
|
||||
setDarkMode(savedDarkMode);
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
||||
}, [darkMode]);
|
||||
|
||||
if (!loaded) {
|
||||
return <Preloader />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
||||
<Head>
|
||||
<title>Videos | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
||||
/>
|
||||
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
|
||||
</Head>
|
||||
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
<div className="relative flex flex-col flex-1 overflow-hidden">
|
||||
<Overlay
|
||||
sidebarToggle={sidebarToggle}
|
||||
setSidebarToggle={setSidebarToggle}
|
||||
/>
|
||||
|
||||
<main className="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"> <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
|
||||
<Breadcrumb pageName="Videos" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Video Ratio 16:9
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<Video01 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Video Ratio 4:3
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<Video02 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Video Ratio 4:3
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<Video02 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div className="px-6 py-5 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
||||
Video Ratio 1:1
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 sm:p-6">
|
||||
<Video04 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -6,8 +6,6 @@ import { useRouter } from "next/navigation";
|
||||
import { account, ID } from "../lib/appwrite";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Button1 from "../ui/buttons/button1";
|
||||
import GridShape from "../components/common/GridShape";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function SignUpPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
@ -109,7 +107,7 @@ export default function SignUpPage() {
|
||||
{/* Left side - Form */}
|
||||
<div className="lg:w-1/2 w-full flex flex-col items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="w-full max-w-md pt-5 mx-auto sm:py-10">
|
||||
{/* <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
@ -132,7 +130,7 @@ export default function SignUpPage() {
|
||||
</svg>
|
||||
Back to dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="mb-5 sm:mb-8">
|
||||
<h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user