Type fixes

src/components/ActivityListItem.vue

@@ -13,7 +13,10 @@
     <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
       <div class="relative flex justify-between gap-4 mb-3">
         <!-- Source -->
-        <a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+        <a
+          href=""
+          class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+        >
           <div class="relative w-fit mx-auto">
             <fa
               v-if="!record.giver.profileImageUrl"
@@ -26,32 +29,53 @@
               :profile-image-url="record.giver.profileImageUrl"
               :class="record.giver.known ? 'rounded-full' : 'rounded'"
             />
-            <span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
+            <span
-              <fa :icon="record.giver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
+              class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
+            >
+              <fa
+                :icon="record.giver.known ? 'user' : 'hammer'"
+                class="fa-fw text-white"
+              />
             </span>
           </div>
-          <div class="text-xs mt-2 line-clamp-2">{{ record.giver.displayName }}</div>
+          <div class="text-xs mt-2 line-clamp-2">
+            {{ record.giver.displayName }}
+          </div>
         </a>
 
         <!-- Arrow -->
-        <div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
+        <div
+          class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"
+        >
           <hr class="grow border-t-[25px] border-slate-300" />
-          <div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
+          <div
+            class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"
+          ></div>
         </div>
 
         <!-- Destination -->
-        <a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
+        <a
+          href=""
+          class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+        >
           <div class="relative w-fit mx-auto">
             <EntityIcon
               :icon-size="record.receiver.known ? 64 : 32"
               :profile-image-url="record.receiver.profileImageUrl"
               :class="record.receiver.known ? 'rounded-full' : 'rounded'"
             />
-            <span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
+            <span
-              <fa :icon="record.receiver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
+              class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
+            >
+              <fa
+                :icon="record.receiver.known ? 'user' : 'hammer'"
+                class="fa-fw text-white"
+              />
             </span>
           </div>
-          <div class="text-xs mt-2 line-clamp-2">{{ record.receiver.displayName }}</div>
+          <div class="text-xs mt-2 line-clamp-2">
+            {{ record.receiver.displayName }}
+          </div>
         </a>
       </div>
 
@@ -65,8 +89,15 @@
     </div>
 
     <!-- Record Image -->
-    <div v-if="record.image" class="bg-cover" :style="`background-image: url(${record.image});`">
+    <div
-      <a class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer" @click="$emit('viewImage', record.image)">
+      v-if="record.image"
+      class="bg-cover"
+      :style="`background-image: url(${record.image});`"
+    >
+      <a
+        class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
+        @click="$emit('viewImage', record.image)"
+      >
         <img
           class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
           :src="record.image"
@@ -75,11 +106,16 @@
       </a>
     </div>
 
-    <div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
+    <div
+      class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
+    >
       <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
         <fa icon="circle-info" class="fa-fw text-slate-500" />
       </a>
-      <span class="ms-auto text-xs text-slate-500 italic" :title="record.timestamp">
+      <span
+        class="ms-auto text-xs text-slate-500 italic"
+        :title="record.timestamp"
+      >
         {{ formattedTimestamp }}
       </span>
     </div>
@@ -87,20 +123,20 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator';
+import { Component, Prop, Vue } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from '../types';
+import { GiveRecordWithContactInfo } from "../types";
-import EntityIcon from './EntityIcon.vue';
+import EntityIcon from "./EntityIcon.vue";
 
 @Component({
   components: {
-    EntityIcon
+    EntityIcon,
-  }
+  },
 })
 export default class ActivityListItem extends Vue {
   @Prop() record!: GiveRecordWithContactInfo;
   @Prop() lastViewedClaimId?: string;
 
-  private formatAmount(claim: any): string {
+  private formatAmount(claim: unknown): string {
     const amount = claim.object?.amountOfThisGood
       ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
       : "";
@@ -144,7 +180,8 @@ export default class ActivityListItem extends Vue {
   }
 
   private formatUnknownParticipants(): string {
-    const { giver, receiver, providerPlanName, recipientProjectName } = this.record;
+    const { giver, receiver, providerPlanName, recipientProjectName } =
+      this.record;
 
     if (providerPlanName || recipientProjectName) {
       const from = providerPlanName
@@ -162,7 +199,8 @@ export default class ActivityListItem extends Vue {
   }
 
   get description(): string {
-    const claim = (this.record.fullClaim as any).claim || this.record.fullClaim;
+    const claim =
+      (this.record.fullClaim as unknown).claim || this.record.fullClaim;
     const amount = this.formatAmount(claim);
     const participants = this.formatParticipantInfo();
 

src/types/index.ts

@@ -1,6 +1,6 @@
 export interface GiveRecordWithContactInfo {
   jwtId: string;
-  fullClaim: any; // Replace with proper type
+  fullClaim: unknown; // Replace with proper type
   giver: {
     known: boolean;
     displayName: string;