Revamp Asset Create/Update Workflow using ShadCN, React-Hook-Form, and TanStack Query

package.json

@@ -56,6 +56,7 @@
     "@googlemaps/typescript-guards": "^2.0.3",
     "@headlessui/react": "^2.2.0",
     "@hello-pangea/dnd": "^17.0.0",
+    "@hookform/resolvers": "^3.9.1",
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -64,7 +65,9 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@sentry/browser": "^8.45.1",
@@ -80,6 +83,7 @@
     "cmdk": "^1.0.4",
     "cross-env": "^7.0.3",
     "cypress": "^13.17.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
@@ -88,16 +92,20 @@
     "i18next": "^23.16.4",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
+    "lucide-react": "^0.469.0",
     "postcss-loader": "^8.1.1",
     "qrcode.react": "^4.1.0",
     "raviger": "^4.1.2",
     "react": "18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "^9.4.4",
     "react-dom": "18.3.1",
     "react-google-recaptcha": "^3.1.0",
+    "react-hook-form": "^7.54.2",
     "react-i18next": "^15.1.3",
     "react-infinite-scroll-component": "^6.1.0",
     "react-pdf": "^9.2.1",
+    "react-phone-number-input": "^3.4.10",
     "react-webcam": "^7.2.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
@@ -152,7 +160,7 @@
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-static-copy": "^2.0.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "browserslist": {
     "production": [

src/components/Common/AssetLocationSelect.tsx

@@ -0,0 +1,82 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import routes from "@/Utils/request/api";
+import useTanStackQueryInstead from "@/Utils/request/useQuery";
+
+interface LocationSelectProps {
+  name: string;
+  disabled?: boolean;
+  margin?: string;
+  errors?: string;
+  className?: string;
+  searchAll?: boolean;
+  multiple?: boolean;
+  facilityId: string;
+  showAll?: boolean;
+  selected: string | string[] | null;
+  setSelected: (selected: string | string[] | null) => void;
+  errorClassName?: string;
+  bedIsOccupied?: boolean;
+  disableOnOneOrFewer?: boolean;
+}
+
+export const LocationSelect = (props: LocationSelectProps) => {
+  const { data, loading } = useTanStackQueryInstead(
+    routes.listFacilityAssetLocation,
+    {
+      query: {
+        limit: 14,
+        bed_is_occupied:
+          props.bedIsOccupied === undefined ? undefined : !props.bedIsOccupied,
+      },
+      pathParams: {
+        facility_external_id: props.facilityId,
+      },
+      prefetch: props.facilityId !== undefined,
+    },
+  );
+
+  if (props.disableOnOneOrFewer && data && data.count <= 1) {
+    props = { ...props, disabled: true };
+  }
+
+  const handleSelectChange = (value: string) => {
+    props.setSelected(value);
+  };
+  console.log("Selected", props.selected);
+  return (
+    <div className={props.className}>
+      <Select
+        disabled={props.disabled || loading}
+        onValueChange={handleSelectChange}
+        value={props.selected as string}
+      >
+        <SelectTrigger className={props.errorClassName}>
+          <SelectValue placeholder="Search by location name">
+            {data?.results?.find((option) => option.id === props.selected)
+              ?.name || "Search by location name"}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {data?.results?.length ? (
+            data.results.map((option: { id: string; name: string }) => (
+              <SelectItem key={option.id} value={option.id}>
+                {option.name}
+              </SelectItem>
+            ))
+          ) : (
+            <SelectItem disabled value="No options available">
+              {loading ? "Loading..." : "No options available"}
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};