sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Header kısmındaki ikonları Fc olarak değiştirdim

Browse source
This commit is contained in:
Sedat Öztürk 2025-08-17 14:10:12 +03:00
parent f17d95c1d2
commit f946ecfdef
10 changed files with 173 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/dev-dist/sw.js
View file

@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.271iot081v"
"revision": "0.tihrrtufp5o"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

2
ui/src/components/layouts/SimpleLayout.tsx
View file

@ -24,9 +24,9 @@ const HeaderActionsEnd = () => {
<>
<Search />
<AiAssistant />
<LanguageSelector />
<Notification />
<SidePanel />
<LanguageSelector />
<UserDropdown hoverable={false} />
</>
)

20
ui/src/components/template/AiAssistant.tsx
View file

@ -2,7 +2,7 @@ import Tooltip from '@/components/ui/Tooltip'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { usePermission } from '@/utils/hooks/usePermission'
import { FaHeadset } from 'react-icons/fa';
import { FcAssistant, FcHeadset } from 'react-icons/fc'
import { useNavigate } from 'react-router-dom'
const AiAssistant = () => {
@ -17,16 +17,14 @@ const AiAssistant = () => {
}
return (
<>
<Tooltip title={translate('::Abp.Identity.Ai')}>
<div
onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
>
<FaHeadset size={28} />
</div>
</Tooltip>
</>
<Tooltip title={translate('::Abp.Identity.Ai')}>
<div
onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
>
<FcHeadset size={24} />
</div>
</Tooltip>
)
}

46
ui/src/components/template/LanguageSelector.tsx
View file

