openbankingnigeria · christopheresivwekpe · Feb 8, 2024 · Feb 8, 2024
diff --git a/apps/web/app/(webapp)/(components)/ReportingSection.tsx b/apps/web/app/(webapp)/(components)/ReportingSection.tsx
@@ -22,7 +22,7 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
   const [apis, setApis] = useState<any[]>([]);
   const [collections, setCollections] = useState<any[]>([]);
   const [consumersList, setConsumerList] = useState<any[]>([]);
-  const [logStats, setLogStats] = useState({});
+  const [logStats, setLogStats] = useState<any>(null);
   const environment = 'development';
   const apiConsumer = profile_data?.user?.role?.parent?.slug == 'api-consumer';
 
@@ -90,6 +90,8 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
     }
   }, [collection]);
 
+  const allObject = [{ label: 'All', value: ''}]
+
   const apis_list = apis?.map((data: any) => {
     return({
       ...data,
@@ -124,11 +126,7 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
   };
 
   const incorrect = (
-    !api &&
-    !from &&
-    !to &&
-    (apiConsumer ? true : !collection) &&
-    (apiConsumer ? true : consumers.length === 0) 
+    (apiConsumer ? true : Boolean(collection && !api))
   );
 
   // console.log(api, from, to, consumers, collection);
@@ -144,8 +142,8 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
             environment, 
             companyId: apiConsumer ? alt_data?.id : consumers,
             apiId: api,
-            createdAt_gt: moment(from).startOf('day').format()?.split('+')[0] + '.000Z',
-            createdAt_l: moment(to).endOf('day').format()?.split('+')[0] + '.000Z',
+            createdAt_gt: from ? moment(from).startOf('day').format()?.split('+')[0] + '.000Z' : '',
+            createdAt_l: to ? moment(to).endOf('day').format()?.split('+')[0] + '.000Z' : '',
           }),
           method: 'GET',
           data: {}
@@ -157,9 +155,6 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
       }
   }
 
