ft(cancel-invite):cancel a sent invitation

Author: JacquelineTuyisenge

src/components/InvitationTable.tsx

@@ -45,6 +45,7 @@ function InvitationTable({
           <span className="flex-1 p-4 text-left">Email</span>
           <span className="flex-1 p-4 text-left">Role</span>
           <span className="flex-1 p-4 text-left">Status</span>
+          <span className="flex-1 p-4 text-left">Action</span>
         </div>
 
         {/* Data Rows */}
@@ -60,7 +61,17 @@ function InvitationTable({
               >
                 <span className="flex-1 p-4 text-left">{invitee.email}</span>
                 <span className="flex-1 p-4 text-left">{invitee.role}</span>
-                <span className="flex-1 p-4 text-left">{invitation.status}</span>
+                <span className="flex-1 p-4 text-left">
+                  {invitation.status}
+                </span>
+                <span className="flex-1 p-4 text-left">
+                  <button
+                    type="button"
+                    className="text-white bg-primary hover:bg-[#6a58ab] focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
+                  >
+                    Cancel
+                  </button>
+                </span>
               </div>
             ))}
           </div>

src/pages/invitation.tsx

@@ -221,6 +221,15 @@ function Invitation() {
             staticNumber="10"
             percentage="30"
           />
+          <InvitationCard
+            icon={
+              <LuHourglass className="text-[#9e85f5] w-8 h-8 md:w-12 md:h-12" />
+            }
+            status="Cancelled"
+            time="Last 7 days"
+            staticNumber="80"
+            percentage="40"
+          />
           <InvitationCard
             icon={
               <BsPersonFillX className="text-[#9e85f5] w-8 h-8 md:w-12 md:h-12" />
@@ -297,4 +306,4 @@ function Invitation() {
   );
 }
 
-export default Invitation;
+export default Invitation;