@omnsight/osint-entity-components 0.1.0

package/src/avatars/layouts/AvatarDropdown.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { ActionIcon, Stack, Popover } from '@mantine/core';
+
+interface Props {
+  children: React.ReactNode[];
+  avatarOnOpen: React.ReactNode;
+  avatarOnClose: React.ReactNode;
+}
+
+export const AvatarDropdown: React.FC<Props> = ({ children, avatarOnOpen, avatarOnClose }) => {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom"
+      withArrow
+      shadow="md"
+      width={60}
+      withinPortal
+    >
+      <Popover.Target>
+        <ActionIcon
+          variant="light"
+          color="blue"
+          size="lg"
+          radius="xl"
+          onClick={() => setOpened((o) => !o)}
+        >
+          {opened ? avatarOnOpen : avatarOnClose}
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown
+        style={{
+          padding: 5,
+          backgroundColor: 'transparent',
+          border: 'none',
+          boxShadow: 'none',
+        }}
+      >
+        <Stack gap={8} style={{ backgroundColor: 'transparent', padding: 5 }}>
+          {children}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

package/src/avatars/layouts/AvatarRowList.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Avatar, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  children: React.ReactNode[];
+}
+
+export const AvatarRowList: React.FC<Props> = ({ children }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Avatar.Group>
+      {children.length === 0 ? (
+        <Text c="dimmed" size="sm" fs="italic">
+          {t('common.notFound')}
+        </Text>
+      ) : (
+        children
+      )}
+    </Avatar.Group>
+  );
+};

package/src/avatars/layouts/AvatarSpan.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Avatar } from '@mantine/core';
+import { EmptyAvatar } from '../EmptyAvatar';
+
+interface Props {
+  children: React.ReactNode[];
+}
+
+export const AvatarSpan: React.FC<Props> = ({ children }) => {
+  return <Avatar.Group>{children.length === 0 ? <EmptyAvatar /> : children}</Avatar.Group>;
+};

package/src/avatars/layouts/EntityStyles.css

@@ -0,0 +1,10 @@
+.entity-avatar {
+  transition: all 0.2s ease;
+  border: 2px solid var(--mantine-color-body);
+}
+
+.entity-avatar:hover {
+  transform: scale(1.25);
+  z-index: 100 !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}

package/src/avatars/layouts/RelationTooltip.tsx

@@ -0,0 +1,75 @@
+import { Stack, Group, Text, Box, rem, RingProgress } from '@mantine/core';
+import type { Relation } from 'omni-osint-crud-client';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  relation?: Relation;
+  children: React.ReactNode;
+}
+
+export const RelationTooltip: React.FC<Props> = ({ relation, children }) => {
+  const { t } = useTranslation();
+  if (!relation) return <>{children}</>;
+
+  const confVal = relation.confidence || 0;
+  let confColor = 'red';
+  if (confVal >= 80) {
+    confColor = 'green';
+  } else if (confVal >= 50) {
+    confColor = 'yellow';
+  }
+
+  const formatDate = (ts?: number | null) => {
+    if (!ts) return 'N/A';
+    try {
+      const d = new Date(ts * 1000);
+      return d.toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      });
+    } catch {
+      return 'Invalid Date';
+    }
+  };
+
+  return (
+    <Stack gap="xs" p={4}>
+      <Group justify="space-between" align="center">
+        <Text fw={700} size="sm" style={{ lineHeight: 1 }}>
+          {relation.label || t('tooltip.relation')}
+        </Text>
+        <Group gap={4}>
+          <Text size="xs" c="dimmed">
+            {t('tooltip.confidence')}
+          </Text>
+          <RingProgress
+            size={36}
+            thickness={3}
+            roundCaps
+            sections={[{ value: relation.confidence || 0, color: confColor }]}
+            label={
+              <Text c={confColor} fw={700} ta="center" size="xs" style={{ fontSize: 9 }}>
+                {relation.confidence || 0}
+              </Text>
+            }
+          />
+        </Group>
+      </Group>
+
+      <Box>{children}</Box>
+
+      <Group justify="space-between" mt={4}>
+        <Text size="xs" c="dimmed" style={{ fontSize: rem(10) }}>
+          {t('tooltip.createdDate')}: {formatDate(relation.created_at)}
+        </Text>
+        <Text size="xs" c="dimmed" style={{ fontSize: rem(10) }}>
+          {t('tooltip.updatedDate')}: {formatDate(relation.updated_at)}
+        </Text>
+      </Group>
+    </Stack>
+  );
+};

