braid-ui 1.0.99 → 1.0.100

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

@@ -1,163 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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>
-  )
-}

package/src/components/transaction/WireDetailsSection.tsx

@@ -1,112 +0,0 @@
-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 WireDetails {
-  type: string
-  originatorName: string
-  originatorAccountNumber: string
-  originatorAddress: string
-  beneficiaryName: string
-  beneficiaryAccountNumber: string
-  beneficiaryAddress: string
-  beneficiaryFIName: string
-  beneficiaryFIRoutingNumber: string
-  beneficiaryFIAddress: string
-  originatorFIName: string
-  originatorFIRoutingNumber: string
-  originatorFIAddress: string
-  intermediaryFIName?: string
-  intermediaryFIRoutingNumber?: string
-  intermediaryFIAddress?: string
-  raw?: any
-}
-
-interface WireDetailsSectionProps {
-  data: WireDetails
-}
-
-export const WireDetailsSection = ({ data }: WireDetailsSectionProps) => {
-  return (
-    <FormCard title="Wire 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="Originator Address" value={data.originatorAddress} layout="horizontal" />
-        <InfoField label="Beneficiary Name" value={data.beneficiaryName} layout="horizontal" />
-        <InfoField 
-          label="Beneficiary Account Number" 
-          value={
-            <Button variant="link" className="h-auto p-0 text-sm">
-              {data.beneficiaryAccountNumber}
-            </Button>
-          }
-          layout="horizontal"
-        />
-        <InfoField label="Beneficiary Address" value={data.beneficiaryAddress} layout="horizontal" />
-        <InfoField label="Beneficiary FI Name" value={data.beneficiaryFIName} layout="horizontal" />
-        <InfoField 
-          label="Beneficiary FI Routing Number" 
-          value={
-            <Button variant="link" className="h-auto p-0 text-sm">
-              {data.beneficiaryFIRoutingNumber}
-            </Button>
-          }
-          layout="horizontal"
-        />
-        <InfoField label="Beneficiary FI Address" value={data.beneficiaryFIAddress} layout="horizontal" />
-        <InfoField label="Originator FI Name" value={data.originatorFIName} layout="horizontal" />
-        <InfoField 
-          label="Originator FI Routing Number" 
-          value={
-            <Button variant="link" className="h-auto p-0 text-sm">
-              {data.originatorFIRoutingNumber}
-            </Button>
-          }
-          layout="horizontal"
-        />
-        <InfoField label="Originator FI Address" value={data.originatorFIAddress} layout="horizontal" />
-        
-        {data.intermediaryFIName && (
-          <>
-            <InfoField label="Intermediary FI Name" value={data.intermediaryFIName} layout="horizontal" />
-            {data.intermediaryFIRoutingNumber && (
-              <InfoField 
-                label="Intermediary FI Routing Number" 
-                value={
-                  <Button variant="link" className="h-auto p-0 text-sm">
-                    {data.intermediaryFIRoutingNumber}
-                  </Button>
-                }
-                layout="horizontal"
-              />
-            )}
-            {data.intermediaryFIAddress && (
-              <InfoField label="Intermediary FI Address" value={data.intermediaryFIAddress} 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>
-  )
-}