danak/danak-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ticket

Browse Source
This commit is contained in:
hamid zarghami
2024-12-29 11:27:56 +03:30
parent 44d739c061
commit 7756e20a9f
11 changed files with 345 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DefaulModal.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
</div>
</div>
<div onClick={props.close} className='fixed modalGlass inset-0 z-50 '></div>
<div onClick={props.close} className='fixed size-full bottom-0 right-0 modalGlass inset-0 z-50 '></div>
</Fragment>
)
}
src/components/ServiceSection.tsx
+19
View File
@@ -0,0 +1,19 @@
import { FC } from 'react'
const ServiceSection: FC = () => {
return (
<div className='flex gap-4'>
<div className='size-10 rounded-xl bg-green-300'></div>
<div>
<div className='text-sm'>
دی منو
</div>
<div className='text-xs text-description'>
منو رستوران
</div>
</div>
</div>
)
}
export default ServiceSection
src/components/StatusCircle.tsx
+15
View File
@@ -0,0 +1,15 @@
import { FC } from 'react'
type Props = {
color: string
}
const StatusCircle: FC<Props> = (props: Props) => {
return (
<div style={{ background: props.color }} className='size-1.5 rounded-full'>
</div>
)
}
export default StatusCircle
src/components/Tabs.tsx
+38
View File
@@ -0,0 +1,38 @@
import { FC, ReactNode } from 'react'
import { clx } from '../helpers/utils'
type Item = {
icon: ReactNode,
label: string,
value: string,
}
type Props = {
items: Item[],
onChange: (value: string) => void,
active: string,
}
const Tabs: FC<Props> = (props: Props) => {
return (
<div className='px-10 w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
{
props.items.map((item: Item) => {
return (
<div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
'flex flex-col items-center gap-2 cursor-pointer',
props.active === item.value && 'text-black'
)}>
{item.icon}
<div className='text-xs'>
{item.label}
</div>
</div>
)
})
}
</div>
)
}
export default Tabs
src/components/Td.tsx
+22
View File
@@ -0,0 +1,22 @@
import { FC, ReactNode } from 'react'
interface Props {
text: string,
children?: ReactNode,
dir?: string,
}
const Td: FC<Props> = (props: Props) => {
return (
<td className='td' style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
{
props.text ?
props.text
:
props.children
}
</td>
)
}
export default Td
src/index.css
+22
View File
@@ -34,6 +34,28 @@ textarea::placeholder {
.rowTwoInput {
@apply flex flex-col sm:flex-row sm:gap-5 gap-5;
}
.td {
@apply px-6 py-4 whitespace-nowrap text-xs;
}
.thead {
@apply h-[69px] bg-white text-sm text-[#8C90A3] rounded-3xl overflow-hidden;
}
.tr {
@apply w-full h-[74px] bg-white border-t border-[#EAEDF5] hover:bg-secondary;
}
}
tbody tr {
background-color: white;
}
.thead tr td:first-child {
border-top-right-radius: 23px;
/* border-bottom-right-radius: 23px; */
}
.thead tr td:last-child {
border-top-left-radius: 23px;
/* border-bottom-left-radius: 23px; */
}
.rmdp-input {
min-height: 40px;
src/langs/fa.json
+21 -1
View File
@@ -75,5 +75,25 @@
"see_all": "دیدن همه",
"create_new_access": "ایجاد دسترسی سریع"
},
"all": "همه"
"all": "همه",
"service": {
"my_service": "سرویس های من",
"search": "جستجو در سرویس ها",
"active_menu": "منو فعال"
},
"ticket": {
"tickets": "تیکت ها",
"new_ticket": "تیکت جدید",
"answered": "پاسخ داده شده",
"checking": "در حال بررسی",
"wait_answered": "در انتظار پاسخ",
"closed": "بسته شده",
"number": "شماره",
"title": "عنوان",
"team": "تیم",
"date": "تاریخ",
"status": "وضعیت",
"priority": "الویت",
"detail": "جزییات"
}
}
src/pages/auth/store/AuthStore.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { create } from "zustand";
import { AuthStoreType } from "../auth/types/AuthTypes";
import { AuthStoreType } from "../../auth/types/AuthTypes";
export const useAuthStore = create<AuthStoreType>((set) => ({
phone: "",
src/pages/service/MyServices.tsx
+99
View File
@@ -0,0 +1,99 @@
import { FC } from 'react'
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import ServiceSection from '../../components/ServiceSection'
import StatusCircle from '../../components/StatusCircle'
import BannerImage from '../../assets/images/banner.png'
const MyServices: FC = () => {
const { t } = useTranslation('global')
return (
<div className='w-full flex gap-6 mt-4'>
<div className='flex-1'>
<div>
{t('service.my_service')}
</div>
<div className='mt-8 flex gap-6 items-center'>
<div className='w-[300px]'>
<Input
variant='search'
placeholder={t('service.search')}
className='bg-white w-full'
/>
</div>
<Select
items={[
{ label: t('all'), value: 'all' },
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]}
className='max-w-[100px]'
/>
</div>
<div className='flex gap-6 items-center mt-8'>
<div className='flex-1 bg-white rounded-3xl p-6'>
<ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div>
<div className='flex-1 bg-white rounded-3xl p-6'>
<ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div>
<div className='flex-1 bg-white rounded-3xl p-6'>
<ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div>
<div className='flex-1 bg-white rounded-3xl p-6'>
<ServiceSection
/>
<div className='mt-6 flex gap-1 items-center'>
<StatusCircle
color='#00BA4B'
/>
<div className='text-xs text-description'>1 {t('service.active_menu')}</div>
</div>
</div>
</div>
</div>
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white rounded-3xl overflow-hidden relative'>
<img
src={BannerImage}
className='w-full backdrop-blur-[100px] h-[550px] object-cover'
/>
<div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
<div className='max-w-[80%] text-sm leading-6 text-white'>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</div>
</div>
</div>
</div>
)
}
export default MyServices
src/pages/ticket/TicketList.tsx
+103
View File
@@ -0,0 +1,103 @@
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Message2, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
import Tabs from '../../components/Tabs'
import Td from '../../components/Td'
const TicketList: FC = () => {
const { t } = useTranslation('global')
const [activeTab, setActiveTab] = useState<string>('answered')
return (
<div className='mt-4'>
<div className='flex justify-between items-center'>
<div>
{t('ticket.tickets')}
</div>
<Button
className='w-[172px]'
>
<div className='flex gap-2 items-center'>
<Add size={20} color='white' />
<div>
{t('ticket.new_ticket')}
</div>
</div>
</Button>
</div>
<div className='mt-14'>
<Tabs
active={activeTab}
items={[
{
icon: <MessageTick color={activeTab === 'answered' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.answered'),
value: 'answered'
},
{
icon: <MessageTime color={activeTab === 'checking' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.checking'),
value: 'checking'
},
{
icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.wait_answered'),
value: 'wating'
},
{
icon: <MessageRemove color={activeTab === 'closed' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.closed'),
value: 'closed'
},
]}
onChange={setActiveTab}
/>
</div>
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('ticket.number')} />
<Td text={t('ticket.title')} />
<Td text={t('ticket.team')} />
<Td text={t('ticket.date')} />
<Td text={t('ticket.status')} />
<Td text={t('ticket.priority')} />
<Td text={t('ticket.detail')} />
<Td text={''} />
</tr>
</thead>
<tbody>
<tr className='tr'>
<Td text={t('ticket.number')} />
<Td text={t('ticket.title')} />
<Td text={t('ticket.team')} />
<Td text={t('ticket.date')} />
<Td text={t('ticket.status')} />
<Td text={t('ticket.priority')} />
<Td text={t('ticket.detail')} />
<Td text={''} />
</tr>
<tr className='tr'>
<Td text={t('ticket.number')} />
<Td text={t('ticket.title')} />
<Td text={t('ticket.team')} />
<Td text={t('ticket.date')} />
<Td text={t('ticket.status')} />
<Td text={t('ticket.priority')} />
<Td text={t('ticket.detail')} />
<Td text={''} />
</tr>
</tbody>
</table>
</div>
</div>
)
}
export default TicketList
src/router/Main.tsx
+4
View File
@@ -4,6 +4,8 @@ import Header from '../shared/Header'
import { Route, Routes } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Home from '../pages/home/Home'
import MyServices from '../pages/service/MyServices'
import TicketList from '../pages/ticket/TicketList'
const MainRouter: FC = () => {
return (
@@ -14,6 +16,8 @@ const MainRouter: FC = () => {
<div className=' overflow-auto h-[calc(100vh-113px)] '>
<Routes>
<Route path={Pages.dashboard} element={<Home />} />
<Route path={Pages.services.mine} element={<MyServices />} />
<Route path={Pages.ticket.list} element={<TicketList />} />
</Routes>
</div>
</div>