From 75832b7862fe10a2deb38390e7e4f7f84f7c35ff Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Wed, 5 Feb 2025 07:20:51 +0530
Subject: [PATCH 1/4] resource filters in mobile view

---
 src/components/Resource/ResourceList.tsx | 82 +++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 1 deletion(-)

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 1ba35b0effe..88a0c5893a8 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -21,6 +21,13 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -52,7 +59,7 @@ function EmptyState() {
         <CareIcon icon="l-folder-open" className="h-6 w-6 text-primary" />
       </div>
       <h3 className="text-lg font-semibold mb-1">{t("no_resources_found")}</h3>
-      <p className="text-sm text-gray-500 mb-4">
+      <p className="text-sm text-muted-foreground mb-4">
         {t("adjust_resource_filters")}
       </p>
     </Card>
@@ -191,6 +198,79 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                     </TabsList>
                   </Tabs>
                 </div>
+                {/* Mobile View - Select Component */}
+                <div className="md:hidden ">
+                  <Select
+                    value={outgoing ? "outgoing" : "incoming"}
+                    onValueChange={(value) =>
+                      updateQuery({
+                        outgoing: value === "outgoing",
+                        title,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-8 w-[120px]">
+                      <SelectValue placeholder={t("Type")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="outgoing">{t("outgoing")}</SelectItem>
+                      <SelectItem value="incoming">{t("incoming")}</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="md:hidden">
+                  <Select
+                    value={isActive ? "active" : "completed"}
+                    onValueChange={(value) =>
+                      updateQuery({
+                        status: value === "active" ? "pending" : "completed",
+                        title,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-8 w-[120px]">
+                      <SelectValue placeholder={t("Status")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="active">{t("active")}</SelectItem>
+                      <SelectItem value="completed">
+                        {t("completed")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="md:hidden">
+                  <Select
+                    value={currentStatus}
+                    onValueChange={(value) =>
+                      updateQuery({
+                        status: value,
+                        title,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-8 w-[120px]">
+                      <SelectValue placeholder={t("Status")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {currentStatuses.map((statusOption) => (
+                        <SelectItem key={statusOption} value={statusOption}>
+                          <div className="flex items-center">
+                            <CareIcon
+                              icon={
+                                RESOURCE_STATUS_CHOICES.find(
+                                  (o) => o.text === statusOption,
+                                )?.icon || "l-folder-open"
+                              }
+                              className="mr-2 h-4 w-4"
+                            />
+                            {t(`resource_status__${statusOption}`)}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
 
               <div className="hidden md:flex items-center">

From 50bcb8d0b4c9d5c22a6e0dd13646c780e1d7840d Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Wed, 5 Feb 2025 07:42:51 +0530
Subject: [PATCH 2/4] =?UTF-8?q?Trigger=C2=A0Build?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From c816ee9e82029f92a93fe355c12e57a65db9d0a5 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 6 Feb 2025 10:55:46 +0530
Subject: [PATCH 3/4] resource filters mobile view

---
 src/components/Resource/ResourceList.tsx | 94 ++----------------------
 1 file changed, 7 insertions(+), 87 deletions(-)

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 88a0c5893a8..5336c762b63 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -21,13 +21,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -165,12 +158,12 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                     </div>
                   </PopoverContent>
                 </Popover>
-                <div className="hidden md:flex items-center">
+                <div className="flex flex-wrap items-center gap-2">
                   <Tabs
                     value={outgoing ? "outgoing" : "incoming"}
                     className="w-full"
                   >
-                    <TabsList className="bg-transparent p-0 h-8">
+                    <TabsList className="bg-transparent p-0 h-8 flex justify-around">
                       <TabsTrigger
                         value="outgoing"
                         className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
@@ -198,87 +191,14 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                     </TabsList>
                   </Tabs>
                 </div>
-                {/* Mobile View - Select Component */}
-                <div className="md:hidden ">
-                  <Select
-                    value={outgoing ? "outgoing" : "incoming"}
-                    onValueChange={(value) =>
-                      updateQuery({
-                        outgoing: value === "outgoing",
-                        title,
-                      })
-                    }
-                  >
-                    <SelectTrigger className="h-8 w-[120px]">
-                      <SelectValue placeholder={t("Type")} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="outgoing">{t("outgoing")}</SelectItem>
-                      <SelectItem value="incoming">{t("incoming")}</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="md:hidden">
-                  <Select
-                    value={isActive ? "active" : "completed"}
-                    onValueChange={(value) =>
-                      updateQuery({
-                        status: value === "active" ? "pending" : "completed",
-                        title,
-                      })
-                    }
-                  >
-                    <SelectTrigger className="h-8 w-[120px]">
-                      <SelectValue placeholder={t("Status")} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="active">{t("active")}</SelectItem>
-                      <SelectItem value="completed">
-                        {t("completed")}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="md:hidden">
-                  <Select
-                    value={currentStatus}
-                    onValueChange={(value) =>
-                      updateQuery({
-                        status: value,
-                        title,
-                      })
-                    }
-                  >
-                    <SelectTrigger className="h-8 w-[120px]">
-                      <SelectValue placeholder={t("Status")} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {currentStatuses.map((statusOption) => (
-                        <SelectItem key={statusOption} value={statusOption}>
-                          <div className="flex items-center">
-                            <CareIcon
-                              icon={
-                                RESOURCE_STATUS_CHOICES.find(
-                                  (o) => o.text === statusOption,
-                                )?.icon || "l-folder-open"
-                              }
-                              className="mr-2 h-4 w-4"
-                            />
-                            {t(`resource_status__${statusOption}`)}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
               </div>
 
-              <div className="hidden md:flex items-center">
+              <div className="lex flex-wrap items-center gap-2">
                 <Tabs
                   value={isActive ? "active" : "completed"}
                   className="w-full"
                 >
-                  <TabsList className="bg-transparent p-0 h-8">
+                  <TabsList className="bg-transparent p-0 h-8 flex justify-around">
                     <TabsTrigger
                       value="active"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
@@ -308,11 +228,11 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
               </div>
             </div>
 
-            <Separator className="hidden md:block" />
+            <Separator />
 
-            <div className="hidden md:block p-4">
+            <div className="p-4 h-auto overflow-hidden">
               <Tabs value={currentStatus} className="w-full">
-                <TabsList className="bg-transparent p-0 h-8">
+                <TabsList className="bg-transparent p-0 h-auto flex-wrap justify-start gap-y-2 overflow-auto">
                   {currentStatuses.map((statusOption) => (
                     <TabsTrigger
                       key={statusOption}

From 38177bf0f8d97a630e4afab4a96ce19d7c99aacf Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Mon, 10 Feb 2025 19:29:09 +0530
Subject: [PATCH 4/4] correct classNames

---
 src/components/Resource/ResourceList.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 9538115db6c..bacd5c06e2d 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -52,7 +52,7 @@ function EmptyState() {
         <CareIcon icon="l-folder-open" className="h-6 w-6 text-primary" />
       </div>
       <h3 className="text-lg font-semibold mb-1">{t("no_resources_found")}</h3>
-      <p className="text-sm text-muted-foreground mb-4">
+      <p className="text-sm text-gray-500 mb-4">
         {t("adjust_resource_filters")}
       </p>
     </Card>
@@ -167,12 +167,12 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                     </div>
                   </PopoverContent>
                 </Popover>
-                <div className="flex flex-wrap items-center gap-2">
+                <div className="items-center">
                   <Tabs
                     value={outgoing ? "outgoing" : "incoming"}
                     className="w-full"
                   >
-                    <TabsList className="bg-transparent p-0 h-8 flex justify-around">
+                    <TabsList className="bg-transparent p-0 h-8">
                       <TabsTrigger
                         value="outgoing"
                         className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
@@ -202,12 +202,12 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
                 </div>
               </div>
 
-              <div className="lex flex-wrap items-center gap-2">
+              <div className="items-center">
                 <Tabs
                   value={isActive ? "active" : "completed"}
                   className="w-full"
                 >
-                  <TabsList className="bg-transparent p-0 h-8 flex justify-around">
+                  <TabsList className="bg-transparent p-0 h-8">
                     <TabsTrigger
                       value="active"
                       className="data-[state=active]:bg-primary/10 data-[state=active]:text-primary"