@ -10,6 +10,8 @@ import { FaCheck } from 'react-icons/fa'
import type { CommonProps } from '@/@types/common'
import appConfig from '@/configs/app.config'
import { dateLocales } from '@/constants/dateLocales.constant'
import { Tooltip } from '../ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
const _LanguageSelector = ({ className }: CommonProps) => {
const [loading, setLoading] = useState(false)
@ -23,6 +25,8 @@ const _LanguageSelector = ({ className }: CommonProps) => {
return languageList?.find((lang) => lang.cultureName === currentLang)?.cultureName
}, [currentLang, languageList])
const { translate } = useLocalization()
const selectedLanguage = (
<div className={classNames(className, 'flex items-center')}>
{loading ? (
@ -58,26 +62,28 @@ const _LanguageSelector = ({ className }: CommonProps) => {
}
return (
<Dropdown renderTitle={selectedLanguage} placement="bottom-end">
{languageList?.map((lang) => (
<Dropdown.Item
key={lang.cultureName}
className="justify-between"
eventKey={lang.cultureName}
onClick={() => onLanguageSelect(lang.cultureName)}
>
<span className="flex items-center">
<Avatar
size={18}
shape="circle"
src={`/img/countries/${lang.cultureName ?? 'default'}.png`}
/>
<span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span>
</span>
{currentLang === lang.cultureName && <FaCheck className="text-emerald-500 text-lg" />}
</Dropdown.Item>
))}
</Dropdown>
<Tooltip title={translate('::App.Languages.Language')}>
<Dropdown renderTitle={selectedLanguage} placement="bottom-end">
{languageList?.map((lang) => (
<Dropdown.Item
key={lang.cultureName}
className="justify-between"
eventKey={lang.cultureName}
onClick={() => onLanguageSelect(lang.cultureName)}
>
<span className="flex items-center">
<Avatar
size={18}
shape="circle"
src={`/img/countries/${lang.cultureName ?? 'default'}.png`}
/>
<span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span>
</span>
{currentLang === lang.cultureName && <FaCheck className="text-emerald-500 text-lg" />}
</Dropdown.Item>
))}
</Dropdown>
</Tooltip>
)
}

163
ui/src/components/template/Notification.tsx
View file

@ -19,9 +19,10 @@ import classNames from 'classnames'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useCallback, useEffect, useRef, useState } from 'react'
import { FaBell, FaEnvelopeOpen } from 'react-icons/fa';
import { FaEnvelopeOpen } from 'react-icons/fa'
import { Link } from 'react-router-dom'
import { Notification as Notify, toast } from '../ui'
import { FcAdvertising } from 'react-icons/fc'
dayjs.extend(relativeTime)
@ -57,10 +58,10 @@ const NotificationToggle = ({
content={unreadCount}
innerClass="py-0 px-1"
>
<FaBell />
<FcAdvertising />
</Badge>
) : (
<FaBell />
<FcAdvertising />
)}
</div>
)
@ -250,88 +251,90 @@ const _Notification = ({ className }: { className?: string }) => {
}, [desktopNotificationList])
return (
<Dropdown
renderTitle={
<NotificationToggle unreadCount={unreadNotificationCount} className={className} />
}
menuClass="p-0 min-w-[280px] md:min-w-[340px]"
placement={larger.md ? 'bottom-end' : 'bottom-center'}
onOpen={onNotificationOpen}
>
<Dropdown.Item variant="header">
<div className="border-b border-gray-200 dark:border-gray-600 px-4 py-2 flex items-center justify-between">
<h6>{translate('::Abp.Identity.ActivityLogs.Notifications')}</h6>
<Tooltip title={translate('::Abp.Identity.ActivityLogs.MarkAllRead')}>
<Button
variant="plain"
shape="circle"
size="sm"
icon={<FaEnvelopeOpen className="text-xl" />}
onClick={onMarkAllAsRead}
/>
</Tooltip>
</div>
</Dropdown.Item>
<div className={classNames('overflow-y-auto', notificationHeight)}>
<ScrollBar direction={direction}>
{notificationList.length > 0 &&
notificationList.map((item, index) => (
<div
key={item.id}
className={`relative flex px-4 py-4 cursor-pointer hover:bg-gray-50 active:bg-gray-100 dark:hover:bg-black dark:hover:bg-opacity-20 ${
!isLastChild(notificationList, index)
? 'border-b border-gray-200 dark:border-gray-600'
: ''
}`}
onClick={() => onMarkAsRead(item.id)}
>
<div>{notificationTypeAvatar(item.creatorId, item.tenantId)}</div>
<div className="ltr:ml-3 rtl:mr-3">
<div>
{item.notificationType && (
<span className="font-semibold heading-text">{item.notificationType} </span>
)}
<div>{item.message}</div>
<Tooltip title={translate('::App.Notifications')}>
<Dropdown
renderTitle={
<NotificationToggle unreadCount={unreadNotificationCount} className={className} />
}
menuClass="p-0 min-w-[280px] md:min-w-[340px]"
placement={larger.md ? 'bottom-end' : 'bottom-center'}
onOpen={onNotificationOpen}
>
<Dropdown.Item variant="header">
<div className="border-b border-gray-200 dark:border-gray-600 px-4 py-2 flex items-center justify-between">
<h6>{translate('::Abp.Identity.ActivityLogs.Notifications')}</h6>
<Tooltip title={translate('::Abp.Identity.ActivityLogs.MarkAllRead')}>
<Button
variant="plain"
shape="circle"
size="sm"
icon={<FaEnvelopeOpen className="text-xl" />}
onClick={onMarkAllAsRead}
/>
</Tooltip>
</div>
</Dropdown.Item>
<div className={classNames('overflow-y-auto', notificationHeight)}>
<ScrollBar direction={direction}>
{notificationList.length > 0 &&
notificationList.map((item, index) => (
<div
key={item.id}
className={`relative flex px-4 py-4 cursor-pointer hover:bg-gray-50 active:bg-gray-100 dark:hover:bg-black dark:hover:bg-opacity-20 ${
!isLastChild(notificationList, index)
? 'border-b border-gray-200 dark:border-gray-600'
: ''
}`}
onClick={() => onMarkAsRead(item.id)}
>
<div>{notificationTypeAvatar(item.creatorId, item.tenantId)}</div>
<div className="ltr:ml-3 rtl:mr-3">
<div>
{item.notificationType && (
<span className="font-semibold heading-text">{item.notificationType} </span>
)}
<div>{item.message}</div>
</div>
<span className="text-xs">{dayjs(item.date).fromNow()}</span>
</div>
<span className="text-xs">{dayjs(item.date).fromNow()}</span>
<Badge
className="absolute top-4 ltr:right-4 rtl:left-4 mt-1.5"
innerClass={`${item.readed ? 'bg-gray-300' : bgTheme} `}
/>
</div>
<Badge
className="absolute top-4 ltr:right-4 rtl:left-4 mt-1.5"
innerClass={`${item.readed ? 'bg-gray-300' : bgTheme} `}
/>
))}
{loading && (
<div className={classNames('flex items-center justify-center', notificationHeight)}>
<Spinner size={40} />
</div>
))}
{loading && (
<div className={classNames('flex items-center justify-center', notificationHeight)}>
<Spinner size={40} />
</div>
)}
{noResult && (
<div className={classNames('flex items-center justify-center', notificationHeight)}>
<div className="text-center">
<img
className="mx-auto mb-2 max-w-[150px]"
src="/img/others/no-notification.png"
alt="no-notification"
/>
<h6 className="font-semibold">No notifications!</h6>
<p className="mt-1">Please Try again later</p>
)}
{noResult && (
<div className={classNames('flex items-center justify-center', notificationHeight)}>
<div className="text-center">
<img
className="mx-auto mb-2 max-w-[150px]"
src="/img/others/no-notification.png"
alt="no-notification"
/>
<h6 className="font-semibold">No notifications!</h6>
<p className="mt-1">Please Try again later</p>
</div>
</div>
</div>
)}
</ScrollBar>
</div>
<Dropdown.Item variant="header">
<div className="flex justify-center border-t border-gray-200 dark:border-gray-600 px-4 py-2">
<Link
to={ROUTES_ENUM.protected.admin.activityLog}
className="font-semibold cursor-pointer p-2 px-3 text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
>
{translate('::Abp.Identity.ActivityLogs.ViewAllActivity')}
</Link>
)}
</ScrollBar>
</div>
</Dropdown.Item>
</Dropdown>
<Dropdown.Item variant="header">
<div className="flex justify-center border-t border-gray-200 dark:border-gray-600 px-4 py-2">
<Link
to={ROUTES_ENUM.protected.admin.activityLog}
className="font-semibold cursor-pointer p-2 px-3 text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
>
{translate('::Abp.Identity.ActivityLogs.ViewAllActivity')}
</Link>
</div>
</Dropdown.Item>
</Dropdown>
</Tooltip>
)
}

