braid-ui 1.0.98 → 1.0.99

package/src/components/alerts/AlertTimeline.tsx

@@ -0,0 +1,79 @@
+import { TimelineEvent } from "@/lib/mock-data/alert-data"
+import { CheckCircle, Circle, UserPlus, Edit, XCircle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface AlertTimelineProps {
+  events: TimelineEvent[]
+}
+
+export const AlertTimeline = ({ events }: AlertTimelineProps) => {
+  const getIcon = (action: string) => {
+    if (action.includes("Created")) return <Circle className="h-4 w-4" />
+    if (action.includes("Assigned")) return <UserPlus className="h-4 w-4" />
+    if (action.includes("Updated") || action.includes("Modified")) return <Edit className="h-4 w-4" />
+    if (action.includes("Closed") || action.includes("Resolved")) return <CheckCircle className="h-4 w-4" />
+    if (action.includes("Rejected")) return <XCircle className="h-4 w-4" />
+    return <Circle className="h-4 w-4" />
+  }
+
+  const getStatusColor = (status?: string) => {
+    switch (status) {
+      case "Unassigned":
+        return "text-destructive"
+      case "Closed":
+        return "text-success"
+      case "In Progress":
+        return "text-warning"
+      default:
+        return "text-muted-foreground"
+    }
+  }
+
+  if (events.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No timeline events yet
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {events.map((event, index) => (
+        <div key={event.id} className="relative pl-6 pb-3">
+          {/* Timeline line */}
+          {index !== events.length - 1 && (
+            <div className="absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" />
+          )}
+          
+          {/* Icon */}
+          <div className={cn(
+            "absolute left-0 top-0 flex-none",
+            getStatusColor(event.status)
+          )}>
+            <div className="h-4 w-4">
+              {getIcon(event.action)}
+            </div>
+          </div>
+          
+          {/* Content */}
+          <div className="space-y-0.5">
+            <p className="text-xs font-medium text-foreground">{event.action}</p>
+            <p className="text-xs text-muted-foreground">by {event.user}</p>
+            {event.details && (
+              <p className="text-xs text-muted-foreground">{event.details}</p>
+            )}
+            {event.status && (
+              <p className={cn("text-xs font-medium", getStatusColor(event.status))}>
+                Status: {event.status}
+              </p>
+            )}
+            <p className="text-xs text-muted-foreground/70 pt-0.5">
+              {event.timestamp}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/alerts/ContextSection.tsx

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

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

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