+
@@ -114,9 +120,9 @@ export function Locations() {
Default Accounts
{mpesaAcct ? (
-
{mpesaAcct.name}
+
{mpesaAcct.name}
) : (
-
No M-PESA wallet
+
No wallet
)}
{cashAcct ? (
{cashAcct.name}
@@ -129,7 +135,7 @@ export function Locations() {
Accounts ({locAccounts.length})
{locAccounts.map(a => (
-
+
{a.name} · {a.currentBalance}
))}
diff --git a/src/pages/Mpesa.tsx b/src/pages/Mpesa.tsx
index 55df11d..7e99c24 100644
--- a/src/pages/Mpesa.tsx
+++ b/src/pages/Mpesa.tsx
@@ -48,7 +48,8 @@ export function Mpesa() {
const { data: categories, refetch: refetchCategories } = trpc.expenses.categories.useQuery();
const { data: suppliers } = trpc.suppliers.list.useQuery();
const { data: accounts } = trpc.accounts.list.useQuery();
- const mpesaAccounts = accounts?.filter(a => a.type === "mpesa" && a.isActive && !a.deletedAt) ?? [];
+ const walletTypes = ["mpesa", "wallet"];
+ const mpesaAccounts = accounts?.filter(a => walletTypes.includes(a.type) && a.isActive && !a.deletedAt) ?? [];
// Always pass the date parameters to ensure proper filtering
const { data: transactions, refetch } = trpc.mpesa.list.useQuery({
@@ -341,11 +342,11 @@ export function Mpesa() {
-
-
Select the M-PESA wallet/account that received this topup. The system will credit this account.
+
+
Select the wallet account that received this topup. The system will credit this account.
+
+
+
+
Create, edit, and switch between businesses
+
+
+
+
+
+
+
+
+
+
+ Multi-Currency
+
+
+
+
+
+
+
Allow transacting in multiple currencies with live exchange rates
+
+
toggle("multiCurrency")} disabled={!canManage} />
+
+
+
+
+
+
+ Branches & Locations
+
+
+
+
+ Create and manage business branches, set default wallets and cash accounts, and view all linked accounts per location.
+
+
@@ -390,6 +484,199 @@ export function Settings() {
)}
+ {tab === "wallets" && (
+ <>
+
+
+
Wallet Management
+
Provider configuration, exchange rates, and currency management
+
+
+
+
+
+ {(["providers", "rates", "currencies"] as const).map((t) => (
+
+ ))}
+
+
+ {walletSubTab === "providers" && (
+ <>
+
+ {health?.map((h: any) => (
+
+
+
+
+ {PROVIDER_ICONS[h.provider] ||
}
+
+
+
{h.displayName}
+
{h.provider}
+
+
+
+
{h.features?.initiatePayment ? "API" : "SMS"}
+
+
+
Currencies: {(h.supportedCurrencies || []).join(", ")}
+
Last txn: {h.lastTransactionDate || "No transactions"}
+
+ {Object.entries(h.features || {}).filter(([, v]) => v).map(([k]) => (
+ {k}
+ ))}
+
+
+
+ ))}
+ {(!health || health.length === 0) && (
+
No providers registered
+ )}
+
+
+
+ Available Providers
+
+
+ {providers?.map((p: any) => (
+
+
+
{p.displayName || p.name} ({p.code})
+
{p.supportedCurrencies} · {p.isActive ? "Active" : "Inactive"}
+
+
+ ))}
+ {(!providers || providers.length === 0) && (
+
No providers available
+ )}
+
+
+ )}
+
+ {walletSubTab === "rates" && (
+
+
+
+
Exchange Rates
+
+
+
+
+
Manual Rate Override
+
+
+
+
+
+
+
+
+
+
+
+
+ setRateForm(f => ({ ...f, rate: e.target.value }))} placeholder="e.g. 153.25" className="text-sm" />
+
+
+
+
+
+ | From |
+ To |
+ Rate |
+ Source |
+ Last Updated |
+
+
+
+ {rates?.map((r: any) => (
+
+ | {r.fromCurrency} |
+ {r.toCurrency} |
+ {r.rate} |
+ {r.source || "Manual"} |
+ {r.updatedAt ? new Date(r.updatedAt).toLocaleDateString() : "-"} |
+
+ ))}
+ {(!rates || rates.length === 0) && (
+
+ | No exchange rates configured |
+
+ )}
+
+
+
+
+ )}
+
+ {walletSubTab === "currencies" && (
+
+ Supported Currencies
+
+
+
+
+ | Code |
+ Name |
+ Symbol |
+ Decimals |
+ Status |
+
+
+
+ {currencies?.map((c: any) => (
+
+ | {c.code} |
+ {c.name} |
+ {c.symbol} |
+ {c.decimalPlaces} |
+
+
+ {c.isDefault && (default)}
+ |
+
+ ))}
+
+
+
+
+ )}
+
+ )}
+
{tab === "integrations" && (
<>
{/* API Keys */}
@@ -499,6 +786,41 @@ export function Settings() {
+
+ {/* Currency Exchanges */}
+
+ Currency Exchanges
+
+
+
+
+
+
Frankfurter
+
https://api.frankfurter.dev
+
+
Active
+
+
+ Frankfurter is a free, open-source exchange rate API. You can self-host it and change the endpoint later.
+
+
+ API URL
+ https://api.frankfurter.dev/v2/rates
+
+
+
+
+
)}
diff --git a/src/pages/Wallet.tsx b/src/pages/Wallet.tsx
new file mode 100644
index 0000000..3c021a3
--- /dev/null
+++ b/src/pages/Wallet.tsx
@@ -0,0 +1,671 @@
+// ABOUTME: Multi-provider mobile wallet dashboard showing all configured wallet providers and their transactions.
+// ABOUTME: Uses the unified wallet API (trpc.wallet.*) for provider-agnostic wallet management.
+import { useState, useEffect } from "react";
+import { Layout } from "@/components/Layout";
+import { trpc } from "@/providers/trpc";
+import { formatKES, formatDate, getLocalDateString } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Smartphone, Upload, ArrowUpRight, ArrowDownRight, Tag, Receipt, Wallet as WalletIcon, Landmark, Plus, Link2, BookOpen } from "lucide-react";
+
+export function Wallet() {
+ const [tab, setTab] = useState<"overview" | "transactions" | "ledger" | "import">("overview");
+ const [selectedProvider, setSelectedProvider] = useState
("");
+ const [dateFrom, setDateFrom] = useState(() => {
+ const d = new Date(); d.setMonth(d.getMonth() - 1); return d.toISOString().split("T")[0];
+ });
+ const [dateTo, setDateTo] = useState(() => new Date().toISOString().split("T")[0]);
+ const [smsText, setSmsText] = useState("");
+ const [selectedLocation, setSelectedLocation] = useState("");
+ const [smsProvider, setSmsProvider] = useState("mpesa");
+ const [parsedPreview, setParsedPreview] = useState([]);
+ const [isPreviewing, setIsPreviewing] = useState(false);
+ const [tagTxnId, setTagTxnId] = useState(null);
+ const [linkTxnId, setLinkTxnId] = useState(null);
+ const [expenseForm, setExpenseForm] = useState({ locationId: "", categoryId: "", description: "", supplierId: "" });
+ const [linkForm, setLinkForm] = useState({ sourceAccountId: "", destinationAccountId: "" });
+ const [ledgerOpen, setLedgerOpen] = useState(false);
+ const [selectedWallet, setSelectedWallet] = useState("");
+ const [ledgerForm, setLedgerForm] = useState({ locationId: "", accountId: "", ledgerDate: getLocalDateString(), openingBalance: "", closingBalance: "", notes: "", provider: "mpesa" });
+
+ const utils = trpc.useUtils();
+ const { data: locations } = trpc.locations.list.useQuery();
+ const { data: providers } = trpc.wallet.providers.list.useQuery();
+ const { data: accounts } = trpc.accounts.list.useQuery();
+ const { data: categories, refetch: refetchCategories } = trpc.expenses.categories.useQuery();
+ const { data: suppliers } = trpc.suppliers.list.useQuery();
+ const { data: feeAnalysis } = trpc.dashboard.feeAnalysis.useQuery({});
+ const { data: transactions, refetch } = trpc.wallet.transactions.list.useQuery({
+ provider: selectedProvider || undefined,
+ dateFrom, dateTo,
+ });
+ const { data: stats } = trpc.wallet.transactions.stats.useQuery({
+ provider: selectedProvider || undefined,
+ dateFrom, dateTo,
+ });
+ const { data: ledgers, refetch: refetchLedger } = trpc.wallet.dailyLedger.list.useQuery({
+ provider: selectedProvider || undefined,
+ dateFrom, dateTo,
+ });
+
+ const importSms = trpc.wallet.transactions.importSms.useMutation({
+ onSuccess: () => { setSmsText(""); setParsedPreview([]); refetch(); utils.wallet.transactions.stats.invalidate(); },
+ });
+
+ const createExpenseFromTxn = trpc.wallet.transactions.createExpenseFromTxn.useMutation({
+ onSuccess: () => { setTagTxnId(null); refetch(); utils.expenses.list.invalidate(); utils.suppliers.list.invalidate(); },
+ });
+
+ const linkTopup = trpc.wallet.transactions.linkTopupToAccount.useMutation({
+ onSuccess: () => { setLinkTxnId(null); setLinkForm({ sourceAccountId: "", destinationAccountId: "" }); refetch(); utils.accounts.list.invalidate(); },
+ });
+
+ const createLedger = trpc.wallet.dailyLedger.create.useMutation({
+ onSuccess: () => {
+ setLedgerOpen(false);
+ setLedgerForm({ locationId: "", accountId: "", ledgerDate: getLocalDateString(), openingBalance: "", closingBalance: "", notes: "", provider: "mpesa" });
+ refetchLedger();
+ }
+ });
+
+ const previewSmsQuery = trpc.wallet.transactions.previewSms.useQuery(
+ { locationId: parseInt(selectedLocation), provider: smsProvider, smsText },
+ { enabled: false },
+ );
+
+ useEffect(() => {
+ if (tagTxnId !== null) {
+ refetchCategories();
+ }
+ }, [tagTxnId, refetchCategories]);
+
+ useEffect(() => { setParsedPreview([]); }, [smsText, smsProvider, selectedLocation]);
+
+ const handlePreviewSms = async () => {
+ if (!selectedLocation || !smsText.trim()) return;
+ setIsPreviewing(true);
+ try {
+ const result = await previewSmsQuery.refetch();
+ if (result.data) { setParsedPreview(result.data); }
+ } catch {
+ setParsedPreview([]);
+ }
+ setIsPreviewing(false);
+ };
+
+ const handleImportSms = () => {
+ if (!selectedLocation || !smsText.trim()) return;
+ importSms.mutate({ locationId: parseInt(selectedLocation), provider: smsProvider, smsText });
+ };
+
+ const providerColors: Record = {
+ mpesa: "bg-green-600",
+ airtel: "bg-red-600",
+ sasapay: "bg-blue-600",
+ };
+
+ const providerIcons: Record = {
+ mpesa: "M-PESA",
+ airtel: "Airtel",
+ sasapay: "Sasapay",
+ };
+
+ const totalIn = parseFloat(stats?.summary?.totalIn ?? "0");
+ const totalOut = parseFloat(stats?.summary?.totalOut ?? "0");
+ const totalFees = parseFloat(stats?.summary?.totalFees ?? "0");
+ const netFlow = totalIn - totalOut - totalFees;
+
+ const walletTypes = ["mpesa", "wallet"];
+ const walletAccounts = accounts?.filter(a => walletTypes.includes(a.type) && a.isActive && !a.deletedAt) ?? [];
+ const bankAccounts = accounts?.filter(a => a.type === "bank_account" && !a.deletedAt) ?? [];
+
+ // Ledger calculations (mirror Mpesa page pattern)
+ const ledgerTxns = selectedWallet ? transactions?.filter((t: any) => {
+ const wallet = walletAccounts.find(a => a.id.toString() === selectedWallet);
+ return wallet && t.locationId === wallet.locationId;
+ }) : transactions;
+ const rangeTxns = ledgerTxns ?? [];
+ const ledgerTotalIn = rangeTxns.filter((t: any) => parseFloat(t.amount) > 0).reduce((s: number, t: any) => s + parseFloat(t.amount), 0);
+ const ledgerTotalOut = rangeTxns.filter((t: any) => parseFloat(t.amount) < 0).reduce((s: number, t: any) => s + Math.abs(parseFloat(t.amount)), 0);
+ const ledgerTotalFees = rangeTxns.reduce((s: number, t: any) => s + parseFloat(t.txnFee || "0"), 0);
+
+ const handleLedgerSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ createLedger.mutate({
+ locationId: +ledgerForm.locationId,
+ provider: ledgerForm.provider,
+ accountId: +ledgerForm.accountId,
+ ledgerDate: ledgerForm.ledgerDate,
+ openingBalance: ledgerForm.openingBalance,
+ notes: ledgerForm.notes,
+ });
+ };
+
+ const smsImportSection = (fullPage?: boolean) => (
+
+
+
+
+ {locations && locations.length === 0 && (
+
No locations found for your current business. Please create a location first in Settings.
+ )}
+
Transactions will be imported to the selected location and will only be visible when viewing this business.
+
+
+
+
+
+
+
+
Paste multiple SMS messages. Each line should contain one transaction.
+