braid-ui 1.0.98 → 1.0.99

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

@@ -0,0 +1,131 @@
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { FormProvider } from "@/components/ui/form-provider"
+import { FormInput } from "@/components/ui/form-input"
+import { FormSelect } from "@/components/ui/form-select"
+import { useFormWithEditState } from "@/hooks/useFormWithEditState"
+import { businessProfileSchema, type BusinessProfile } from "@/lib/schemas"
+import { defaultBusinessProfile } from "@/lib/mock-data/business-data"
+
+interface BusinessProfileCardProps {
+  data?: Partial<BusinessProfile>
+  onDataChange?: (data: BusinessProfile) => void
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+  hideActions?: boolean
+}
+
+export const BusinessProfileCard = ({ 
+  data, 
+  onDataChange, 
+  isEditing, 
+  onToggleEdit, 
+  className, 
+  hideActions 
+}: BusinessProfileCardProps) => {
+  const form = useFormWithEditState<BusinessProfile>({
+    schema: businessProfileSchema,
+    defaultValues: { ...defaultBusinessProfile, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange,
+  })
+
+  const editContent = (
+    <FormProvider form={form}>
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FormInput
+            name="legalName"
+            label="Legal Name"
+            placeholder="Enter legal business name"
+            required
+          />
+          
+          <FormInput
+            name="dbaName"
+            label="DBA Name"
+            placeholder="Enter doing business as name"
+          />
+          
+          <FormSelect
+            name="businessType"
+            label="Business Type"
+            placeholder="Select business type"
+            options={[
+              { value: "corporation", label: "Corporation" },
+              { value: "llc", label: "LLC" },
+              { value: "partnership", label: "Partnership" },
+              { value: "sole_proprietorship", label: "Sole Proprietorship" }
+            ]}
+          />
+          
+          <FormInput
+            name="taxId"
+            label="Tax ID"
+            placeholder="Enter tax identification number"
+            required
+          />
+          
+          <FormInput
+            name="businessPhone"
+            label="Business Phone"
+            placeholder="Enter business phone number"
+            required
+          />
+          
+          <FormInput
+            name="businessEmail"
+            label="Business Email"
+            type="email"
+            placeholder="Enter business email"
+            required
+          />
+          
+          <FormInput
+            name="website"
+            label="Website"
+            placeholder="Enter website URL"
+          />
+        </div>
+      </div>
+    </FormProvider>
+  )
+
+  const formValues = form.watch()
+  const viewContent = (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <InfoField label="Legal Name" value={formValues?.legalName} layout="horizontal" />
+        <InfoField label="DBA Name" value={formValues?.dbaName} layout="horizontal" />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <InfoField label="Business Type" value={formValues?.businessType} layout="horizontal" />
+        <InfoField label="Tax ID" value={formValues?.taxId} layout="horizontal" />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <InfoField label="Business Phone" value={formValues?.businessPhone} layout="horizontal" />
+        <InfoField label="Business Email" value={formValues?.businessEmail} layout="horizontal" />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <InfoField label="Website" value={formValues?.website} layout="horizontal" />
+      </div>
+    </div>
+  )
+
+  return (
+    <EditableFormCard
+      title="Business Profile"
+      variant="subtle"
+      className={className}
+      isEditing={form.isEditing}
+      onToggleEdit={form.handleToggleEdit}
+      onSave={form.handleSave}
+      onCancel={form.handleCancel}
+      hideActions={hideActions}
+      editContent={editContent}
+      viewContent={viewContent}
+    />
+  )
+}

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

@@ -0,0 +1,53 @@
+import { FormCard } from "@/components/ui/form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { Button } from "@/components/ui/button"
+import { StatusBadge } from "@/components/ui/status-badge"
+import { Edit } from "lucide-react"
+
+interface BusinessStatusCardProps {
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+}
+
+export const BusinessStatusCard = ({ isEditing, onToggleEdit, className }: BusinessStatusCardProps) => {
+  return (
+    <FormCard 
+      title="Business Status & Records"
+      className={className}
+      headerActions={
+        <div className="flex items-center gap-2">
+          {isEditing ? (
+            <>
+              <Button variant="outline" size="sm" onClick={onToggleEdit}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={onToggleEdit}>
+                Save
+              </Button>
+            </>
+          ) : (
+            <Button variant="ghost" size="icon" onClick={onToggleEdit} className="text-primary hover:text-primary/80 hover:bg-primary/10">
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="Status" value={<StatusBadge status="ACTIVE" />} layout="horizontal" />
+          <InfoField label="CIP Status" value="NOT_START" layout="horizontal" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="Created Date" value="2025-08-03" layout="horizontal" />
+          <InfoField label="Updated Date" value="2025-09-05" layout="horizontal" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="Last OFAC Date" value="2025-09-05" layout="horizontal" />
+          <InfoField label="Last OFAC Status" value="View Status" layout="horizontal" className="text-primary cursor-pointer" />
+        </div>
+      </div>
+    </FormCard>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { FormCard } from "@/components/ui/form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { Button } from "@/components/ui/button"
+import { Edit } from "lucide-react"
+
+interface ContactInfoCardProps {
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+}
+
+export const ContactInfoCard = ({ isEditing, onToggleEdit, className }: ContactInfoCardProps) => {
+  return (
+    <FormCard 
+      title="Contact Information"
+      className={className}
+      headerActions={
+        <div className="flex items-center gap-2">
+          {isEditing ? (
+            <>
+              <Button variant="outline" size="sm" onClick={onToggleEdit}>
+                Cancel
+              </Button>
+              <Button size="sm" onClick={onToggleEdit}>
+                Save
+              </Button>
+            </>
+          ) : (
+            <Button variant="ghost" size="icon" onClick={onToggleEdit} className="text-primary hover:text-primary/80 hover:bg-primary/10">
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <h4 className="text-sm font-medium text-muted-foreground">Contact Person</h4>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="First Name" value="" layout="horizontal" />
+          <InfoField label="Last Name" value="" layout="horizontal" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="Email" value="" layout="horizontal" />
+          <InfoField label="Phone Number" value="" layout="horizontal" />
+        </div>
+        
+        <h4 className="text-sm font-medium text-muted-foreground mt-6">Mailing Address</h4>
+        <div className="grid grid-cols-1 gap-3">
+          <InfoField label="Street Address" value="" layout="horizontal" />
+          <InfoField label="Apartment, suite, or floor" value="" layout="horizontal" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="City" value="" layout="horizontal" />
+          <InfoField label="State" value="Alabama" layout="horizontal" />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <InfoField label="Postal Code" value="" layout="horizontal" />
+          <InfoField label="Country Code" value="US" layout="horizontal" />
+        </div>
+      </div>
+    </FormCard>
+  )
+}

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

@@ -0,0 +1,101 @@
+import { EnhancedInput } from "@/components/ui/enhanced-input"
+import { Label } from "@/components/ui/label"
+import { useState } from "react"
+
+interface CounterpartyBasicInfoProps {
+  onDataChange?: (data: any) => void
+}
+
+export const CounterpartyBasicInfo = ({ onDataChange }: CounterpartyBasicInfoProps) => {
+  const [formData, setFormData] = useState({
+    name: "",
+    type: "business",
+    email: "",
+    phone: "",
+    productId: "167990"
+  })
+
+  const handleInputChange = (field: string, value: string) => {
+    const updatedData = { ...formData, [field]: value }
+    setFormData(updatedData)
+    onDataChange?.(updatedData)
+  }
+
+  const handleTypeChange = (type: string) => {
+    handleInputChange("type", type)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-border pb-4">
+        <h2 className="text-lg font-semibold text-foreground">Basic Information</h2>
+        <p className="text-sm text-muted-foreground">Enter the basic details for the counterparty</p>
+      </div>
+      
+      <div className="space-y-6">
+        <EnhancedInput
+          label="Counterparty Name"
+          value={formData.name}
+          onChange={(e) => handleInputChange("name", e.target.value)}
+          placeholder="Enter counterparty name"
+          required
+        />
+        
+        <div className="space-y-3">
+          <Label className="text-sm font-medium">Counterparty Type</Label>
+          <div className="flex gap-6">
+            <label className="flex items-center space-x-2 cursor-pointer">
+              <input
+                type="radio"
+                name="counterpartyType"
+                value="business"
+                checked={formData.type === "business"}
+                onChange={() => handleTypeChange("business")}
+                className="w-4 h-4 text-primary border-border focus:ring-primary focus:ring-2"
+              />
+              <span className="text-sm text-foreground">Business</span>
+            </label>
+            <label className="flex items-center space-x-2 cursor-pointer">
+              <input
+                type="radio"
+                name="counterpartyType"
+                value="individual"
+                checked={formData.type === "individual"}
+                onChange={() => handleTypeChange("individual")}
+                className="w-4 h-4 text-primary border-border focus:ring-primary focus:ring-2"
+              />
+              <span className="text-sm text-foreground">Individual</span>
+            </label>
+          </div>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <EnhancedInput
+            label="Email"
+            type="email"
+            value={formData.email}
+            onChange={(e) => handleInputChange("email", e.target.value)}
+            placeholder="Enter email address"
+            required
+          />
+          
+          <EnhancedInput
+            label="Phone Number"
+            type="tel"
+            value={formData.phone}
+            onChange={(e) => handleInputChange("phone", e.target.value)}
+            placeholder="Enter phone number"
+            required
+          />
+        </div>
+        
+        <EnhancedInput
+          label="Product ID"
+          value={formData.productId}
+          readOnly
+          className="bg-muted"
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,104 @@
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { FormProvider } from "@/components/ui/form-provider"
+import { FormInput } from "@/components/ui/form-input"
+import { FormSelect } from "@/components/ui/form-select"
+import { CounterpartyTypeBadge } from "@/components/ui/counterparty-type-badge"
+import { StatusBadge } from "@/components/ui/status-badge"
+import { useFormWithEditState } from "@/hooks/useFormWithEditState"
+import { counterpartyBasicInfoSchema, type CounterpartyBasicInfo } from "@/lib/schemas"
+import { defaultCounterpartyBasicInfo } from "@/lib/mock-data/counterparty-data"
+
+interface CounterpartyProfileCardProps {
+  data?: Partial<CounterpartyBasicInfo>
+  onDataChange?: (data: CounterpartyBasicInfo) => void
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  hideActions?: boolean
+  className?: string
+}
+
+export const CounterpartyProfileCard = ({ 
+  data,
+  onDataChange,
+  isEditing = false,
+  onToggleEdit,
+  hideActions = false, 
+  className 
+}: CounterpartyProfileCardProps) => {
+  const form = useFormWithEditState<CounterpartyBasicInfo>({
+    schema: counterpartyBasicInfoSchema,
+    defaultValues: { ...defaultCounterpartyBasicInfo, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange,
+  })
+
+  const editContent = (
+    <FormProvider form={form}>
+      <div className="space-y-6">
+        <FormInput
+          name="name"
+          label="Name"
+          placeholder="Enter counterparty name"
+          required
+        />
+        
+        <FormSelect
+          name="type"
+          label="Counterparty Type"
+          placeholder="Select counterparty type"
+          options={[
+            { value: "BUSINESS", label: "Business" },
+            { value: "INDIVIDUAL", label: "Individual" },
+            { value: "GOVERNMENT", label: "Government" },
+            { value: "NONPROFIT", label: "Non-Profit" }
+          ]}
+        />
+        
+        <FormSelect
+          name="status"
+          label="Status"
+          placeholder="Select status"
+          options={[
+            { value: "ACTIVE", label: "Active" },
+            { value: "INACTIVE", label: "Inactive" },
+            { value: "PENDING", label: "Pending" },
+            { value: "SUSPENDED", label: "Suspended" }
+          ]}
+        />
+
+        <FormInput
+          name="description"
+          label="Description"
+          placeholder="Enter description"
+        />
+      </div>
+    </FormProvider>
+  )
+
+  const formValues = form.watch()
+  const viewContent = (
+    <div className="space-y-3">
+      <InfoField label="Name" value={formValues?.name} layout="horizontal" />
+      <InfoField label="Counterparty Type" value={<CounterpartyTypeBadge type={formValues?.type as "BUSINESS" | "INDIVIDUAL" | "GOVERNMENT" | "NONPROFIT"} />} layout="horizontal" />
+      <InfoField label="Status" value={<StatusBadge status={formValues?.status as "ACTIVE" | "INACTIVE" | "PENDING" | "SUSPENDED"} />} layout="horizontal" />
+      <InfoField label="Description" value={formValues?.description} layout="horizontal" />
+    </div>
+  )
+
+  return (
+    <EditableFormCard
+      title="Profile Information"
+      variant="subtle"
+      className={className}
+      isEditing={form.isEditing}
+      onToggleEdit={form.handleToggleEdit}
+      onSave={form.handleSave}
+      onCancel={form.handleCancel}
+      hideActions={hideActions}
+      editContent={editContent}
+      viewContent={viewContent}
+    />
+  )
+}

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

@@ -0,0 +1,41 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { InfoField } from "@/components/ui/info-field"
+
+interface CounterpartyRecordsCardProps {
+  isEditing?: boolean
+  hideActions?: boolean
+  className?: string
+}
+
+export const CounterpartyRecordsCard = ({ 
+  isEditing = false, 
+  hideActions = false, 
+  className 
+}: CounterpartyRecordsCardProps) => {
+  return (
+    <Card variant="subtle" className={className}>
+      <CardHeader size="lg">
+        <CardTitle size="lg">System Records</CardTitle>
+      </CardHeader>
+      <CardContent size="lg">
+        <div className="space-y-4">
+          <div className="space-y-3">
+            <InfoField label="ID" value="5000541" layout="horizontal" />
+            <InfoField label="Created By" value="admin" layout="horizontal" />
+            <InfoField label="Created At" value="2025-07-14" layout="horizontal" />
+            <InfoField label="Updated By" value="admin" layout="horizontal" />
+            <InfoField label="Updated At" value="2025-07-14" layout="horizontal" />
+          </div>
+          
+          <div className="pt-3 border-t border-border">
+            <h4 className="text-sm font-medium text-foreground mb-2">OFAC Details</h4>
+            <div className="space-y-3">
+              <InfoField label="Last OFAC date" value="2025-07-14" layout="horizontal" />
+              <InfoField label="Last OFAC status" value="Verified" layout="horizontal" />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,77 @@
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { InfoField } from "@/components/ui/info-field"
+import { FormProvider } from "@/components/ui/form-provider"
+import { FormSection } from "@/components/ui/form-section"
+import { IntermediaryFI } from "@/components/form-sections/IntermediaryFI"
+import { IntermediaryFIAddress } from "@/components/form-sections/IntermediaryFIAddress"
+import { useFormWithEditState } from "@/hooks/useFormWithEditState"
+import { intermediaryFISchema, type IntermediaryFI as IntermediaryFIType } from "@/lib/schemas"
+import { defaultIntermediaryFIInfo } from "@/lib/mock-data/wire-data"
+
+interface IntermediaryCardProps {
+  data?: Partial<IntermediaryFIType>
+  onDataChange?: (data: IntermediaryFIType) => void
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+  hideActions?: boolean
+}
+
+export const IntermediaryCard = ({ 
+  data, 
+  onDataChange, 
+  isEditing, 
+  onToggleEdit, 
+  className, 
+  hideActions 
+}: IntermediaryCardProps) => {
+  const form = useFormWithEditState<IntermediaryFIType>({
+    schema: intermediaryFISchema,
+    defaultValues: { ...defaultIntermediaryFIInfo, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange,
+  })
+
+  const editContent = (
+    <FormProvider form={form}>
+      <FormSection spacing="lg">
+        <IntermediaryFI />
+        <IntermediaryFIAddress />
+      </FormSection>
+    </FormProvider>
+  )
+
+  const formValues = form.watch()
+  const viewContent = (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-medium text-foreground mb-2">Financial Institution</h4>
+        <div className="space-y-1.5">
+          <InfoField label="Institution" value={`${formValues?.name} (${formValues?.accountNumber})`} layout="horizontal" />
+          <InfoField label="Identifier" value={`${formValues?.idType?.toUpperCase()} - ${formValues?.idNumber}`} layout="horizontal" />
+        </div>
+      </div>
+      
+      <div className="pt-3 border-t border-border">
+        <h4 className="text-sm font-medium text-foreground mb-2">FI Address</h4>
+        <InfoField value={formValues?.address ? `${formValues.address.streetAddress}, ${formValues.address.city}, ${formValues.address.postalCode}, ${formValues.address.country}` : ""} />
+      </div>
+    </div>
+  )
+
+  return (
+    <EditableFormCard
+      title="Intermediary" 
+      variant="subtle"
+      className={className}
+      isEditing={form.isEditing}
+      onToggleEdit={form.handleToggleEdit}
+      onSave={form.handleSave}
+      onCancel={form.handleCancel}
+      hideActions={hideActions}
+      editContent={editContent}
+      viewContent={viewContent}
+    />
+  )
+}

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

@@ -0,0 +1,41 @@
+import { EnhancedInput } from "@/components/ui/enhanced-input"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { FI_ID_TYPE_OPTIONS } from "@/lib/constants"
+
+export const IntermediaryFI = () => {
+  return (
+    <div className="space-y-6">
+      <div className="border-b border-border pb-4">
+        <h2 className="text-lg font-semibold text-foreground">Intermediary FI Details</h2>
+        <p className="text-sm text-muted-foreground">Financial institution details for the intermediary</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="Intermediary FI Account Number"
+            placeholder="Enter account number"
+          />
+          
+          <EnhancedInput
+            label="Intermediary FI Name"
+            placeholder="Enter FI name"
+            hint="Full name of the intermediary financial institution"
+          />
+          
+          <EnhancedSelect
+            label="Intermediary FI ID Type"
+            placeholder="Select ID type"
+            options={FI_ID_TYPE_OPTIONS}
+          />
+          
+          <EnhancedInput
+            label="Intermediary FI ID Number"
+            placeholder="Enter ID number"
+            hint="Financial institution identification number"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,49 @@
+import { EditableFormCard } from "@/components/ui/editable-form-card"
+import { DataGrid } from "@/components/ui/data-grid"
+import { FormSection } from "@/components/ui/form-section"
+import { OriginatorFI } from "@/components/form-sections/OriginatorFI"
+import { OriginatorFIAddress } from "@/components/form-sections/OriginatorFIAddress"
+
+interface OriginatorCardProps {
+  isEditing?: boolean
+  onToggleEdit?: () => void
+  className?: string
+  hideActions?: boolean
+}
+
+export const OriginatorCard = ({ isEditing, onToggleEdit, className, hideActions }: OriginatorCardProps) => {
+  const viewData = [
+    {
+      title: "Financial Institution",
+      items: [
+        { label: "Institution", value: "JPMorgan Chase Bank (1234567890)" },
+        { label: "Identifier", value: "ABA - 021000021" }
+      ]
+    },
+    {
+      title: "FI Address",
+      items: [
+        { value: "270 Park Avenue, New York, NY, 10017, United States" }
+      ],
+      className: "pt-3 border-t border-border"
+    }
+  ]
+
+  return (
+    <EditableFormCard
+      title="Originator"
+      variant="subtle"
+      className={className}
+      isEditing={isEditing}
+      onToggleEdit={onToggleEdit}
+      hideActions={hideActions}
+      editContent={
+        <FormSection spacing="lg">
+          <OriginatorFI />
+          <OriginatorFIAddress />
+        </FormSection>
+      }
+      viewContent={<DataGrid data={viewData} columns={1} />}
+    />
+  )
+}