16
ui/src/components/template/Search.tsx
View file

@ -6,12 +6,13 @@ import useThemeClass from '@/utils/hooks/useThemeClass'
import classNames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import Highlighter from 'react-highlight-words'
import { FaChevronRight, FaSearch } from 'react-icons/fa';
import { FaChevronRight, FaSearch } from 'react-icons/fa'
import { Link } from 'react-router-dom'
import { PermissionCheck } from '../shared'
import { Badge, Checkbox, Pagination } from '../ui'
import { Badge, Checkbox, Pagination, Tooltip } from '../ui'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { getSearch, getSystems } from '@/services/global-search.service'
import { FcSearch } from 'react-icons/fc'
type SearchData = {
title: string
@ -173,9 +174,12 @@ const _Search = ({ className }: { className?: string }) => {
return (
<PermissionCheck permissions={[GLOBAL_SEARCH]}>
<div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}>
<FaSearch />
</div>
<Tooltip title={translate('::App.Search')}>
<div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}>
<FcSearch />
</div>
</Tooltip>
<Dialog
contentClassName="p-0"
isOpen={searchDialogOpen}
@ -193,7 +197,7 @@ const _Search = ({ className }: { className?: string }) => {
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
</div>
<Button size="xs" onClick={handleSearch}>
<Button size="sm" onClick={handleSearch}>
<FaSearch />
</Button>
</div>

13
ui/src/components/template/SidePanel/SidePanel.tsx
View file

@ -1,18 +1,19 @@
import classNames from 'classnames'
import Drawer from '@/components/ui/Drawer'
import { FaCog } from 'react-icons/fa';
import SidePanelContent, { SidePanelContentProps } from './SidePanelContent'
import withHeaderItem from '@/utils/hoc/withHeaderItem'
import { useStoreState, useStoreActions } from '@/store'
import type { CommonProps } from '@/@types/common'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { FcEngineering } from 'react-icons/fc'
import { Tooltip } from '@/components/ui'
type SidePanelProps = SidePanelContentProps & CommonProps
const _SidePanel = (props: SidePanelProps) => {
const { setPanelExpand } = useStoreActions((actions) => actions.theme)
const {translate } = useLocalization()
const { translate } = useLocalization()
const { className, ...rest } = props
@ -34,9 +35,11 @@ const _SidePanel = (props: SidePanelProps) => {
return (
<>
<div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
<FaCog />
</div>
<Tooltip title={translate('::SidePanel.Title')}>
<div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
<FcEngineering />
</div>
</Tooltip>
<Drawer
title={translate('::SidePanel.Title')}
isOpen={panelExpand}

65
ui/src/components/template/UserDropdown.tsx
View file

@ -6,10 +6,11 @@ import withHeaderItem from '@/utils/hoc/withHeaderItem'
import useAuth from '@/utils/hooks/useAuth'
import { useLocalization } from '@/utils/hooks/useLocalization'
import classNames from 'classnames'
import { FaChartLine } from 'react-icons/fa';
import { FaSignOutAlt, FaUser } from 'react-icons/fa';
import { FaChartLine } from 'react-icons/fa'
import { FaSignOutAlt, FaUser } from 'react-icons/fa'
import { Link } from 'react-router-dom'
import { Avatar } from '../ui'
import { FcNext, FcNfcSign, FcPodiumWithSpeaker, FcVoicePresentation } from 'react-icons/fc'
type DropdownList = {
label: string
@ -27,12 +28,12 @@ const _UserDropdown = ({ className }: CommonProps) => {
{
label: translate('::Abp.Identity.Profile'),
path: ROUTES_ENUM.protected.admin.profile.general,
icon: <FaUser />,
icon: <FcVoicePresentation />,
},
{
label: translate('::Abp.Identity.ActivityLogs'),
path: ROUTES_ENUM.protected.admin.activityLog,
icon: <FaChartLine />,
icon: <FcNfcSign />,
},
]
@ -48,37 +49,35 @@ const _UserDropdown = ({ className }: CommonProps) => {
)
return (
<div>
<Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
<Dropdown.Item variant="header">
<div className="py-2 px-3 flex items-center gap-2">
<Avatar shape="circle" src={avatar} alt="avatar" />
<div>
<div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
<div className="text-xs">{email}</div>
</div>
<Dropdown menuStyle={{ minWidth: 240 }} renderTitle={UserAvatar} placement="bottom-end">
<Dropdown.Item variant="header">
<div className="py-2 px-3 flex items-center gap-2">
<Avatar shape="circle" src={avatar} alt="avatar" />
<div>
<div className="font-bold text-gray-900 dark:text-gray-100">{name}</div>
<div className="text-xs">{email}</div>
</div>
</div>
</Dropdown.Item>
<Dropdown.Item variant="divider" />
{dropdownItemList.map((item) => (
<Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
<Link className="flex h-full w-full px-2" to={item.path}>
<span className="flex gap-2 items-center w-full">
<span className="text-xl opacity-50">{item.icon}</span>
<span>{item.label}</span>
</span>
</Link>
</Dropdown.Item>
<Dropdown.Item variant="divider" />
{dropdownItemList.map((item) => (
<Dropdown.Item key={item.label} eventKey={item.label} className="mb-1 px-0">
<Link className="flex h-full w-full px-2" to={item.path}>
<span className="flex gap-2 items-center w-full">
<span className="text-xl opacity-50">{item.icon}</span>
<span>{item.label}</span>
</span>
</Link>
</Dropdown.Item>
))}
{/* <Dropdown.Item variant="divider" /> */}
<Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}>
<span className="text-xl opacity-50">
<FaSignOutAlt />
</span>
<span>{translate('::Abp.Identity.SignOut')} </span>
</Dropdown.Item>
</Dropdown>
</div>
))}
{/* <Dropdown.Item variant="divider" /> */}
<Dropdown.Item eventKey="Sign Out" className="mb-1 px-2" onClick={signOut}>
<span className="text-xl opacity-50">
<FcNext />
</span>
<span>{translate('::Abp.Identity.SignOut')} </span>
</Dropdown.Item>
</Dropdown>
)
}

2
ui/src/components/ui/Menu/MenuCollapse.tsx
View file

@ -52,7 +52,7 @@ const MenuCollapse = (props: MenuCollapseProps) => {
<div className={menuCollapseItemClass} role="presentation" onClick={toggleCollapse}>
<span className="flex items-center">{label}</span>
<motion.span
className="text-lg"
className="text-md"
initial={{ transform: 'rotate(0deg)' }}
animate={{
transform: isExpanded ? 'rotate(-180deg)' : 'rotate(0deg)',

2
ui/src/components/ui/MenuItem/index.tsx
View file

@ -23,7 +23,7 @@ const MenuItem = forwardRef<HTMLElement, MenuItemProps>((props, ref) => {
disabled,
eventKey,
isActive,
menuItemHeight = 35,
menuItemHeight = 30,
onSelect,
style,
variant = 'light',