braid-ui 1.0.97 → 1.0.99

package/src/pages/business/Create.tsx

@@ -0,0 +1,173 @@
+import { useState } from "react"
+import { PageLayout } from "@/components/ui/page-layout"
+import { EnhancedInput } from "@/components/ui/enhanced-input"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { EnhancedTextarea } from "@/components/ui/enhanced-textarea"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { BusinessTypeBadge } from "@/components/ui/business-type-badge"
+
+const CreateBusiness = () => {
+  const [businessType, setBusinessType] = useState("")
+  return (
+    <PageLayout 
+      title="Create Business" 
+      description="Create a new business entity with all required information"
+      actions={[
+        { label: "Cancel", variant: "outline", onClick: () => {} },
+        { label: "Create Business", variant: "default", onClick: () => {} }
+      ]}
+    >
+      {/* Business Creation Form */}
+      <div className="space-y-6">
+        <Card className="p-6">
+          <div className="border-b border-border pb-4 mb-6">
+            <h2 className="text-lg font-semibold text-foreground">Business Information</h2>
+            <p className="text-sm text-muted-foreground">Basic business details and identification</p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <EnhancedInput
+              label="Business Name"
+              placeholder="Enter business name"
+              required
+            />
+            
+            <EnhancedInput
+              label="Legal Name"
+              placeholder="Enter legal business name"
+              hint="Official registered business name"
+            />
+            
+            <div className="space-y-2">
+              <EnhancedSelect
+                label="Business Type"
+                placeholder="Select business type"
+                value={businessType}
+                onValueChange={setBusinessType}
+                options={[
+                  { value: "corporation", label: "Corporation" },
+                  { value: "llc", label: "LLC" },
+                  { value: "partnership", label: "Partnership" },
+                  { value: "sole_proprietorship", label: "Sole Proprietorship" }
+                ]}
+              />
+              {businessType && (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground">Preview:</span>
+                  <BusinessTypeBadge type={businessType as "corporation" | "llc" | "partnership" | "sole_proprietorship"} />
+                </div>
+              )}
+            </div>
+            
+            <EnhancedInput
+              label="Tax ID (EIN)"
+              placeholder="12-3456789"
+              hint="Employer Identification Number"
+              required
+            />
+            
+            <EnhancedInput
+              label="Registration Number"
+              placeholder="Enter registration number"
+              hint="State business registration number"
+            />
+            
+            <EnhancedSelect
+              label="Industry"
+              placeholder="Select industry"
+              options={[
+                { value: "technology", label: "Technology" },
+                { value: "finance", label: "Finance" },
+                { value: "healthcare", label: "Healthcare" },
+                { value: "manufacturing", label: "Manufacturing" },
+                { value: "retail", label: "Retail" },
+                { value: "other", label: "Other" }
+              ]}
+            />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="border-b border-border pb-4 mb-6">
+            <h2 className="text-lg font-semibold text-foreground">Contact Information</h2>
+            <p className="text-sm text-muted-foreground">Business address and contact details</p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <EnhancedInput
+              label="Street Address"
+              placeholder="Enter street address"
+              required
+            />
+            
+            <EnhancedInput
+              label="City"
+              placeholder="Enter city"
+              required
+            />
+            
+            <EnhancedInput
+              label="State"
+              placeholder="Enter state"
+              required
+            />
+            
+            <EnhancedInput
+              label="Postal Code"
+              placeholder="12345"
+              required
+            />
+            
+            <EnhancedSelect
+              label="Country"
+              placeholder="Select country"
+              options={[
+                { value: "US", label: "United States" },
+                { value: "CA", label: "Canada" },
+                { value: "GB", label: "United Kingdom" },
+                { value: "DE", label: "Germany" }
+              ]}
+            />
+            
+            <EnhancedInput
+              label="Phone Number"
+              placeholder="+1 (555) 123-4567"
+              required
+            />
+            
+            <EnhancedInput
+              label="Email Address"
+              placeholder="contact@business.com"
+              type="email"
+              required
+            />
+            
+            <EnhancedInput
+              label="Website"
+              placeholder="https://www.business.com"
+              type="url"
+            />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="border-b border-border pb-4 mb-6">
+            <h2 className="text-lg font-semibold text-foreground">Additional Information</h2>
+            <p className="text-sm text-muted-foreground">Optional business description and notes</p>
+          </div>
+          
+          <div className="space-y-6">
+            <EnhancedTextarea
+              label="Business Description"
+              placeholder="Describe your business activities and services"
+              hint="Brief description of what your business does"
+            />
+          </div>
+        </Card>
+      </div>
+    </PageLayout>
+  )
+}
+
+export default CreateBusiness

package/src/pages/counterparty/Create.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react"
+import { PageLayout } from "@/components/ui/page-layout"
+import { CounterpartyBasicInfo } from "@/components/form-sections/CounterpartyBasicInfo"
+import { PaymentInformationSection } from "@/components/form-sections/PaymentInformationSection"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+
+const CreateCounterparty = () => {
+  const [counterpartyData, setCounterpartyData] = useState(null)
+
+  const handleBasicInfoChange = (data: any) => {
+    setCounterpartyData(data)
+  }
+
+  const handleSubmit = () => {
+    // Handle form submission
+    console.log("Creating counterparty with data:", counterpartyData)
+  }
+
+  return (
+    <PageLayout 
+      title="Create Counterparty" 
+      description="Create a new counterparty with all required information"
+      actions={[
+        { label: "Cancel", variant: "outline", onClick: () => {} },
+        { label: "Create Counterparty", variant: "default", onClick: handleSubmit }
+      ]}
+    >
+      <div className="space-y-6">
+        {/* Basic Information Card */}
+        <Card>
+          <CardContent className="p-6">
+            <CounterpartyBasicInfo onDataChange={handleBasicInfoChange} />
+          </CardContent>
+        </Card>
+
+        {/* Payment Information Section */}
+        <Card>
+          <CardContent className="p-6">
+            <PaymentInformationSection />
+          </CardContent>
+        </Card>
+      </div>
+    </PageLayout>
+  )
+}
+
+export default CreateCounterparty

