[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { RiskSignalConfig } from "@/components/risk-signal-config" export default function Page() { return (

Risk Signal Configuration

Configure risk thresholds and scoring rules

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import "@/app/globals.css" import { Roboto } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const roboto = Roboto({ weight: ["400", "500", "700"], subsets: ["latin"], display: "swap", }) export const metadata = { title: "Risk Signal Configuration", description: "Configure risk signals and thresholds", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --font-roboto: "Roboto", sans-serif; --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; font-family: var(--font-roboto); } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-roboto)"], }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/risk-signal-config.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { AlertCircle, Edit2, Filter, Plus, Save, Smartphone, Trash2, Users, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { TooltipProvider } from "@/components/ui/tooltip" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" // Define types for our rules type AppRule = { id: number appType: string threshold: number score: number } type DeviceRule = { id: number userType: string threshold: number score: number } type SignalScore = { id: number signal: string appType: string score: number } type Condition = { type: string value?: string operator?: string compareValue?: string appType?: string } type CombinationRule = { id: number conditions: Condition[] score: number appType: string } // Helper function to get risk level color const getRiskLevelColor = (score: number) => { if (score <= 30) return "bg-[#E9F9F2] text-green-800 border-[#089057]" if (score <= 70) return "bg-[#FBEBDE] text-amber-800 border-[#D47115]" return "bg-[#FFEAF0] text-red-800 border-[#D93566]" } const getRiskLevelText = (score: number) => { if (score <= 30) return "Low" if (score <= 70) return "Medium" return "High" } // Risk score button component const RiskScoreSelector = ({ id, type, currentScore, onChange, isEditable, }: { id: number type: "app" | "device" | "signal" | "combination" currentScore: number onChange: (id: number, type: "app" | "device" | "signal" | "combination", score: number) => void isEditable: boolean }) => { const scores = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] if (!isEditable) { return (

Risk Score: {currentScore} {getRiskLevelText(currentScore)}

{/* Circle thumb indicator */}

0 10 20 30 40 50 60 70 80 90 100

) } return (

Risk Score: {currentScore} {getRiskLevelText(currentScore)}

{/* Circle thumb indicator */}

onChange(id, type, Number.parseInt(e.target.value))} className="absolute top-0 w-full h-6 opacity-0 cursor-pointer" />

