Okay, let's set up the React application using Vite, TypeScript, Tailwind CSS, and Shadcn UI to simulate the Collateral360 API interactions. This setup will provide the basic structure and components for the features you described: retrieving loan information, submitting a service request, and checking service status, using mock data. { "name": "collateral360-ui-mock", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "lucide-react": "^0.378.0", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20.12.12", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "typescript": "^5.2.2", "vite": "^5.2.0" } } { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, /* Shadcn UI */ "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } { "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", "allowSyntheticDefaultImports": true, "strict": true }, "include": ["vite.config.ts"] } import path from "path" import react from "@vitejs/plugin-react" import { defineConfig } from "vite" export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, server: { port: 3000, // Optional: specify port open: true // Optional: automatically open browser } }) /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } Collateral360 UI Mock

@tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' import { Toaster } from "@/components/ui/toaster" ReactDOM.createRoot(document.getElementById('root')!).render( , ) import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = "horizontal", decorative = true, ...props }, ref ) => ( ) ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, } ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return ( ) }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(function ({ id, title, description, action, ...props }) { return (

{title && {title}} {description && ( {description} )}

{action} ) })} ) } // Inspired by react-hot-toast library import * as React from "react" type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: React.ReactElement } const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToastProps = React.ComponentPropsWithoutRef type ToastAction = { type: "ADD_TOAST" toast: ToasterToast } | { type: "UPDATE_TOAST" toast: Partial } | { type: "DISMISS_TOAST" toastId?: ToasterToast["id"] } | { type: "REMOVE_TOAST" toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: ToastAction): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => t.id === action.toast.id ? { ...t, ...action.toast } : t ), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: ToastAction) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } let count = 0 function genId() { count = (count + 1) % 1000 return count.toString() } // Helper to properly type the import // See: https://github.com/microsoft/TypeScript/issues/43329#issuecomment-1270794132 // eslint-disable-next-line @typescript-eslint/no-unused-vars type _ToastAction = typeof ToastAction // eslint-disable-next-line @typescript-eslint/no-unused-vars type _Toast = typeof Toast export { useToast, toast } import React, { useState } from 'react'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { useToast } from "@/components/ui/use-toast"; import { Loader2 } from 'lucide-react'; // Mock Data Types interface LoanFileInfo { loanId: string; borrowerName: string; propertyAddress: string; loanAmount: number; status: string; environmentalRiskCode?: string; // Added based on API features } interface ServiceStatusInfo { serviceId: string; loanId: string; serviceType: string; status: 'Pending' | 'In Progress' | 'Completed' | 'Error'; lastUpdated: string; downloadLink?: string; // Added based on API features } // Mock API Simulation const simulateApiCall = (data: T, delay = 1500): Promise => { return new Promise(resolve => setTimeout(() => resolve(data), delay)); }; function App() { const { toast } = useToast(); // --- Retrieve Loan File --- const [loanIdInput, setLoanIdInput] = useState(''); const [loanInfo, setLoanInfo] = useState(null); const [loadingLoan, setLoadingLoan] = useState(false); const [loanError, setLoanError] = useState(null); const handleRetrieveLoan = async (e: React.FormEvent) => { e.preventDefault(); if (!loanIdInput) return; setLoadingLoan(true); setLoanInfo(null); setLoanError(null); try { // Simulate API call const mockLoanData: LoanFileInfo = { loanId: loanIdInput, borrowerName: `Borrower ${loanIdInput.slice(-3)}`, propertyAddress: `${loanIdInput.slice(-2)} Mockingbird Lane`, loanAmount: Math.floor(Math.random() * 500000) + 100000, status: 'Active', environmentalRiskCode: `ERC-${Math.floor(Math.random() * 10)}` }; const response = await simulateApiCall(mockLoanData); setLoanInfo(response); } catch (error) { setLoanError("Failed to retrieve loan information."); toast({ variant: "destructive", title: "Error", description: "Failed to retrieve loan information.", }); } finally { setLoadingLoan(false); } }; // --- Submit Service Request --- const [serviceLoanId, setServiceLoanId] = useState(''); const [serviceType, setServiceType] = useState(''); const [serviceDescription, setServiceDescription] = useState(''); const [loadingSubmit, setLoadingSubmit] = useState(false); const [submitSuccess, setSubmitSuccess] = useState(null); const handleSubmitService = async (e: React.FormEvent) => { e.preventDefault(); if (!serviceLoanId || !serviceType) return; setLoadingSubmit(true); setSubmitSuccess(null); try { // Simulate API call const mockServiceId = `SRVC-${Date.now().toString().slice(-6)}`; await simulateApiCall({ success: true, serviceId: mockServiceId }); setSubmitSuccess(`Service request ${mockServiceId} submitted successfully for loan ${serviceLoanId}.`); toast({ title: "Success", description: `Service request ${mockServiceId} submitted.`, }); // Clear form setServiceLoanId(''); setServiceType(''); setServiceDescription(''); } catch (error) { toast({ variant: "destructive", title: "Error", description: "Failed to submit service request.", }); } finally { setLoadingSubmit(false); } }; // --- Check Service Status --- const [statusServiceIdInput, setStatusServiceIdInput] = useState(''); const [serviceStatus, setServiceStatus] = useState(null); const [loadingStatus, setLoadingStatus] = useState(false); const [statusError, setStatusError] = useState(null); const handleCheckStatus = async (e: React.FormEvent) => { e.preventDefault(); if (!statusServiceIdInput) return; setLoadingStatus(true); setServiceStatus(null); setStatusError(null); try { // Simulate API call const statuses: Array = ['Pending', 'In Progress', 'Completed', 'Error']; const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]; const mockStatusData: ServiceStatusInfo = { serviceId: statusServiceIdInput, loanId: `LOAN-${statusServiceIdInput.slice(-4)}`, serviceType: 'Appraisal', status: randomStatus, lastUpdated: new Date().toLocaleString(), downloadLink: randomStatus === 'Completed' ? `/download/${statusServiceIdInput}.pdf` : undefined }; const response = await simulateApiCall(mockStatusData); setServiceStatus(response); } catch (error) { setStatusError("Failed to check service status."); toast({ variant: "destructive", title: "Error", description: "Failed to check service status.", }); } finally { setLoadingStatus(false); } }; return (

Collateral360 API Orchestration UI

{/* Retrieve Loan File Section */} Retrieve Loan File Information Enter a Loan ID to fetch its details. {loadingLoan && (

)} {loanInfo && !loadingLoan && (

Loan Details:

                  {JSON.stringify(loanInfo, null, 2)}

)} {/* Submit Service Request Section */} Submit/Draft Service Request Add a new service request to a loan file.

Loan ID setServiceLoanId(e.target.value)} placeholder="e.g., LOAN-12345" required />

Service Type setServiceType(e.target.value)} placeholder="e.g., Appraisal, Flood Certification" required />

Description (Optional) setServiceDescription(e.target.value)} placeholder="Additional details..." />

{submitSuccess && !loadingSubmit &&

{submitSuccess}

}

{loadingSubmit && (

)} {/* Check Service Status Section */} Check Service Status Enter a Service ID to check its current status. {loadingStatus && (

)} {serviceStatus && !loadingStatus && (

Service Status:

                  {JSON.stringify(serviceStatus, null, 2)}

{serviceStatus.downloadLink && ( )} )}

); } export default App;