-  // console.log(logStats);
-
-
   return (
     <div className='w-full flex flex-col gap-[20px]'>
       <section className='w-full flex flex-col'>
@@ -225,7 +220,7 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
               <div className='w-full flex items-center gap-[16px]'>
                 <SelectElement 
                   name='consumers'
-                  options={consumers_list}
+                  options={allObject?.concat(consumers_list)}
                   label='Select Consumer(s)'
                   placeholder='Select consumer'
                   // multiple
@@ -238,7 +233,7 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
 
                 <SelectElement 
                   name='collection'
-                  options={collections_list}
+                  options={allObject?.concat(collections_list)}
                   label='Select Collection'
                   placeholder='Select Collection'
                   required
@@ -255,7 +250,7 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
                 (apiConsumer || collection) &&
                 <SelectElement 
                   name='api'
-                  options={apis_list}
+                  options={allObject?.concat(apis_list)}
                   label='Select API'
                   placeholder='Select API'
                   required
@@ -287,18 +282,32 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
           </div>
         </form>
       </section>
-
+{/* "totalCount": 1,
+        "avgRequestLatency": 337,
+        "avgGatewayLatency": 20,
+        "avgProxyLatency": 317,
+        "avgCountPerSecond": 1,
+        "successCount": 1,
+        "failedCount": 0 */}
       <section className='w-full flex flex-wrap gap-[20px] p-[20px] border-1 border-[#F1F2F4] bg-[#F6F8FA] rounded-[8px]'>
         {
-          REPORTING_DATA?.map(data => (
+          REPORTING_DATA({
+            total_processed: logStats?.totalCount,
+            successful: logStats?.successCount,
+            failed: logStats?.failedCount,
+            request_latency: logStats?.avgRequestLatency,
+            gateway_latency: logStats?.avgGatewayLatency,
+            latency: logStats?.avgProxyLatency
+          })?.map(data => (
             <DashboardMetricCard 
               key={data?.id}
               title={data?.title}
               amount={data?.amount}
+              containerStyle='!h-fit'
               amountUnit={data?.amountUnit}
-              isGreen={data?.isGreen}
-              labels={data?.labels}
-              data={data?.data}
+              // isGreen={data?.isGreen}
+              // labels={data?.labels}
+              // data={data?.data}
             />
           ))
         }

diff --git a/apps/web/app/(webapp)/app/api-management/activity/page.tsx b/apps/web/app/(webapp)/app/api-management/activity/page.tsx
@@ -27,9 +27,10 @@ const ActivityPage = async({ searchParams }: UrlParamsProps) => {
     apiEndpoint: API.getAPILogs({
       page: `${page}`,
       limit: `${rows}`,
+      status: status,
       apiId: search_apis,
-      createdAt_gt: moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z',
-      createdAt_l: moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z',
+      createdAt_gt: dateFilter?.start_date ? moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z' : '',
+      createdAt_l: dateFilter?.end_date ? moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z' : '',
       environment
     }),
     method: 'GET',
@@ -97,7 +98,7 @@ const ActivityPage = async({ searchParams }: UrlParamsProps) => {
 
   const status_list = ACTIVITY_STATUS_DATA?.map(data => {
     return({
-      label: data?.name,
+      label: data?.label,
       value: data?.value
     })
   });

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
@@ -24,18 +24,6 @@ const CollectionPage = async ({ params, searchParams }: UrlParamsProps) => {
     data: null
   })
 
-  const fetchedAPIs: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getAPIs({
-      page: `${page}`,
-      limit: `${rows}`,
-      collectionId,
-      environment,
-    }),
-    method: 'GET',
-    data: null
-  })
-
   const fetchedProfile: any = await applyAxiosRequest({
     headers: {},
     apiEndpoint: API.getProfile(),
@@ -49,7 +37,35 @@ const CollectionPage = async ({ params, searchParams }: UrlParamsProps) => {
 
   let collection = fetchedCollection?.data;
   let profile = fetchedProfile?.data;
-  let collections_api_list = fetchedAPIs?.data;
+
+  const userType = profile?.user?.role?.parent?.slug;
+
+  const fetchedAPIs: any = userType == 'api-consumer' ?
+    await applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getAPIsForCompany({ 
+        environment,
+        collectionId
+      }),
+      method: 'GET',
+      data: null
+    })
+    :
+    await applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getAPIs({
+        page: `${page}`,
+        limit: `${rows}`,
+        collectionId,
+        environment,
+      }),
+      method: 'GET',
+      data: null
+    });
+
+  let collections_api_list = userType == 'api-consumer' ?
+    fetchedAPIs?.data?.filter((data: any) => data?.collectionId == collectionId) :
+    fetchedAPIs?.data;
   let meta_data = fetchedAPIs?.meta_data;
   let collections_api = collections_api_list?.map((endpoint: any) => {
     return({
@@ -63,8 +79,6 @@ 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 => {

diff --git a/apps/web/app/(webapp)/app/api-management/collections/page.tsx b/apps/web/app/(webapp)/app/api-management/collections/page.tsx
@@ -16,30 +16,43 @@ const CollectionsPage = async ({ searchParams }: UrlParamsProps) => {
 
   const filters = [search_query];
 
+  const fetchedProfile: any = await applyAxiosRequest({
+    headers: {},
+    apiEndpoint: API.getProfile(),
+    method: 'GET',
+    data: null
+  });
+
+  let profile = fetchedProfile?.data;
+  const userType = profile?.user?.role?.parent?.slug;
+
   const fetchedCollections: any = await applyAxiosRequest({
     headers: {},
     apiEndpoint: API.getCollections(),
     method: 'GET',
     data: null
   })
 
-  // TODO: CHECK THIS API {{ FOR AC ONLY }}
-  // const fetchedAPIs: any = await applyAxiosRequest({
-  //   headers: {},
-  //   apiEndpoint: API.getAPIsForCompany({ environment }),
-  //   method: 'GET',
-  //   data: null
-  // })
+  const fetchedAPIs: any = userType == 'api-consumer' ?
+    await applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getAPIsForCompany({ environment }),
+      method: 'GET',
+      data: null
+    })
+    :
+    null;
 
   if (fetchedCollections?.status == 401) {
     return <Logout />
   }
 
   let meta_data = fetchedCollections?.meta_data;
-  let collection_list = fetchedCollections?.data;
-  // let apis = fetchedAPIs?.data;
-
-  // console.log(fetchedAPIs);
+  let apis = fetchedAPIs?.data;
+  let apisId = apis?.map((item: any) => item?.collectionId);
+  let collection_list = userType == 'api-consumer' ? 
+    fetchedCollections?.data.filter((collect: any) => apisId.includes(collect?.id)) : 
+    fetchedCollections?.data;
 
   const collections = collection_list?.map((collection: any) => {
     return ({

diff --git a/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx b/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx
@@ -14,6 +14,8 @@ const DashboardMetricCard = ({
   titleStyle,
   containerStyle
 }: DashboardMetricCardProps) => {
+  const sanitizedAmount = amount?.toString()?.includes('.') ? Number((amount || 0)?.toFixed(2)) : amount;
+
   return (
     <div className={`min-w-[235px] h-[250px] rounded-[8px] overflow-y-hidden border border-o-border bg-white p-[20px] flex flex-col ${containerStyle}`}>
       <div className='flex flex-col mb-[24px] gap-[4px]'>
@@ -24,8 +26,8 @@ const DashboardMetricCard = ({
         <div className={`${isGreen ? 'text-o-dark-green' : 'text-[#182749]'} text-f18 font-[500]`}>
           {
             amountUnit ? 
-            `${amount ? addCommasToAmount(amount) : '-'} ${amount ? amountUnit : ''}` :
-            (amount ? addCommasToAmount(amount) : '-')
+            `${amount ? addCommasToAmount(sanitizedAmount) : '-'} ${amount ? amountUnit : ''}` :
+            (amount ? addCommasToAmount(sanitizedAmount) : '-')
           }
         </div>
       </div>

diff --git a/apps/web/config/endpoints.ts b/apps/web/config/endpoints.ts
@@ -74,8 +74,8 @@ export const deleteAPI = ({ environment, id }: GetSingleEnvironmentProps) =>
   `${BASE_URL}/apis/${environment}/${id}`;
 export const updateAPI = ({ environment, id }: GetSingleEnvironmentProps) => 
   `${BASE_URL}/apis/${environment}/${id}`;
-export const getAPILogs = ({ page, limit, environment, companyId, apiId, createdAt_gt, createdAt_l }: GetEnvironmentProps) => 
-  `${BASE_URL}/apis/${environment}/logs?page=${page}${limit ? `&limit=${limit}`: ''}${apiId ? `&filter[apiId]=${apiId}` : ''}${companyId ? `&filter[companyId]=${companyId}` : ''}${createdAt_gt ? `&filter[createdAt][gt]=${createdAt_gt}`: ''}${createdAt_l ? `&filter[createdAt][lt]=${createdAt_l}`: ''}`;
+export const getAPILogs = ({ page, limit, environment, companyId, apiId, createdAt_gt, createdAt_l, status }: GetEnvironmentProps) => 
+  `${BASE_URL}/apis/${environment}/logs?page=${page}${limit ? `&limit=${limit}`: ''}${apiId ? `&filter[apiId]=${apiId}` : ''}${companyId ? `&filter[companyId]=${companyId}` : ''}${createdAt_gt ? `&filter[createdAt][gt]=${createdAt_gt}`: ''}${createdAt_l ? `&filter[createdAt][lt]=${createdAt_l}`: ''}${status ? `&filter[status]=${status}`: ''}`;
 export const getAPILog = ({ environment, id }: GetSingleEnvironmentProps) => 
   `${BASE_URL}/apis/${environment}/logs/${id}`;
 export const postAssignAPIs = ({ environment, id }: GetSingleEnvironmentProps) => 
@@ -90,8 +90,8 @@ export const getAPITransformation = ({ environment, id }: GetSingleEnvironmentPr
   `${BASE_URL}/apis/${environment}/${id}/transformation`;
 export const updateConsumerAPIAccess = ({ environment, id }: GetSingleEnvironmentProps) => 
   `${BASE_URL}/apis/${environment}/company/${id}`;
-export const getAPIsForCompany = ({ environment }: GetSingleEnvironmentProps) =>
-  `${BASE_URL}/apis/${environment}/company`
+export const getAPIsForCompany = ({ environment, collectionId }: GetSingleEnvironmentProps) =>
+  `${BASE_URL}/apis/${environment}/company${collectionId ? `?filter[collectionId]=${collectionId}` : ''}`
 export const getAPILogStats = ({ page, limit, environment, companyId, apiId, createdAt_gt, createdAt_l }: GetEnvironmentProps) => 
 	`${BASE_URL}/apis/${environment}/logs/stats?page=${page}${limit ? `&limit=${limit}`: ''}${apiId ? `&filter[apiId]=${apiId}` : ''}${createdAt_gt ? `&filter[createdAt][gt]=${createdAt_gt}`: ''}${createdAt_l ? `&filter[createdAt][lt]=${createdAt_l}`: ''}${companyId ? `&filter[companyId]=${companyId}` : ''}`
 export const getAPILogStatsAggregate = ({ page, limit, environment, companyId, apiId, createdAt_gt, createdAt_l }: GetEnvironmentProps) => 

diff --git a/apps/web/data/activityData.ts b/apps/web/data/activityData.ts
@@ -84,24 +84,62 @@ export const ACTIVITY_DETAILS_PANEL = [
 ];
 
 export const ACTIVITY_STATUS_DATA = [
-  {
-    id: 1,
-    label: 'All',
-    value: '',
-    name: 'all'
-  },
-  {
-    id: 2,
-    label: 'Success',
-    value: 'success',
-    name: 'success'
-  },
-  {
-    id: 3,
-    label: 'Failed',
-    value: 'failed',
-    name: 'failed'
-  },
+  { id: 0, label: 'All', value: '', name: 'all' },
+  { id: 1, label: 'Continue', value: 100, name: 'continue' },
+  { id: 2, label: 'Switching Protocols', value: 101, name: 'switchingProtocols' },
+  { id: 3, label: 'OK', value: 200, name: 'ok' },
+  { id: 4, label: 'Created', value: 201, name: 'created' },
+  { id: 5, label: 'Accepted', value: 202, name: 'accepted' },
+  { id: 6, label: 'Non-Authoritative Information', value: 203, name: 'nonAuthoritativeInformation' },
+  { id: 7, label: 'No Content', value: 204, name: 'noContent' },
+  { id: 8, label: 'Reset Content', value: 205, name: 'resetContent' },
+  { id: 9, label: 'Partial Content', value: 206, name: 'partialContent' },
+  { id: 10, label: 'Multiple Choices', value: 300, name: 'multipleChoices' },
+  { id: 11, label: 'Moved Permanently', value: 301, name: 'movedPermanently' },
+  { id: 12, label: 'Found', value: 302, name: 'found' },
+  { id: 13, label: 'See Other', value: 303, name: 'seeOther' },
+  { id: 14, label: 'Not Modified', value: 304, name: 'notModified' },
+  { id: 15, label: 'Temporary Redirect', value: 307, name: 'temporaryRedirect' },
+  { id: 16, label: 'Bad Request', value: 400, name: 'badRequest' },
+  { id: 17, label: 'Unauthorized', value: 401, name: 'unauthorized' },
+  { id: 18, label: 'Payment Required', value: 402, name: 'paymentRequired' },
+  { id: 19, label: 'Forbidden', value: 403, name: 'forbidden' },
+  { id: 20, label: 'Not Found', value: 404, name: 'notFound' },
+  { id: 21, label: 'Method Not Allowed', value: 405, name: 'methodNotAllowed' },
+  { id: 22, label: 'Not Acceptable', value: 406, name: 'notAcceptable' },
+  { id: 23, label: 'Proxy Authentication Required', value: 407, name: 'proxyAuthenticationRequired' },
+  { id: 24, label: 'Request Timeout', value: 408, name: 'requestTimeout' },
+  { id: 25, label: 'Conflict', value: 409, name: 'conflict' },
+  { id: 26, label: 'Gone', value: 410, name: 'gone' },
+  { id: 27, label: 'Length Required', value: 411, name: 'lengthRequired' },
+  { id: 28, label: 'Precondition Failed', value: 412, name: 'preconditionFailed' },
+  { id: 29, label: 'Payload Too Large', value: 413, name: 'payloadTooLarge' },
+  { id: 30, label: 'URI Too Long', value: 414, name: 'uriTooLong' },
+  { id: 31, label: 'Unsupported Media Type', value: 415, name: 'unsupportedMediaType' },
+  { id: 32, label: 'Range Not Satisfiable', value: 416, name: 'rangeNotSatisfiable' },
+  { id: 33, label: 'Expectation Failed', value: 417, name: 'expectationFailed' },
+  { id: 34, label: 'I\'m a Teapot', value: 418, name: 'imATeapot' },
+  { id: 35, label: 'Misdirected Request', value: 421, name: 'misdirectedRequest' },
+  { id: 36, label: 'Unprocessable Entity', value: 422, name: 'unprocessableEntity' },
+  { id: 37, label: 'Locked', value: 423, name: 'locked' },
+  { id: 38, label: 'Failed Dependency', value: 424, name: 'failedDependency' },
+  { id: 39, label: 'Too Early', value: 425, name: 'tooEarly' },
+  { id: 40, label: 'Upgrade Required', value: 426, name: 'upgradeRequired' },
+  { id: 41, label: 'Precondition Required', value: 428, name: 'preconditionRequired' },
+  { id: 42, label: 'Too Many Requests', value: 429, name: 'tooManyRequests' },
+  { id: 43, label: 'Request Header Fields Too Large', value: 431, name: 'requestHeaderFieldsTooLarge' },
+  { id: 44, label: 'Unavailable For Legal Reasons', value: 451, name: 'unavailableForLegalReasons' },
+  { id: 45, label: 'Internal Server Error', value: 500, name: 'internalServerError' },
+  { id: 46, label: 'Not Implemented', value: 501, name: 'notImplemented' },
+  { id: 47, label: 'Bad Gateway', value: 502, name: 'badGateway' },
+  { id: 48, label: 'Service Unavailable', value: 503, name: 'serviceUnavailable' },
+  { id: 49, label: 'Gateway Timeout', value: 504, name: 'gatewayTimeout' },
+  { id: 50, label: 'HTTP Version Not Supported', value: 505, name: 'httpVersionNotSupported' },
+  { id: 51, label: 'Variant Also Negotiates', value: 506, name: 'variantAlsoNegotiates' },
+  { id: 52, label: 'Insufficient Storage', value: 507, name: 'insufficientStorage' },
+  { id: 53, label: 'Loop Detected', value: 508, name: 'loopDetected' },
+  { id: 54, label: 'Not Extended', value: 510, name: 'notExtended' },
+  { id: 55, label: 'Network Authentication Required', value: 511, name: 'networkAuthenticationRequired' }
 ];
 
 export const ACTIVITY_REQUEST_PARAMS = `{\n  "request": {\n    "headers": {\n      "Authorization": "Bearer some_access_token",\n      "Content-Type": "application/json",\n      "User-Agent": "MyApp/1.0"\n    },\n    "payload": {\n      "user_id": "12345",\n      "action": "getBalance",\n      "account_type": "savings"\n    },\n}`;