feat: implement #540 #541 #568 #574 frontend components (#686)

- #541 TimeRangePicker: presets (1h/24h/7d/30d), custom datetime-local
  inputs, timezone selector, UTC display
- #540 AdvancedFilterBuilder: AND/OR logic, multiple conditions with
  field/operator/value, filter preview, save/load/delete templates
- #568 WebhookTable: responsive stacked mobile cards with collapsible
  details and touch-friendly buttons (min 44px), desktop table unchanged
- #574 OrgLogoUpload: file upload UI, type/size validation, image
  preview, canvas-based square crop tool

62 tests passing across 4 suites

Author: susanyusuf

soroscan-frontend/__tests__/advanced-filter-builder.test.tsx

@@ -0,0 +1,168 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { AdvancedFilterBuilder } from "@/components/ui/AdvancedFilterBuilder"
+
+const FIELDS = ["contractId", "eventType", "ledger", "value"]
+const mockOnChange = jest.fn()
+const mockOnApply  = jest.fn()
+
+beforeEach(() => {
+  mockOnChange.mockClear()
+  mockOnApply.mockClear()
+  localStorage.clear()
+})
+
+function renderBuilder(overrides = {}) {
+  return render(
+    <AdvancedFilterBuilder
+      fields={FIELDS}
+      onChange={mockOnChange}
+      onApply={mockOnApply}
+      storageKey="test_filter_templates"
+      {...overrides}
+    />
+  )
+}
+
+describe("AdvancedFilterBuilder", () => {
+  it("renders the filter builder heading", () => {
+    renderBuilder()
+    expect(screen.getByText("[FILTER_BUILDER]")).toBeInTheDocument()
+  })
+
+  it("renders AND and OR logic buttons", () => {
+    renderBuilder()
+    expect(screen.getByRole("button", { name: "AND" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "OR" })).toBeInTheDocument()
+  })
+
+  it("defaults to AND logic", () => {
+    renderBuilder()
+    const andBtn = screen.getByRole("button", { name: "AND" })
+    expect(andBtn).toHaveAttribute("aria-pressed", "true")
+  })
+
+  it("switches to OR logic when OR is clicked", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByRole("button", { name: "OR" }))
+    expect(screen.getByRole("button", { name: "OR" })).toHaveAttribute("aria-pressed", "true")
+    expect(mockOnChange).toHaveBeenCalledWith(expect.objectContaining({ logic: "OR" }))
+  })
+
+  it("renders one condition row by default", () => {
+    renderBuilder()
+    expect(screen.getAllByTestId("filter-condition")).toHaveLength(1)
+  })
+
+  it("adds a condition when ADD_CONDITION is clicked", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByText("+ ADD_CONDITION"))
+    expect(screen.getAllByTestId("filter-condition")).toHaveLength(2)
+    expect(mockOnChange).toHaveBeenCalled()
+  })
+
+  it("removes a condition when remove button is clicked", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByText("+ ADD_CONDITION"))
+    expect(screen.getAllByTestId("filter-condition")).toHaveLength(2)
+    fireEvent.click(screen.getAllByLabelText("Remove condition")[0])
+    expect(screen.getAllByTestId("filter-condition")).toHaveLength(1)
+  })
+
+  it("updates field select and calls onChange", () => {
+    renderBuilder()
+    const fieldSelect = screen.getAllByLabelText("Filter field")[0]
+    fireEvent.change(fieldSelect, { target: { value: "eventType" } })
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conditions: expect.arrayContaining([
+          expect.objectContaining({ field: "eventType" }),
+        ]),
+      })
+    )
+  })
+
+  it("updates operator select and calls onChange", () => {
+    renderBuilder()
+    const opSelect = screen.getAllByLabelText("Filter operator")[0]
+    fireEvent.change(opSelect, { target: { value: "contains" } })
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conditions: expect.arrayContaining([
+          expect.objectContaining({ operator: "contains" }),
+        ]),
+      })
+    )
+  })
+
+  it("updates value input and calls onChange", () => {
+    renderBuilder()
+    const valueInput = screen.getAllByLabelText("Filter value")[0]
+    fireEvent.change(valueInput, { target: { value: "swap" } })
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conditions: expect.arrayContaining([
+          expect.objectContaining({ value: "swap" }),
+        ]),
+      })
+    )
+  })
+
+  it("shows filter preview", () => {
+    renderBuilder()
+    expect(screen.getByTestId("filter-preview")).toBeInTheDocument()
+  })
+
+  it("preview updates when value changes", () => {
+    renderBuilder()
+    const valueInput = screen.getAllByLabelText("Filter value")[0]
+    fireEvent.change(valueInput, { target: { value: "myvalue" } })
+    expect(screen.getByTestId("filter-preview").textContent).toContain("myvalue")
+  })
+
+  it("calls onApply when APPLY is clicked", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByRole("button", { name: "APPLY" }))
+    expect(mockOnApply).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows save input when SAVE button is clicked", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByRole("button", { name: "SAVE" }))
+    expect(screen.getByLabelText("Template name")).toBeInTheDocument()
+  })
+
+  it("saves a template and shows it in the list", () => {
+    renderBuilder()
+    fireEvent.click(screen.getByRole("button", { name: "SAVE" }))
+    const nameInput = screen.getByLabelText("Template name")
+    fireEvent.change(nameInput, { target: { value: "My Filter" } })
+    // Click the second SAVE button (inside the save form)
+    const saveBtns = screen.getAllByRole("button", { name: "SAVE" })
+    fireEvent.click(saveBtns[saveBtns.length - 1])
+    expect(screen.getByText("My Filter")).toBeInTheDocument()
+  })
+
+  it("loads a saved template when clicked", () => {
+    // Pre-populate localStorage
+    const template = {
+      name: "Preset",
+      group: { logic: "OR", conditions: [{ id: "x", field: "ledger", operator: "gt", value: "100" }] },
+    }
+    localStorage.setItem("test_filter_templates", JSON.stringify([template]))
+    renderBuilder()
+    fireEvent.click(screen.getByText("Preset"))
+    expect(mockOnChange).toHaveBeenCalledWith(
+      expect.objectContaining({ logic: "OR" })
+    )
+  })
+
+  it("deletes a saved template", () => {
+    const template = { name: "ToDelete", group: { logic: "AND", conditions: [] } }
+    localStorage.setItem("test_filter_templates", JSON.stringify([template]))
+    renderBuilder()
+    expect(screen.getByText("ToDelete")).toBeInTheDocument()
+    fireEvent.click(screen.getByLabelText("Delete template ToDelete"))
+    expect(screen.queryByText("ToDelete")).not.toBeInTheDocument()
+  })
+})

