906 lines
32 KiB
TypeScript
906 lines
32 KiB
TypeScript
import React, { useState, useCallback } from "react";
|
||
import {
|
||
View,
|
||
ScrollView,
|
||
ActivityIndicator,
|
||
Linking,
|
||
useColorScheme,
|
||
Pressable,
|
||
Modal,
|
||
Dimensions,
|
||
Image,
|
||
} from "react-native";
|
||
import { useSirouRouter } from "@sirou/react-native";
|
||
import { AppRoutes } from "@/lib/routes";
|
||
import { Stack, useLocalSearchParams, useFocusEffect } from "expo-router";
|
||
import { Text } from "@/components/ui/text";
|
||
import {
|
||
Calendar,
|
||
Share2,
|
||
Download,
|
||
Trash2,
|
||
Package,
|
||
Clock,
|
||
User,
|
||
Hash,
|
||
AlertCircle,
|
||
Mail,
|
||
MessageSquare,
|
||
X,
|
||
MoreVertical,
|
||
FileText,
|
||
CreditCard,
|
||
ChevronRight,
|
||
Check,
|
||
Edit,
|
||
Camera,
|
||
ArrowUpRight,
|
||
} from "@/lib/icons";
|
||
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
||
import { StandardHeader } from "@/components/StandardHeader";
|
||
import { api, BASE_URL } from "@/lib/api";
|
||
import { toast } from "@/lib/toast-store";
|
||
import { useAuthStore } from "@/lib/auth-store";
|
||
import { ActionModal } from "@/components/ActionModal";
|
||
import { EmptyState } from "@/components/EmptyState";
|
||
import { WebView } from "react-native-webview";
|
||
import { UploadIcon } from "lucide-react-native";
|
||
import ticketImage from "@/assets/ticket.png";
|
||
|
||
const { height: SCREEN_HEIGHT } = Dimensions.get("window");
|
||
|
||
export default function InvoiceDetailScreen() {
|
||
const nav = useSirouRouter<AppRoutes>();
|
||
const { id } = useLocalSearchParams();
|
||
const colorScheme = useColorScheme();
|
||
const isDark = colorScheme === "dark";
|
||
|
||
const [loading, setLoading] = useState(true);
|
||
const [invoice, setInvoice] = useState<any>(null);
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||
const [showShareSheet, setShowShareSheet] = useState(false);
|
||
const [showMoreSheet, setShowMoreSheet] = useState(false);
|
||
const [sharing, setSharing] = useState(false);
|
||
const [activeTab, setActiveTab] = useState<"details" | "items" | "image">(
|
||
"details",
|
||
);
|
||
const [showImageFullScreen, setShowImageFullScreen] = useState(false);
|
||
const [imageLoading, setImageLoading] = useState(false);
|
||
|
||
const token = useAuthStore((state) => state.token);
|
||
|
||
useFocusEffect(
|
||
useCallback(() => {
|
||
fetchInvoice();
|
||
}, [id]),
|
||
);
|
||
|
||
const fetchInvoice = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const invoiceId = Array.isArray(id) ? id[0] : id;
|
||
if (!invoiceId) throw new Error("No ID provided");
|
||
|
||
const data = await api.invoices.getById({ params: { id: invoiceId } });
|
||
setInvoice(data);
|
||
} catch (error: any) {
|
||
console.error("[InvoiceDetail] Error:", error);
|
||
toast.error("Error", "Failed to load invoice details");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleGetPdf = async () => {
|
||
try {
|
||
const { token } = useAuthStore.getState();
|
||
const pdfUrl = `${BASE_URL}invoices/${id}/pdf?token=${token}`;
|
||
await Linking.openURL(pdfUrl);
|
||
} catch (error) {
|
||
console.error("[InvoiceDetail] PDF Error:", error);
|
||
toast.error("Error", "Failed to open PDF");
|
||
}
|
||
};
|
||
|
||
const handleShare = async (channel: "email" | "sms") => {
|
||
try {
|
||
setSharing(true);
|
||
const invoiceId = Array.isArray(id) ? id[0] : id;
|
||
await api.invoices.shareLink({
|
||
body: { invoiceId, channel },
|
||
});
|
||
toast.success(
|
||
"Sent",
|
||
`Invoice shared via ${channel === "email" ? "email" : "SMS"}`,
|
||
);
|
||
setShowShareSheet(false);
|
||
} catch (err: any) {
|
||
toast.error("Error", err?.message || "Failed to share invoice");
|
||
} finally {
|
||
setSharing(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = () => setShowDeleteModal(true);
|
||
|
||
const confirmDelete = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const invoiceId = Array.isArray(id) ? id[0] : id;
|
||
await api.invoices.delete({
|
||
params: { id: invoiceId as string },
|
||
});
|
||
toast.success("Success", "Invoice deleted successfully");
|
||
setShowDeleteModal(false);
|
||
nav.back();
|
||
} catch (error) {
|
||
console.error("[InvoiceDetail] Delete Error:", error);
|
||
toast.error("Error", "Failed to delete invoice");
|
||
setShowDeleteModal(false);
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<ScreenWrapper className="bg-background">
|
||
<Stack.Screen options={{ headerShown: false }} />
|
||
<StandardHeader title="Invoice" showBack />
|
||
<View className="flex-1 justify-center items-center">
|
||
<ActivityIndicator color="#ea580c" size="large" />
|
||
</View>
|
||
</ScreenWrapper>
|
||
);
|
||
}
|
||
|
||
if (!invoice) {
|
||
return (
|
||
<ScreenWrapper className="bg-background">
|
||
<Stack.Screen options={{ headerShown: false }} />
|
||
<StandardHeader title="Invoice" showBack />
|
||
<View className="flex-1 justify-center items-center">
|
||
<AlertCircle size={48} color="#ef4444" className="mb-4" />
|
||
<Text variant="h4" className="mb-1">
|
||
Invoice Not Found
|
||
</Text>
|
||
<Text variant="muted">
|
||
The requested document could not be retrieved.
|
||
</Text>
|
||
</View>
|
||
</ScreenWrapper>
|
||
);
|
||
}
|
||
|
||
// Robust data extraction
|
||
const originalData = invoice.scannedData?.originalData || {};
|
||
const items =
|
||
(invoice.items?.length > 0
|
||
? invoice.items
|
||
: invoice.scannedData?.items?.length > 0
|
||
? invoice.scannedData.items
|
||
: originalData.items) || [];
|
||
|
||
const taxAmountValue = Number(
|
||
typeof invoice.taxAmount === "object"
|
||
? invoice.taxAmount?.value
|
||
: invoice.taxAmount || originalData.taxAmount || 0,
|
||
);
|
||
|
||
const discountValue = Number(
|
||
typeof invoice.discountAmount === "object"
|
||
? invoice.discountAmount?.value
|
||
: invoice.discountAmount || originalData.discountAmount || 0,
|
||
);
|
||
|
||
let amountValue = Number(
|
||
typeof invoice.amount === "object" ? invoice.amount.value : invoice.amount,
|
||
);
|
||
|
||
if (items.length > 0) {
|
||
const itemsTotal = items.reduce(
|
||
(acc: number, item: any) =>
|
||
acc + (Number(item.total?.value || item.total) || 0),
|
||
0,
|
||
);
|
||
if (
|
||
itemsTotal > 0 &&
|
||
(amountValue === taxAmountValue || amountValue < itemsTotal)
|
||
) {
|
||
amountValue = itemsTotal + taxAmountValue - discountValue;
|
||
}
|
||
}
|
||
|
||
const subtotalValue = amountValue - taxAmountValue + discountValue;
|
||
const discountPercent =
|
||
subtotalValue > 0 ? Math.round((discountValue / subtotalValue) * 100) : 0;
|
||
|
||
const status = (invoice.status || "PENDING").toUpperCase();
|
||
const isPaid = status === "PAID";
|
||
const statusLabel: Record<string, string> = {
|
||
PAID: "Paid",
|
||
PENDING: "Pending",
|
||
DRAFT: "Draft",
|
||
CANCELLED: "Cancelled",
|
||
};
|
||
|
||
// Scanned image URL — try several common fields
|
||
const scannedImageRaw =
|
||
invoice.scannedData?.imageUrl ||
|
||
invoice.scannedData?.image ||
|
||
invoice.scannedData?.imagePath ||
|
||
invoice.scannedData?.originalData?.imageUrl ||
|
||
invoice.imageUrl ||
|
||
invoice.imagePath ||
|
||
invoice.receiptPath ||
|
||
null;
|
||
|
||
const scannedImageUrl = scannedImageRaw
|
||
? scannedImageRaw.startsWith("http")
|
||
? scannedImageRaw
|
||
: `${BASE_URL}${scannedImageRaw.replace(/^\//, "")}`
|
||
: null;
|
||
|
||
const hasScannedImage = Boolean(invoice?.isScanned && scannedImageUrl);
|
||
|
||
const customerName = (
|
||
invoice.customerName?.replace("Customer Name: ", "") || "Walking Client"
|
||
).trim();
|
||
|
||
const paymentDate = invoice.dueDate
|
||
? new Date(invoice.dueDate)
|
||
: invoice.issueDate
|
||
? new Date(invoice.issueDate)
|
||
: new Date(invoice.createdAt);
|
||
|
||
const paidDate = invoice.paidDate ? new Date(invoice.paidDate) : null;
|
||
|
||
const formatLongDate = (d: Date) =>
|
||
d.toLocaleDateString("en-US", {
|
||
day: "numeric",
|
||
month: "short",
|
||
year: "numeric",
|
||
});
|
||
|
||
return (
|
||
<ScreenWrapper className="bg-background">
|
||
<Stack.Screen options={{ headerShown: false }} />
|
||
<StandardHeader
|
||
title="Invoice Details"
|
||
showBack
|
||
right={
|
||
<Pressable
|
||
onPress={() => setShowMoreSheet(true)}
|
||
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
||
>
|
||
<MoreVertical color={isDark ? "#f1f5f9" : "#0f172a"} size={18} />
|
||
</Pressable>
|
||
}
|
||
/>
|
||
|
||
<ScrollView
|
||
className="flex-1"
|
||
contentContainerStyle={{ paddingBottom: 24 }}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* Hero Card — illustration overflows the top */}
|
||
<View className="px-5 pt-3">
|
||
<View
|
||
className="items-center"
|
||
style={{ marginBottom: -60, zIndex: 2 }}
|
||
>
|
||
<Image
|
||
source={ticketImage}
|
||
style={{ width: 150, height: 150 }}
|
||
resizeMode="contain"
|
||
/>
|
||
</View>
|
||
|
||
<View
|
||
className="rounded-[14px] pt-14 pb-6 px-6 items-center bg-primary/5"
|
||
style={{
|
||
borderWidth: 1,
|
||
borderColor: isDark
|
||
? "rgba(255,255,255,0.06)"
|
||
: "rgba(0,0,0,0.05)",
|
||
}}
|
||
>
|
||
<Text className="text-foreground text-[34px] font-sans-black tracking-tight leading-tight">
|
||
{Number(amountValue).toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2,
|
||
})}{" "}
|
||
<Text className="text-foreground text-[20px] font-sans-bold">
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</Text>
|
||
<Text className="text-muted-foreground text-[11px] font-sans-medium mt-1">
|
||
No.{" "}
|
||
{invoice.invoiceNumber ||
|
||
`INV${(invoice.id || "").slice(0, 8).toUpperCase()}`}
|
||
</Text>
|
||
|
||
<View className="w-full mt-5 gap-3">
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium">
|
||
Status
|
||
</Text>
|
||
<View
|
||
className="px-2.5 py-1 rounded-[4px] flex-row items-center gap-1.5"
|
||
style={{
|
||
backgroundColor: isPaid
|
||
? "rgba(34, 197, 94, 0.12)"
|
||
: "rgba(234, 179, 8, 0.12)",
|
||
}}
|
||
>
|
||
{isPaid ? (
|
||
<Check size={11} color="#16a34a" strokeWidth={3} />
|
||
) : (
|
||
<Clock size={11} color="#ca8a04" strokeWidth={2.5} />
|
||
)}
|
||
<Text
|
||
className="text-[10px] font-sans-bold tracking-widest"
|
||
style={{
|
||
color: isPaid ? "#16a34a" : "#ca8a04",
|
||
}}
|
||
>
|
||
{statusLabel[status] || "Pending"}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium">
|
||
Due Date
|
||
</Text>
|
||
<Text className="text-foreground text-[12px] font-sans-bold">
|
||
{formatLongDate(paymentDate)}
|
||
</Text>
|
||
</View>
|
||
{paidDate && (
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium">
|
||
Paid Date
|
||
</Text>
|
||
<View className="flex-row items-center gap-1.5">
|
||
<Check size={11} color="#16a34a" strokeWidth={3} />
|
||
<Text className="text-foreground text-[12px] font-sans-bold">
|
||
{formatLongDate(paidDate)}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Tabs */}
|
||
<View className="px-5 pt-5">
|
||
<View className="flex-row gap-6 border-b border-border">
|
||
<Pressable
|
||
onPress={() => setActiveTab("details")}
|
||
className="pb-2.5"
|
||
>
|
||
<Text
|
||
className={`text-[14px] font-sans-bold ${
|
||
activeTab === "details"
|
||
? "text-foreground"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
>
|
||
Details
|
||
</Text>
|
||
{activeTab === "details" && (
|
||
<View className="absolute -bottom-px left-0 right-0 h-0.5 bg-foreground" />
|
||
)}
|
||
</Pressable>
|
||
<Pressable onPress={() => setActiveTab("items")} className="pb-2.5">
|
||
<Text
|
||
className={`text-[14px] font-sans-bold ${
|
||
activeTab === "items"
|
||
? "text-foreground"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
>
|
||
Items
|
||
</Text>
|
||
{activeTab === "items" && (
|
||
<View className="absolute -bottom-px left-0 right-0 h-0.5 bg-foreground" />
|
||
)}
|
||
</Pressable>
|
||
{hasScannedImage && (
|
||
<Pressable
|
||
onPress={() => setActiveTab("image")}
|
||
className="pb-2.5"
|
||
>
|
||
<Text
|
||
className={`text-[14px] font-sans-bold ${
|
||
activeTab === "image"
|
||
? "text-foreground"
|
||
: "text-muted-foreground"
|
||
}`}
|
||
>
|
||
Image
|
||
</Text>
|
||
{activeTab === "image" && (
|
||
<View className="absolute -bottom-px left-0 right-0 h-0.5 bg-foreground" />
|
||
)}
|
||
</Pressable>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{activeTab === "details" ? (
|
||
<View className="px-5 pt-5">
|
||
<View className="gap-5">
|
||
<View>
|
||
<Text className="text-[11px] font-sans-bold tracking-widest text-muted-foreground mb-1.5">
|
||
Billed to
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
{invoice.customerEmail || "—"}
|
||
</Text>
|
||
</View>
|
||
|
||
<View>
|
||
<Text className="text-[11px] font-sans-bold tracking-widest text-muted-foreground mb-1.5">
|
||
Billing details
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
{customerName}
|
||
</Text>
|
||
</View>
|
||
|
||
<View>
|
||
<Text className="text-[11px] font-sans-bold tracking-widest text-muted-foreground mb-1.5">
|
||
Invoice Number
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
{invoice.invoiceNumber ||
|
||
`INV${(invoice.id || "").slice(0, 8).toUpperCase()}`}
|
||
</Text>
|
||
</View>
|
||
|
||
{invoice.notes && (
|
||
<View>
|
||
<Text className="text-foreground text-sm font-sans-bold mb-2">
|
||
Note
|
||
</Text>
|
||
<View className="rounded-[10px] bg-muted p-4">
|
||
<Text className="text-foreground font-sans-medium text-[13px] leading-5">
|
||
{invoice.notes}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{items.length > 0 ? (
|
||
<View className="mt-8">
|
||
<Text className="text-foreground text-[16px] font-sans-black tracking-tight mb-3">
|
||
Product
|
||
</Text>
|
||
<View>
|
||
{items.map((item: any, idx: number) => {
|
||
const qty = Number(
|
||
item.quantity?.value || item.quantity || 1,
|
||
);
|
||
const unitPrice = Number(
|
||
item.unitPrice?.value || item.unitPrice || 0,
|
||
);
|
||
const lineTotal = Number(
|
||
item.total?.value || item.total || qty * unitPrice,
|
||
);
|
||
return (
|
||
<View
|
||
key={idx}
|
||
className={`flex-row items-center gap-3 py-3 ${
|
||
idx < items.length - 1 ? "border-b border-border" : ""
|
||
}`}
|
||
>
|
||
<View className="h-12 w-12 rounded-[8px] bg-muted items-center justify-center overflow-hidden">
|
||
<Package
|
||
size={20}
|
||
color="#94a3b8"
|
||
strokeWidth={1.5}
|
||
/>
|
||
</View>
|
||
<View className="flex-1">
|
||
<Text
|
||
className="text-foreground text-[14px] font-sans-bold"
|
||
numberOfLines={1}
|
||
>
|
||
{item.description || "No item"}
|
||
</Text>
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium mt-0.5">
|
||
{qty} ×{" "}
|
||
{unitPrice.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
<View className="items-end">
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
{lineTotal.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
<Pressable hitSlop={8} className="px-1">
|
||
<MoreVertical size={16} color="#94a3b8" />
|
||
</Pressable>
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
<View className="mt-6 gap-2.5">
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[14px] font-sans-medium">
|
||
Subtotal
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
{subtotalValue.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
{discountValue > 0 ? (
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[14px] font-sans-medium">
|
||
Discount {discountPercent > 0 ? `${discountPercent}%` : ""}
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
-{" "}
|
||
{discountValue.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
) : null}
|
||
{taxAmountValue > 0 ? (
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[14px] font-sans-medium">
|
||
Tax
|
||
</Text>
|
||
<Text className="text-foreground text-[14px] font-sans-bold">
|
||
+{" "}
|
||
{taxAmountValue.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
) : null}
|
||
<View className="flex-row justify-between items-center pt-2 border-t border-border">
|
||
<Text className="text-foreground text-[15px] font-sans-black">
|
||
Total
|
||
</Text>
|
||
<Text className="text-foreground text-[15px] font-sans-black">
|
||
{amountValue.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
<View className="flex-row justify-between items-center">
|
||
<Text className="text-muted-foreground text-[13px] font-sans-medium">
|
||
Amount due
|
||
</Text>
|
||
<Text className="text-foreground text-[15px] font-sans-black">
|
||
{amountValue.toLocaleString("en-US", {
|
||
minimumFractionDigits: 2,
|
||
})}{" "}
|
||
{invoice.currency || "USD"}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
) : activeTab === "image" ? (
|
||
<View className="px-5 pt-5">
|
||
{hasScannedImage ? (
|
||
<View>
|
||
<Text className="text-foreground text-[16px] font-sans-black tracking-tight mb-3">
|
||
Scanned Document
|
||
</Text>
|
||
<Pressable
|
||
onPress={() => setShowImageFullScreen(true)}
|
||
className="rounded-[10px] overflow-hidden border border-border bg-card active:opacity-80"
|
||
>
|
||
<WebView
|
||
source={{ uri: scannedImageUrl || "" }}
|
||
style={{
|
||
width: "100%",
|
||
height: 360,
|
||
backgroundColor: isDark ? "#1F1F1F" : "#ffffff",
|
||
}}
|
||
originWhitelist={["*"]}
|
||
mixedContentMode="always"
|
||
scalesPageToFit
|
||
onLoadStart={() => setImageLoading(true)}
|
||
onLoadEnd={() => setImageLoading(false)}
|
||
onError={() => {
|
||
setImageLoading(false);
|
||
toast.error(
|
||
"Image Error",
|
||
"Failed to load scanned image.",
|
||
);
|
||
}}
|
||
renderError={() => (
|
||
<View className="flex-1 items-center justify-center p-4">
|
||
<Camera size={28} color="#94a3b8" />
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium mt-2 text-center">
|
||
Failed to load image
|
||
</Text>
|
||
</View>
|
||
)}
|
||
/>
|
||
{imageLoading && (
|
||
<View
|
||
className="absolute inset-0 items-center justify-center bg-card/40"
|
||
pointerEvents="none"
|
||
>
|
||
<ActivityIndicator color="#ea580c" size="large" />
|
||
</View>
|
||
)}
|
||
<View className="absolute bottom-3 right-3 h-9 w-9 rounded-full bg-black/60 items-center justify-center flex-row">
|
||
<ArrowUpRight size={16} color="#ffffff" strokeWidth={2.5} />
|
||
</View>
|
||
</Pressable>
|
||
<Text className="text-muted-foreground text-[11px] font-sans-medium mt-2 text-center">
|
||
Tap to view full screen
|
||
</Text>
|
||
</View>
|
||
) : (
|
||
<View className="px-5 pt-12 items-center">
|
||
<View className="h-14 w-14 rounded-full bg-muted items-center justify-center mb-3">
|
||
<Camera size={22} color="#94a3b8" />
|
||
</View>
|
||
<Text className="text-foreground text-[14px] font-sans-bold mb-1">
|
||
No image available
|
||
</Text>
|
||
<Text className="text-muted-foreground text-[12px] font-sans-medium text-center">
|
||
The scanned image could not be found.
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
) : null}
|
||
</ScrollView>
|
||
|
||
<View
|
||
className="flex-row gap-3 px-5 py-3 border-t border-border"
|
||
style={{ backgroundColor: isDark ? "#0a0505" : "#ffffff" }}
|
||
>
|
||
<Pressable
|
||
onPress={() => setShowShareSheet(true)}
|
||
className="flex-1 h-12 rounded-[8px] border border-border items-center justify-center flex-row gap-2 bg-card"
|
||
>
|
||
<Share2 color="#0f172a" size={16} strokeWidth={2.5} />
|
||
<Text className="text-foreground text-[13px] font-sans-bold">
|
||
Send Invoice
|
||
</Text>
|
||
</Pressable>
|
||
<Pressable
|
||
onPress={handleGetPdf}
|
||
className="flex-1 h-12 rounded-[8px] border border-border items-center justify-center flex-row gap-2 bg-card"
|
||
>
|
||
<UploadIcon color="#0f172a" size={16} strokeWidth={2.5} />
|
||
<Text className="text-foreground text-[13px] font-sans-bold">
|
||
Export
|
||
</Text>
|
||
</Pressable>
|
||
</View>
|
||
|
||
<Modal
|
||
visible={showShareSheet}
|
||
transparent
|
||
animationType="slide"
|
||
onRequestClose={() => setShowShareSheet(false)}
|
||
>
|
||
<Pressable
|
||
className="flex-1 bg-black/40"
|
||
onPress={() => setShowShareSheet(false)}
|
||
>
|
||
<View className="flex-1 justify-end">
|
||
<Pressable
|
||
className="bg-card rounded-t-[36px] overflow-hidden border-t-[3px] border-border/20"
|
||
style={{ maxHeight: SCREEN_HEIGHT * 0.8 }}
|
||
onPress={(e) => e.stopPropagation()}
|
||
>
|
||
<View className="px-6 pb-4 pt-4 flex-row justify-between items-center">
|
||
<View className="w-10" />
|
||
<Text className="text-foreground font-sans-bold text-[18px]">
|
||
Share
|
||
</Text>
|
||
<Pressable
|
||
onPress={() => setShowShareSheet(false)}
|
||
className="h-8 w-8 bg-secondary/80 rounded-full items-center justify-center border border-border/10"
|
||
>
|
||
<X
|
||
size={14}
|
||
color={isDark ? "#f1f5f9" : "#0f172a"}
|
||
strokeWidth={2.5}
|
||
/>
|
||
</Pressable>
|
||
</View>
|
||
|
||
<ScrollView
|
||
className="px-5"
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={{ paddingBottom: 40 }}
|
||
>
|
||
<ActionOption
|
||
icon={<Mail color="#E46212" size={18} strokeWidth={2} />}
|
||
label="Send as Email"
|
||
description="Public accessible shortened link via yaltopia.com"
|
||
onPress={() => handleShare("email")}
|
||
loading={sharing}
|
||
/>
|
||
<ActionOption
|
||
icon={
|
||
<MessageSquare color="#E46212" size={18} strokeWidth={2} />
|
||
}
|
||
label="Send as SMS"
|
||
description="Public accessible shortened link via yaltopia.com"
|
||
onPress={() => handleShare("sms")}
|
||
loading={sharing}
|
||
/>
|
||
</ScrollView>
|
||
</Pressable>
|
||
</View>
|
||
</Pressable>
|
||
</Modal>
|
||
|
||
<Modal
|
||
visible={showMoreSheet}
|
||
transparent
|
||
animationType="slide"
|
||
onRequestClose={() => setShowMoreSheet(false)}
|
||
>
|
||
<Pressable
|
||
className="flex-1 bg-black/40"
|
||
onPress={() => setShowMoreSheet(false)}
|
||
>
|
||
<View className="flex-1 justify-end">
|
||
<Pressable
|
||
className="bg-card rounded-t-[36px] overflow-hidden border-t-[3px] border-border/20"
|
||
style={{ maxHeight: SCREEN_HEIGHT * 0.5 }}
|
||
onPress={(e) => e.stopPropagation()}
|
||
>
|
||
<View className="px-6 pb-4 pt-4 flex-row justify-between items-center">
|
||
<View className="w-10" />
|
||
<Text className="text-foreground font-sans-bold text-[18px]">
|
||
Invoice
|
||
</Text>
|
||
<Pressable
|
||
onPress={() => setShowMoreSheet(false)}
|
||
className="h-8 w-8 bg-secondary/80 rounded-full items-center justify-center border border-border/10"
|
||
>
|
||
<X
|
||
size={14}
|
||
color={isDark ? "#f1f5f9" : "#0f172a"}
|
||
strokeWidth={2.5}
|
||
/>
|
||
</Pressable>
|
||
</View>
|
||
|
||
<ScrollView
|
||
className="px-5"
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={{ paddingBottom: 40 }}
|
||
>
|
||
<ActionOption
|
||
icon={<Edit color="#E46212" size={18} strokeWidth={2} />}
|
||
label="Edit Invoice"
|
||
description="Update details, items, or dates"
|
||
onPress={() => {
|
||
setShowMoreSheet(false);
|
||
nav.go("invoices/edit", { id: invoice.id });
|
||
}}
|
||
/>
|
||
<ActionOption
|
||
icon={<Trash2 color="#ef4444" size={18} strokeWidth={2} />}
|
||
label="Delete Invoice"
|
||
description="Permanently remove this record"
|
||
onPress={() => {
|
||
setShowMoreSheet(false);
|
||
setShowDeleteModal(true);
|
||
}}
|
||
danger
|
||
/>
|
||
</ScrollView>
|
||
</Pressable>
|
||
</View>
|
||
</Pressable>
|
||
</Modal>
|
||
|
||
{/* Full screen image viewer */}
|
||
<Modal
|
||
visible={showImageFullScreen}
|
||
transparent
|
||
animationType="fade"
|
||
onRequestClose={() => setShowImageFullScreen(false)}
|
||
>
|
||
<Pressable
|
||
className="flex-1 bg-black"
|
||
onPress={() => setShowImageFullScreen(false)}
|
||
>
|
||
<View className="flex-1">
|
||
{scannedImageUrl && (
|
||
<WebView
|
||
source={{ uri: scannedImageUrl }}
|
||
style={{ flex: 1, backgroundColor: "#000000" }}
|
||
originWhitelist={["*"]}
|
||
mixedContentMode="always"
|
||
scalesPageToFit
|
||
/>
|
||
)}
|
||
</View>
|
||
<Pressable
|
||
onPress={() => setShowImageFullScreen(false)}
|
||
className="absolute top-12 right-5 h-10 w-10 rounded-full bg-black/60 items-center justify-center border border-white/20"
|
||
>
|
||
<X size={18} color="#ffffff" strokeWidth={2.5} />
|
||
</Pressable>
|
||
</Pressable>
|
||
</Modal>
|
||
|
||
<ActionModal
|
||
visible={showDeleteModal}
|
||
onClose={() => setShowDeleteModal(false)}
|
||
onConfirm={confirmDelete}
|
||
title="Delete Invoice"
|
||
description="Are you sure you want to delete this invoice? This will remove all associated data and cannot be recovered."
|
||
confirmText="Delete"
|
||
confirmVariant="destructive"
|
||
icon={Trash2}
|
||
iconColor="#ef4444"
|
||
loading={loading}
|
||
/>
|
||
</ScreenWrapper>
|
||
);
|
||
}
|
||
|
||
function ActionOption({
|
||
icon,
|
||
label,
|
||
description,
|
||
onPress,
|
||
danger,
|
||
loading,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
description: string;
|
||
onPress?: () => void;
|
||
danger?: boolean;
|
||
loading?: boolean;
|
||
}) {
|
||
return (
|
||
<Pressable
|
||
onPress={onPress}
|
||
disabled={loading}
|
||
className="flex-row items-center gap-3.5 p-4 mb-2 rounded-[6px] border border-border bg-card"
|
||
>
|
||
<View className="h-9 w-9 rounded-full bg-primary/10 items-center justify-center">
|
||
{loading ? <ActivityIndicator color="#E46212" size="small" /> : icon}
|
||
</View>
|
||
<View className="flex-1">
|
||
<Text
|
||
className={`font-sans-bold text-sm ${danger ? "text-red-500" : "text-foreground"}`}
|
||
>
|
||
{label}
|
||
</Text>
|
||
<Text className="text-muted-foreground text-[11px] font-sans-medium mt-px">
|
||
{description}
|
||
</Text>
|
||
</View>
|
||
</Pressable>
|
||
);
|
||
}
|