TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revamp template

Browse Source
This commit is contained in:
fro1991
2025-02-01 16:44:51 +07:00
parent c432df568a
commit 276a289580
1212 changed files with 112762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/partials/dropdowns/apps/DropdownApps.tsx Normal file
View File

@ -0,0 +1,120 @@
import { toAbsoluteUrl } from '@/utils';
import { Link } from 'react-router-dom';
import { MenuSub } from '@/components';
import { useResponsive } from '@/hooks';
interface IDropdownAppsItem {
logo: string;
title: string;
description: string;
checkbox: boolean;
}
const DropdownApps = () => {
const desktopMode = useResponsive('up', 'lg');
const items: IDropdownAppsItem[] = [
{
logo: 'jira.svg',
title: 'Jira',
description: 'Project management',
checkbox: false
},
{
logo: 'inferno.svg',
title: 'Inferno',
description: 'Ensures healthcare app',
checkbox: true
},
{
logo: 'evernote.svg',
title: 'Evernote',
description: 'Notes management app',
checkbox: true
},
{
logo: 'gitlab.svg',
title: 'Gitlab',
description: 'DevOps platform',
checkbox: false
},
{
logo: 'google-webdev.svg',
title: 'Google webdev',
description: 'Building web experiences',
checkbox: true
}
];
const buildHeader = () => {
return (
<div className="flex items-center justify-between gap-2.5 text-2xs text-gray-600 font-medium px-5 py-3 border-b border-b-gray-200">
<span>Apps</span>
<span>Enabled</span>
</div>
);
};
const buildFooter = () => {
return (
<div className="grid p-5 border-t border-t-gray-200">
<Link to="/account/api-keys" className="btn btn-sm btn-light justify-center">
Go to Apps
</Link>
</div>
);
};
const buildList = (items: IDropdownAppsItem[]) => {
return (
<div className="flex flex-col scrollable-y-auto max-h-[400px] divide-y divide-gray-200">
{items.map((item, index) => (
<div
key={index}
className="flex items-center justify-between flex-wrap gap-2 px-5 py-3.5"
>
<div className="flex items-center flex-wrap gap-2">
<div className="flex items-center justify-center shrink-0 rounded-full bg-gray-100 border border-gray-200 size-10">
<img
src={toAbsoluteUrl(`/media/brand-logos/${item.logo}`)}
className="size-6"
alt={item.title}
/>
</div>
<div className="flex flex-col">
<a
href="#"
className="text-2sm font-semibold text-gray-900 hover:text-primary-active"
>
{item.title}
</a>
<span className="text-2xs font-medium text-gray-600">{item.description}</span>
</div>
</div>
<div className="flex items-center gap-2 lg:gap-5">
<label className="switch switch-sm">
<input type="checkbox" defaultChecked={item.checkbox} />
</label>
</div>
</div>
))}
</div>
);
};
return (
<MenuSub rootClassName="w-full max-w-[320px]" className="light:border-gray-300">
{buildHeader()}
<div className="scrollable-y-auto" style={{ maxHeight: desktopMode ? '400px' : '75vh' }}>
{buildList(items)}
</div>
{buildFooter()}
</MenuSub>
);
};
export { DropdownApps };

1
src/partials/dropdowns/apps/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './DropdownApps';

106
src/partials/dropdowns/general/DropdownCard1.tsx Normal file
View File

@ -0,0 +1,106 @@
import {
KeenIcon,
MenuArrow,
MenuIcon,
MenuItem,
MenuLink,
MenuSeparator,
MenuSub,
MenuTitle
} from '@/components';
import { useLanguage } from '@/i18n';
const DropdownCard1 = () => {
const { isRTL } = useLanguage();
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[200px]">
<MenuItem>
<MenuLink path="/account/activity">
<MenuIcon>
<KeenIcon icon="cloud-change" />
</MenuIcon>
<MenuTitle>Activity</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem>
<MenuLink path="#">
<MenuIcon>
<KeenIcon icon="share" />
</MenuIcon>
<MenuTitle>Share</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem
toggle="dropdown"
trigger="hover"
dropdownProps={{
placement: isRTL() ? 'left-start' : 'right-start',
modifiers: [
{
name: 'offset',
options: {
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
}
}
]
}}
>
<MenuLink>
<MenuIcon>
<KeenIcon icon="notification-status" />
</MenuIcon>
<MenuTitle>Notifications</MenuTitle>
<MenuArrow>
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
</MenuArrow>
</MenuLink>
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem>
<MenuLink path="/account/home/settings-sidebar">
<MenuIcon>
<KeenIcon icon="sms" />
</MenuIcon>
<MenuTitle>Email</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem>
<MenuLink path="/account/home/settings-sidebar">
<MenuIcon>
<KeenIcon icon="message-notify" />
</MenuIcon>
<MenuTitle>SMS</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem>
<MenuLink path="/account/home/settings-sidebar">
<MenuIcon>
<KeenIcon icon="pencil" />
</MenuIcon>
<MenuTitle>Push</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
</MenuItem>
<MenuItem>
<MenuLink path="#">
<MenuIcon>
<KeenIcon icon="dislike" />
</MenuIcon>
<MenuTitle>Report</MenuTitle>
</MenuLink>
</MenuItem>
<MenuSeparator />
<MenuItem>
<MenuLink path="/account/home/settings-enterprise">
<MenuIcon>
<KeenIcon icon="setting-3" />
</MenuIcon>
<MenuTitle>Settings</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCard1 };