soroscan-frontend/__tests__/org-logo-upload.test.tsx

@@ -0,0 +1,130 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { OrgLogoUpload } from "@/components/ui/OrgLogoUpload"
+
+const mockOnSave = jest.fn()
+
+class MockImage {
+  naturalWidth = 200
+  naturalHeight = 200
+  onload: (() => void) | null = null
+  onerror: (() => void) | null = null
+  private _src = ""
+  get src() { return this._src }
+  set src(v: string) { this._src = v; setTimeout(() => this.onload?.(), 0) }
+}
+
+const mockDrawImage = jest.fn()
+const mockToDataURL = jest.fn(() => "data:image/png;base64,CROPPED")
+
+beforeAll(() => {
+  // @ts-expect-error mock
+  global.Image = MockImage
+  HTMLCanvasElement.prototype.getContext = jest.fn(() => ({ drawImage: mockDrawImage })) as unknown as typeof HTMLCanvasElement.prototype.getContext
+  HTMLCanvasElement.prototype.toDataURL = mockToDataURL
+})
+
+beforeEach(() => { mockOnSave.mockClear(); mockDrawImage.mockClear(); mockToDataURL.mockClear() })
+
+function makeFile(name = "logo.png", type = "image/png", size = 100) {
+  return new File([new Uint8Array(size)], name, { type })
+}
+
+function mockFileReader(result: string) {
+  const fr = { readAsDataURL: jest.fn(), onload: null as unknown, result }
+  jest.spyOn(global, "FileReader").mockImplementation(() => fr as unknown as FileReader)
+  return fr
+}
+
+describe("OrgLogoUpload", () => {
+  it("renders the upload heading", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    expect(screen.getByText("[ORG_LOGO]")).toBeInTheDocument()
+  })
+
+  it("renders UPLOAD_LOGO button by default", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    expect(screen.getByRole("button", { name: "UPLOAD_LOGO" })).toBeInTheDocument()
+  })
+
+  it("renders CHANGE_LOGO when currentLogoUrl is provided", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} currentLogoUrl="https://example.com/logo.png" />)
+    expect(screen.getByRole("button", { name: "CHANGE_LOGO" })).toBeInTheDocument()
+  })
+
+  it("shows current logo preview when currentLogoUrl is provided", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} currentLogoUrl="https://example.com/logo.png" />)
+    const img = screen.getByTestId("logo-preview") as HTMLImageElement
+    expect(img.src).toContain("example.com/logo.png")
+  })
+
+  it("shows error for unsupported file type", async () => {
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), {
+      target: { files: [makeFile("doc.pdf", "application/pdf")] },
+    })
+    await waitFor(() => expect(screen.getByTestId("logo-error").textContent).toMatch(/Unsupported file type/))
+  })
+
+  it("shows error when file exceeds max size", async () => {
+    render(<OrgLogoUpload onSave={mockOnSave} maxSizeBytes={50} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), {
+      target: { files: [makeFile("big.png", "image/png", 200)] },
+    })
+    await waitFor(() => expect(screen.getByTestId("logo-error").textContent).toMatch(/too large/))
+  })
+
+  it("shows crop tool after valid file is selected", async () => {
+    const fr = mockFileReader("data:image/png;base64,FAKE")
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), { target: { files: [makeFile()] } })
+    ;(fr.onload as unknown as (e: unknown) => void)?.({ target: { result: fr.result } })
+    await waitFor(() => expect(screen.getByTestId("crop-tool")).toBeInTheDocument())
+    jest.restoreAllMocks()
+  })
+
+  it("removes logo when REMOVE is clicked", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} currentLogoUrl="https://example.com/logo.png" />)
+    fireEvent.click(screen.getByLabelText("Remove logo"))
+    expect(screen.queryByTestId("logo-preview")).not.toBeInTheDocument()
+  })
+
+  it("shows file type hint text", () => {
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    expect(screen.getByText(/PNG, JPEG, GIF, WEBP/)).toBeInTheDocument()
+  })
+
+  it("crop tool has decrease and increase size buttons", async () => {
+    const fr = mockFileReader("data:image/png;base64,FAKE")
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), { target: { files: [makeFile()] } })
+    ;(fr.onload as unknown as (e: unknown) => void)?.({ target: { result: fr.result } })
+    await waitFor(() => screen.getByTestId("crop-tool"))
+    expect(screen.getByLabelText("Decrease crop size")).toBeInTheDocument()
+    expect(screen.getByLabelText("Increase crop size")).toBeInTheDocument()
+    jest.restoreAllMocks()
+  })
+
+  it("crop tool CANCEL returns to upload view", async () => {
+    const fr = mockFileReader("data:image/png;base64,FAKE")
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), { target: { files: [makeFile()] } })
+    ;(fr.onload as unknown as (e: unknown) => void)?.({ target: { result: fr.result } })
+    await waitFor(() => screen.getByTestId("crop-tool"))
+    fireEvent.click(screen.getByRole("button", { name: "CANCEL" }))
+    expect(screen.queryByTestId("crop-tool")).not.toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "UPLOAD_LOGO" })).toBeInTheDocument()
+    jest.restoreAllMocks()
+  })
+
+  it("crop tool CONFIRM_CROP calls onSave with data URL", async () => {
+    const fr = mockFileReader("data:image/png;base64,FAKE")
+    render(<OrgLogoUpload onSave={mockOnSave} />)
+    fireEvent.change(screen.getByTestId("logo-file-input"), { target: { files: [makeFile()] } })
+    ;(fr.onload as unknown as (e: unknown) => void)?.({ target: { result: fr.result } })
+    await waitFor(() => screen.getByTestId("crop-tool"))
+    fireEvent.click(screen.getByRole("button", { name: "CONFIRM_CROP" }))
+    await waitFor(() => expect(mockOnSave).toHaveBeenCalledWith("data:image/png;base64,CROPPED"))
+    jest.restoreAllMocks()
+  })
+})

