Adding Status and UI implementation in Collection.

src/components/collections/CollectionList.jsx

@@ -27,7 +27,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
 
   const selectedProject = useSelectedProject();
   const searchDebounce = useDebounce(searchString, 500);
-  
+
   const { data, isLoading, isError, error } = useCollections(
     selectedProject,
     searchDebounce,
@@ -40,7 +40,6 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
   );
   const { setProcessedPayment, setAddPayment, setViewCollection } =
     useCollectionContext();
-
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
@@ -129,6 +128,16 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
       ),
       align: "text-end",
     },
+    {
+      key: "status",
+      label: "Status",
+      getValue: (col) => (
+        <span className={`badge bg-label-${col?.isActive ? "primary" : "danger"}`}>
+          {col?.isActive ? "Active" : "Inactive"}
+        </span>
+      ),
+      align: "text-center",
+    },
     {
       key: "balance",
       label: "Balance",

src/components/collections/ViewCollection.jsx

@@ -25,7 +25,6 @@ const ViewCollection = ({ onClose }) => {
 
   if (isLoading) return <CollectionDetailsSkeleton />;
   if (isError) return <div>{error.message}</div>;
-
   return (
     <div className="container p-3">
       <p className="fs-5 fw-semibold">Collection Details</p>
@@ -43,9 +42,8 @@ const ViewCollection = ({ onClose }) => {
           <div>
             {" "}
             <span
-              className={`badge bg-label-${
-                data?.isActive ? "primary" : "danger"
-              }`}
+              className={`badge bg-label-${data?.isActive ? "primary" : "danger"
+                }`}
             >
               {data?.isActive ? "Active" : "Inactive"}
             </span>
@@ -214,9 +212,8 @@ const ViewCollection = ({ onClose }) => {
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
               <button
-                className={`nav-link ${
-                  activeTab === "payments" ? "active" : ""
-                }`}
+                className={`nav-link ${activeTab === "payments" ? "active" : ""
+                  }`}
                 onClick={() => setActiveTab("payments")}
                 type="button"
               >
@@ -225,9 +222,8 @@ const ViewCollection = ({ onClose }) => {
             </li>
             <li className="nav-item">
               <button
-                className={`nav-link ${
-                  activeTab === "details" ? "active" : ""
-                }`}
+                className={`nav-link ${activeTab === "details" ? "active" : ""
+                  }`}
                 onClick={() => setActiveTab("details")}
                 type="button"
               >

src/pages/collections/CollectionPage.jsx

@@ -118,32 +118,33 @@ const CollectionPage = () => {
         <div className="card my-3 py-2 px-sm-4 px-2">
           <div className="row align-items-center mx-0">
             {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
-            <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start align-md-items-center gap-2 gap-md-3 mb-3 mb-md-0">
-              <FormProvider {...methods}>
-                <DateRangePicker1 howManyDay={180} startField="fromDate"
-                  endField="toDate" />
-              </FormProvider>
-
-              <div className="form-check form-switch d-flex align-items-center mt-1">
-                <input
-                  type="checkbox"
-                  className="form-check-input"
-                  role="switch"
-                  id="inactiveEmployeesCheckbox"
-                  checked={showPending}
-                  onChange={(e) => setShowPending(e.target.checked)}
-                />
-                <label
-                  className="form-check-label ms-2"
-                  htmlFor="inactiveEmployeesCheckbox"
+            <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start">
+              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${!showPending ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowPending(false)}
                 >
-                  Show Completed Collections
-                </label>
+                  All
+                </button>
+                <button
+                  type="button"
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${showPending ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowPending(true)}
+                >
+                  Pending
+                </button>
               </div>
             </div>
 
             {/* Right side: Search + Add Button */}
             <div className="col-12 col-sm-6 d-flex justify-content-end align-items-center gap-2">
+              <FormProvider {...methods}>
+                <DateRangePicker1 howManyDay={180} startField="fromDate"
+                  endField="toDate" />
+              </FormProvider>
               <input
                 type="search"
                 value={searchText}