42
src/partials/dropdowns/general/DropdownCard2.tsx Normal file
View File

@ -0,0 +1,42 @@
import { KeenIcon, MenuIcon, MenuItem, MenuLink, MenuSub, MenuTitle } from '@/components';
const DropdownCard2 = () => {
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[200px]">
<MenuItem path="/account/home/settings-enterprise">
<MenuLink>
<MenuIcon>
<KeenIcon icon="setting-3" />
</MenuIcon>
<MenuTitle>Settings</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/members/import-members">
<MenuLink>
<MenuIcon>
<KeenIcon icon="some-files" />
</MenuIcon>
<MenuTitle>Import</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/activity">
<MenuLink>
<MenuIcon>
<KeenIcon icon="cloud-change" />
</MenuIcon>
<MenuTitle>Activity</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="dislike" />
</MenuIcon>
<MenuTitle>Report</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCard2 };

34
src/partials/dropdowns/general/DropdownCardItem1.tsx Normal file
View File

@ -0,0 +1,34 @@
import { KeenIcon, MenuIcon, MenuItem, MenuLink, MenuSub, MenuTitle } from '@/components';
const DropdownCardItem1 = () => {
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="document" />
</MenuIcon>
<MenuTitle>Details</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="share" />
</MenuIcon>
<MenuTitle>Share</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="file-up" />
</MenuIcon>
<MenuTitle>Export</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCardItem1 };

51
src/partials/dropdowns/general/DropdownCardItem2.tsx Normal file
View File

@ -0,0 +1,51 @@
import {
KeenIcon,
MenuIcon,
MenuItem,
MenuLink,
MenuSeparator,
MenuSub,
MenuTitle
} from '@/components';
const DropdownCardItem2 = () => {
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="search-list" />
</MenuIcon>
<MenuTitle>View</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="pencil" />
</MenuIcon>
<MenuTitle>Edit</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="file-up" />
</MenuIcon>
<MenuTitle>Export</MenuTitle>
</MenuLink>
</MenuItem>
<MenuSeparator />
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="trash" />
</MenuIcon>
<MenuTitle>Share</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCardItem2 };

87
src/partials/dropdowns/general/DropdownCrud1.tsx Normal file
View File

@ -0,0 +1,87 @@
import {
KeenIcon,
MenuArrow,
MenuIcon,
MenuItem,
MenuLink,
MenuSub,
MenuTitle
} from '@/components';
import { useLanguage } from '@/i18n';
const DropdownCrud1 = () => {
const { isRTL } = useLanguage();
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="/account/home/settings-plain">
<MenuLink>
<MenuIcon>
<KeenIcon icon="add-files" />
</MenuIcon>
<MenuTitle>Add</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/members/import-members">
<MenuLink>
<MenuIcon>
<KeenIcon icon="file-down" />
</MenuIcon>
<MenuTitle>Import</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem
toggle="dropdown"
trigger="hover"
dropdownProps={{
placement: isRTL() ? 'left-start' : 'right-start',
modifiers: [
{
name: 'offset',
options: {
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
}
}
]
}}
>
<MenuLink>
<MenuIcon>
<KeenIcon icon="file-up" />
</MenuIcon>
<MenuTitle>Export</MenuTitle>
<MenuArrow>
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
</MenuArrow>
</MenuLink>
<MenuSub className="menu-default" rootClassName="w-full max-w-[125px]">
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuTitle>PDF</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuTitle>CVS</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuTitle>Excel</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
</MenuItem>
<MenuItem path="/account/security/privacy-settings">
<MenuLink>
<MenuIcon>
<KeenIcon icon="setting-3" />
</MenuIcon>
<MenuTitle>Settings</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCrud1 };

