changed segment button radio

src/components/Documents/DocumentFilterPanel.jsx

@@ -53,10 +53,15 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
   };
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Error: {error?.message || "Something went wrong!"}</div>;
+  if (isError)
+    return <div>Error: {error?.message || "Something went wrong!"}</div>;
 
-  const { uploadedBy = [], documentCategory = [], documentType = [], documentTag = [] } =
+  const {
-    data?.data || {};
+    uploadedBy = [],
+    documentCategory = [],
+    documentType = [],
+    documentTag = [],
+  } = data?.data || {};
 
   return (
     <FormProvider {...methods}>
@@ -129,36 +134,53 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
         </div>
 
         {/* Status Filter */}
-        <div className="text-start d-flex align-items-center my-2">
+        <div className="text-start my-2">
-          <label className="form-label me-2 my-0">Choose Status:</label>
+          <label className="form-label d-block mb-2">Choose Status:</label>
-          <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+          <div className="d-flex gap-4">
-            <button
+            <label className="switch switch-sm">
-              type="button"
+              <input
-              className={`btn px-2 py-1 rounded-0 text-tiny ${
+                type="radio"
-                isVerified === null ? "active btn-primary text-white" : "text-primary"
+                className="switch-input"
-              }`}
+                name="isVerified"
-              onClick={() => setValue("isVerified", null)}
+                checked={isVerified === null}
-            >
+                onChange={() => setValue("isVerified", null)}
-              All
+              />
-            </button>
+              <span className="switch-toggle-slider">
-            <button
+                <span className="switch-on"></span>
-              type="button"
+                <span className="switch-off"></span>
-              className={`btn px-2 py-1 rounded-0 text-tiny ${
+              </span>
-                isVerified === true ? "active btn-success text-white" : "text-success"
+              <span className="switch-label">All</span>
-              }`}
+            </label>
-              onClick={() => setValue("isVerified", true)}
+
-            >
+            <label className="switch switch-sm">
-              Verified
+              <input
-            </button>
+                type="radio"
-            <button
+                className="switch-input"
-              type="button"
+                name="isVerified"
-              className={`btn px-2 py-1 rounded-0 text-tiny ${
+                checked={isVerified === true}
-                isVerified === false ? "active btn-danger text-white" : "text-danger"
+                onChange={() => setValue("isVerified", true)}
-              }`}
+              />
-              onClick={() => setValue("isVerified", false)}
+              <span className="switch-toggle-slider">
-            >
+                <span className="switch-on"></span>
-              Rejected
+                <span className="switch-off"></span>
-            </button>
+              </span>
+              <span className="switch-label">Verified</span>
+            </label>
+
+            <label className="switch switch-sm">
+              <input
+                type="radio"
+                className="switch-input"
+                name="isVerified"
+                checked={isVerified === false}
+                onChange={() => setValue("isVerified", false)}
+              />
+              <span className="switch-toggle-slider">
+                <span className="switch-on"></span>
+                <span className="switch-off"></span>
+              </span>
+              <span className="switch-label">Rejected</span>
+            </label>
           </div>
         </div>