braid-ui 1.0.97 → 1.0.99

package/src/components/form-sections/OriginatorFI.tsx

@@ -0,0 +1,42 @@
+import { EnhancedInput } from "@/components/ui/enhanced-input"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { FI_ID_TYPE_OPTIONS } from "@/lib/constants"
+
+export const OriginatorFI = () => {
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-border pb-4">
+        <h2 className="text-lg font-semibold text-foreground">Originator FI Details</h2>
+        <p className="text-sm text-muted-foreground">Financial institution details for the originator</p>
+      </div>
+      
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <EnhancedInput
+            label="Originator FI Account Number"
+            placeholder="Enter account number"
+            required
+          />
+          
+          <EnhancedInput
+            label="Originator FI Name"
+            placeholder="Enter FI name"
+            hint="Full name of the originating financial institution"
+          />
+          
+          <EnhancedSelect
+            label="Originator FI ID Type"
+            placeholder="Select ID type"
+            options={FI_ID_TYPE_OPTIONS}
+          />
+          
+          <EnhancedInput
+            label="Originator FI ID Number"
+            placeholder="Enter ID number"
+            hint="Financial institution identification number"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/form-sections/OriginatorFIAddress.tsx

@@ -0,0 +1,14 @@
+import { AddressForm } from "./AddressForm"
+
+export const OriginatorFIAddress = () => {
+  return (
+    <AddressForm
+      title="Originator FI Address"
+      description="Address of the originating financial institution"
+      fieldPrefix="Originator FI"
+      fieldOverrides={{
+        streetAddress: { hint: "Originating financial institution street address" }
+      }}
+    />
+  )
+}

package/src/components/form-sections/PaymentInformationSection.tsx

@@ -0,0 +1,163 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Plus, Trash2, ChevronDown, ChevronUp } from "lucide-react"
+import { ACHBasicInfoCard } from "./ACHBasicInfoCard"
+import { ACHBankCard } from "./ACHBankCard"
+import { BankAddressCard } from "./BankAddressCard"
+import { ReceiverCard } from "./ReceiverCard"
+import { BeneficiaryCard } from "./BeneficiaryCard"
+import { OriginatorCard } from "./OriginatorCard"
+import { IntermediaryCard } from "./IntermediaryCard"
+import { defaultACHTransfer } from "@/lib/mock-data/banking-data"
+import { type ACHTransfer } from "@/lib/schemas/banking-schemas"
+
+interface PaymentMethod {
+  id: string
+  type: "ach" | "wire"
+  name: string
+  collapsed: boolean
+}
+
+export const PaymentInformationSection = () => {
+  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([])
+  const [showAddMenu, setShowAddMenu] = useState(false)
+  const [achData, setAchData] = useState<ACHTransfer>(defaultACHTransfer)
+
+  const addPaymentMethod = (type: "ach" | "wire") => {
+    const newMethod: PaymentMethod = {
+      id: `${type}-${Date.now()}`,
+      type,
+      name: type === "ach" ? "ACH Payment" : "Wire Transfer",
+      collapsed: false
+    }
+    setPaymentMethods([...paymentMethods, newMethod])
+    setShowAddMenu(false)
+  }
+
+  const removePaymentMethod = (id: string) => {
+    setPaymentMethods(paymentMethods.filter(method => method.id !== id))
+  }
+
+  const toggleCollapse = (id: string) => {
+    setPaymentMethods(paymentMethods.map(method => 
+      method.id === id ? { ...method, collapsed: !method.collapsed } : method
+    ))
+  }
+
+  const handleACHDataChange = (newData: ACHTransfer) => {
+    setAchData(newData)
+  }
+
+  const renderPaymentMethodContent = (method: PaymentMethod) => {
+    if (method.type === "ach") {
+      return (
+        <div className="space-y-4">
+          <ACHBasicInfoCard 
+            data={achData}
+            onDataChange={handleACHDataChange}
+            isEditing={true} 
+            hideActions={true} 
+          />
+          <ACHBankCard 
+            data={achData}
+            onDataChange={handleACHDataChange}
+            isEditing={true} 
+            hideActions={true} 
+          />
+          <BankAddressCard isEditing={true} hideActions={true} />
+        </div>
+      )
+    } else {
+      return (
+        <div className="space-y-4">
+          <ReceiverCard isEditing={true} hideActions={true} />
+          <BeneficiaryCard isEditing={true} hideActions={true} />
+          <OriginatorCard isEditing={true} hideActions={true} />
+          <IntermediaryCard isEditing={true} hideActions={true} />
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-border pb-4">
+        <h2 className="text-lg font-semibold text-foreground">Payment Information</h2>
+        <p className="text-sm text-muted-foreground">Add payment methods for this counterparty</p>
+      </div>
+
+      {paymentMethods.map((method) => (
+        <Card key={method.id} className="relative">
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => toggleCollapse(method.id)}
+                  className="h-6 w-6"
+                >
+                  {method.collapsed ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronUp className="h-4 w-4" />
+                  )}
+                </Button>
+                <CardTitle className="text-base">{method.name}</CardTitle>
+                <span className="text-xs bg-muted px-2 py-1 rounded-md uppercase font-medium">
+                  {method.type}
+                </span>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => removePaymentMethod(method.id)}
+                className="h-6 w-6 text-destructive hover:text-destructive/80 hover:bg-destructive/10"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          {!method.collapsed && (
+            <CardContent>
+              {renderPaymentMethodContent(method)}
+            </CardContent>
+          )}
+        </Card>
+      ))}
+
+      <div className="relative">
+        <Button
+          variant="outline"
+          onClick={() => setShowAddMenu(!showAddMenu)}
+          className="w-full border-dashed"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add Payment Information
+        </Button>
+        
+        {showAddMenu && (
+          <div className="absolute top-full left-0 right-0 mt-2 bg-background border border-border rounded-md shadow-lg z-10">
+            <div className="p-2 space-y-1">
+              <Button
+                variant="ghost"
+                onClick={() => addPaymentMethod("ach")}
+                className="w-full justify-start"
+              >
+                Add ACH Payment
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => addPaymentMethod("wire")}
+                className="w-full justify-start"
+              >
+                Add Wire Transfer
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/form-sections/ReceiverCard.tsx

@@ -0,0 +1,94 @@
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { DataGrid } from "@/components/ui/data-grid"
+import { FormSection } from "@/components/ui/form-section"
+import { FormProvider } from "@/components/ui/form-provider"
+import { FormInput } from "@/components/ui/form-input"
+import { useFormWithEditState } from "@/hooks/useFormWithEditState"
+import { z } from "zod"
+import { defaultReceiverInfo } from "@/lib/mock-data/wire-data"
+
+const receiverSchema = z.object({
+  routingNumber: z.string().min(9, "Routing number must be 9 digits").max(9, "Routing number must be 9 digits"),
+  bankShortName: z.string().min(1, "Bank short name is required"),
+})
+
+type ReceiverInfo = z.infer<typeof receiverSchema>
+
+interface ReceiverCardProps {
+  data?: Partial<ReceiverInfo>
+  onDataChange?: (data: ReceiverInfo) => void
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+  hideActions?: boolean
+}
+
+export const ReceiverCard = ({ 
+  data, 
+  onDataChange, 
+  isEditing, 
+  onToggleEdit, 
+  className, 
+  hideActions 
+}: ReceiverCardProps) => {
+  const form = useFormWithEditState<ReceiverInfo>({
+    schema: receiverSchema,
+    defaultValues: { ...defaultReceiverInfo, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange,
+  })
+
+  const editContent = (
+    <FormProvider form={form}>
+      <FormSection>
+        <div className="space-y-6">
+          <div className="border-b border-border pb-4">
+            <h2 className="text-lg font-semibold text-foreground">Receiver Details</h2>
+            <p className="text-sm text-muted-foreground">Receiving bank information</p>
+          </div>
+          
+          <div className="grid grid-cols-1 gap-6">
+            <FormInput
+              name="routingNumber"
+              label="Receiver Routing Number"
+              placeholder="Enter routing number"
+              hint="9-digit routing number"
+              pattern="[0-9]{9}"
+              maxLength={9}
+              required
+            />
+            
+            <FormInput
+              name="bankShortName"
+              label="Receiver Bank Short Name"
+              placeholder="Enter bank short name"
+              required
+            />
+          </div>
+        </div>
+      </FormSection>
+    </FormProvider>
+  )
+
+  const formValues = form.watch()
+  const viewData = [
+    { label: "Routing Number", value: formValues?.routingNumber },
+    { label: "Bank Short Name", value: formValues?.bankShortName }
+  ]
+
+  return (
+    <EditableFormCard
+      title="FedWire Receiver"
+      variant="subtle"
+      className={className}
+      isEditing={form.isEditing}
+      onToggleEdit={form.handleToggleEdit}
+      onSave={form.handleSave}
+      onCancel={form.handleCancel}
+      hideActions={hideActions}
+      editContent={editContent}
+      viewContent={<DataGrid data={viewData} columns={2} />}
+    />
+  )
+}

package/src/components/form-sections/WireTransferSection.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react"
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { ResponsiveGrid } from "@/components/ui/responsive-grid"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { ReceiverCard } from "./ReceiverCard"
+import { BeneficiaryCard } from "./BeneficiaryCard"
+import { OriginatorCard } from "./OriginatorCard"
+import { IntermediaryCard } from "./IntermediaryCard"
+
+interface WireTransferSectionProps {
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+  hideActions?: boolean
+}
+
+export const WireTransferSection = ({ isEditing, onToggleEdit, className, hideActions }: WireTransferSectionProps) => {
+  const [wireTransferType, setWireTransferType] = useState("INTERNATIONAL")
+
+  const editContent = (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <EnhancedSelect
+          label="Transfer Type"
+          value={wireTransferType}
+          onValueChange={setWireTransferType}
+          options={[
+            { value: "DOMESTIC", label: "Domestic" },
+            { value: "INTERNATIONAL", label: "International" }
+          ]}
+          placeholder="Select transfer type"
+        />
+      </div>
+      
+      <ResponsiveGrid type="forms" gap="md" editMode={isEditing}>
+        <ReceiverCard isEditing={isEditing} hideActions={true} />
+        <BeneficiaryCard isEditing={isEditing} hideActions={true} />
+        <OriginatorCard isEditing={isEditing} hideActions={true} />
+        <IntermediaryCard isEditing={isEditing} hideActions={true} />
+      </ResponsiveGrid>
+    </div>
+  )
+
+  const viewContent = (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-muted-foreground">Transfer Type:</span>
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground">
+          {wireTransferType}
+        </span>
+      </div>
+      
+      <ResponsiveGrid type="forms" gap="md">
+        <ReceiverCard isEditing={false} hideActions={true} />
+        <BeneficiaryCard isEditing={false} hideActions={true} />
+        <OriginatorCard isEditing={false} hideActions={true} />
+        <IntermediaryCard isEditing={false} hideActions={true} />
+      </ResponsiveGrid>
+    </div>
+  )
+
+  return (
+    <EditableFormCard
+      title="Wire Transfer Configuration"
+      description="Configure wire transfer settings and participants"
+      variant="subtle"
+      className={className}
+      isEditing={isEditing}
+      onToggleEdit={onToggleEdit}
+      hideActions={hideActions}
+      editContent={editContent}
+      viewContent={viewContent}
+    />
+  )
+}

package/src/components/layouts/list-page.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+import { Container } from "@/components/ui/container"
+import { Stack } from "@/components/ui/stack"
+import { Button } from "@/components/ui/button"
+import { Breadcrumb, type BreadcrumbItem } from "@/components/ui/breadcrumb"
+import { ResponsiveGrid } from "@/components/ui/responsive-grid"
+import { cn } from "@/lib/utils"
+
+interface PageAction {
+  label: string
+  onClick: () => void
+  variant?: "default" | "outline" | "secondary"
+  icon?: React.ReactNode
+}
+
+interface ListPageProps {
+  title: string
+  description?: string
+  breadcrumbs?: BreadcrumbItem[]
+  actions?: PageAction[]
+  children: React.ReactNode
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full"
+  loading?: boolean
+  emptyState?: React.ReactNode
+  className?: string
+}
+
+export const ListPage = React.forwardRef<HTMLDivElement, ListPageProps>(
+  ({ 
+    title, 
+    description, 
+    breadcrumbs,
+    actions,
+    children, 
+    maxWidth = "xl",
+    loading = false,
+    emptyState,
+    className 
+  }, ref) => {
+    const hasData = React.Children.count(children) > 0
+
+    return (
+      <div ref={ref} className={cn("min-h-screen bg-gradient-subtle", className)}>
+        <Container size={maxWidth}>
+          <Stack spacing="lg">
+            {/* Breadcrumbs */}
+            {breadcrumbs && breadcrumbs.length > 0 && (
+              <Breadcrumb items={breadcrumbs} />
+            )}
+            
+            {/* Page Header */}
+            <div className="flex items-start justify-between">
+              <Stack spacing="sm">
+                <h1 className="text-3xl font-bold text-foreground">{title}</h1>
+                {description && (
+                  <p className="text-muted-foreground max-w-2xl">{description}</p>
+                )}
+              </Stack>
+              
+              {actions && actions.length > 0 && (
+                <Stack direction="horizontal" spacing="sm">
+                  {actions.map((action, index) => (
+                    <Button
+                      key={index}
+                      variant={action.variant || "default"}
+                      onClick={action.onClick}
+                    >
+                      {action.icon}
+                      {action.label}
+                    </Button>
+                  ))}
+                </Stack>
+              )}
+            </div>
+            
+            {/* Content */}
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <div className="animate-pulse text-muted-foreground">Loading...</div>
+              </div>
+            ) : hasData ? (
+              <ResponsiveGrid type="cards" gap="lg">
+                {children}
+              </ResponsiveGrid>
+            ) : emptyState ? (
+              <div className="flex items-center justify-center py-12">
+                {emptyState}
+              </div>
+            ) : (
+              <div className="flex items-center justify-center py-12">
+                <div className="text-center">
+                  <p className="text-muted-foreground">No items found</p>
+                </div>
+              </div>
+            )}
+          </Stack>
+        </Container>
+      </div>
+    )
+  }
+)
+
+ListPage.displayName = "ListPage"

package/src/components/transaction/ACHDetailsSection.tsx

@@ -0,0 +1,95 @@
+import { FormCard } from "@/components/ui/form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { Button } from "@/components/ui/button"
+import { JsonViewer } from "@/components/ui/json-viewer"
+
+interface ACHDetails {
+  type: string
+  originatorName: string
+  originatorAccountNumber: string
+  receiverName: string
+  receiverAccountNumber: string
+  receiverRoutingNumber: string
+  amount: number
+  secCode: string
+  companyEntryDescription: string
+  companyDiscretionaryData?: string
+  individualIdNumber?: string
+  individualName?: string
+  traceNumber: string
+  raw?: any
+}
+
+interface ACHDetailsSectionProps {
+  data: ACHDetails
+}
+
+export const ACHDetailsSection = ({ data }: ACHDetailsSectionProps) => {
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2
+    }).format(value)
+  }
+
+  return (
+    <FormCard title="ACH Transfer Details">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
+        <InfoField label="Type" value={data.type} layout="horizontal" />
+        <InfoField label="Originator Name" value={data.originatorName} layout="horizontal" />
+        <InfoField 
+          label="Originator Account Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.originatorAccountNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Receiver Name" value={data.receiverName} layout="horizontal" />
+        <InfoField 
+          label="Receiver Account Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.receiverAccountNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField 
+          label="Receiver Routing Number" 
+          value={
+            <Button variant="link" className="h-auto p-0 text-sm">
+              {data.receiverRoutingNumber}
+            </Button>
+          }
+          layout="horizontal"
+        />
+        <InfoField label="Amount" value={formatCurrency(data.amount)} layout="horizontal" />
+        <InfoField label="SEC Code" value={data.secCode} layout="horizontal" />
+        <InfoField label="Company Entry Description" value={data.companyEntryDescription} layout="horizontal" />
+        {data.companyDiscretionaryData && (
+          <InfoField label="Company Discretionary Data" value={data.companyDiscretionaryData} layout="horizontal" />
+        )}
+        {data.individualIdNumber && (
+          <InfoField label="Individual ID Number" value={data.individualIdNumber} layout="horizontal" />
+        )}
+        {data.individualName && (
+          <InfoField label="Individual Name" value={data.individualName} layout="horizontal" />
+        )}
+        <InfoField label="Trace Number" value={data.traceNumber} layout="horizontal" />
+      </div>
+
+      {/* Raw JSON - Full Width */}
+      {data.raw && (
+        <div className="mt-6 pt-6 border-t border-border">
+          <InfoField 
+            label="Raw" 
+            value={<JsonViewer data={data.raw} className="mt-2" compact={true} />}
+          />
+        </div>
+      )}
+    </FormCard>
+  )
+}