96
src/partials/dropdowns/general/DropdownCrud2.tsx Normal file
View File

@ -0,0 +1,96 @@
import {
KeenIcon,
MenuArrow,
MenuIcon,
MenuItem,
MenuLink,
MenuSub,
MenuTitle
} from '@/components';
import { useLanguage } from '@/i18n';
const DropdownCrud2 = () => {
const { isRTL } = useLanguage();
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="document" />
</MenuIcon>
<MenuTitle>View</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem
toggle="dropdown"
trigger="hover"
dropdownProps={{
placement: isRTL() ? 'left-start' : 'right-start',
modifiers: [
{
name: 'offset',
options: {
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
}
}
]
}}
>
<MenuLink>
<MenuIcon>
<KeenIcon icon="notification-status" />
</MenuIcon>
<MenuTitle>Export</MenuTitle>
<MenuArrow>
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
</MenuArrow>
</MenuLink>
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuIcon>
<KeenIcon icon="sms" />
</MenuIcon>
<MenuTitle>Email</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuIcon>
<KeenIcon icon="message-notify" />
</MenuIcon>
<MenuTitle>SMS</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="/account/home/settings-sidebar">
<MenuLink>
<MenuIcon>
<KeenIcon icon="notification-status" />
</MenuIcon>
<MenuTitle>Push</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="pencil" />
</MenuIcon>
<MenuTitle>Edit</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="trash" />
</MenuIcon>
<MenuTitle>Delete</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCrud2 };

60
src/partials/dropdowns/general/DropdownCrudItem1.tsx Normal file
View File

@ -0,0 +1,60 @@
import {
KeenIcon,
MenuIcon,
MenuItem,
MenuLink,
MenuSeparator,
MenuSub,
MenuTitle
} from '@/components';
const DropdownCrudItem1 = () => {
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="search-list" />
</MenuIcon>
<MenuTitle>View</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="file-up" />
</MenuIcon>
<MenuTitle>Export</MenuTitle>
</MenuLink>
</MenuItem>
<MenuSeparator />
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="pencil" />
</MenuIcon>
<MenuTitle>Edit</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="copy" />
</MenuIcon>
<MenuTitle>Make a copy</MenuTitle>
</MenuLink>
</MenuItem>
<MenuSeparator />
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="trash" />
</MenuIcon>
<MenuTitle>Remove</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCrudItem1 };

51
src/partials/dropdowns/general/DropdownCrudItem2.tsx Normal file
View File

@ -0,0 +1,51 @@
import {
KeenIcon,
MenuIcon,
MenuItem,
MenuLink,
MenuSeparator,
MenuSub,
MenuTitle
} from '@/components';
const DropdownCrudItem2 = () => {
return (
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="document" />
</MenuIcon>
<MenuTitle>View</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="pencil" />
</MenuIcon>
<MenuTitle>Edit</MenuTitle>
</MenuLink>
</MenuItem>
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="copy" />
</MenuIcon>
<MenuTitle>Make a copy</MenuTitle>
</MenuLink>
</MenuItem>
<MenuSeparator />
<MenuItem path="#">
<MenuLink>
<MenuIcon>
<KeenIcon icon="trash" />
</MenuIcon>
<MenuTitle>Delete</MenuTitle>
</MenuLink>
</MenuItem>
</MenuSub>
);
};
export { DropdownCrudItem2 };

8
src/partials/dropdowns/general/index.ts Normal file
View File

@ -0,0 +1,8 @@
export * from './DropdownCard1';
export * from './DropdownCard2';
export * from './DropdownCardItem1';
export * from './DropdownCardItem2';
export * from './DropdownCrud1';
export * from './DropdownCrud2';
export * from './DropdownCrudItem1';
export * from './DropdownCrudItem2';

96
src/partials/dropdowns/user/DropdownUser.tsx Normal file
View File

