braid-ui 1.0.99 → 1.0.100

package/src/components/alerts/ContextSection.tsx

@@ -1,155 +0,0 @@
-import { useState } from "react"
-import { Alert } from "@/lib/mock-data/alert-data"
-import { FormCard } from "@/components/ui/form-card"
-import { InfoField } from "@/components/ui/info-field"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { JsonViewer } from "@/components/ui/json-viewer"
-import { ChevronRight } from "lucide-react"
-
-interface ContextSectionProps {
-  alert: Alert
-}
-
-export const ContextSection = ({ alert }: ContextSectionProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-
-  const renderOFACContext = () => {
-    const data = alert.contextData
-    if (!data) return null
-
-    return (
-      <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <InfoField label="Entity Name" value={data.entityName} />
-          <InfoField label="Entity Type" value={data.entityType} />
-          <InfoField label="Match Score" value={<Badge variant="alert-ofac">{data.matchScore}</Badge>} />
-          <InfoField label="List Name" value={data.listName} />
-        </div>
-
-        <div>
-          <h4 className="text-sm font-medium mb-3">Flagged Items</h4>
-          <div className="overflow-x-auto border rounded-lg">
-            <table className="w-full">
-              <thead className="border-b bg-muted/50">
-                <tr>
-                  <th className="px-4 py-3 text-left text-sm font-medium">Field</th>
-                  <th className="px-4 py-3 text-left text-sm font-medium">Value</th>
-                  <th className="px-4 py-3 text-left text-sm font-medium">Match Score</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.flaggedItems?.map((item: any, index: number) => (
-                  <tr key={index} className="border-b hover:bg-muted/50">
-                    <td className="px-4 py-3 text-sm font-medium">{item.field}</td>
-                    <td className="px-4 py-3 text-sm">{item.value}</td>
-                    <td className="px-4 py-3">
-                      <Badge variant={parseInt(item.matchScore) > 90 ? "alert-ofac" : "outline"}>
-                        {item.matchScore}
-                      </Badge>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {alert.contextData && (
-          <div>
-            <Button 
-              variant="ghost" 
-              className="w-full justify-between h-auto py-3 px-4 border rounded-lg hover:bg-muted/50"
-              onClick={() => setIsDialogOpen(true)}
-            >
-              <span className="text-sm font-medium">Detail Result</span>
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  const renderTransactionContext = () => {
-    return (
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Transaction ID" value="TXN-12345" />
-        <InfoField label="Amount" value="$30,000.00" />
-        <InfoField label="Transaction Type" value="Wire Transfer" />
-        <InfoField label="Date" value="2025-09-30" />
-      </div>
-    )
-  }
-
-  const renderFileRecordContext = () => {
-    return (
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="File Name" value="wire_batch_093025.csv" />
-        <InfoField label="Record Count" value="1,234" />
-        <InfoField label="Error Count" value="3" />
-        <InfoField label="Status" value={<Badge variant="alert-error">Failed</Badge>} />
-      </div>
-    )
-  }
-
-  const renderProductContext = () => {
-    return (
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Product ID" value="PROD-2787" />
-        <InfoField label="Product Name" value="Business Checking Account" />
-        <InfoField label="Status" value="Pending Deactivation" />
-        <InfoField label="Reason" value="Compliance review required" />
-      </div>
-    )
-  }
-
-  const getContextTitle = () => {
-    switch (alert.contextType) {
-      case "Ofac":
-        return "OFAC Context"
-      case "Transaction":
-        return "Transaction Context"
-      case "File Record":
-        return "File Processing Context"
-      case "Product":
-        return "Product Context"
-      default:
-        return "Context Information"
-    }
-  }
-
-  const renderContext = () => {
-    switch (alert.contextType) {
-      case "Ofac":
-        return renderOFACContext()
-      case "Transaction":
-        return renderTransactionContext()
-      case "File Record":
-        return renderFileRecordContext()
-      case "Product":
-        return renderProductContext()
-      default:
-        return <p className="text-sm text-muted-foreground">No additional context available</p>
-    }
-  }
-
-
-  return (
-    <>
-      <FormCard title={getContextTitle()}>
-        {renderContext()}
-      </FormCard>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-4xl">
-          <DialogHeader>
-            <DialogTitle>{getContextTitle()} - Detail Result</DialogTitle>
-          </DialogHeader>
-          <JsonViewer data={alert.contextData} />
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}

package/src/components/app-sidebar.tsx

@@ -1,341 +0,0 @@
-import { 
-  LayoutDashboard, Bell, Briefcase, ArrowLeftRight, FileText, Users, Building2, 
-  CreditCard, Shield, RefreshCw, DollarSign, Zap, Settings, User, Key,
-  Upload, AlertCircle, TrendingUp, Box, BarChart3, FileCheck, Receipt,
-  Landmark, Search, Repeat, CheckCircle, ChevronRight
-} from "lucide-react"
-import { NavLink, useLocation } from "react-router-dom"
-import { useState } from "react"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"
-import braidLogo from "@/assets/braid-logo.png"
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuBadge,
-  SidebarMenuSub,
-  SidebarMenuSubItem,
-  SidebarMenuSubButton,
-  SidebarTrigger,
-  useSidebar,
-} from "@/components/ui/sidebar"
-
-const navigationItems = [
-  {
-    title: "Dashboard",
-    url: "/dashboard",
-    icon: LayoutDashboard,
-  },
-  {
-    title: "Alerts and Cases",
-    icon: Bell,
-    items: [
-      {
-        title: "Alerts",
-        url: "/alerts",
-        icon: Bell,
-        badge: "99+"
-      },
-      {
-        title: "Cases",
-        url: "/cases",
-        icon: Briefcase,
-      },
-    ],
-  },
-  {
-    title: "Transactions",
-    icon: ArrowLeftRight,
-    items: [
-      {
-        title: "Transaction History",
-        url: "/transactions/history",
-        icon: FileText,
-      },
-      {
-        title: "Transaction Review",
-        url: "/transactions/review",
-        icon: FileCheck,
-      },
-      {
-        title: "New Transaction",
-        url: "/transactions/new",
-        icon: Receipt,
-      },
-    ],
-  },
-  {
-    title: "Statement",
-    url: "/statement",
-    icon: FileText,
-  },
-  {
-    title: "Individuals",
-    url: "/individuals",
-    icon: Users,
-  },
-  {
-    title: "Businesses",
-    url: "/business",
-    icon: Building2,
-  },
-  {
-    title: "Counterparty",
-    icon: Briefcase,
-    items: [
-      {
-        title: "Management",
-        url: "/counterparty/manage",
-        icon: FileCheck,
-      },
-      {
-        title: "Create Counterparty",
-        url: "/counterparty/create",
-        icon: Receipt,
-      },
-      {
-        title: "Domestic Wire",
-        url: "/counterparty/domestic-wire",
-        icon: Zap,
-      },
-    ],
-  },
-  {
-    title: "Accounts",
-    url: "/accounts",
-    icon: CreditCard,
-  },
-  {
-    title: "Compliance",
-    icon: Shield,
-    items: [
-      {
-        title: "OFAC",
-        url: "/compliance/ofac",
-        icon: Shield,
-      },
-      {
-        title: "314a",
-        url: "/compliance/314a",
-        icon: FileText,
-      },
-      {
-        title: "Velocity Limits",
-        url: "/compliance/velocity",
-        icon: TrendingUp,
-      },
-    ],
-  },
-  {
-    title: "Recon",
-    icon: RefreshCw,
-    items: [
-      {
-        title: "File Upload",
-        url: "/recon/upload",
-        icon: Upload,
-      },
-      {
-        title: "Exception Review",
-        url: "/recon/exceptions",
-        icon: AlertCircle,
-      },
-    ],
-  },
-  {
-    title: "ACH",
-    icon: Repeat,
-    items: [
-      {
-        title: "Processing",
-        url: "/ach/processing",
-        icon: FileText,
-      },
-      {
-        title: "Settlement",
-        url: "/ach/settlement",
-        icon: Landmark,
-      },
-      {
-        title: "Return",
-        url: "/ach/return",
-        icon: Search,
-      },
-      {
-        title: "NOC",
-        url: "/ach/noc",
-        icon: RefreshCw,
-      },
-    ],
-  },
-  {
-    title: "Wire",
-    icon: Zap,
-    items: [
-      {
-        title: "Processing",
-        url: "/wire/processing",
-        icon: FileText,
-      },
-      {
-        title: "Settlement",
-        url: "/wire/settlement",
-        icon: Landmark,
-      },
-    ],
-  },
-  {
-    title: "Configurations",
-    icon: Settings,
-    items: [
-      {
-        title: "Developers",
-        url: "/configurations/developers",
-        icon: Box,
-      },
-      {
-        title: "Programs",
-        url: "/configurations/programs",
-        icon: LayoutDashboard,
-      },
-      {
-        title: "Products",
-        url: "/configurations/products",
-        icon: FileText,
-      },
-    ],
-  },
-  {
-    title: "ClearSight",
-    url: "/clearsight",
-    icon: BarChart3,
-  },
-  {
-    title: "Settings",
-    icon: Settings,
-    items: [
-      {
-        title: "User Management",
-        url: "/settings/users",
-        icon: Users,
-      },
-      {
-        title: "API Key",
-        url: "/settings/api-key",
-        icon: Key,
-      },
-    ],
-  },
-]
-
-export function AppSidebar() {
-  const { state } = useSidebar()
-  const location = useLocation()
-  const currentPath = location.pathname
-  
-  // Track which menu items are open
-  const [openItems, setOpenItems] = useState<string[]>([])
-
-  const isActive = (path: string) => currentPath === path
-  
-  const toggleItem = (title: string) => {
-    setOpenItems(prev => 
-      prev.includes(title) 
-        ? prev.filter(item => item !== title)
-        : [...prev, title]
-    )
-  }
-
-  return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader className="border-b border-sidebar-border">
-        <div className="flex items-center justify-between gap-2 px-4 py-3">
-          {state !== "collapsed" ? (
-            <img src={braidLogo} alt="Braid" className="h-8" />
-          ) : (
-            <img src={braidLogo} alt="Braid" className="h-6" />
-          )}
-          <SidebarTrigger />
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarMenu>
-          {navigationItems.map((item) => {
-            // Check if it's a group with sub-items
-            if (item.items) {
-              const isOpen = openItems.includes(item.title)
-              
-              return (
-                <Collapsible
-                  key={item.title}
-                  open={isOpen}
-                  onOpenChange={() => toggleItem(item.title)}
-                >
-                  <SidebarMenuItem>
-                    <CollapsibleTrigger asChild>
-                      <SidebarMenuButton
-                        tooltip={state === "collapsed" ? item.title : undefined}
-                      >
-                        <item.icon className="w-4 h-4" />
-                        <span>{item.title}</span>
-                        <ChevronRight 
-                          className={`ml-auto h-4 w-4 transition-transform ${isOpen ? 'rotate-90' : ''}`}
-                        />
-                      </SidebarMenuButton>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                      <SidebarMenuSub>
-                        {item.items.map((subItem) => (
-                          <SidebarMenuSubItem key={subItem.title}>
-                            <SidebarMenuSubButton 
-                              asChild
-                              isActive={isActive(subItem.url)}
-                            >
-                              <NavLink to={subItem.url}>
-                                <subItem.icon className="w-4 h-4" />
-                                <span>{subItem.title}</span>
-                                {subItem.badge && (
-                                  <SidebarMenuBadge className="ml-auto">
-                                    {subItem.badge}
-                                  </SidebarMenuBadge>
-                                )}
-                              </NavLink>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
-                        ))}
-                      </SidebarMenuSub>
-                    </CollapsibleContent>
-                  </SidebarMenuItem>
-                </Collapsible>
-              )
-            }
-
-            // Single item without sub-items
-            return (
-              <SidebarMenuItem key={item.title}>
-                <SidebarMenuButton 
-                  asChild
-                  isActive={isActive(item.url!)}
-                  tooltip={state === "collapsed" ? item.title : undefined}
-                >
-                  <NavLink to={item.url!}>
-                    <item.icon className="w-4 h-4" />
-                    <span>{item.title}</span>
-                  </NavLink>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            )
-          })}
-        </SidebarMenu>
-      </SidebarContent>
-    </Sidebar>
-  )
-}

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

@@ -1,78 +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 { useFormWithEditState } from "@/hooks/useFormWithEditState"
-import { achTransferSchema, type ACHTransfer } from "@/lib/schemas/banking-schemas"
-import { defaultACHTransfer } from "@/lib/mock-data/banking-data"
-
-interface ACHBankCardProps {
-  data?: Partial<ACHTransfer>
-  onDataChange?: (data: ACHTransfer) => void
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const ACHBankCard = ({ data, onDataChange, isEditing, onToggleEdit, className, hideActions }: ACHBankCardProps) => {
-  const form = useFormWithEditState<ACHTransfer>({
-    schema: achTransferSchema,
-    defaultValues: { ...defaultACHTransfer, ...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="bankDetails.gatewayRoutingNumber"
-            label="Gateway Routing Number"
-            placeholder="Enter gateway routing number"
-            pattern="[0-9]{9}"
-            maxLength={9}
-            hint="9-digit gateway routing number"
-            required
-          />
-          
-          <FormInput
-            name="bankDetails.rdfiNumberQualifier"
-            label="RDFI Number Qualifier"
-            placeholder="Enter RDFI qualifier"
-            maxLength={2}
-            hint="2-digit RDFI number qualifier"
-            required
-          />
-        </div>
-      </div>
-    </FormProvider>
-  )
-
-  const viewContent = (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <InfoField label="Gateway Routing Number" value={form.getValues("bankDetails.gatewayRoutingNumber")} layout="horizontal" />
-      <InfoField label="RDFI Number Qualifier" value={form.getValues("bankDetails.rdfiNumberQualifier")} layout="horizontal" />
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="ACH Bank Details"
-      description="ACH-specific routing and qualification information"
-      variant="subtle"
-      className={className}
-      isEditing={form.isEditing}
-      onToggleEdit={form.handleToggleEdit}
-      onSave={form.handleSave}
-      onCancel={form.handleCancel}
-      hideActions={hideActions}
-      isFormValid={form.isFormValid}
-      isDirty={form.isDirty}
-      editContent={editContent}
-      viewContent={viewContent}
-    />
-  )
-}

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

@@ -1,100 +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 { useFormWithEditState } from "@/hooks/useFormWithEditState"
-import { achTransferSchema, type ACHTransfer } from "@/lib/schemas/banking-schemas"
-import { defaultACHTransfer } from "@/lib/mock-data/banking-data"
-
-interface ACHBasicInfoCardProps {
-  data?: Partial<ACHTransfer>
-  onDataChange?: (data: ACHTransfer) => void
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const ACHBasicInfoCard = ({ 
-  data, 
-  onDataChange, 
-  isEditing, 
-  onToggleEdit, 
-  className, 
-  hideActions 
-}: ACHBasicInfoCardProps) => {
-  const form = useFormWithEditState<ACHTransfer>({
-    schema: achTransferSchema,
-    defaultValues: { ...defaultACHTransfer, ...data },
-    initialEditing: isEditing,
-    onToggleEdit,
-    onSave: onDataChange,
-  })
-
-  const editContent = (
-    <FormProvider form={form}>
-      <div className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <FormInput
-            name="basicInfo.counterpartyName"
-            label="Counterparty Name"
-            placeholder="Enter counterparty name"
-            required
-          />
-          
-          <FormInput
-            name="basicInfo.shortName"
-            label="Short Name"
-            placeholder="Enter short name"
-            required
-          />
-        </div>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <FormSelect
-            name="basicInfo.type"
-            label="Type"
-            placeholder="Select type"
-            options={[
-              { value: "business", label: "Business" },
-              { value: "individual", label: "Individual" }
-            ]}
-          />
-          
-          <FormInput
-            name="basicInfo.description"
-            label="Description"
-            placeholder="Enter description"
-          />
-        </div>
-      </div>
-    </FormProvider>
-  )
-
-  const viewContent = (
-    <div className="space-y-3">
-      <InfoField label="Counterparty Name" value={form.getValues("basicInfo.counterpartyName")} layout="horizontal" />
-      <InfoField label="Short Name" value={form.getValues("basicInfo.shortName")} layout="horizontal" />
-      <InfoField label="Type" value={form.getValues("basicInfo.type")} layout="horizontal" />
-      <InfoField label="Description" value={form.getValues("basicInfo.description") || "N/A"} layout="horizontal" />
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="Basic Information" 
-      variant="subtle"
-      className={className}
-      isEditing={form.isEditing}
-      onToggleEdit={form.handleToggleEdit}
-      onSave={form.handleSave}
-      onCancel={form.handleCancel}
-      hideActions={hideActions}
-      isFormValid={form.isFormValid}
-      isDirty={form.isDirty}
-      editContent={editContent}
-      viewContent={viewContent}
-    />
-  )
-}