0 10 20 30 40 50 60 70 80 90 100

) } export function RiskSignalConfig() { // Add app type as the primary filter const [selectedAppType, setSelectedAppType] = useState("consumer") // Add edit mode states for each tab const [appRulesEditMode, setAppRulesEditMode] = useState(false) const [deviceRulesEditMode, setDeviceRulesEditMode] = useState(false) const [signalScoresEditMode, setSignalScoresEditMode] = useState(false) const [combinationRulesEditMode, setCombinationRulesEditMode] = useState(false) const [appRules, setAppRules] = useState([ { id: 1, appType: "consumer", threshold: 3, score: 70 }, { id: 2, appType: "delivery", threshold: 2, score: 60 }, { id: 3, appType: "merchant", threshold: 4, score: 80 }, ]) const [deviceRules, setDeviceRules] = useState([ { id: 1, userType: "consumer", threshold: 5, score: 80 }, { id: 2, userType: "delivery", threshold: 3, score: 50 }, { id: 3, userType: "merchant", threshold: 2, score: 40 }, ]) const [signalScores, setSignalScores] = useState([ { id: 1, signal: "OEM_UNLOCKED", appType: "consumer", score: 80 }, { id: 2, signal: "OEM_UNLOCKED", appType: "delivery", score: 20 }, { id: 3, signal: "APP_CLONED", appType: "consumer", score: 90 }, { id: 4, signal: "ROOT_DETECTED", appType: "merchant", score: 70 }, ]) const [combinationRules, setCombinationRules] = useState([ { id: 1, appType: "consumer", conditions: [ { type: "signal", value: "OEM_UNLOCKED", operator: "is", compareValue: "true" }, { type: "userCount", appType: "consumer", operator: ">=", compareValue: "3" }, { type: "signal", value: "APP_CLONED", operator: "is", compareValue: "true" }, ], score: 80, }, { id: 2, appType: "delivery", conditions: [ { type: "signal", value: "EMULATOR_DETECTED", operator: "is", compareValue: "true" }, { type: "deviceCount", operator: ">=", compareValue: "2" }, ], score: 60, }, ]) // Add a toast state for confirmations const [showToast, setShowToast] = useState(false) const [toastMessage, setToastMessage] = useState("") const [toastType, setToastType] = useState<"success" | "error">("success") // Add a validation state for error handling const [errors, setErrors] = useState>({}) const [showConfirmDialog, setShowConfirmDialog] = useState(false) const [currentEditType, setCurrentEditType] = useState<"app" | "device" | "signal" | "combination" | null>(null) const [itemsToSave, setItemsToSave] = useState([]) // Filter rules by selected app type const filteredAppRules = appRules.filter((rule) => rule.appType === selectedAppType) const filteredDeviceRules = deviceRules.filter((rule) => rule.userType === selectedAppType) const filteredSignalScores = signalScores.filter((score) => score.appType === selectedAppType) const filteredCombinationRules = combinationRules.filter((rule) => rule.appType === selectedAppType) const addAppRule = () => { if (!appRulesEditMode) return const newId = appRules.length ? Math.max(...appRules.map((r) => r.id)) + 1 : 1 setAppRules([...appRules, { id: newId, appType: selectedAppType, threshold: 1, score: 50 }]) } const addDeviceRule = () => { if (!deviceRulesEditMode) return const newId = deviceRules.length ? Math.max(...deviceRules.map((r) => r.id)) + 1 : 1 setDeviceRules([...deviceRules, { id: newId, userType: selectedAppType, threshold: 1, score: 50 }]) } const addSignalScore = () => { if (!signalScoresEditMode) return const newId = signalScores.length ? Math.max(...signalScores.map((r) => r.id)) + 1 : 1 setSignalScores([...signalScores, { id: newId, signal: "OEM_UNLOCKED", appType: selectedAppType, score: 50 }]) } const addCombinationRule = () => { if (!combinationRulesEditMode) return const newId = combinationRules.length ? Math.max(...combinationRules.map((r) => r.id)) + 1 : 1 setCombinationRules([ ...combinationRules, { id: newId, appType: selectedAppType, conditions: [{ type: "signal", value: "OEM_UNLOCKED", operator: "is", compareValue: "true" }], score: 50, }, ]) } const removeAppRule = (id: number) => { if (!appRulesEditMode) return setAppRules(appRules.filter((rule) => rule.id !== id)) } const removeDeviceRule = (id: number) => { if (!deviceRulesEditMode) return setDeviceRules(deviceRules.filter((rule) => rule.id !== id)) } const removeSignalScore = (id: number) => { if (!signalScoresEditMode) return setSignalScores(signalScores.filter((score) => score.id !== id)) } const removeCombinationRule = (id: number) => { if (!combinationRulesEditMode) return setCombinationRules(combinationRules.filter((rule) => rule.id !== id)) } const updateAppRule = (id: number, field: string, value: any) => { if (!appRulesEditMode) return setAppRules( appRules.map((rule) => rule.id === id ? { ...rule, [field]: field === "threshold" || field === "score" ? Number.parseInt(value) : value } : rule, ), ) } const updateDeviceRule = (id: number, field: string, value: any) => { if (!deviceRulesEditMode) return setDeviceRules( deviceRules.map((rule) => rule.id === id ? { ...rule, [field]: field === "threshold" || field === "score" ? Number.parseInt(value) : value } : rule, ), ) } const updateSignalScore = (id: number, field: string, value: any) => { if (!signalScoresEditMode) return setSignalScores( signalScores.map((score) => score.id === id ? { ...score, [field]: field === "score" ? Number.parseInt(value) : value } : score, ), ) } const addConditionToCombinationRule = (ruleId: number) => { if (!combinationRulesEditMode) return setCombinationRules( combinationRules.map((rule) => rule.id === ruleId ? { ...rule, conditions: [ ...rule.conditions, { type: "signal", value: "APP_CLONED", operator: "is", compareValue: "true" }, ], } : rule, ), ) } const removeConditionFromCombinationRule = (ruleId: number, index: number) => { if (!combinationRulesEditMode) return setCombinationRules( combinationRules.map((rule) => rule.id === ruleId ? { ...rule, conditions: rule.conditions.filter((_, i) => i !== index), } : rule, ), ) } const updateCombinationRuleCondition = (ruleId: number, index: number, field: string, value: any) => { if (!combinationRulesEditMode) return setCombinationRules( combinationRules.map((rule) => rule.id === ruleId ? { ...rule, conditions: rule.conditions.map((condition, i) => i === index ? { ...condition, [field]: value } : condition, ), } : rule, ), ) } const updateCombinationRuleScore = (ruleId: number, value: number) => { if (!combinationRulesEditMode) return setCombinationRules(combinationRules.map((rule) => (rule.id === ruleId ? { ...rule, score: value } : rule))) } const saveAppRules = () => { const newErrors: Record = {} // Validate app rules filteredAppRules.forEach((rule) => { if (rule.threshold <= 0) { newErrors[`threshold-${rule.id}`] = "Threshold must be greater than 0" } }) setErrors(newErrors) if (Object.keys(newErrors).length === 0) { // Show confirmation dialog instead of saving immediately setCurrentEditType("app") setItemsToSave(filteredAppRules) setShowConfirmDialog(true) } } const saveDeviceRules = () => { // Show confirmation dialog setCurrentEditType("device") setItemsToSave(filteredDeviceRules) setShowConfirmDialog(true) } const saveSignalScores = () => { // Show confirmation dialog setCurrentEditType("signal") setItemsToSave(filteredSignalScores) setShowConfirmDialog(true) } const saveCombinationRules = () => { // Show confirmation dialog setCurrentEditType("combination") setItemsToSave(filteredCombinationRules) setShowConfirmDialog(true) } const handleConfirmSave = () => { // Save rules logic would go here based on the current edit type setToastMessage( `${ currentEditType === "app" ? "App rules" : currentEditType === "device" ? "Device rules" : currentEditType === "signal" ? "Signal scores" : "Combination rules" } saved successfully`, ) setToastType("success") setShowToast(true) setTimeout(() => setShowToast(false), 3000) // Reset edit mode based on current type if (currentEditType === "app") setAppRulesEditMode(false) else if (currentEditType === "device") setDeviceRulesEditMode(false) else if (currentEditType === "signal") setSignalScoresEditMode(false) else if (currentEditType === "combination") setCombinationRulesEditMode(false) // Close the dialog setShowConfirmDialog(false) } const renderPreviewContent = () => { if (!currentEditType || itemsToSave.length === 0) return null if (currentEditType === "app") { return (

{itemsToSave.map((rule: AppRule) => (

User Threshold: {rule.threshold} users

Risk Score: {rule.score} - {getRiskLevelText(rule.score)}

))}

) } if (currentEditType === "device") { return (

{itemsToSave.map((rule: DeviceRule) => (

Device Threshold: {rule.threshold} devices

Risk Score: {rule.score} - {getRiskLevelText(rule.score)}

))}

) } if (currentEditType === "signal") { return (

{itemsToSave.map((score: SignalScore) => (

Signal: {score.signal}

Risk Score: {score.score} - {getRiskLevelText(score.score)}

))}

) } if (currentEditType === "combination") { return (

{itemsToSave.map((rule: CombinationRule) => (

Conditions:

{rule.conditions.map((condition, index) => (

{condition.type === "signal" ? `Signal ${condition.value} ${condition.operator} ${condition.compareValue}` : `${condition.type} ${condition.operator} ${condition.compareValue}`}

))}

Risk Score: {rule.score} - {getRiskLevelText(rule.score)}

))}

) } return null } const handleRiskScoreSelect = (id: number, type: string, score: number) => { if (type === "app") { updateAppRule(id, "score", score) } else if (type === "device") { updateDeviceRule(id, "score", score) } else if (type === "signal") { updateSignalScore(id, "score", score) } else if (type === "combination") { updateCombinationRuleScore(id, score) } } return (

{/* App Type Selector */}

App Type

{(appRulesEditMode || deviceRulesEditMode || signalScoresEditMode || combinationRulesEditMode) && (

You are in edit mode. Please save or cancel your changes before navigating to other tabs.

)} App Level Device Level Signal Scores Combination {/* App Level Rules Tab */}

App Level Thresholds Define risk scores based on the number of users for {selectedAppType} app type

{appRulesEditMode ? (

) : ( )}

{filteredAppRules.map((rule) => (

{appRulesEditMode && ( )}

User Threshold {appRulesEditMode ? (

If more than

updateAppRule(rule.id, "threshold", e.target.value)} /> {errors[`threshold-${rule.id}`] && (

{errors[`threshold-${rule.id}`]}

)}

users

) : (

If more than {rule.threshold} users

)}

))} {appRulesEditMode && ( )}

