feat: add money in and out sheets

.changeset/huge-waves-sneeze.md

@@ -0,0 +1,5 @@
+---
+"mpesa2csv": minor
+---
+
+feat: add money in/out sheets

pnpm-workspace.yaml

@@ -1,2 +1,5 @@
 overrides:
+  js-yaml@<3.14.2: '>=3.14.2'
+  tar@<=7.5.2: '>=7.5.3'
+  tar@<=7.5.3: '>=7.5.4'
   vite@>=7.1.0 <=7.1.10: '>=7.1.11'

src-tauri/tauri.conf.json

@@ -13,8 +13,8 @@
     "windows": [
       {
         "title": "mpesa2csv - Convert M-PESA Statements to CSV/Excel",
-        "width": 640,
-        "height": 730,
+        "width": 750,
+        "height": 850,
         "minWidth": 500,
         "minHeight": 400,
         "resizable": true
@@ -68,8 +68,8 @@
           "y": 170
         },
         "windowSize": {
-          "width": 660,
-          "height": 730
+          "width": 750,
+          "height": 850
         }
       }
     },

src/App.tsx

@@ -493,38 +493,39 @@ function App() {
                 />
               </div>
             ) : status === FileStatus.PROCESSING ? (
-              <div className="p-6 text-center flex flex-col items-center justify-center transition-all duration-300 min-h-[300px]">
-                <div className="relative mb-6 w-20 h-20">
-                  <div className="w-20 h-20 rounded-full bg-primary/20 animate-ping absolute"></div>
-                  <div className="w-20 h-20 rounded-full bg-primary/40 animate-pulse absolute"></div>
-                  <div className="w-20 h-20 rounded-full bg-primary flex items-center justify-center relative">
+              <div className="p-8 text-center flex flex-col items-center justify-center min-h-[400px]">
+                {/* Spinner */}
+                <div className="relative w-20 h-20 mb-6">
+                  <div className="w-20 h-20 rounded-full border-[3px] border-primary/20"></div>
+                  <div className="absolute inset-0 w-20 h-20 rounded-full border-[3px] border-transparent border-t-primary animate-spin"></div>
+                  <div className="absolute inset-0 flex items-center justify-center">
                     <span className="text-2xl">📊</span>
                   </div>
                 </div>
 
-                <div className="space-y-2">
-                  <p className="text-lg font-semibold">
-                    Processing Your Statements
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    File {currentFileIndex + 1} of {files.length}
-                  </p>
-
-                  {/* Progress bar */}
-                  <div className="w-64 h-2 bg-muted rounded-full overflow-hidden">
+                <h3 className="text-lg font-semibold mb-2">
+                  Processing Your Statements
+                </h3>
+
+                <p className="text-sm text-muted-foreground mb-8">
+                  File {currentFileIndex + 1} of {files.length}
+                </p>
+
+                {/* Progress bar */}
+                <div className="w-64 mb-4">
+                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                     <div
                       className="h-full bg-primary transition-all duration-300"
                       style={{
-                        width: `${
-                          ((currentFileIndex + 1) / files.length) * 100
-                        }%`,
+                        width: `${((currentFileIndex + 1) / files.length) * 100}%`,
                       }}
                     ></div>
                   </div>
                 </div>
 
+                {/* Current file */}
                 {files[currentFileIndex] && (
-                  <p className="text-xs text-muted-foreground mt-4 truncate max-w-full px-4">
+                  <p className="text-xs text-muted-foreground truncate max-w-xs">
                     {files[currentFileIndex].name}
                   </p>
                 )}

src/components/export-options.tsx

@@ -78,6 +78,17 @@ const SHEET_OPTIONS = [
     description:
       "Top 20 people/entities you send money to and receive money from, with totals and transaction counts. Excludes charges and fees.",
   },
+  {
+    key: "includeMoneyInSheet" as keyof ExportOptionsType,
+    name: "Money In",
+    description: "Separate sheet with all transactions where money was received",
+  },
+  {
+    key: "includeMoneyOutSheet" as keyof ExportOptionsType,
+    name: "Money Out",
+    description: "Separate sheet with all transactions where money was spent",
+  },
+
 ];
 
 export default function ExportOptions({

src/index.css

@@ -3,6 +3,20 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom animations */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s infinite;
+}
+
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
   :root {

src/services/exports/index.ts

@@ -4,3 +4,5 @@ export { addMonthlyWeeklyBreakdownSheet } from "./monthlyWeeklyBreakdownSheet";
 export { addDailyBalanceTrackerSheet } from "./dailyBalanceTrackerSheet";
 export { addTransactionAmountDistributionSheet } from "./transactionAmountDistributionSheet";
 export { addTopContactsSheet } from "./topContactsSheet";
+export { addMoneyInSheet } from "./moneyInSheet";
+export { addMoneyOutSheet } from "./moneyOutSheet";