diff --git a/src/components/Resource/ResourceFilter.tsx b/src/components/Resource/ResourceFilter.tsx
deleted file mode 100644
index e161fcf819a..00000000000
--- a/src/components/Resource/ResourceFilter.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import dayjs from "dayjs";
-
-import FiltersSlideover from "@/CAREUI/interactive/FiltersSlideover";
-
-import CircularProgress from "@/components/Common/CircularProgress";
-import { DateRange } from "@/components/Common/DateRangeInputV2";
-import { FacilitySelect } from "@/components/Common/FacilitySelect";
-import DateRangeFormField from "@/components/Form/FormFields/DateRangeFormField";
-import { FieldLabel } from "@/components/Form/FormFields/FormField";
-import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-
-import useMergeState from "@/hooks/useMergeState";
-
-import { RESOURCE_FILTER_ORDER } from "@/common/constants";
-import { RESOURCE_CHOICES } from "@/common/constants";
-
-import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { dateQueryString } from "@/Utils/utils";
-
-const getDate = (value: any) =>
- value && dayjs(value).isValid() && dayjs(value).toDate();
-
-export default function ListFilter(props: any) {
- const { filter, onChange, closeFilter, removeFilters } = props;
- const [filterState, setFilterState] = useMergeState({
- origin_facility: filter.origin_facility || null,
- origin_facility_ref: null,
- approving_facility: filter.approving_facility || null,
- approving_facility_ref: null,
- assigned_facility: filter.assigned_facility || null,
- assigned_facility_ref: null,
- emergency: filter.emergency || null,
- created_date_before: filter.created_date_before || null,
- created_date_after: filter.created_date_after || null,
- modified_date_before: filter.modified_date_before || null,
- modified_date_after: filter.modified_date_after || null,
- ordering: filter.ordering || null,
- status: filter.status || null,
- });
-
- const { loading: orginFacilityLoading } = useTanStackQueryInstead(
- routes.getAnyFacility,
- {
- prefetch: filter.origin_facility !== undefined,
- pathParams: { id: filter.origin_facility },
- onResponse: ({ res, data }) => {
- if (res && data) {
- setFilterState({
- origin_facility_ref: filter.origin_facility === "" ? "" : data,
- });
- }
- },
- },
- );
-
- const { loading: resourceFacilityLoading } = useTanStackQueryInstead(
- routes.getAnyFacility,
- {
- prefetch: filter.approving_facility !== undefined,
- pathParams: { id: filter.approving_facility },
- onResponse: ({ res, data }) => {
- if (res && data) {
- setFilterState({
- approving_facility_ref:
- filter.approving_facility === "" ? "" : data,
- });
- }
- },
- },
- );
-
- const setFacility = (selected: any, name: string) => {
- setFilterState({
- ...filterState,
- [`${name}_ref`]: selected,
- [name]: (selected || {}).id,
- });
- };
-
- const handleChange = (e: FieldChangeEvent
) => {
- setFilterState({ ...filterState, [e.name]: e.value });
- };
-
- const applyFilter = () => {
- const {
- origin_facility,
- approving_facility,
- assigned_facility,
- emergency,
- created_date_before,
- created_date_after,
- modified_date_before,
- modified_date_after,
- ordering,
- status,
- } = filterState;
- const data = {
- origin_facility: origin_facility || "",
- approving_facility: approving_facility || "",
- assigned_facility: assigned_facility || "",
- emergency: emergency || "",
- created_date_before: dateQueryString(created_date_before),
- created_date_after: dateQueryString(created_date_after),
- modified_date_before: dateQueryString(modified_date_before),
- modified_date_after: dateQueryString(modified_date_after),
- ordering: ordering || "",
- status: status || "",
- };
- onChange(data);
- };
-
- const handleDateRangeChange = (event: FieldChangeEvent) => {
- const filterData = { ...filterState };
- filterData[`${event.name}_after`] = event.value.start?.toString();
- filterData[`${event.name}_before`] = event.value.end?.toString();
- setFilterState(filterData);
- };
-
- return (
- {
- removeFilters();
- closeFilter();
- }}
- >
- {props.showResourceStatus && (
- option.text}
- optionValue={(option) => option.text}
- onChange={handleChange}
- placeholder="Show all"
- errorClassName="hidden"
- />
- )}
-
-
- Origin facility
- {orginFacilityLoading && filter.origin_facility ? (
-
- ) : (
- setFacility(obj, "origin_facility")}
- className="resource-page-filter-dropdown"
- errors={""}
- />
- )}
-
-
-
- Request approving facility
- {filter.approving_facility && resourceFacilityLoading ? (
-
- ) : (
- setFacility(obj, "approving_facility")}
- className="resource-page-filter-dropdown"
- errors={""}
- />
- )}
-
-
- option.desc}
- optionValue={(option) => option.text}
- onChange={handleChange}
- placeholder="None"
- errorClassName="hidden"
- />
-
- option}
- optionValue={(option) => option}
- onChange={handleChange}
- placeholder="Show all"
- errorClassName="hidden"
- />
-
-
-
-
- );
-}
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index a754455b772..acf363305ac 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -1,285 +1,304 @@
+import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
import { Link } from "raviger";
-import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
import CareIcon from "@/CAREUI/icons/CareIcon";
-import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ExportButton } from "@/components/Common/Export";
-import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
-import SearchInput from "@/components/Form/SearchInput";
-import BadgesList from "@/components/Resource/ResourceBadges";
-import { formatFilter } from "@/components/Resource/ResourceCommons";
-import ListFilter from "@/components/Resource/ResourceFilter";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
import useFilters from "@/hooks/useFilters";
+import {
+ RESOURCE_CATEGORY_CHOICES,
+ RESOURCE_STATUS_CHOICES,
+} from "@/common/constants";
+
import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { useView } from "@/Utils/useView";
-import { formatDateTime } from "@/Utils/utils";
+import query from "@/Utils/request/query";
+import { PaginatedResponse } from "@/Utils/request/types";
import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
-export default function ListView() {
- const [, setView] = useView("resource", "list");
- const {
- qParams,
- Pagination,
- FilterBadges,
- advancedFilter,
- resultsPerPage,
- updateQuery,
- } = useFilters({ cacheBlacklist: ["title"], limit: 12 });
+const COMPLETED = ["completed", "rejected", "cancelled"];
+const ACTIVE = RESOURCE_STATUS_CHOICES.map((o) => o.text).filter(
+ (o) => !COMPLETED.includes(o),
+);
- const { t } = useTranslation();
+function EmptyState() {
+ return (
+
+
+
+
+ {t("no_resources_found")}
+
+ {t("adjust_resource_filters")}
+
+
+ );
+}
- const appliedFilters = formatFilter(qParams);
+export default function ResourceList() {
+ const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
+ limit: 15,
+ cacheBlacklist: ["title"],
+ });
+ const { status, title } = qParams;
- const { loading, data, refetch } = useTanStackQueryInstead(
- routes.listResourceRequests,
+ const searchOptions = [
{
- query: formatFilter({
- ...qParams,
- limit: resultsPerPage,
- offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
- }),
+ key: "title",
+ label: "Title",
+ type: "text" as const,
+ placeholder: t("search_by_resource_title"),
+ value: title || "",
},
- );
+ ];
- const showResourceCardList = (data: ResourceRequest[]) => {
- if (data && !data.length) {
- return (
-
- {t("no_results_found")}
-
- );
- }
+ const isActive = !status || !COMPLETED.includes(status);
+ const currentStatuses = isActive ? ACTIVE : COMPLETED;
- return data.map((resource: ResourceRequest, i) => (
-
-
-
+ // Set default status based on active/completed tab
+ const defaultStatus = isActive ? "pending" : "completed";
+ const currentStatus = status || defaultStatus;
-
-
-
-
-
- {resource.category || ""}
-
-
-
-
+ const { data: queryResources, isLoading } = useQuery<
+ PaginatedResponse
+ >({
+ queryKey: ["resources", qParams],
+ queryFn: query.debounced(routes.listResourceRequests, {
+ queryParams: {
+ status: currentStatus,
+ title,
+ limit: resultsPerPage,
+ offset: ((qParams.page || 1) - 1) * resultsPerPage,
+ },
+ }),
+ });
-
-
- {resource.status === "TRANSPORTATION TO BE ARRANGED" ? (
-
-
-
-
-
- {t(`${resource.status}`)}
-
-
- ) : (
-
-
-
-
-
- {t(`${resource.status}`)}
-
-
- )}
+ const resources = queryResources?.results || [];
-
- {resource.emergency && (
-
- {t("emergency")}
-
- )}
+ return (
+
+
+
+
+
+
+
+
+
+
+ event.preventDefault()}
+ >
+
+
+ {t("search_resource")}
+
+
+ updateQuery({
+ status: currentStatus,
+ title: undefined,
+ })
+ }
+ onSearch={(key, value) =>
+ updateQuery({
+ status: currentStatus,
+ [key]: value || undefined,
+ })
+ }
+ className="w-full border-none shadow-none"
+ />
+
+
+
-
-
-
-
-
- {formatDateTime(resource.modified_date) || "--"}
-
-
+
+
+
+
+ updateQuery({
+ status: "pending",
+ title,
+ })
+ }
+ >
+ {t("active")}
+
+
+ updateQuery({
+ status: "completed",
+ title,
+ })
+ }
+ >
+ {t("completed")}
+
+
+
+
-
-
-
-
-
-
- {resource.origin_facility?.name}
-
-
-
-
-
- {resource.approving_facility?.name}
-
-
+
-
-
-
- {resource.assigned_facility?.name || t("yet_to_be_decided")}
-
-
-
-
-
-
{t("all_details")}
-
+
+
+
+ {currentStatuses.map((statusOption) => (
+
+ updateQuery({
+ status: statusOption,
+ title,
+ })
+ }
+ >
+ o.text === statusOption,
+ )?.icon || "l-folder-open"
+ }
+ className="mr-2 h-4 w-4"
+ />
+ {t(`resource_status__${statusOption}`)}
+
+ ))}
+
+
+
-
- updateQuery({ [e.name]: e.value })}
- placeholder={t("search_resource")}
- />
-
-
-
-
-
advancedFilter.setShow(true)}
- />
-
- {loading ? (
-
- ) : (
-
-
-
+
+ {isLoading ? (
+
+ ) : resources.length === 0 ? (
+
+
-
-
- {t("resource")}
-
-
- {t("LOG_UPDATE_FIELD_LABEL__patient_category")}
-
-
- {t("consent__status")}
-
-
- {t("facilities")}
-
-
- {t("LOG_UPDATE_FIELD_LABEL__action")}
-
-
-
{showResourceCardList(data?.results || [])}
-
-
- )}
+ ) : (
+ <>
+ {resources.map((resource: ResourceRequest) => (
+
+
+
+
+ {resource.title}
+
+
+
+ {resource.reason}
+
+
+
+
+
+ {resource.emergency && (
+
+ {t("emergency")}
+
+ )}
+
+ {
+ RESOURCE_CATEGORY_CHOICES.find(
+ (o) => o.id === resource.category,
+ )?.text
+ }
+
+
+
+
+ View Details
+
+
+
+ ))}
+ {queryResources?.count &&
+ queryResources.count > resultsPerPage && (
+
+ )}
+
+ )}
+
-
);
}