{/* Device Level Rules Tab */}

Device Level Thresholds Define risk scores based on the number of devices for {selectedAppType} users

{deviceRulesEditMode ? (

) : ( )}

{filteredDeviceRules.map((rule) => (

{deviceRulesEditMode && ( )}

Device Threshold {deviceRulesEditMode ? (

If more than

updateDeviceRule(rule.id, "threshold", e.target.value)} />

devices

) : (

If more than {rule.threshold} devices

)}

))} {deviceRulesEditMode && ( )}

{/* Signal Scores Tab */}

Individual Signal Scores Define custom risk scores for individual risk signals for {selectedAppType} app type

{signalScoresEditMode ? (

) : ( )}

{filteredSignalScores.map((score) => (

{signalScoresEditMode && ( )}

Risk Signal {signalScoresEditMode ? ( ) : (

{score.signal}

)}

))} {signalScoresEditMode && ( )}

{/* Combination Rules Tab */}

Combination Rules Define rules based on a combination of risk signals for {selectedAppType} app type

{combinationRulesEditMode ? (

) : ( )}

{filteredCombinationRules.map((rule) => (

{combinationRulesEditMode && ( )}

Conditions:

{rule.conditions.map((condition, index) => (

{combinationRulesEditMode && ( )}

Type {combinationRulesEditMode ? ( ) : (

{condition.type}

)}

Value {combinationRulesEditMode && condition.type === "signal" ? ( ) : (

{condition.value}

)}

Operator {combinationRulesEditMode ? ( ) : (

{condition.operator}

)}

))}

{combinationRulesEditMode && ( )}

))} {combinationRulesEditMode && ( )}

{/* Confirmation Dialog */} ) }