interest stats API added

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -34,6 +34,8 @@ export default function ManageInterestOffer(props) {
 
     const [messageList, setMessageList] = useState({loading: true, data: []}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
 
+    const [interestStats, setInterestStats] = useState({loading: true, data: []}) // STATE TO HOLD INTEREST STATS
+
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
@@ -128,6 +130,20 @@ export default function ManageInterestOffer(props) {
             console.log('Failed', err)
         })
     },[messageListReload])
+
+    useEffect(()=>{ //API to get Interest stats
+        let reqData = { // API PAYLOADS
+            interest_uid: props?.offerDetails?.interest_uid,
+            client_uid: props?.offerDetails?.client_uid
+        }
+        setInterestStats(prev => ({...prev, loading: true}))
+        apiCall.interestStatistics(reqData).then(res=>{
+            setInterestStats({loading: false, data:res?.data})
+        }).catch(err => {
+            setInterestStats(prev => ({...prev, loading: false}))
+            console.log('Failed', err)
+        })
+    },[])
     return (
         <Layout>
             <CommonHead
@@ -225,30 +241,44 @@ export default function ManageInterestOffer(props) {
                                                 </span>
                                             </div>
                                         </div>
-                                        <div className="my-3 flex items-center gap-1">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_completed ? props.offerDetails?.client_jobs_completed :0}</span>
-                                        </div>
-                                        <div className="my-0 md:my-3 block md:flex items-center gap-10">
-                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_active ? props.offerDetails?.client_jobs_active:0}</span>
-                                            </div>
-                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_missed ? props.offerDetails?.client_jobs_missed:0}</span>
-                                            </div>
-                                        </div>
-                                        <div className="block md:flex items-center gap-10">
-                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_percent_completion ? props.offerDetails?.client_percent_completion:0}</span>
-                                            </div>
-                                            <div className="flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_offers_pending ? props.offerDetails?.client_offers_pending:0}</span>
-                                            </div>
-                                        </div>
+                                        <>
+                                        {interestStats.loading ?
+                                            <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
+                                            :
+                                            <>
+                                                <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                                    <div className='my-3 md:my-0 flex items-center gap-1'>  
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</span>
+                                                    </div>
+                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Last Job completed</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</span>
+                                                    </div>
+                                                </div>
+                                                <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</span>
+                                                    </div>
+                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</span>
+                                                    </div>
+                                                </div>
+                                                <div className="block md:flex items-center gap-10">
+                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</span>
+                                                    </div>
+                                                    <div className="flex items-center gap-1">
+                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
+                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</span>
+                                                    </div>
+                                                </div>
+                                            </>
+                                        }
+                                        </>
                                     </div>
                                     : tab == 'message' ?
                                     <div className="message-details w-full border-t">

src/components/Settings/index.jsx

@@ -203,7 +203,7 @@ export default function Settings({ faq }) {
               </div>
               <div className="content-body w-full lg:flex lg:px-10 px-4">
                 <div className="content-tab-items lg:w-[230px] w-full mr-2">
-                  <ul className="overflow-hidden mb-10 lg:mb-0 flex flex-col sm:block lg:flex-col">
+                  <ul className="overflow-hidden mb-10 lg:mb-0">
                     {tabs.map(({ name, id, title, iconName }) => (
                       <li
                         onClick={() => tabHandler(name)}

src/lib/apiConst.js

@@ -188,6 +188,8 @@ export const apiConst = {
     WRENCHBOARD_JOB_JOBGROUPADD:  13046,
     WRENCHBOARD_JOB_REPORT:  13047,
 
+    WRENCHBOARD_INTEREST_STATS:  13048,
+
     WRENCHBOARD_GROUP_START: 12000,
     WRENCHBOARD_GROUP_CREATEGROUP: 12010,
     WRENCHBOARD_GROUP_INVITEGROUP: 12015,

src/services/UsersService.js

@@ -1112,6 +1112,18 @@ class usersService {
     return this.postAuxEnd("/offerinterestlistmsg", postData);
   }
 
+  // END POINT TO GET INTEREST STATS
+  interestStatistics(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_INTEREST_STATS,
+      ...reqData,
+    };
+    return this.postAuxEnd("/intereststats", postData);
+  }
+
   // TO ADD FAMILY
   addFamily(reqData) {
     var postData = {