@ -0,0 +1,96 @@
import { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import { getAuth, useAuthContext } from '@/auth';
import { toAbsoluteUrl } from '@/utils';
// import { DropdownUserLanguages } from './DropdownUserLanguages';
import { KeenIcon } from '@/components';
import {
MenuItem,
MenuLink,
MenuSub,
MenuTitle,
MenuSeparator,
MenuArrow,
MenuIcon
} from '@/components/menu';
interface IDropdownUserProps {
menuItemRef: any;
}
// const cachedUser = getAuth()?.user;
// console.log('cachedUser :', cachedUser);
// const parsedUser = cachedUser ? cachedUser : null;
const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
const { logout, auth } = useAuthContext();
const buildHeader = () => {
return (
<div className="flex items-center justify-between px-5 py-1.5 gap-1.5">
<div className="flex items-center gap-2">
{/* <img
className="size-9 rounded-full border-2 border-success"
src={toAbsoluteUrl('/media/avatars/300-2.png')}
alt=""
/> */}
<div className="flex flex-col">
<p className="text-[14px] text-gray-800 font-semibold">{auth?.user.name}</p>
<p className="text-xs text-gray-600 hover:text-primary font-medium leading-none">
{auth?.user.email}
</p>
</div>
</div>
</div>
);
};
const buildMenu = () => {
return (
<Fragment>
<MenuSeparator />
<div className="flex flex-col">
<MenuItem>
<MenuLink path="/account/home/user-profile">
<MenuIcon>
<KeenIcon icon="profile-circle" />
</MenuIcon>
<MenuTitle>
<FormattedMessage id="USER.MENU.MY_PROFILE" />
</MenuTitle>
</MenuLink>
</MenuItem>
{/* <DropdownUserLanguages menuItemRef={menuItemRef} /> */}
<MenuSeparator />
</div>
</Fragment>
);
};
const buildFooter = () => {
return (
<div className="flex flex-col">
<div className="menu-item px-4 py-1.5">
<a onClick={logout} className="btn btn-sm btn-light justify-center">
<FormattedMessage id="USER.MENU.LOGOUT" />
</a>
</div>
</div>
);
};
return (
<MenuSub
className="menu-default light:border-gray-300 w-[200px] md:w-[250px]"
rootClassName="p-0"
>
{buildHeader()}
{buildMenu()}
{buildFooter()}
</MenuSub>
);
};
export { DropdownUser };

84
src/partials/dropdowns/user/DropdownUserLanguages.tsx Normal file
View File

@ -0,0 +1,84 @@
import { FormattedMessage } from 'react-intl';
import { KeenIcon } from '@/components';
import { MenuItem, MenuLink, MenuTitle, MenuIcon, MenuBadge, MenuSub } from '@/components/menu';
import clsx from 'clsx';
import { I18N_LANGUAGES, TLanguage, useLanguage } from '@/i18n';
interface IDropdownUserLanguagesProps {
menuItemRef: any;
}
const DropdownUserLanguages = ({ menuItemRef }: IDropdownUserLanguagesProps) => {
const { currentLanguage, changeLanguage } = useLanguage();
const { isRTL } = useLanguage();
const handleLanguage = (lang: TLanguage) => {
changeLanguage(lang);
if (menuItemRef.current) {
menuItemRef.current.hide(); // Call the closeMenu method to hide the submenu
}
};
const buildItems = () => {
return I18N_LANGUAGES.map((item, index) => (
<MenuItem
key={index}
className={clsx(item.code === currentLanguage.code && 'active')}
onClick={() => {
handleLanguage(item);
}}
>
<MenuLink className="h-10">
<MenuIcon>
<img src={item.flag} className="inline-block size-4 rounded-full" alt={item.label} />
</MenuIcon>
<MenuTitle>{item.label}</MenuTitle>
{item.code === currentLanguage.code && (
<MenuBadge>
<KeenIcon icon="check-circle" style="solid" className="text-success text-base" />
</MenuBadge>
)}
</MenuLink>
</MenuItem>
));
};
return (
<MenuItem
toggle="dropdown"
trigger="hover"
dropdownProps={{
placement: isRTL() ? 'left-start' : 'right-start',
modifiers: [
{
name: 'offset',
options: {
offset: isRTL() ? [-10, 0] : [10, 0] // [skid, distance]
}
}
]
}}
>
<MenuLink>
<MenuIcon>
<KeenIcon icon="icon" />
</MenuIcon>
<MenuTitle>
<FormattedMessage id="USER.MENU.LANGUAGE" />
</MenuTitle>
<div className="flex items-center gap-1.5 rounded-md border border-gray-300 text-gray-600 p-1.5 text-2xs font-medium shrink-0">
{currentLanguage.label}
<img
src={currentLanguage.flag}
className="inline-block size-3.5 rounded-full"
alt="{currentLanguage.label}"
/>
</div>
</MenuLink>
<MenuSub className="menu-default light:border-gray-300 w-[190px]">{buildItems()}</MenuSub>
</MenuItem>
);
};
export { DropdownUserLanguages };

2
src/partials/dropdowns/user/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './DropdownUser';
export * from './DropdownUserLanguages';