braid-ui 1.0.98 → 1.0.99

package/src/pages/transactions/NewTransaction.tsx

@@ -0,0 +1,527 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { PageLayout } from "@/components/ui/page-layout"
+import { FormCard } from "@/components/ui/form-card"
+import { Button } from "@/components/ui/button"
+import { FormProvider } from "@/components/ui/form-provider"
+import { FormSelect } from "@/components/ui/form-select"
+import { FormInput } from "@/components/ui/form-input"
+import { InfoField } from "@/components/ui/info-field"
+import { DataGrid } from "@/components/ui/data-grid"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { ArrowLeftRight, Settings, Building2, Zap, Search, CheckCircle2, XCircle, AlertCircle, Edit } from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+const newTransactionSchema = z.object({
+  transactionType: z.string().min(1, "Transaction type is required"),
+  accountNumber: z.string().min(1, "Account number is required"),
+  counterpartyName: z.string().min(1, "Counterparty name is required"),
+  amount: z.string().min(1, "Amount is required"),
+  currency: z.string().min(1, "Currency is required"),
+  description: z.string().optional(),
+})
+
+type NewTransactionForm = z.infer<typeof newTransactionSchema>
+
+const TRANSACTION_TYPES = [
+  { value: "transfer", label: "Transfer", icon: ArrowLeftRight },
+  { value: "adjustment", label: "Adjustment", icon: Settings },
+  { value: "ach", label: "ACH", icon: Building2 },
+  { value: "wire", label: "Wire", icon: Zap },
+]
+
+const CURRENCY_OPTIONS = [
+  { value: "USD", label: "USD - US Dollar" },
+  { value: "EUR", label: "EUR - Euro" },
+  { value: "GBP", label: "GBP - British Pound" },
+  { value: "JPY", label: "JPY - Japanese Yen" },
+  { value: "CAD", label: "CAD - Canadian Dollar" },
+  { value: "AUD", label: "AUD - Australian Dollar" },
+  { value: "CHF", label: "CHF - Swiss Franc" },
+  { value: "CNY", label: "CNY - Chinese Yuan" },
+]
+
+// Mock account data - would come from API in real app
+const mockAccountData = {
+  accountNumber: "****1234",
+  accountName: "Business Checking",
+  accountType: "Checking",
+  balance: "$125,450.00",
+  customerName: "Acme Corporation",
+  customerId: "CUST-001",
+  customerType: "Business",
+}
+
+// Mock counterparty data - would come from API in real app
+const mockCounterpartyData = {
+  counterpartyName: "Global Tech Solutions Inc.",
+  counterpartyId: "CP-5678",
+  counterpartyType: "Business",
+  status: "Active",
+  taxId: "98-7654321",
+  primaryContact: "Sarah Johnson",
+  contactEmail: "sarah.johnson@globaltech.com",
+  contactPhone: "+1 (555) 987-6543",
+  address: "456 Innovation Drive, San Francisco, CA 94105",
+}
+
+export default function NewTransaction() {
+  const navigate = useNavigate()
+  const [accountLookedUp, setAccountLookedUp] = useState(false)
+  const [accountData, setAccountData] = useState<typeof mockAccountData | null>(null)
+  const [counterpartyLookedUp, setCounterpartyLookedUp] = useState(false)
+  const [counterpartyData, setCounterpartyData] = useState<typeof mockCounterpartyData | null>(null)
+  const [confirmationOpen, setConfirmationOpen] = useState(false)
+  const [submissionStatus, setSubmissionStatus] = useState<"success" | "error" | null>(null)
+  const [errorMessage, setErrorMessage] = useState("")
+  const [transactionId, setTransactionId] = useState("")
+
+  const form = useForm<NewTransactionForm>({
+    resolver: zodResolver(newTransactionSchema),
+    defaultValues: {
+      transactionType: "",
+      accountNumber: "",
+      counterpartyName: "",
+      amount: "",
+      currency: "USD",
+      description: "",
+    },
+  })
+
+  const transactionType = form.watch("transactionType")
+  const accountNumber = form.watch("accountNumber")
+  const counterpartyName = form.watch("counterpartyName")
+  const amount = form.watch("amount")
+
+  const handleAccountLookup = () => {
+    const accNum = form.getValues("accountNumber")
+    if (!accNum) {
+      toast.error("Please enter an account number")
+      return
+    }
+    // Simulate account lookup
+    setAccountData(mockAccountData)
+    setAccountLookedUp(true)
+    toast.success("Account found")
+  }
+
+  const handleCounterpartyLookup = () => {
+    const cpName = form.getValues("counterpartyName")
+    if (!cpName) {
+      toast.error("Please enter a counterparty name")
+      return
+    }
+    // Simulate counterparty lookup
+    setCounterpartyData(mockCounterpartyData)
+    setCounterpartyLookedUp(true)
+    toast.success("Counterparty found")
+  }
+
+  const handleEditAccount = () => {
+    setAccountLookedUp(false)
+    setAccountData(null)
+    // Reset dependent sections
+    form.setValue("transactionType", "")
+    setCounterpartyLookedUp(false)
+    setCounterpartyData(null)
+    form.setValue("counterpartyName", "")
+    form.setValue("amount", "")
+    form.setValue("description", "")
+  }
+
+  const handleEditCounterparty = () => {
+    setCounterpartyLookedUp(false)
+    setCounterpartyData(null)
+    // Reset dependent sections
+    form.setValue("amount", "")
+    form.setValue("description", "")
+  }
+
+  const handleSubmit = () => {
+    const data = form.getValues()
+    
+    if (!data.transactionType || !data.accountNumber || !data.counterpartyName || !data.amount) {
+      toast.error("Please complete all required fields")
+      return
+    }
+
+    if (!accountLookedUp || !counterpartyLookedUp) {
+      toast.error("Please lookup both account and counterparty")
+      return
+    }
+    
+    // Simulate transaction processing with random success/failure
+    const amount = parseFloat(data.amount)
+    const balance = 125450 // Current balance from mock data
+    
+    // Simulate different error scenarios
+    const hasError = Math.random() > 0.7 // 30% chance of error for demo
+    
+    if (hasError) {
+      const errorScenarios = [
+        "Insufficient funds. Current balance: $125,450.00, Required: $" + amount.toFixed(2),
+        "Transaction limit exceeded. Daily limit: $50,000.00",
+        "Counterparty account is temporarily unavailable. Please try again later.",
+        "Invalid routing number for the selected transaction type."
+      ]
+      setSubmissionStatus("error")
+      setErrorMessage(errorScenarios[Math.floor(Math.random() * errorScenarios.length)])
+      setConfirmationOpen(true)
+    } else {
+      // Success scenario
+      const txId = "TXN-" + Math.random().toString(36).substr(2, 9).toUpperCase()
+      setTransactionId(txId)
+      setSubmissionStatus("success")
+      setConfirmationOpen(true)
+    }
+  }
+
+  const handleConfirmationClose = () => {
+    setConfirmationOpen(false)
+    if (submissionStatus === "success") {
+      navigate("/transactions/history")
+    }
+  }
+
+  const handleCancel = () => {
+    navigate("/dashboard")
+  }
+
+  const accountDataGrid = accountData ? [
+    {
+      title: "Account Information",
+      items: [
+        { label: "Account Number", value: accountData.accountNumber },
+        { label: "Account Name", value: accountData.accountName },
+        { label: "Account Type", value: accountData.accountType },
+        { label: "Balance", value: accountData.balance },
+        { label: "Customer Name", value: accountData.customerName },
+        { label: "Customer ID", value: accountData.customerId },
+      ]
+    }
+  ] : []
+
+  const counterpartyDataGrid = counterpartyData ? [
+    {
+      title: "Counterparty Information",
+      items: [
+        { label: "Counterparty Name", value: counterpartyData.counterpartyName },
+        { label: "Counterparty ID", value: counterpartyData.counterpartyId },
+        { label: "Type", value: counterpartyData.counterpartyType },
+        { label: "Status", value: counterpartyData.status },
+        { label: "Tax ID", value: counterpartyData.taxId },
+        { label: "Primary Contact", value: counterpartyData.primaryContact },
+        { label: "Contact Email", value: counterpartyData.contactEmail },
+        { label: "Contact Phone", value: counterpartyData.contactPhone },
+        { label: "Address", value: counterpartyData.address },
+      ]
+    }
+  ] : []
+
+  const reviewData = [
+    {
+      title: "Transaction Summary",
+      items: [
+        { label: "Transaction Type", value: TRANSACTION_TYPES.find(t => t.value === transactionType)?.label || "-" },
+        { label: "Account Number", value: accountNumber || "-" },
+        { label: "Counterparty", value: counterpartyName || "-" },
+        { label: "Amount", value: amount ? `$${amount}` : "-" },
+        { label: "Description", value: form.watch("description") || "N/A" },
+      ]
+    }
+  ]
+
+  return (
+    <PageLayout
+      title="New Transaction"
+      description="Complete the form below to initiate a new transaction"
+    >
+      <div className="max-w-4xl mx-auto space-y-6">
+        <FormProvider form={form}>
+          <form onSubmit={(e) => e.preventDefault()}>
+            {/* Account Lookup */}
+            {!accountLookedUp ? (
+              <FormCard 
+                title="Account Lookup" 
+                variant="default"
+              >
+                <div className="space-y-4">
+                  <FormInput
+                    name="accountNumber"
+                    label="Account Number"
+                    placeholder="Enter account number"
+                  />
+                  <Button 
+                    onClick={handleAccountLookup} 
+                    className="w-full sm:w-auto"
+                    disabled={!accountNumber}
+                  >
+                    <Search className="h-4 w-4 mr-2" />
+                    Lookup Account
+                  </Button>
+                </div>
+              </FormCard>
+            ) : (
+              /* Account Information (Read-only) */
+              <FormCard 
+                title="Account Information" 
+                variant="subtle"
+                headerActions={
+                  <div className="flex items-center gap-2">
+                    <CheckCircle2 className="h-5 w-5 text-success" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleEditAccount}
+                    >
+                      <Edit className="h-4 w-4 mr-1" />
+                      Edit
+                    </Button>
+                  </div>
+                }
+              >
+                <DataGrid data={accountDataGrid} columns={2} />
+              </FormCard>
+            )}
+
+            {/* Transaction Type Selection */}
+            <FormCard 
+              title="Transaction Type" 
+              variant="default"
+              className={cn(!accountLookedUp && "opacity-50 pointer-events-none")}
+            >
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4">
+                {TRANSACTION_TYPES.map((type) => {
+                  const Icon = type.icon
+                  const isSelected = transactionType === type.value
+                  return (
+                    <button
+                      key={type.value}
+                      type="button"
+                      onClick={() => form.setValue("transactionType", type.value)}
+                      disabled={!accountLookedUp}
+                      className={cn(
+                        "flex flex-col items-center justify-center p-4 lg:p-3 rounded-lg border-2 transition-all",
+                        "hover:border-primary/50 hover:shadow-md",
+                        isSelected
+                          ? "border-primary bg-primary/5 shadow-sm"
+                          : "border-border bg-card"
+                      )}
+                    >
+                      <Icon className={cn(
+                        "h-6 w-6 lg:h-5 lg:w-5 mb-2",
+                        isSelected ? "text-primary" : "text-muted-foreground"
+                      )} />
+                      <span className={cn(
+                        "text-sm font-medium",
+                        isSelected ? "text-primary" : "text-foreground"
+                      )}>
+                        {type.label}
+                      </span>
+                    </button>
+                  )
+                })}
+              </div>
+            </FormCard>
+
+            {/* Counterparty Lookup */}
+            {!counterpartyLookedUp ? (
+              <FormCard 
+                title="Counterparty Lookup" 
+                variant="default"
+                className={cn(!transactionType && "opacity-50 pointer-events-none")}
+              >
+                <div className="space-y-4">
+                  <FormInput
+                    name="counterpartyName"
+                    label="Counterparty Name"
+                    placeholder="Enter counterparty name"
+                    disabled={!transactionType}
+                  />
+                  <Button 
+                    onClick={handleCounterpartyLookup} 
+                    className="w-full sm:w-auto"
+                    disabled={!transactionType || !counterpartyName}
+                  >
+                    <Search className="h-4 w-4 mr-2" />
+                    Lookup Counterparty
+                  </Button>
+                </div>
+              </FormCard>
+            ) : (
+              /* Counterparty Information (Read-only) */
+              <FormCard 
+                title="Counterparty Information" 
+                variant="subtle"
+                headerActions={
+                  <div className="flex items-center gap-2">
+                    <CheckCircle2 className="h-5 w-5 text-success" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleEditCounterparty}
+                    >
+                      <Edit className="h-4 w-4 mr-1" />
+                      Edit
+                    </Button>
+                  </div>
+                }
+              >
+                <DataGrid data={counterpartyDataGrid} columns={2} />
+              </FormCard>
+            )}
+
+            {/* Transaction Details */}
+            <FormCard 
+              title="Transaction Details" 
+              variant="default"
+              className={cn(!counterpartyLookedUp && "opacity-50 pointer-events-none")}
+            >
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-4">
+                  <FormInput
+                    name="amount"
+                    label="Amount"
+                    placeholder="0.00"
+                    type="number"
+                    disabled={!counterpartyLookedUp}
+                  />
+                  <FormSelect
+                    name="currency"
+                    label="Currency"
+                    options={CURRENCY_OPTIONS}
+                    disabled={!counterpartyLookedUp}
+                  />
+                </div>
+                <FormInput
+                  name="description"
+                  label="Description (Optional)"
+                  placeholder="Enter transaction description"
+                  disabled={!counterpartyLookedUp}
+                />
+              </div>
+            </FormCard>
+
+            {/* Review Summary */}
+            <FormCard 
+              title="Review & Submit" 
+              variant="default"
+            >
+              <div className="space-y-6">
+                <DataGrid data={reviewData} columns={2} />
+                
+                <div className="flex gap-3 justify-end pt-4 border-t border-border">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleCancel}
+                    className="w-32"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={handleSubmit}
+                    className="w-48"
+                    disabled={!transactionType || !accountNumber || !counterpartyName || !amount}
+                  >
+                    <CheckCircle2 className="h-4 w-4 mr-2" />
+                    Submit Transaction
+                  </Button>
+                </div>
+              </div>
+            </FormCard>
+          </form>
+        </FormProvider>
+
+        {/* Confirmation Dialog */}
+        <Dialog open={confirmationOpen} onOpenChange={setConfirmationOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <div className="flex items-center gap-3 mb-2">
+                {submissionStatus === "success" ? (
+                  <div className="h-12 w-12 rounded-full bg-success/10 flex items-center justify-center">
+                    <CheckCircle2 className="h-6 w-6 text-success" />
+                  </div>
+                ) : (
+                  <div className="h-12 w-12 rounded-full bg-destructive/10 flex items-center justify-center">
+                    <XCircle className="h-6 w-6 text-destructive" />
+                  </div>
+                )}
+                <DialogTitle className="text-xl">
+                  {submissionStatus === "success" ? "Transaction Successful" : "Transaction Failed"}
+                </DialogTitle>
+              </div>
+              <DialogDescription className="text-left">
+                {submissionStatus === "success" ? (
+                  <div className="space-y-4 pt-2">
+                    <p className="text-foreground">Your transaction has been successfully submitted and is being processed.</p>
+                    <div className="bg-muted/50 rounded-lg p-4 space-y-2">
+                      <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Transaction ID:</span>
+                        <span className="font-mono font-medium">{transactionId}</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Amount:</span>
+                        <span className="font-medium">${amount}</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Type:</span>
+                        <span className="font-medium">{TRANSACTION_TYPES.find(t => t.value === transactionType)?.label}</span>
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">Counterparty:</span>
+                        <span className="font-medium">{counterpartyName}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-start gap-2 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+                      <AlertCircle className="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" />
+                      <p className="text-sm text-blue-700 dark:text-blue-300">
+                        You will receive a confirmation email once the transaction is completed.
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-4 pt-2">
+                    <div className="flex items-start gap-2 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
+                      <XCircle className="h-5 w-5 text-destructive mt-0.5 flex-shrink-0" />
+                      <div className="space-y-1">
+                        <p className="text-sm font-medium text-destructive">Error Processing Transaction</p>
+                        <p className="text-sm text-muted-foreground">{errorMessage}</p>
+                      </div>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Please review the error message above and try again. If the problem persists, contact support.
+                    </p>
+                  </div>
+                )}
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="sm:justify-end gap-2">
+              {submissionStatus === "error" && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setConfirmationOpen(false)}
+                >
+                  Try Again
+                </Button>
+              )}
+              <Button
+                type="button"
+                onClick={handleConfirmationClose}
+                variant={submissionStatus === "success" ? "default" : "outline"}
+              >
+                {submissionStatus === "success" ? "View Transactions" : "Close"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </PageLayout>
+  )
+}