package/src/pages/counterparty/DomesticWire.tsx

@@ -0,0 +1,78 @@
+import { PageLayout } from "@/components/ui/page-layout"
+import { BasicInfoCard } from "@/components/form-sections/BasicInfoCard"
+import { ReceiverCard } from "@/components/form-sections/ReceiverCard"
+import { BeneficiaryCard } from "@/components/form-sections/BeneficiaryCard"
+import { FormCard } from "@/components/ui/form-card"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { EnhancedSelect } from "@/components/ui/enhanced-select"
+import { Edit } from "lucide-react"
+import { useEditState } from "@/hooks/useEditState"
+import { useState } from "react"
+
+const CounterpartyDomesticWire = () => {
+  const { isEditing, handleToggleEdit, handleSave, handleCancel } = useEditState({})
+  const [transferType, setTransferType] = useState("DOMESTIC")
+  return (
+    <PageLayout
+      title="Counterparty Domestic Wire"
+      description="Manage domestic wire transfer configurations and beneficiary information"
+      actions={!isEditing ? [
+        { label: "Cancel", variant: "outline", onClick: () => {} },
+        { label: "Save Domestic Wire Configuration", variant: "default", onClick: () => {} }
+      ] : undefined}
+    >
+      <div className="space-y-8">
+        {/* Basic Info - Always Visible */}
+        <BasicInfoCard />
+
+        <Separator className="my-8" />
+
+        {/* Domestic Wire Transfer Configuration */}
+        <FormCard
+          title="Domestic Wire Transfer Configuration"
+          description="Configure domestic wire transfer settings and beneficiary information"
+          headerActions={
+            <div className="flex items-center gap-2">
+              {isEditing ? (
+                <>
+                  <EnhancedSelect
+                    value={transferType}
+                    onValueChange={setTransferType}
+                    options={[
+                      { value: "DOMESTIC", label: "DOMESTIC" },
+                      { value: "INTERNATIONAL", label: "INTERNATIONAL" }
+                    ]}
+                    placeholder="Select transfer type"
+                  />
+                  <Button variant="outline" size="sm" onClick={handleCancel}>
+                    Cancel
+                  </Button>
+                  <Button size="sm" onClick={handleSave}>
+                    Save
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground">
+                    {transferType}
+                  </span>
+                  <Button variant="ghost" size="icon" onClick={handleToggleEdit} className="text-primary hover:text-primary/80 hover:bg-primary/10">
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+          }
+        >
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <ReceiverCard isEditing={isEditing} hideActions={true} />
+            <BeneficiaryCard isEditing={isEditing} hideActions={true} />
+          </div>
+        </FormCard>
+      </div>
+    </PageLayout>
+  )
+}
+
+export default CounterpartyDomesticWire

package/src/pages/counterparty/Manage.tsx

@@ -0,0 +1,79 @@
+import { PageLayout } from "@/components/ui/page-layout"
+import { Stack } from "@/components/ui/stack"
+import { Button } from "@/components/ui/button"
+import { BasicInfoSection } from "@/components/form-sections/BasicInfoSection"
+import { WireTransferSection } from "@/components/form-sections/WireTransferSection"
+import { ACHTransferSection } from "@/components/form-sections/ACHTransferSection"
+import { useEditState } from "@/hooks/useEditState"
+
+const CounterpartyManage = () => {
+  // Global edit state management
+  const { 
+    isEditing: isBasicEditing, 
+    handleToggleEdit: handleBasicToggleEdit
+  } = useEditState({})
+
+  const { 
+    isEditing: isWireEditing, 
+    handleToggleEdit: handleWireToggleEdit
+  } = useEditState({})
+
+  const { 
+    isEditing: isACHEditing, 
+    handleToggleEdit: handleACHToggleEdit
+  } = useEditState({})
+
+  const pageCards = [
+    {
+      key: "basic-info",
+      component: BasicInfoSection,
+      props: {
+        isEditing: isBasicEditing,
+        onToggleEdit: handleBasicToggleEdit
+      }
+    },
+    {
+      key: "wire-transfer", 
+      component: WireTransferSection,
+      props: {
+        isEditing: isWireEditing,
+        onToggleEdit: handleWireToggleEdit
+      }
+    },
+    {
+      key: "ach-transfer",
+      component: ACHTransferSection, 
+      props: {
+        isEditing: isACHEditing,
+        onToggleEdit: handleACHToggleEdit
+      }
+    }
+  ]
+
+  const pageActions = !isBasicEditing && !isWireEditing && !isACHEditing ? [
+    {
+      label: "Cancel",
+      variant: "outline" as const,
+      onClick: () => {}
+    },
+    {
+      label: "Save Configuration", 
+      variant: "default" as const,
+      onClick: () => {}
+    }
+  ] : []
+
+  return (
+    <PageLayout
+      title="Counterparty Management"
+      description="Manage counterparty details and payment configurations"
+      mode="cards"
+      cards={pageCards}
+      actions={pageActions}
+      maxWidth="lg"
+      gridCols={1}
+    />
+  )
+}
+
+export default CounterpartyManage