loan detail page added

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState, useEffect } from 'react';
 import NairaBag from '../../assets/images/dashboard/naira-bag.png';
+import {useNavigate} from 'react-router-dom'
 import { Button, Icons } from '../';
 import { useSelector } from 'react-redux';
 import PendingList from '../paginated-list/PendingList';
@@ -8,6 +9,7 @@ import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
 import { getUserPendingLoanList } from '../../core/apiRequest';
 import {FormatAmount} from '../../lib/FormatAmount'
 import PendingLoanPopout from './PendingLoanPopout';
+import { RouteHandler } from '../../router/routes';
 
 export interface DashBoardCardProps {
   title?: string;
@@ -88,6 +90,8 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
   handleNextStep,
   step,
 }) => {
+
+  const navigate = useNavigate()
   const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable
 
   const [loanPopout, setLoanPopout] = useState<PopoutProps<PendingTableList>>({show:false, data:{}})
@@ -205,7 +209,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
                             </button> 
                           </td>
                           <td className="flex justify-end px-1 py-2 text-right">
-                            <button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black">
+                            <button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black" onClick={()=>navigate(RouteHandler.dashboardPayments, {state:{application_uid: item?.application_uid}})}>
                               View
                               <Icons name="arrow-right" />
                             </button>