-
-
{t('ticket.ticket_number')}
-
{getMessages.data?.data?.ticket?.numericId}
+
+
+
{t('ticket.ticket_number')}
+
{getMessages.data?.data?.ticket?.numericId}
+
+
{
getMessages.isPending ?
diff --git a/src/pages/ticket/TicketList.tsx b/src/pages/ticket/TicketList.tsx
index fcb534d..8ec5e8b 100644
--- a/src/pages/ticket/TicketList.tsx
+++ b/src/pages/ticket/TicketList.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Eye, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
import Tabs from '../../components/Tabs'
@@ -11,23 +11,63 @@ import { TicketItemType } from './types/TicketTypes'
import OpenTicket from './components/OpenTicket'
import Pagination from '../../components/Pagination'
+const VALID_STATUSES = ['ANSWERED', 'PENDING', 'CLOSED'] as const
+type TicketStatus = (typeof VALID_STATUSES)[number] | ''
+
const TicketList: FC = () => {
const { t } = useTranslation('global')
- const [page, setPage] = useState
(1)
- const [searchParams] = useSearchParams()
- const [customerId, setCustomerId] = useState('')
- const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED' | ''>('PENDING')
+ const [searchParams, setSearchParams] = useSearchParams()
+
+ const customerId = searchParams.get('user') ?? ''
+ const statusParam = searchParams.get('status')
+
+ const activeTab: TicketStatus = (() => {
+ if (statusParam && (VALID_STATUSES as readonly string[]).includes(statusParam)) {
+ return statusParam as (typeof VALID_STATUSES)[number]
+ }
+ // Customer deep-link without status → show all statuses for that user
+ if (customerId && !statusParam) return ''
+ return 'PENDING'
+ })()
+
+ const page = Math.max(1, parseInt(searchParams.get('page') || '1', 10) || 1)
const getTicket = useGetTickets(activeTab, customerId, page)
+ // Keep status & page in the URL (replace so back button is not polluted)
useEffect(() => {
- const urlCustomerId = searchParams.get('user')
- if (urlCustomerId) {
- setCustomerId(urlCustomerId)
- setActiveTab('')
- }
- }, [searchParams])
+ const next = new URLSearchParams(searchParams)
+ let changed = false
+ if (!statusParam && !customerId) {
+ next.set('status', 'PENDING')
+ changed = true
+ }
+
+ if (!searchParams.get('page')) {
+ next.set('page', String(page))
+ changed = true
+ }
+
+ if (changed) {
+ setSearchParams(next, { replace: true })
+ }
+ }, [customerId, page, searchParams, setSearchParams, statusParam])
+
+ const updateParams = (updates: { status?: string; page?: number }) => {
+ const next = new URLSearchParams(searchParams)
+
+ if (updates.status !== undefined) {
+ if (updates.status === '') next.delete('status')
+ else next.set('status', updates.status)
+ }
+
+ if (updates.page !== undefined) {
+ next.set('page', String(Math.max(1, updates.page)))
+ }
+
+ setSearchParams(next)
+ }
return (
@@ -75,7 +115,7 @@ const TicketList: FC = () => {
value: 'CLOSED'
},
]}
- onChange={(value) => setActiveTab(value as 'ANSWERED' | 'PENDING' | 'CLOSED')}
+ onChange={(value) => updateParams({ status: value, page: 1 })}
/>
@@ -135,7 +175,7 @@ const TicketList: FC = () => {
updateParams({ page: newPage })}
totalPages={getTicket.data?.data?.pager?.totalPages}
/>
@@ -143,4 +183,4 @@ const TicketList: FC = () => {
)
}
-export default TicketList
\ No newline at end of file
+export default TicketList
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index e7ff639..4b08f0e 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -1,18 +1,4 @@
-import {
- Box,
- Category,
- DocumentLike,
- Headphone,
- Home,
- Logout,
- Money3,
- Profile,
- Profile2User,
- Setting2,
- TickSquare,
- UserOctagon,
- UserTick,
-} from "iconsax-react";
+import { Box, Category, DocumentLike, Headphone, Home, Logout, Money3, Profile, Profile2User, Setting2, TickSquare, UserOctagon, UserTick } from "iconsax-react";
import { FC, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
@@ -133,6 +119,21 @@ const SideBar: FC = () => {
activeName=""
/>
+
+ }
+ title={t("sidebar.support_section")}
+ isActive={isGroupActive("support")}
+ link={Pages.ticket.list}
+ name="support"
+ activeNames={SUPPORT_PERMISSION_RESOURCES}
+ />
+
{
activeNames={FINANCIAL_PERMISSION_RESOURCES}
/>
-
- }
- title={t("sidebar.support_section")}
- isActive={isGroupActive("support")}
- link={Pages.support.list}
- name="support"
- activeNames={SUPPORT_PERMISSION_RESOURCES}
- />
-
{profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (
{