suiss/uim · Block

Log Security

A security dashboard with a score ring, open alerts by severity, and alerts you can resolve or reopen.

Log Security is an open-source mobile screen from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Log Security on iOS in light mode

An admin screen with a collapsing Header, a ring that shows a security score, and counts of open High, Medium and Low alerts. A ChipGroup filters the list by Open, Resolved or All, and each alert has a Resolve or Reopen Button; the score and counts update as alerts change. A TabBar at the bottom switches between admin sections; only Activity has content in the sample.

Installation

$ pnpm dlx @esuiss/uim@latest add log-security

The CLI also adds what it builds on: Button, Chip, Header, Icon, Screen, Tab Bar, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets

  1. Add the pieces it builds on: Button, Chip, Header, Icon, Screen, Tab Bar, Text.

  2. Copy the source into components/blocks/log-security.tsx:

uniwind/components/blocks/log-security.tsx
import { cn } from "cn"
import {
  ChartBarIcon,
  CheckIcon,
  GearIcon,
  GlobeIcon,
  KeyIcon,
  LockSimpleIcon,
  type Icon as PhosphorIcon,
  type IconProps as PhosphorIconProps,
  ShieldIcon,
  UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { FadeInDown, ReduceMotion } from "react-native-reanimated"
  1. Update the import paths to match your project.

Usage

import { LogSecurity } from "@/components/blocks/log-security"
<LogSecurity />

Replace INITIAL_ALERTS with your alerts and tune the weights in SEVERITY to change how the score is computed. Wire onFilterChange, onResolve and onNavigate to your app.