package/src/cards/EventCard.tsx

@@ -0,0 +1,46 @@
+import { Badge, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { type Event } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+
+interface Props {
+  event: Event;
+  background?: string;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+}
+
+export const EventCard: React.FC<Props> = ({
+  event,
+  background,
+  withBorder = true,
+  action,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Paper p="xs" bg={background} withBorder={withBorder}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Title>{event.title || t("event.title")}</Title>
+          {event.happened_at && (
+            <Text c="dimmed">
+              {new Date(event.happened_at * 1000).toLocaleString()}
+            </Text>
+          )}
+          <Text truncate="end">
+            {event.description || t("event.description")}
+          </Text>
+          {event.tags && (
+            <Group gap="xs" mt="xs">
+              {event.tags.map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/OrganizationCard.tsx

@@ -0,0 +1,38 @@
+import { Badge, Group, Paper, Stack, Title } from "@mantine/core";
+import { type Organization } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+
+interface Props {
+  organization: Organization;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+  background?: string;
+}
+
+export const OrganizationCard: React.FC<Props> = ({
+  organization,
+  withBorder = true,
+  action,
+  background,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Paper withBorder={withBorder} p="xs" bg={background}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Title>{organization.name || t("organization.name")}</Title>
+          {organization.tags && (
+            <Group gap="xs" mt="xs">
+              {organization.tags.map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/PersonCard.tsx

@@ -0,0 +1,46 @@
+import { Badge, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { type Person } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+
+interface Props {
+  person: Person;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+  background?: string;
+}
+
+export const PersonCard: React.FC<Props> = ({
+  person,
+  withBorder = true,
+  action,
+  background,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Paper withBorder={withBorder} p="xs" bg={background}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Title>{person.name || t("person.name")}</Title>
+          {person.role && (
+            <Text c="dimmed">{person.role || t("person.role")}</Text>
+          )}
+          {person.aliases && (
+            <Text truncate="end">
+              {t("person.aliases")}: {person.aliases.join(", ")}
+            </Text>
+          )}
+          {person.tags && (
+            <Group gap="xs" mt="xs">
+              {person.tags.map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/SourceCard.tsx

@@ -0,0 +1,63 @@
+import {
+  ActionIcon,
+  Badge,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { type Source } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { LinkIcon } from "@heroicons/react/24/solid";
+
+interface Props {
+  source: Source;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+  background?: string;
+}
+
+export const SourceCard: React.FC<Props> = ({
+  source,
+  withBorder = true,
+  action,
+  background,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Paper withBorder={withBorder} p="xs" bg={background}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Group>
+            <Title>{source.name || t("source.name")}</Title>
+            {source.url && (
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                component="a"
+                href={source.url}
+                target="_blank"
+              >
+                <LinkIcon />
+              </ActionIcon>
+            )}
+          </Group>
+          <Text truncate="end">
+            {source.description || t("source.description")}
+          </Text>
+          {source.tags && (
+            <Group gap="xs" mt="xs">
+              {source.tags.map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/WebsiteCard.tsx

@@ -0,0 +1,63 @@
+import {
+  ActionIcon,
+  Badge,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { type Website } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { LinkIcon } from "@heroicons/react/24/solid";
+
+interface Props {
+  website: Website;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+  background?: string;
+}
+
+export const WebsiteCard: React.FC<Props> = ({
+  website,
+  withBorder = true,
+  action,
+  background,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Paper withBorder={withBorder} p="xs" bg={background}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Group>
+            <Title>{website.title || t("website.title")}</Title>
+            {website.url && (
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                component="a"
+                href={website.url}
+                target="_blank"
+              >
+                <LinkIcon />
+              </ActionIcon>
+            )}
+          </Group>
+          <Text truncate="end">
+            {website.description || t("website.description")}
+          </Text>
+          {website.tags && (
+            <Group gap="xs" mt="xs">
+              {website.tags.map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/index.ts

@@ -0,0 +1,5 @@
+export * from './EventCard';
+export * from './PersonCard';
+export * from './OrganizationCard';
+export * from './WebsiteCard';
+export * from './SourceCard';

package/src/env.d.ts

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.module.css";

package/src/i18n.ts

@@ -0,0 +1,22 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./locales/en.json";
+import zh from "./locales/zh.json";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en,
+    },
+    zh: {
+      translation: zh,
+    },
+  },
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

package/src/icons/Event/Icon.tsx

@@ -0,0 +1,32 @@
+import { ThemeIcon } from "@mantine/core";
+import { CalendarDaysIcon } from "@heroicons/react/24/solid";
+import { type Event } from "omni-osint-crud-client";
+import { ICON_OPTIONS } from "./icons";
+
+interface Props {
+  event: Event;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * Renders an icon for an event based on its type.
+ * @param event The event object, must contain 'type' and 'attributes'.
+ * @param props Additional props to pass to the icon.
+ * @returns A component displaying the event icon.
+ */
+export const EventIcon: React.FC<Props> = ({ event, size = "md", ...props }) => {
+  const iconColor = String((event.attributes || {}).icon_color || "#0089ff");
+
+  const selectedType = ICON_OPTIONS.find(
+    (option) => option.value === event.type,
+  );
+  const Icon =
+    selectedType && selectedType.icon ? selectedType.icon : CalendarDaysIcon;
+
+  return (
+    <ThemeIcon size={size} radius="xl" color={iconColor}>
+      <Icon style={{ width: "70%", height: "70%", color: "white" }} {...props} />
+    </ThemeIcon>
+  );
+};

package/src/icons/Event/Select.tsx

@@ -0,0 +1,61 @@
+import { type Event } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Group, Select, ColorInput } from "@mantine/core";
+import { ICON_OPTIONS } from "./icons";
+import { EventIcon } from "./Icon";
+
+interface EventIconSelectProps {
+  value: Event;
+  onChange: (value: Event) => void;
+}
+
+export const EventIconSelect: React.FC<EventIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation();
+  const colors = [
+    "#0089ff",
+    "#ff0000",
+    "#00ba21",
+    "#c18c17",
+    "#be4bdb",
+    "#ababab",
+    "#7950f2",
+  ];
+
+  const handleTypeChange = (type: string | null) => {
+    onChange({ ...value, type: type || undefined });
+  };
+
+  const handleColorChange = (color: string) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
+  };
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`event.type.${option.label}`),
+  }));
+
+  return (
+    <Group>
+      <Select
+        leftSection={<EventIcon event={value} />}
+        defaultValue={translatedOptions[0].value}
+        value={value.type}
+        onChange={handleTypeChange}
+        data={translatedOptions}
+        style={{ flex: 1 }}
+      />
+      <ColorInput
+        value={String((value.attributes || {}).icon_color || colors[0])}
+        onChange={handleColorChange}
+        swatches={colors}
+        style={{ flex: 1 }}
+      />
+    </Group>
+  );
+};

package/src/icons/Event/icons.ts

@@ -0,0 +1,118 @@
+import { IconMdiHandcuffs } from '@/assets/icons/generated/mdi-handcuffs';
+import { IconHugeiconsTradeUp } from '@/assets/icons/generated/hugeicons-trade-up';
+import { IconGameIconsPistolGun } from '@/assets/icons/generated/game-icons-pistol-gun';
+import { IconIcSharpOilBarrel } from '@/assets/icons/generated/ic-sharp-oil-barrel';
+import { IconRiSpyFill } from '@/assets/icons/generated/ri-spy-fill';
+import { IconFluentEmojiHighContrastMilitaryHelmet } from '@/assets/icons/generated/fluent-emoji-high-contrast-military-helmet';
+import { IconMdiTank } from '@/assets/icons/generated/mdi-tank';
+import { IconFaSolidShip } from '@/assets/icons/generated/fa-solid-ship';
+import { IconMdiAirplane } from '@/assets/icons/generated/mdi-airplane';
+import { IconGameIconsMissileLauncher } from '@/assets/icons/generated/game-icons-missile-launcher';
+import { IconGameIconsBombingRun } from '@/assets/icons/generated/game-icons-bombing-run';
+import { IconIonTrainSharp } from '@/assets/icons/generated/ion-train-sharp';
+import { IconFlowbiteTruckSolid } from '@/assets/icons/generated/flowbite-truck-solid';
+import { IconEmojioneMonotoneShip } from '@/assets/icons/generated/emojione-monotone-ship';
+import { IconFluentEmojiHighContrastBrokenChain } from '@/assets/icons/generated/fluent-emoji-high-contrast-broken-chain';
+import { IconRiExchangeBoxFill } from '@/assets/icons/generated/ri-exchange-box-fill';
+import { IconMingcutePhoneCallFill } from '@/assets/icons/generated/mingcute-phone-call-fill';
+import { IconBoxiconsAnnouncement } from '@/assets/icons/generated/boxicons-announcement';
+
+interface IconOption {
+  value: string;
+  label: string;
+  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;
+}
+
+// Find icon items in https://icon-sets.iconify.design
+export const ICON_OPTIONS: IconOption[] = [
+  {
+    value: 'announcement',
+    label: 'announcement',
+    icon: IconBoxiconsAnnouncement, // icon: boxicons:announcement
+  },
+  {
+    value: 'conversation',
+    label: 'conversation',
+    icon: IconMingcutePhoneCallFill, // icon: mingcute:phone-call-fill
+  },
+  {
+    value: 'trade',
+    label: 'trade',
+    icon: IconRiExchangeBoxFill, // icon: ri:exchange-box-fill
+  },
+  {
+    value: 'oil',
+    label: 'oil',
+    icon: IconIcSharpOilBarrel, // icon: ic:sharp-oil-barrel
+  },
+  {
+    value: 'exchange',
+    label: 'exchange',
+    icon: IconHugeiconsTradeUp, // icon: hugeicons:trade-up
+  },
+  {
+    value: 'supplychain-risk',
+    label: 'supplychain-risk',
+    icon: IconFluentEmojiHighContrastBrokenChain, // icon: fluent-emoji-high-contrast:broken-chain
+  },
+  {
+    value: 'ship',
+    label: 'ship',
+    icon: IconEmojioneMonotoneShip, // icon: emojione-monotone:ship
+  },
+  {
+    value: 'truck',
+    label: 'truck',
+    icon: IconFlowbiteTruckSolid, // icon: flowbite:truck-solid
+  },
+  {
+    value: 'train',
+    label: 'train',
+    icon: IconIonTrainSharp, // icon: ion:train-sharp
+  },
+  {
+    value: 'crime',
+    label: 'crime',
+    icon: IconMdiHandcuffs, // icon: mdi:handcuffs
+  },
+  {
+    value: 'shot',
+    label: 'shot',
+    icon: IconGameIconsPistolGun, // icon: game-icons:pistol-gun
+  },
+  {
+    value: 'bomb',
+    label: 'bomb',
+    icon: IconGameIconsBombingRun, // icon: game-icons:bombing-run
+  },
+  {
+    value: 'missile',
+    label: 'missile',
+    icon: IconGameIconsMissileLauncher, // icon: game-icons:missile-launcher
+  },
+  {
+    value: 'plane',
+    label: 'plane',
+    icon: IconMdiAirplane, // icon: mdi:airplane
+  },
+  {
+    value: 'naval',
+    label: 'naval',
+    icon: IconFaSolidShip, // icon: fa-solid:ship
+  },
+  {
+    value: 'tank',
+    label: 'tank',
+    icon: IconMdiTank, // icon: mdi:tank
+  },
+  {
+    value: 'infantry',
+    label: 'infantry',
+    icon: IconFluentEmojiHighContrastMilitaryHelmet, // icon: fluent-emoji-high-contrast:military-helmet
+  },
+  {
+    value: 'intelligence',
+    label: 'intelligence',
+    icon: IconRiSpyFill, // icon: ri:spy-fill
+  },
+]