Filtered done ticket out of the view

src/pages/tickets.tsx

@@ -68,16 +68,40 @@ const SOURCE_OPTIONS = [
 	{value: "platform", label: "Platform"},
 ];
 
+type CustomStatus = TicketStatus | "all" | "pending";
+
+const STATUS_OPTIONS = [{
+	label: 'Pending',
+	value: 'pending',
+	filter: (x: Ticket) => x.status !== 'completed',
+}, {
+	label: 'All',
+	value: 'all',
+	filter: (x: Ticket) => true,
+}, {
+	label: 'Completed',
+	value: 'completed',
+	filter: (x: Ticket) => x.status === 'completed',
+}, {
+	label: 'In Progress',
+	value: 'in-progress',
+	filter: (x: Ticket) => x.status === 'in-progress',
+}, {
+	label: 'Submitted',
+	value: 'submitted',
+	filter: (x: Ticket) => x.status === 'submitted',
+}]
+
 export default function Tickets() {
 	const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
 	const [selectedTicket, setSelectedTicket] = useState<Ticket>();
 	const [assigneeFilter, setAssigneeFilter] = useState<string>();
 	const [sourceFilter, setSourceFilter] = useState<Source>("");
-
+	// const [statusFilter, setStatusFilter] = useState<CustomStatus>('pending');
 	const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
 
 	const [typeFilter, setTypeFilter] = useState<TicketType>();
-	const [statusFilter, setStatusFilter] = useState<TicketStatus>();
+	const [statusFilter, setStatusFilter] = useState<CustomStatus>('pending');
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
@@ -91,7 +115,10 @@ export default function Tickets() {
 		const filters = [];
 		if (user?.type === "agent") filters.push((x: Ticket) => x.assignedTo === user.id);
 		if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
-		if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
+		if (statusFilter) {
+			const filter = STATUS_OPTIONS.find(x => x.value === statusFilter)?.filter;
+			if (filter) filters.push(filter);
+		}
 		if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
 		if (sourceFilter) {
 			if (sourceFilter === "webpage") filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
@@ -214,17 +241,9 @@ export default function Tickets() {
 						<div className="flex w-full flex-col gap-3">
 							<label className="text-mti-gray-dim text-base font-normal">Status</label>
 							<Select
-								options={Object.keys(TicketStatusLabel).map((x) => ({
+								options={STATUS_OPTIONS}
-									value: x,
-									label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
-								}))}
 								value={
-									statusFilter
+									STATUS_OPTIONS.find((x) => x.value === statusFilter)
-										? {
-												value: statusFilter,
-												label: TicketStatusLabel[statusFilter],
-										  }
-										: undefined
 								}
 								onChange={(value) => setStatusFilter((value?.value as TicketStatus) ?? undefined)}
 								isClearable