FrontOps/UserDashboard
9
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

UI changes

Browse Source
This commit is contained in:
Syasya 2025-08-20 09:27:24 +08:00
parent a82e62b9b4
commit 9104721b51
5 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/dashboards/SiteCard.tsx
View File

@ -88,17 +88,17 @@ const SiteCard: React.FC<SiteCardProps> = ({ siteId, className = '', fallbackSta
'N/A'; 'N/A';
return ( return (
<div className={`bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}> <div className={`bg-white p-4 rounded-lg shadow-md dark:bg-rtgray-800 dark:text-white-light flex flex-col space-y-2 ${className}`}>
<h3 className="text-xl font-bold text-primary-600 dark:text-primary-400 border-b pb-2 mb-2"> <h3 className="text-xl font-bold text-primary-600 dark:text-primary-400 border-b pb-2 mb-2">
{project?.project_name || siteId} {project?.project_name || siteId}
</h3> </h3>
{loading ? ( {loading ? (
<div className="animate-pulse space-y-2"> <div className="animate-pulse space-y-2">
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-24 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-48 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
<div className="h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-40 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
<div className="h-4 w-36 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-36 bg-rtgray-200 dark:bg-rtgray-700 rounded" />
</div> </div>
) : err ? ( ) : err ? (
<div className="text-red-500 text-sm">Failed to load CRM: {err}</div> <div className="text-red-500 text-sm">Failed to load CRM: {err}</div>

4
components/dropdown.tsx
View File

@ -38,7 +38,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
useImperativeHandle(forwardedRef, () => ({ close: () => setVisible(false) })); useImperativeHandle(forwardedRef, () => ({ close: () => setVisible(false) }));
const defaultButton = ( const defaultButton = (
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700" /> <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-gray-200 dark:bg-rtgray-700" />
); );
return ( return (
@ -59,7 +59,7 @@ const Dropdown = (props: DropdownProps, forwardedRef: any) => {
className="z-50" className="z-50"
> >
{visible && ( {visible && (
<div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-neutral-900 shadow-lg ring-1 ring-black/5'}> <div className={props.panelClassName ?? 'rounded-lg bg-white dark:bg-rtgray-700 shadow-lg ring-1 ring-black/5'}>
{props.children} {props.children}
</div> </div>
)} )}

56
components/layouts/header.tsx
View File

@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link'; import Link from 'next/link';
import { IRootState } from '@/store'; import { IRootState } from '@/store';
import { toggleTheme, toggleSidebar, toggleRTL } from '@/store/themeConfigSlice'; import { toggleTheme, toggleSidebar, toggleRTL } from '@/store/themeConfigSlice';
import Image from 'next/image';
import Dropdown from '@/components/dropdown'; import Dropdown from '@/components/dropdown';
import IconMenu from '@/components/icon/icon-menu'; import IconMenu from '@/components/icon/icon-menu';
import IconSun from '@/components/icon/icon-sun'; import IconSun from '@/components/icon/icon-sun';
@ -82,20 +83,26 @@ useEffect(() => {
<div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-rtgray-900"> <div className="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-rtgray-900">
{/* Logo */} {/* Logo */}
<div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden"> <div className="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
<Link href="/" className="main-logo flex shrink-0 items-center"> <div className="relative h-10 w-32 sm:h-11 sm:w-36 md:h-12 md:w-27 shrink-0 max-h-12">
<img className="inline w-8" src="/assets/images/newfulllogo.png" alt="logo" /> <Image
<span className="hidden text-2xl font-semibold ltr:ml-1.5 dark:text-white-light md:inline"> src="/assets/images/newfulllogo.png"
Rooftop Energy alt="logo"
</span> fill
</Link> className="object-cover"
priority
sizes="(max-width: 640px) 8rem, (max-width: 768px) 9rem, (max-width: 1024px) 10rem, 10rem"
/>
</div>
<button <button
type="button" type="button"
onClick={() => dispatch(toggleSidebar())} onClick={() => dispatch(toggleSidebar())}
className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700" className="collapse-icon flex p-2 rounded-full hover:bg-rtgray-200 dark:text-white dark:hover:bg-rtgray-700"
> >
<IconMenu className="h-6 w-6" /> <IconMenu className="h-6 w-6" />
</button> </button>
</div> </div>
{/* Right-side actions */} {/* Right-side actions */}
<div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] lg:space-x-2"> <div className="flex items-center justify-end space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] lg:space-x-2">
@ -121,17 +128,17 @@ useEffect(() => {
{loadingUser ? ( {loadingUser ? (
<div className="h-9 w-9 rounded-full animate-pulse bg-gray-300 dark:bg-rtgray-800" /> <div className="h-9 w-9 rounded-full animate-pulse bg-gray-300 dark:bg-rtgray-800" />
) : user ? ( ) : user ? (
<Dropdown <Dropdown
placement={isRtl ? 'bottom-start' : 'bottom-end'} placement={isRtl ? 'bottom-start' : 'bottom-end'}
btnClassName="relative group block" btnClassName="relative group block"
panelClassName="rounded-lg shadow-lg border border-white/10 bg-gray-100 dark:bg-gray-800 p-2" // ✅ panelClassName="rounded-lg shadow-lg border border-white/10 bg-rtgray-100 dark:bg-rtgray-800 p-2" // ✅
button={ button={
<div className="h-9 w-9 rounded-full bg-gray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700"> <div className="h-9 w-9 rounded-full bg-rtgray-200 dark:bg-rtgray-800 flex items-center justify-center group-hover:bg-rtgray-300 dark:group-hover:bg-rtgray-700">
<IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" /> <IconUser className="h-5 w-5 text-gray-600 dark:text-gray-300" />
</div> </div>
} }
> >
<ul className="w-[230px] font-semibold text-dark dark:text-white-dark bg-transparent"> {/* make sure this stays transparent */} <ul className="w-[230px] font-semibold text-dark"> {/* make sure this stays transparent */}
<li className="px-4 py-4 flex items-center"> <li className="px-4 py-4 flex items-center">
<div className="truncate ltr:pl-1.5 rtl:pr-4"> <div className="truncate ltr:pl-1.5 rtl:pr-4">
<h4 className="text-sm text-left">{user.email}</h4> <h4 className="text-sm text-left">{user.email}</h4>
@ -142,11 +149,6 @@ useEffect(() => {
<IconUser className="h-4.5 w-4.5 mr-2" /> Profile <IconUser className="h-4.5 w-4.5 mr-2" /> Profile
</Link> </Link>
</li> </li>
<li>
<Link href="/apps/mailbox" className="dark:hover:text-white">
<IconMail className="h-4.5 w-4.5 mr-2" /> Inbox
</Link>
</li>
<li> <li>
<Link href="/auth/boxed-lockscreen" className="dark:hover:text-white"> <Link href="/auth/boxed-lockscreen" className="dark:hover:text-white">
<IconLockDots className="h-4.5 w-4.5 mr-2" /> Lock Screen <IconLockDots className="h-4.5 w-4.5 mr-2" /> Lock Screen

14
components/layouts/sidebar.tsx
View File

@ -67,16 +67,15 @@ const Sidebar = () => {
<nav <nav
className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`} className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
> >
<div className="h-full bg-[white] dark:bg-black"> <div className="h-full bg-[white] dark:bg-rtgray-900">
<div className="flex items-center justify-between px-4 py-3"> <div className="flex items-center justify-between px-4 pt-4">
<Link href="/" className="main-logo flex shrink-0 items-center"> <Link href="/" className="main-logo flex shrink-0 items-center">
<img className="ml-[5px] w-8 flex-none" src="/assets/images/newlogo.png" alt="logo" /> <img className="max-w-[180px] h-auto flex" src="/assets/images/newfulllogo.png" alt="logo" />
<span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">Rooftop Energy</span>
</Link> </Link>
<button <button
type="button" type="button"
className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10" className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-rtgray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-rtgray-900/10"
onClick={() => dispatch(toggleSidebar())} onClick={() => dispatch(toggleSidebar())}
> >
<IconCaretsDown className="m-auto rotate-90" /> <IconCaretsDown className="m-auto rotate-90" />
@ -84,7 +83,7 @@ const Sidebar = () => {
</div> </div>
<PerfectScrollbar className="relative h-[calc(100vh-80px)] "> <PerfectScrollbar className="relative h-[calc(100vh-80px)] ">
<ul className="relative space-y-0.5 p-4 py-0 font-md"> <ul className="relative space-y-0.5 p-4 py-0 font-md">
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white"> <h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 pb-3 pt-2 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>Customer</span> <span>Customer</span>
</h2> </h2>
@ -156,6 +155,7 @@ const Sidebar = () => {
</div> </div>
</Link> </Link>
</li> </li>
{/*}
<h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white"> <h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white">
<IconMinus className="hidden h-5 w-4 flex-none" /> <IconMinus className="hidden h-5 w-4 flex-none" />
<span>Providers</span> <span>Providers</span>
@ -239,7 +239,7 @@ const Sidebar = () => {
</ul> </ul>
</AnimateHeight> </AnimateHeight>
</li> </li>
*/}
</ul> </ul>
</PerfectScrollbar> </PerfectScrollbar>

BIN
public/assets/images/newfulllogo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 91 KiB