diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx
index 1f02c5a0aed..0c3c872684c 100644
--- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx
+++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx
@@ -14,62 +14,70 @@ import { colors } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
 
-export function getStatusProps(status: ScheduleStatusType) {
-  let color, backgroundColor, Icon;
-
+// Consists of Schedule Statuses + Transaction statuses
+type StatusTypes = ScheduleStatusType | 'cleared' | 'pending';
+export function getStatusProps(status: StatusTypes) {
   switch (status) {
     case 'missed':
-      color = colors.r1;
-      backgroundColor = colors.r10;
-      Icon = EditSkull1;
-      break;
+      return {
+        color: colors.r1,
+        backgroundColor: colors.r10,
+        Icon: EditSkull1,
+      };
     case 'due':
-      color = colors.y1;
-      backgroundColor = colors.y9;
-      Icon = AlertTriangle;
-      break;
+      return {
+        color: colors.y1,
+        backgroundColor: colors.y9,
+        Icon: AlertTriangle,
+      };
     case 'upcoming':
-      color = colors.p1;
-      backgroundColor = colors.p10;
-      Icon = CalendarIcon;
-      break;
+      return {
+        color: colors.p1,
+        backgroundColor: colors.p10,
+        Icon: CalendarIcon,
+      };
     case 'paid':
-      color = colors.g2;
-      backgroundColor = colors.g10;
-      Icon = ValidationCheck;
-      break;
+      return {
+        color: colors.g2,
+        backgroundColor: colors.g10,
+        Icon: ValidationCheck,
+      };
     case 'completed':
-      color = colors.n4;
-      backgroundColor = colors.n11;
-      Icon = FavoriteStar;
-      break;
+      return {
+        color: colors.n4,
+        backgroundColor: colors.n11,
+        Icon: FavoriteStar,
+      };
+    // @todo: Check if 'pending' is still a valid status in Transaction
     case 'pending':
-      color = colors.g4;
-      backgroundColor = colors.g11;
-      Icon = CalendarIcon;
-      break;
+      return {
+        color: colors.g4,
+        backgroundColor: colors.g11,
+        Icon: CalendarIcon,
+      };
     case 'scheduled':
-      color = colors.n1;
-      backgroundColor = colors.n11;
-      Icon = CalendarIcon;
-      break;
+      return {
+        color: colors.n1,
+        backgroundColor: colors.n11,
+        Icon: CalendarIcon,
+      };
     case 'cleared':
-      color = colors.g5;
-      backgroundColor = colors.n11;
-      Icon = CheckCircle1;
-      break;
+      return {
+        color: colors.g5,
+        backgroundColor: colors.n11,
+        Icon: CheckCircle1,
+      };
     default:
-      color = colors.n7;
-      backgroundColor = colors.n11;
-      Icon = CheckCircleHollow;
-      break;
+      return {
+        color: colors.n7,
+        backgroundColor: colors.n11,
+        Icon: CheckCircleHollow,
+      };
   }
-
-  return { color, backgroundColor, Icon };
 }
 
-export function StatusBadge({ status }) {
-  let { color, backgroundColor, Icon } = getStatusProps(status);
+export function StatusBadge({ status }: { status: ScheduleStatusType }) {
+  const { color, backgroundColor, Icon } = getStatusProps(status);
   return (
     <View
       style={{
diff --git a/packages/loot-core/src/shared/util.ts b/packages/loot-core/src/shared/util.ts
index 8c748d475e4..b4d64754853 100644
--- a/packages/loot-core/src/shared/util.ts
+++ b/packages/loot-core/src/shared/util.ts
@@ -179,7 +179,7 @@ export function fastSetMerge(set1, set2) {
   return finalSet;
 }
 
-export function titleFirst(str) {
+export function titleFirst(str: string) {
   return str[0].toUpperCase() + str.slice(1);
 }