braid-ui 1.0.99 → 1.0.100

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

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

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

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

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

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

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

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

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

@@ -1,49 +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 { 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} />}
-    />
-  )
-}

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

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

@@ -1,14 +0,0 @@
-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" }
-      }}
-    />
-  )
-}