openbankingnigeria · christopheresivwekpe · Jan 30, 2024 · Jan 30, 2024
diff --git a/apps/web/app/(webapp)/(components)/StatusBox.tsx b/apps/web/app/(webapp)/(components)/StatusBox.tsx
@@ -73,6 +73,11 @@ const StatusBox = ({ status }: StatusBoxProps) => {
         Rejected
       </span>
     )
+    : sanitizedStatus === 'denied' ? (
+      <span className='whitespace-nowrap px-[8px] py-[3px] text-f12 text-center font-[500] w-fit capitalize rounded-full text-white bg-o-status-red'>
+        Denied
+      </span>
+    )
     : sanitizedStatus === 'declined' ? (
       <span className='whitespace-nowrap px-[8px] py-[3px] text-f12 text-center font-[500] w-fit capitalize rounded-full text-white bg-o-status-red'>
         Declined

diff --git a/apps/web/app/(webapp)/(components)/TableElement.tsx b/apps/web/app/(webapp)/(components)/TableElement.tsx
@@ -38,7 +38,7 @@ const TableElement = ({
       columnHelper.accessor(item?.accessor, {
         header: () => item?.header,
         cell: ({ column, cell, renderValue }) => {
-          if(column.id === 'status' || column.id === 'user_type') {
+          if(column.id === 'status' || column.id === 'user_type' || column.id === 'kyb_status') {
             return <StatusBox status={cell.getValue()} />
           } else {
             return renderValue();
@@ -91,7 +91,7 @@ const TableElement = ({
                     first-of-type:rounded-tl-[8px] last-of-type:rounded-tr-[8px] 
                     text-o-text-medium px-[16px] text-f12 font-[500] 
                     ${header.id == 'actions' && '!min-w-[60px] !max-w-0 !w-auto'}
-                    ${header.id == 'status' && '!min-w-[100px] !max-w-0 !w-auto'}
+                    ${(header.id == 'status' || header.id == 'kyb_status') && '!min-w-[100px] !max-w-0 !w-auto'}
                     ${header.id == 'user_type' && '!min-w-[120px] !max-w-0 !w-auto'}
                     ${header.id == 'velocity' && '!min-w-[100px] !max-w-0 !w-auto'}
                     ${header.id == 'amount' && '!min-w-[100px] !max-w-0 !w-auto'}

diff --git a/apps/web/app/(webapp)/(components)/TransparentPanel.tsx b/apps/web/app/(webapp)/(components)/TransparentPanel.tsx
@@ -29,33 +29,45 @@ const TransparentPanel = ({
     }
   };
 
+  let userInterface = (data: any) => {
+    return(
+      <div 
+        key={data?.id} 
+        className='whitespace-nowrap cursor-pointer relative w-fit flex flex-col py-[9px]'
+        onClick={() => handleClick(data?.value)}
+      >
+        <div className={`${currentValue == data?.value ? 'text-o-blue font-[500]' : 'text-o-text-medium3'} 
+          capitalize text-f14 hover:text-o-blue`}
+        >
+          {data?.label}
+        </div>
+
+        {
+          currentValue == data?.value &&
+          <motion.div
+            className='pane-underline'
+            layoutId='transparent-pane-underline'
+          ></motion.div>
+        }
+      </div>
+    );
+  }
+
   return (
     <div className={`overflow-x-auto overflow-y-hidden border-b-[2px] border-[#DCE3EB] 
       flex items-center gap-[16px] h-[38px] w-full ${containerStyle}`}
     >
       {
-        panel?.map((data) => (
-          data?.type?.includes(status || '') &&
-            <div 
-              key={data?.id} 
-              className='whitespace-nowrap cursor-pointer relative w-fit flex flex-col py-[9px]'
-              onClick={() => handleClick(data?.value)}
-            >
-              <div className={`${currentValue == data?.value ? 'text-o-blue font-[500]' : 'text-o-text-medium3'} 
-                capitalize text-f14 hover:text-o-blue`}
-              >
-                {data?.label}
-              </div>
-
-              {
-                currentValue == data?.value &&
-                <motion.div
-                  className='pane-underline'
-                  layoutId='transparent-pane-underline'
-                ></motion.div>
-              }
-            </div>
-        ))
+        panel?.map((data) => {
+          if (status) {
+            return (
+              data?.type?.includes(status || '') ?
+              userInterface(data) : null
+            );
+          } else {
+            return userInterface(data);
+          }
+        })
       }
     </div>
   )

diff --git a/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivityDetails.tsx b/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivityDetails.tsx
@@ -14,7 +14,7 @@ const ActivityDetails = ({
 }: ActivitySectionsProps) => {
   const router = useRouter();
   const activity_details = rawData;
-  console.log(activity_details)
+  // console.log(activity_details);
 
   useEffect(() => {
     const slug = updateSearchParams('slug', 'Activity Details');
@@ -48,13 +48,13 @@ const ActivityDetails = ({
           <div className='w-full p-[20px] grid grid-cols-2 ms:grid-cols-3 lgg:grid-cols-4 gap-[16px] bg-white'>
             <ViewData 
               label='Consumer Name'
-              value={activity_details?.consumer_name}
+              value={activity_details?.company?.name}
             />
 
-            <ViewData 
+            {/* <ViewData 
               label='Email Address'
               value={activity_details?.email_address}
-            />
+            /> */}
 
             <ViewData 
               label='API Name'

diff --git a/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivitySections.tsx b/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivitySections.tsx
@@ -15,16 +15,22 @@ const rawCode = path == 'response' ?
   `{
     "response": {
       "headers": {
-        "access-control-allow-credentials": "${response?.headers?.['access-control-allow-credentials']}",
         "access-control-allow-origin": "${response?.headers?.['access-control-allow-origin']}",
         "connection": "${response?.headers?.connection}",
-        "content-length": "${response?.headers?.['content-length']}",
         "content-type": "${response?.headers?.['content-type']}",
         "date": "${response?.headers?.date}",
-        "server": "${response?.headers?.server}",
+        "etag": "${response?.headers?.etag}",
+        "request-id": "${response?.headers?.['request-id']}",
+        "transfer-encoding": "${response?.headers?.['transfer-encoding']}",
+        "vary": "${response?.headers?.vary}",
         "via": "${response?.headers?.via}",
         "x-kong-proxy-latency": "${response?.headers?.['x-kong-proxy-latency']}",
         "x-kong-upstream-latency": "${response?.headers?.['x-kong-upstream-latency']}"
+        "x-ratelimit-limit": "${response?.headers?.['x-ratelimit-limit']}"
+        "x-ratelimit-remaining": "${response?.headers?.['x-ratelimit-remaining']}"
+        "x-ratelimit-reset": "${response?.headers?.['x-ratelimit-reset']}"
+        "x-srv-span": "${response?.headers?.['x-srv-span']}"
+        "x-srv-trace": "${response?.headers?.['x-srv-trace']}"
       },
       "size": ${response?.size},
       "status": ${response?.status}
@@ -48,7 +54,7 @@ const rawCode = path == 'response' ?
         "x-credential-identifier": "${request?.headers?.['x-credential-identifier']}"
       },
       "method": "${request?.method}",
-      "querystring": "${request?.querystring}",
+      "querystring": {},
       "size": ${request?.size},
       "uri": "${request?.uri}",
       "url": "${request?.url}"
@@ -59,16 +65,22 @@ const codeElement = path == 'response' ?
   `{
     <span style='color: #FB8F8F'>"response"</span>: {
       <span style='color: #FB8F8F'>"headers"</span>: {
-        <span style='color: #FB8F8F'>"access-control-allow-credentials"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['access-control-allow-credentials']}"</span>,
         <span style='color: #FB8F8F'>"access-control-allow-origin"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['access-control-allow-origin']}"</span>,
         <span style='color: #FB8F8F'>"connection"</span>: <span style='color: #6CE9A6'>"${response?.headers?.connection}"</span>,
-        <span style='color: #FB8F8F'>"content-length"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['content-length']}"</span>,
         <span style='color: #FB8F8F'>"content-type"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['content-type']}"</span>,
         <span style='color: #FB8F8F'>"date"</span>: <span style='color: #6CE9A6'>"${response?.headers?.date}"</span>,
-        <span style='color: #FB8F8F'>"server"</span>: <span style='color: #6CE9A6'>"${response?.headers?.server}"</span>,
+        <span style='color: #FB8F8F'>"etag"</span>: <span style='color: #6CE9A6'>"${response?.headers?.etag}"</span>,
+        <span style='color: #FB8F8F'>"request-id"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['request-id']}"</span>,
+        <span style='color: #FB8F8F'>"transfer-encoding"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['transfer-encoding']}"</span>,
+        <span style='color: #FB8F8F'>"vary"</span>: <span style='color: #6CE9A6'>"${response?.headers?.vary}"</span>,
         <span style='color: #FB8F8F'>"via"</span>: <span style='color: #6CE9A6'>"${response?.headers?.via}"</span>,
         <span style='color: #FB8F8F'>"x-kong-proxy-latency"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-kong-proxy-latency']}"</span>,
         <span style='color: #FB8F8F'>"x-kong-upstream-latency"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-kong-upstream-latency']}"</span>
+        <span style='color: #FB8F8F'>"x-ratelimit-limit"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-ratelimit-limit']}"</span>,
+        <span style='color: #FB8F8F'>"x-ratelimit-remaining"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-ratelimit-remaining']}"</span>,
+        <span style='color: #FB8F8F'>"x-ratelimit-reset"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-ratelimit-reset']}"</span>,
+        <span style='color: #FB8F8F'>"x-srv-span"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-srv-span']}"</span>,
+        <span style='color: #FB8F8F'>"x-srv-trace"</span>: <span style='color: #6CE9A6'>"${response?.headers?.['x-srv-trace']}"</span>,
       },
       <span style='color: #FB8F8F'>"size"</span>: <span style='color: #6CE9A6'>"${response?.size}"</span>,
       <span style='color: #FB8F8F'>"status"</span>: <span style='color: #6CE9A6'>"${response?.status}"</span>

diff --git a/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivityTable.tsx b/apps/web/app/(webapp)/app/api-management/activity/(components)/ActivityTable.tsx
@@ -18,6 +18,8 @@ const ActivityTable = ({
 }: TableProps) => {
   const columnHelper = createColumnHelper<any>();
 
+  // console.log(rawData);
+
   const actionColumn = columnHelper.accessor('actions', {
     header: () => '',
     cell: ({ row }) => (

diff --git a/apps/web/app/(webapp)/app/api-management/activity/page.tsx b/apps/web/app/(webapp)/app/api-management/activity/page.tsx
@@ -39,7 +39,7 @@ const ActivityPage = async({ searchParams }: UrlParamsProps) => {
     return({
       ...activity,
       reference_id: activity?.id,
-      consumer_name: activity?.consumer_name,
+      consumer_name: activity?.company?.name,
       email_address: activity?.email_address,
       api_name: activity?.name,
       status: activity?.status,

diff --git a/apps/web/app/(webapp)/app/api-management/collections/[id]/page.tsx b/apps/web/app/(webapp)/app/api-management/collections/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { UrlParamsProps } from '@/types/webappTypes/appTypes'
 import React from 'react'
 import { CollectionSection } from '../(components)';
-import { COLLECTIONS_API_HEADERS, COLLECTIONS_REQUEST_METHOD, COLLECTIONS_TIER } from '@/data/collectionDatas';
+import { COLLECTIONS_API_HEADERS, COLLECTIONS_API_CONSUMER_HEADERS, COLLECTIONS_REQUEST_METHOD, COLLECTIONS_TIER } from '@/data/collectionDatas';
 import { applyAxiosRequest } from '@/hooks';
 import * as API from '@/config/endpoints';
 import Logout from '@/components/globalComponents/Logout';
@@ -63,6 +63,8 @@ const CollectionPage = async ({ params, searchParams }: UrlParamsProps) => {
     });
   })
 
+  const userType = profile?.user?.role?.parent?.slug;
+
   // const details = COLLECTIONS_TABLE_DATA.find((data: any) => data?.collection_name == collectionId);
   // const collections_api = COLLECTIONS_APIS;
   const request_method_list = COLLECTIONS_REQUEST_METHOD?.map(method => {
@@ -80,7 +82,11 @@ const CollectionPage = async ({ params, searchParams }: UrlParamsProps) => {
   })
 
   const filters = [search_query, request_method, tier]
-  let table_headers = COLLECTIONS_API_HEADERS;
+  let table_headers = (
+    userType == 'api-consumer' ? 
+      COLLECTIONS_API_CONSUMER_HEADERS :
+      COLLECTIONS_API_HEADERS
+  );
   const total_pages = meta_data?.totalNumberOfPages;
   const total_elements_in_page = collections_api_list?.length || meta_data?.pageSize;
   const total_elements = meta_data?.totalNumberOfRecords;

diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx
@@ -151,7 +151,7 @@ const AddPermissionButton = ({
 
       <div className='w-full flex justify-center mb-14 items-center'>
         <Button 
-          title='Add permission'
+          title='Add collections'
           small
           effect={() => {
             setOpenModal(true);

diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/ConsumerDetails.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/ConsumerDetails.tsx
@@ -25,12 +25,19 @@ const ConsumerDetails = ({
   const [open2FA, setOpen2FA] = useState(false);
   const [openModal, setOpenModal] = useState('');
   const actions = CONSUMER_ACTIONS_DATA;
-  const consumerStatus: 'pending' | 'active' | 'inactive' | 'rejected' = rawData?.status;
+  const consumerStatus = rawData?.status;
+  const consumerKYBStatus = rawData?.kybStatus;
 
-  const getAction = (status: string) => {
-    return actions.filter(action => 
-        action?.type == status?.toLowerCase()
-      );
+  // console.log(rawData);
+
+  const getAction = (kyb_status: string, status: string) => {
+    return actions.filter(action => {
+      if (kyb_status?.includes('approved')) {
+        return action?.type?.includes(status?.toLowerCase());
+      } else {
+        return action?.type?.includes(kyb_status?.toLowerCase());
+      }
+    });
   };
 
   useEffect(() => {
@@ -88,7 +95,7 @@ const ConsumerDetails = ({
         data
       });
 
-      if (result?.status == 201) {
+      if (result?.status == 200) {
         setLoading(false);
         close2FAModal();
         router.refresh();
@@ -206,7 +213,7 @@ const ConsumerDetails = ({
               optionStyle='!min-w-[153px] !top-[38px]'
               small
               options={
-                getAction(consumerStatus)?.map((action) => (
+                getAction(consumerKYBStatus, consumerStatus)?.map((action) => (
                   <button
                     key={action.id}
                     className='cursor-pointer whitespace-nowrap hover:bg-o-bg-disabled w-full flex gap-[12px] items-center py-[10px] px-[16px] text-o-text-dark text-f14'
@@ -307,13 +314,22 @@ const ConsumerDetails = ({
                 />
             }
 
-            {
+            {/* {
               rawData?.type == 'licensed-entity' &&
                 <ViewData 
                   label='Role'
                   value=''
                 />
-            }
+            } */}
+
+            <ViewData 
+              label='KYB Status'
+              value={
+                <div className='w-fit flex items-center gap-[4px]'>
+                  <StatusBox status={consumerKYBStatus} />
+                </div>
+              }
+            />
 
             <ViewData 
               label='Status'

diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/ConsumersTable.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/ConsumersTable.tsx
@@ -50,12 +50,19 @@ const ConsumersTable = ({
     fetchProfile();
   }, []);
 
-  const getAction = (status: string) => {
+  const getAction = (kyb_status: string, status: string) => {
     return actions.filter(action => {
-      return (
-        action?.type == status?.toLowerCase() ||
-        action?.type == 'all'
-      );
+      if (kyb_status?.includes('approved')) {
+        return (
+          action?.type?.includes(status?.toLowerCase()) ||
+          action?.type?.includes('all')
+        );
+      } else {
+        return (
+          action?.type?.includes(kyb_status?.toLowerCase()) ||
+          action?.type?.includes('all')
+        );
+      }
     });
   }
 
@@ -109,7 +116,7 @@ const ConsumersTable = ({
         data
       });
 
-      if (result?.status == 201) {
+      if (result?.status == 200) {
         setLoading(false);
         close2FAModal();
         router.refresh();
@@ -148,7 +155,7 @@ const ConsumersTable = ({
 
         <div className='hidden peer-focus:flex hover:flex absolute bg-white rounded-lg flex-col z-10 border border-o-border right-0 top-[30px] py-[4px] w-[158px] items-start justify-start tablemenu-boxshadow'>
           {
-            getAction(row.original.status)?.map((action) => (
+            getAction(row.original.kyb_status, row.original.status)?.map((action) => (
               <button
                 key={action.id}
                 className='whitespace-nowrap cursor-pointer hover:bg-o-bg-disabled w-full flex gap-[12px] items-center py-[10px] px-[16px] text-o-text-dark text-f14'

diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx
@@ -149,7 +149,7 @@ const EditPermissionButton = ({
 
       <div className='w-fit'>
         <Button 
-          title='Edit permissions'
+          title='Edit collections'
           small
           effect={() => {
             setOpenModal(true);

diff --git a/apps/web/app/(webapp)/app/api-management/consumers/page.tsx b/apps/web/app/(webapp)/app/api-management/consumers/page.tsx
@@ -53,7 +53,8 @@ const ConsumersPage = async({ searchParams }: UrlParamsProps) => {
         ${consumer?.primaryUser?.profile?.lastName}` :
         null,
       email_address: consumer?.primaryUser?.email,
-      status: consumer?.kybStatus
+      kyb_status: consumer?.kybStatus,
+      status: consumer?.status
     })
   });
 

diff --git a/apps/web/data/activityData.ts b/apps/web/data/activityData.ts
@@ -7,10 +7,10 @@ export const ACTIVITY_TABLE_HEADERS = [
     header: 'Consumer Name',
     accessor: 'consumer_name'
   },
-  {
-    header: 'Email Address',
-    accessor: 'email_address'
-  },
+  // {
+  //   header: 'Email Address',
+  //   accessor: 'email_address'
+  // },
   {
     header: 'API Name',
     accessor: 'api_name'