soroscan-frontend/__tests__/time-range-picker.test.tsx

@@ -0,0 +1,93 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { TimeRangePicker } from "@/components/ui/TimeRangePicker"
+
+const mockOnChange = jest.fn()
+
+beforeEach(() => mockOnChange.mockClear())
+
+describe("TimeRangePicker", () => {
+  it("renders preset buttons", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    expect(screen.getByText("Last 1h")).toBeInTheDocument()
+    expect(screen.getByText("Last 24h")).toBeInTheDocument()
+    expect(screen.getByText("Last 7d")).toBeInTheDocument()
+    expect(screen.getByText("Last 30d")).toBeInTheDocument()
+  })
+
+  it("renders FROM and TO datetime inputs", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    expect(screen.getByLabelText("From date and time")).toBeInTheDocument()
+    expect(screen.getByLabelText("To date and time")).toBeInTheDocument()
+  })
+
+  it("renders timezone selector with UTC default", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    const tzSelect = screen.getByLabelText("Timezone")
+    expect(tzSelect).toBeInTheDocument()
+    expect((tzSelect as HTMLSelectElement).value).toBe("UTC")
+  })
+
+  it("calls onChange when a preset is clicked", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    fireEvent.click(screen.getByText("Last 1h"))
+    expect(mockOnChange).toHaveBeenCalledTimes(1)
+    const arg = mockOnChange.mock.calls[0][0]
+    expect(arg).toHaveProperty("from")
+    expect(arg).toHaveProperty("to")
+    expect(arg.timezone).toBe("UTC")
+    // from should be ~1h before to
+    const diffMs = arg.to.getTime() - arg.from.getTime()
+    expect(diffMs).toBeCloseTo(60 * 60 * 1000, -3)
+  })
+
+  it("calls onChange when timezone changes", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    const tzSelect = screen.getByLabelText("Timezone")
+    fireEvent.change(tzSelect, { target: { value: "Europe/London" } })
+    expect(mockOnChange).toHaveBeenCalledTimes(1)
+    expect(mockOnChange.mock.calls[0][0].timezone).toBe("Europe/London")
+  })
+
+  it("highlights active preset after clicking", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    const btn = screen.getByText("Last 7d")
+    fireEvent.click(btn)
+    expect(btn.className).toMatch(/bg-terminal-green/)
+  })
+
+  it("shows UTC display below FROM input after preset click", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    fireEvent.click(screen.getByText("Last 1h"))
+    // UTC display should contain "UTC"
+    const utcLabels = screen.getAllByText(/UTC/)
+    expect(utcLabels.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it("calls onChange when FROM input changes", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    const fromInput = screen.getByLabelText("From date and time")
+    fireEvent.change(fromInput, { target: { value: "2025-01-01T00:00" } })
+    expect(mockOnChange).toHaveBeenCalled()
+  })
+
+  it("calls onChange when TO input changes", () => {
+    render(<TimeRangePicker onChange={mockOnChange} />)
+    const toInput = screen.getByLabelText("To date and time")
+    fireEvent.change(toInput, { target: { value: "2025-01-02T00:00" } })
+    expect(mockOnChange).toHaveBeenCalled()
+  })
+
+  it("accepts a value prop and reflects it", () => {
+    const from = new Date("2025-06-01T10:00:00Z")
+    const to   = new Date("2025-06-01T12:00:00Z")
+    render(
+      <TimeRangePicker
+        value={{ from, to, timezone: "UTC" }}
+        onChange={mockOnChange}
+      />
+    )
+    const fromInput = screen.getByLabelText("From date and time") as HTMLInputElement
+    expect(fromInput.value).toBe("2025-06-01T10:00")
+  })
+})