fix: pc端修改

2025-08-06 00:38:29 -07:00
parent f6f5c2828b
commit 19fe24660e
142 changed files with 162226 additions and 851 deletions
@@ -0,0 +1,123 @@
+'use client';
+
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@workspace/airo-ui/components/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
+import { Icon } from '@workspace/airo-ui/custom-components/icon';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { countries, type ICountry } from '@workspace/airo-ui/utils/countries';
+import { BoxIcon, Check, ChevronsUpDown } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+interface AreaCodeSelectProps {
+  value?: string;
+  onChange?: (value: ICountry) => void;
+  className?: string;
+  placeholder?: string;
+  simple?: boolean;
+  whitelist?: string[];
+}
+
+const filterItems = (whitelist?: string[]) => {
+  const baseItems = countries
+    .filter((item) => !!item.phone)
+    .map((item) => {
+      const phones = item.phone!.split(',');
+      if (phones.length > 1) {
+        return [...phones].map((phone) => ({
+          ...item,
+          phone,
+        }));
+      }
+      return item;
+    })
+    .flat();
+
+  if (!whitelist?.length) return baseItems;
+  return baseItems.filter((item) => whitelist.includes(item.phone!));
+};
+
+export const AreaCodeSelect = ({
+  value,
+  onChange,
+  className,
+  placeholder = 'Select Area Code',
+  simple = false,
+  whitelist,
+}: AreaCodeSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<ICountry | undefined>();
+  const items = filterItems(whitelist);
+
+  useEffect(() => {
+    if (value !== selectedItem?.phone) {
+      const found = items.find((item) => item.phone === value);
+      setSelectedItem(found);
+    }
+  }, [selectedItem?.phone, value, items]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={open}
+          className={cn('justify-between', className)}
+        >
+          {selectedItem ? (
+            <div className='flex items-center gap-2'>
+              <Icon icon={`flagpack:${selectedItem.alpha2.toLowerCase()}`} className='!size-5' />+
+              {selectedItem.phone}
+              {!simple && `(${selectedItem.name})`}
+            </div>
+          ) : (
+            placeholder
+          )}
+          <ChevronsUpDown className='ml-2 h-4 w-4 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='p-0' align='start'>
+        <Command>
+          <CommandInput placeholder='Search area code...' />
+          <CommandList>
+            <CommandEmpty>
+              <BoxIcon className='inline-block text-slate-500' />
+            </CommandEmpty>
+            <CommandGroup>
+              {items.map((item) => (
+                <CommandItem
+                  key={`${item.alpha2}-${item.phone}`}
+                  value={`${item.phone}-${item.name}`}
+                  onSelect={() => {
+                    setSelectedItem(item);
+                    onChange?.(item);
+                    setOpen(false);
+                  }}
+                >
+                  <div className='flex items-center gap-2'>
+                    <Icon icon={`flagpack:${item.alpha2.toLowerCase()}`} className='!size-5' />+
+                    {item.phone} ({item.name})
+                  </div>
+                  <Check
+                    className={cn(
+                      'ml-auto h-4 w-4',
+                      selectedItem?.phone === item.phone ? 'opacity-100' : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
@@ -0,0 +1,130 @@
+'use client';
+
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@workspace/airo-ui/components/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { BoxIcon, CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+import * as React from 'react';
+
+export type Option<T = string> = {
+  value: T;
+  label: string;
+  children?: React.ReactNode;
+};
+
+// Conditional types to determine the value type for onChange
+type OnChangeType<T, M extends boolean> = M extends true ? T[] : T;
+
+type ComboboxProps<T = string, M extends boolean = false> = {
+  multiple?: M;
+  options?: Option<T>[];
+  placeholder?: string;
+  value?: OnChangeType<T, M>;
+  onChange: (value: OnChangeType<T, M>) => void;
+  className?: string;
+};
+
+export function Combobox<T, M extends boolean = false>({
+  multiple = false as M,
+  options = [],
+  placeholder = 'Select...',
+  value,
+  onChange,
+  className,
+}: ComboboxProps<T, M>) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (selectedValue: T) => {
+    if (multiple) {
+      const newValue = Array.isArray(value) ? [...value] : [];
+
+      if (newValue.includes(selectedValue)) {
+        newValue.splice(newValue.indexOf(selectedValue), 1);
+        onChange(newValue as OnChangeType<T, M>);
+      } else {
+        onChange([...newValue, selectedValue] as OnChangeType<T, M>);
+      }
+    } else {
+      const newValue = selectedValue === value ? ('' as T) : selectedValue;
+      onChange(newValue as OnChangeType<T, M>);
+      setOpen(false);
+    }
+  };
+
+  const renderButtonLabel = () => {
+    if (multiple && Array.isArray(value) && value.length > 0) {
+      const selectedLabels = options
+        .filter((option) => value.includes(option.value))
+        .map((option) => option.label)
+        .join(', ');
+
+      return selectedLabels;
+    } else if (!multiple) {
+      const selectedOption = options.find((option) => option.value === value);
+
+      return selectedOption ? selectedOption.children || selectedOption.label : placeholder;
+    }
+
+    return placeholder;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={open}
+          className={cn(
+            'w-full items-center justify-between rounded-full bg-[#EAEAEA] text-[#848484]',
+            className,
+          )}
+        >
+          <span className='truncate'>{renderButtonLabel()}</span>
+          <ChevronsUpDownIcon className='ml-2 size-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-fit p-0' align='start'>
+        <Command>
+          <CommandInput placeholder='Search...' className='h-9' />
+          <CommandEmpty>
+            <BoxIcon className='inline-block text-slate-500' />
+          </CommandEmpty>
+          <CommandGroup>
+            <CommandList>
+              {options.map((option) => (
+                <CommandItem
+                  key={String(option.label + option.value)}
+                  value={option.label + option.value}
+                  onSelect={() => handleSelect(option.value)}
+                >
+                  {option.children || option.label}
+                  <CheckIcon
+                    className={cn(
+                      'ml-auto h-4 w-4',
+                      multiple
+                        ? Array.isArray(value) && value.includes(option.value)
+                          ? 'opacity-100'
+                          : 'opacity-0'
+                        : value === option.value
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandList>
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,48 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@workspace/airo-ui/components/alert-dialog';
+import React, { ReactNode } from 'react';
+
+interface ConfirmationButtonProps {
+  trigger: ReactNode;
+  title: string;
+  description: string;
+  onConfirm: () => void | Promise<void>;
+  cancelText?: string;
+  confirmText?: string;
+}
+
+export const ConfirmButton: React.FC<ConfirmationButtonProps> = ({
+  trigger,
+  title,
+  description,
+  onConfirm,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+}) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>{confirmText}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
@@ -0,0 +1,46 @@
+'use client';
+
+import { Button } from '@workspace/airo-ui/components/button';
+import { Calendar, CalendarProps } from '@workspace/airo-ui/components/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@workspace/airo-ui/components/popover';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { intlFormat } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+
+export function DatePicker({
+  placeholder,
+  value,
+  onChange,
+  ...props
+}: CalendarProps & {
+  placeholder?: string;
+  value?: number;
+  onChange?: (value?: number) => void;
+}) {
+  const [date, setDate] = React.useState<Date | undefined>(value ? new Date(value) : undefined);
+
+  const handleSelect = (selectedDate: Date | undefined) => {
+    setDate(selectedDate);
+    if (onChange) {
+      onChange(selectedDate?.getTime() || 0);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          className={cn('w-full justify-between font-normal', !value && 'text-muted-foreground')}
+        >
+          {value ? intlFormat(value) : <span>{placeholder}</span>}
+          <CalendarIcon className='size-4' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-auto p-0' align='start'>
+        <Calendar {...props} mode='single' selected={date} onSelect={handleSelect} initialFocus />
+      </PopoverContent>
+    </Popover>
+  );
+}
@@ -0,0 +1,188 @@
+import { Button } from '@workspace/airo-ui/components/button';
+import { Label } from '@workspace/airo-ui/components/label';
+import { Switch } from '@workspace/airo-ui/components/switch';
+import { Combobox } from '@workspace/airo-ui/custom-components/combobox';
+import {
+  EnhancedInput,
+  EnhancedInputProps,
+} from '@workspace/airo-ui/custom-components/enhanced-input';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { CircleMinusIcon, CirclePlusIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+interface FieldConfig extends Omit<EnhancedInputProps, 'type'> {
+  name: string;
+  type: 'text' | 'number' | 'select' | 'time' | 'boolean';
+  options?: { label: string; value: string }[];
+}
+
+interface ObjectInputProps<T> {
+  value: T;
+  onChange: (value: T) => void;
+  fields: FieldConfig[];
+  className?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ObjectInput<T extends Record<string, any>>({
+  value,
+  onChange,
+  fields,
+  className,
+}: ObjectInputProps<T>) {
+  const [internalState, setInternalState] = useState<T>(value);
+
+  useEffect(() => {
+    setInternalState(value);
+  }, [value]);
+
+  const updateField = (key: keyof T, fieldValue: string | number | boolean) => {
+    const updatedInternalState = { ...internalState, [key]: fieldValue };
+    setInternalState(updatedInternalState);
+    onChange(updatedInternalState);
+  };
+  const renderField = (field: FieldConfig) => {
+    switch (field.type) {
+      case 'select':
+        return (
+          field.options && (
+            <Combobox<string, false>
+              placeholder={field.placeholder}
+              options={field.options}
+              value={internalState[field.name]}
+              onChange={(fieldValue) => updateField(field.name, fieldValue)}
+            />
+          )
+        );
+      case 'boolean':
+        return (
+          <div className='flex h-full items-center space-x-2'>
+            <Switch
+              checked={internalState[field.name] as boolean}
+              onCheckedChange={(fieldValue) => updateField(field.name, fieldValue)}
+            />
+            {field.placeholder && <Label>{field.placeholder}</Label>}
+          </div>
+        );
+      default:
+        return (
+          <EnhancedInput
+            value={internalState[field.name]}
+            onValueChange={(fieldValue) => updateField(field.name, fieldValue)}
+            {...field}
+          />
+        );
+    }
+  };
+  return (
+    <div className={cn('flex flex-1 flex-wrap gap-4', className)}>
+      {fields.map((field) => (
+        <div key={field.name} className={cn('flex-1', field.className)}>
+          {renderField(field)}
+        </div>
+      ))}
+    </div>
+  );
+}
+interface ArrayInputProps<T> {
+  value?: T[];
+  onChange: (value: T[]) => void;
+  fields: FieldConfig[];
+  isReverse?: boolean;
+  className?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ArrayInput<T extends Record<string, any>>({
+  value = [],
+  onChange,
+  fields,
+  isReverse = false,
+  className,
+}: ArrayInputProps<T>) {
+  const initializeDefaultItem = (): T =>
+    fields.reduce((acc, field) => {
+      acc[field.name as keyof T] = undefined as T[keyof T];
+      return acc;
+    }, {} as T);
+
+  const [displayItems, setDisplayItems] = useState<T[]>(() => {
+    return value.length > 0 ? value : [initializeDefaultItem()];
+  });
+
+  const isItemModified = (item: T): boolean =>
+    fields.some((field) => {
+      const val = item[field.name];
+      return val !== undefined && val !== null && val !== '';
+    });
+
+  const handleItemChange = (index: number, updatedItem: T) => {
+    const newDisplayItems = [...displayItems];
+    newDisplayItems[index] = updatedItem;
+    setDisplayItems(newDisplayItems);
+
+    const modifiedItems = newDisplayItems.filter(isItemModified);
+    onChange(modifiedItems);
+  };
+
+  const createField = () => {
+    if (isReverse) {
+      setDisplayItems([initializeDefaultItem(), ...displayItems]);
+    } else {
+      setDisplayItems([...displayItems, initializeDefaultItem()]);
+    }
+  };
+
+  const deleteField = (index: number) => {
+    const newDisplayItems = displayItems.filter((_, i) => i !== index);
+    setDisplayItems(newDisplayItems);
+
+    const modifiedItems = newDisplayItems.filter(isItemModified);
+    onChange(modifiedItems);
+  };
+
+  useEffect(() => {
+    if (value.length > 0) {
+      setDisplayItems(value);
+    }
+  }, [value]);
+
+  return (
+    <div className='flex flex-col gap-4'>
+      {displayItems.map((item, index) => (
+        <div key={index} className='flex items-center gap-4'>
+          <ObjectInput
+            value={item}
+            onChange={(updatedItem) => handleItemChange(index, updatedItem)}
+            fields={fields}
+            className={className}
+          />
+          <div className='flex min-w-20 items-center'>
+            {displayItems.length > 1 && (
+              <Button
+                variant='ghost'
+                size='icon'
+                type='button'
+                className='text-destructive p-0 text-lg'
+                onClick={() => deleteField(index)}
+              >
+                <CircleMinusIcon />
+              </Button>
+            )}
+            {(isReverse ? index === 0 : index === displayItems.length - 1) && (
+              <Button
+                variant='ghost'
+                size='icon'
+                type='button'
+                className='text-primary p-0 text-lg'
+                onClick={createField}
+              >
+                <CirclePlusIcon />
+              </Button>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  MonacoEditor,
+  MonacoEditorProps,
+} from '@workspace/airo-ui/custom-components/editor/monaco-editor';
+import { useEffect, useRef } from 'react';
+
+export function HTMLEditor(props: MonacoEditorProps) {
+  return (
+    <MonacoEditor
+      title='HTML Editor'
+      description='Support HTML'
+      {...props}
+      language='markdown'
+      render={(value) => <HTMLPreview value={value} />}
+    />
+  );
+}
+
+interface HTMLPreviewProps {
+  value?: string;
+}
+
+function HTMLPreview({ value }: HTMLPreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const iframeDocument = iframeRef.current?.contentDocument;
+    if (iframeDocument) {
+      iframeDocument.open();
+      iframeDocument.write(value || '');
+      iframeDocument.close();
+    }
+  }, [value]);
+
+  return <iframe ref={iframeRef} title='HTML Preview' className='h-full w-full border-0' />;
+}
@@ -0,0 +1,3 @@
+export { HTMLEditor } from '@workspace/airo-ui/custom-components/editor/html';
+export { JSONEditor } from '@workspace/airo-ui/custom-components/editor/json';
+export { MarkdownEditor } from '@workspace/airo-ui/custom-components/editor/markdown';
@@ -0,0 +1,91 @@
+'use client';
+
+import {
+  MonacoEditor,
+  MonacoEditorProps,
+} from '@workspace/airo-ui/custom-components/editor/monaco-editor';
+import { useMemo } from 'react';
+
+interface JSONEditorProps extends Omit<MonacoEditorProps, 'placeholder' | 'value' | 'onChange'> {
+  schema?: Record<string, unknown>;
+  placeholder?: Record<string, unknown>;
+  value?: Record<string, unknown> | string;
+  onChange?: (value: Record<string, unknown> | string | undefined) => void;
+}
+
+export function JSONEditor(props: JSONEditorProps) {
+  const { schema, placeholder = {}, ...rest } = props;
+
+  const editorKey = useMemo(() => JSON.stringify({ schema, placeholder }), [schema, placeholder]);
+
+  return (
+    <MonacoEditor
+      key={editorKey}
+      title='Edit JSON'
+      {...rest}
+      value={
+        typeof props.value === 'string'
+          ? props.value
+          : props.value
+            ? JSON.stringify(props.value, null, 2)
+            : ''
+      }
+      onChange={(value) => {
+        if (props.onChange && typeof value === 'string') {
+          try {
+            props.onChange(
+              props.value && typeof props.value === 'string' ? value : JSON.parse(value),
+            );
+          } catch (e) {
+            console.log('Invalid JSON input:', e);
+          }
+        }
+      }}
+      placeholder={placeholder ? JSON.stringify(placeholder, null, 2) : ''}
+      language='json'
+      onMount={(editor, monaco) => {
+        if (props.onMount) props.onMount(editor, monaco);
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          schemas: [
+            {
+              uri: '',
+              fileMatch: ['*'],
+              schema: schema || {
+                type: 'object',
+                properties: generateSchema(placeholder),
+              },
+            },
+          ],
+        });
+      }}
+    />
+  );
+}
+
+const generateSchema = (obj: Record<string, unknown>): Record<string, SchemaProperty> => {
+  const properties: Record<string, SchemaProperty> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (Array.isArray(value)) {
+      properties[key] = {
+        type: 'array',
+        items: value.length > 0 ? generateSchema({ item: value[0] }).item : { type: 'null' },
+      };
+    } else if (typeof value === 'object' && value !== null) {
+      properties[key] = {
+        type: 'object',
+        properties: generateSchema(value as Record<string, unknown>),
+      };
+    } else {
+      properties[key] = { type: typeof value as SchemaType };
+    }
+  }
+  return properties;
+};
+
+type SchemaType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+interface SchemaProperty {
+  type: SchemaType;
+  items?: SchemaProperty;
+  properties?: Record<string, SchemaProperty>;
+}
@@ -0,0 +1,19 @@
+'use client';
+
+import {
+  MonacoEditor,
+  MonacoEditorProps,
+} from '@workspace/airo-ui/custom-components/editor/monaco-editor';
+import { Markdown } from '@workspace/airo-ui/custom-components/markdown';
+
+export function MarkdownEditor(props: MonacoEditorProps) {
+  return (
+    <MonacoEditor
+      title='Markdown Editor'
+      description='Support markdwon and html syntax'
+      {...props}
+      language='markdown'
+      render={(value) => <Markdown>{value || ''}</Markdown>}
+    />
+  );
+}
@@ -0,0 +1,174 @@
+'use client';
+
+import { Editor, type Monaco, type OnMount } from '@monaco-editor/react';
+import { Button } from '@workspace/airo-ui/components/button';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { useSize } from 'ahooks';
+import { EyeIcon, EyeOff, FullscreenIcon, MinimizeIcon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+export interface MonacoEditorProps {
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+  onBlur?: (value: string | undefined) => void;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  render?: (value?: string) => React.ReactNode;
+  onMount?: OnMount;
+  language?: string;
+  className?: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => void>(func: T, delay: number) {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (...args: Parameters<T>) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+}
+
+export function MonacoEditor({
+  value: propValue,
+  onChange,
+  onBlur,
+  title = 'Editor Title',
+  description,
+  placeholder = 'Start typing...',
+  render,
+  onMount,
+  language = 'markdown',
+  className,
+}: MonacoEditorProps) {
+  const [internalValue, setInternalValue] = useState<string | undefined>(propValue);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const size = useSize(ref);
+
+  useEffect(() => {
+    setInternalValue(propValue);
+  }, [propValue]);
+
+  const debouncedOnChange = useRef(
+    debounce((newValue: string | undefined) => {
+      if (onChange) {
+        onChange(newValue);
+      }
+    }, 300),
+  ).current;
+
+  const handleEditorDidMount: OnMount = (editor, monaco) => {
+    if (onMount) onMount(editor, monaco);
+
+    editor.onDidChangeModelContent(() => {
+      const newValue = editor.getValue();
+      setInternalValue(newValue);
+      debouncedOnChange(newValue);
+    });
+
+    editor.onDidBlurEditorWidget(() => {
+      if (onBlur) {
+        onBlur(editor.getValue());
+      }
+    });
+  };
+
+  const toggleFullscreen = () => setIsFullscreen(!isFullscreen);
+  const togglePreview = () => setIsPreviewVisible(!isPreviewVisible);
+
+  return (
+    <div ref={ref} className='size-full'>
+      <div style={size}>
+        <div
+          className={cn('flex size-full min-h-96 flex-col rounded-md border', className, {
+            'bg-background fixed inset-0 z-50 !mt-0 h-screen': isFullscreen,
+          })}
+        >
+          <div className='flex items-center justify-between border-b p-2'>
+            <div>
+              <h1 className='text-left text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'>
+                {title}
+              </h1>
+              <p className='text-muted-foreground text-[0.8rem]'>{description}</p>
+            </div>
+
+            <div className='flex items-center space-x-2'>
+              {render && (
+                <Button variant='outline' size='icon' type='button' onClick={togglePreview}>
+                  {isPreviewVisible ? <EyeOff /> : <EyeIcon />}
+                </Button>
+              )}
+              <Button variant='outline' size='icon' type='button' onClick={toggleFullscreen}>
+                {isFullscreen ? <MinimizeIcon /> : <FullscreenIcon />}
+              </Button>
+            </div>
+          </div>
+
+          <div className={cn('relative flex flex-1 overflow-hidden')}>
+            <div
+              className={cn('flex-1 overflow-hidden p-4 invert dark:invert-0', {
+                'w-1/2': isPreviewVisible,
+              })}
+            >
+              <Editor
+                language={language}
+                value={internalValue}
+                onChange={(newValue) => {
+                  setInternalValue(newValue);
+                  debouncedOnChange(newValue);
+                }}
+                onMount={handleEditorDidMount}
+                className=''
+                options={{
+                  automaticLayout: true,
+                  contextmenu: false,
+                  folding: false,
+                  fontSize: 14,
+                  formatOnPaste: true,
+                  formatOnType: true,
+                  glyphMargin: false,
+                  lineNumbers: 'off',
+                  minimap: { enabled: false },
+                  overviewRulerLanes: 0,
+                  renderLineHighlight: 'none',
+                  scrollBeyondLastLine: false,
+                  scrollbar: {
+                    useShadows: false,
+                    vertical: 'hidden',
+                  },
+                  tabSize: 2,
+                  wordWrap: 'off',
+                }}
+                theme='transparentTheme'
+                beforeMount={(monaco: Monaco) => {
+                  monaco.editor.defineTheme('transparentTheme', {
+                    base: 'vs-dark',
+                    inherit: true,
+                    rules: [],
+                    colors: {
+                      'editor.background': '#00000000',
+                    },
+                  });
+                }}
+              />
+              {!internalValue?.trim() && placeholder && (
+                <pre
+                  className='text-muted-foreground pointer-events-none absolute left-7 top-4 text-sm'
+                  style={{ userSelect: 'none' }}
+                >
+                  {placeholder}
+                </pre>
+              )}
+            </div>
+            {render && isPreviewVisible && (
+              <div className='w-1/2 flex-1 overflow-auto border-l p-4'>{render(internalValue)}</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,27 @@
+export default function Empty({ description }: { description?: React.ReactNode }) {
+  return (
+    <div className='flex flex-col items-center justify-center p-6 py-16'>
+      <svg
+        width='64'
+        height='41'
+        viewBox='0 0 64 41'
+        xmlns='http://www.w3.org/2000/svg'
+        fill='currentColor'
+        stroke='currentColor'
+        className='text-background'
+      >
+        <g transform='translate(0 1)' fill='none' fillRule='evenodd'>
+          <ellipse cx='32' cy='33' rx='32' ry='7' fill='currentColor' opacity={0.8}></ellipse>
+          <g fillRule='nonzero' stroke='#d9d9d9'>
+            <path d='M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z'></path>
+            <path
+              d='M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z'
+              fill='currentColor'
+            ></path>
+          </g>
+        </g>
+      </svg>
+      <p className='mt-6 text-center text-gray-500'>{description}</p>
+    </div>
+  );
+}
@@ -0,0 +1,153 @@
+import { Input } from '@workspace/airo-ui/components/input';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react';
+
+export interface EnhancedInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  prefix?: string | ReactNode;
+  suffix?: string | ReactNode;
+  formatInput?: (value: string | number) => string | number;
+  formatOutput?: (value: string | number) => string | number;
+  onValueChange?: (value: string | number) => void;
+  onValueBlur?: (value: string | number) => void;
+  min?: number;
+  max?: number;
+}
+
+export function EnhancedInput({
+  suffix,
+  prefix,
+  formatInput,
+  formatOutput,
+  value: initialValue,
+  className,
+  onValueChange,
+  onValueBlur,
+  ...props
+}: EnhancedInputProps) {
+  const getProcessedValue = (inputValue: unknown) => {
+    if (inputValue === '' || inputValue === 0 || inputValue === '0') return '';
+    const newValue = String(inputValue ?? '');
+    return formatInput ? formatInput(newValue) : newValue;
+  };
+
+  const [value, setValue] = useState<string | number>(() => getProcessedValue(initialValue));
+  // @ts-expect-error - This is a controlled component
+  const [internalValue, setInternalValue] = useState<string | number>(initialValue ?? '');
+
+  useEffect(() => {
+    if (initialValue !== internalValue) {
+      const newValue = getProcessedValue(initialValue);
+      if (value !== newValue) {
+        setValue(newValue);
+        // @ts-expect-error - This is a controlled component
+        setInternalValue(initialValue ?? '');
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValue, formatInput]);
+
+  const processValue = (inputValue: string | number) => {
+    let processedValue: number | string = inputValue?.toString().trim();
+
+    if (processedValue === '0' && props.type === 'number') {
+      return 0;
+    }
+
+    if (processedValue && props.type === 'number') processedValue = Number(processedValue);
+    return formatOutput ? formatOutput(processedValue) : processedValue;
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let inputValue = e.target.value;
+
+    if (props.type === 'number') {
+      if (inputValue === '0') {
+        setValue('');
+        setInternalValue(0);
+        onValueChange?.(0);
+        return;
+      }
+
+      if (/^-?\d*\.?\d*$/.test(inputValue) || inputValue === '-' || inputValue === '.') {
+        const numericValue = Number(inputValue);
+        if (!isNaN(numericValue) && inputValue !== '-' && inputValue !== '.') {
+          const min = Number.isFinite(props.min) ? props.min : -Infinity;
+          const max = Number.isFinite(props.max) ? props.max : Infinity;
+          const constrainedValue = Math.max(min!, Math.min(max!, numericValue));
+          inputValue = String(constrainedValue);
+          setInternalValue(constrainedValue);
+        } else {
+          setInternalValue(inputValue);
+        }
+        setValue(inputValue === '0' ? '' : inputValue);
+      }
+    } else {
+      setValue(inputValue);
+      setInternalValue(inputValue);
+    }
+
+    const outputValue = processValue(inputValue);
+    onValueChange?.(outputValue);
+  };
+
+  const handleBlur = () => {
+    if (props.type === 'number' && value) {
+      if (value === '-' || value === '.') {
+        setValue('');
+        setInternalValue('');
+        onValueBlur?.('');
+        return;
+      }
+
+      // 确保0值显示为空
+      if (value === '0') {
+        setValue('');
+        onValueBlur?.(0);
+        return;
+      }
+    }
+
+    const outputValue = processValue(value);
+    if ((initialValue || '') !== outputValue) {
+      onValueBlur?.(outputValue);
+    }
+  };
+
+  const renderPrefix = () => {
+    return typeof prefix === 'string' ? (
+      <div className='bg-muted relative mr-px flex h-9 items-center text-nowrap px-3'>{prefix}</div>
+    ) : (
+      prefix
+    );
+  };
+
+  const renderSuffix = () => {
+    return typeof suffix === 'string' ? (
+      <div className='bg-muted relative ml-px flex h-9 items-center text-nowrap px-3'>{suffix}</div>
+    ) : (
+      suffix
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        'border-input flex w-full items-center overflow-hidden rounded-md border',
+        className,
+      )}
+      suppressHydrationWarning
+    >
+      {renderPrefix()}
+      <Input
+        step={0.01}
+        {...props}
+        value={value}
+        className='block rounded-none border-none'
+        onChange={handleChange}
+        onBlur={handleBlur}
+      />
+      {renderSuffix()}
+    </div>
+  );
+}
@@ -0,0 +1,19 @@
+'use client';
+
+// import { icons as FlagPack } from '@iconify-json/flagpack';
+// import { icons as Logos } from '@iconify-json/logos';
+// import { icons as Mdi } from '@iconify-json/mdi';
+// import { icons as Simple } from '@iconify-json/simple-icons';
+// import { icons as Uil } from '@iconify-json/uil';
+
+import { Icon as Iconify, IconProps } from '@iconify/react';
+
+// addCollection(FlagPack);
+// addCollection(Mdi);
+// addCollection(Uil);
+// addCollection(Simple);
+// addCollection(Logos);
+
+export function Icon(props: IconProps) {
+  return <Iconify {...props} />;
+}
@@ -0,0 +1,226 @@
+'use client';
+
+import { Button } from '@workspace/airo-ui/components/button';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import 'katex/dist/katex.min.css';
+import { Check, Copy } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkToc from 'remark-toc';
+
+interface CodeBlockProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+function CodeBlock({ className, children, ...props }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const match = className?.startsWith('language-') ? /language-(\w+)/.exec(className) : null;
+
+  const handleCopy = useCallback((text: string) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 3000);
+      })
+      .catch(() => {
+        alert('Failed to copy text. Please try again.');
+      });
+  }, []);
+
+  if (match) {
+    return (
+      <div className='group relative my-4 w-full overflow-hidden rounded-lg'>
+        <div className='bg-muted flex items-center justify-between gap-4 px-4 py-2 text-sm font-semibold'>
+          <span className='lowercase [&>span]:text-xs'>{match[1]}</span>
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={() => handleCopy(String(children).replace(/\n$/, ''))}
+            className='absolute right-2 top-0 z-20 p-0.5 opacity-0 transition-opacity duration-200 group-hover:opacity-100'
+          >
+            {copied ? <Check size={16} /> : <Copy size={16} />}
+          </Button>
+        </div>
+
+        <SyntaxHighlighter
+          {...props}
+          PreTag='div'
+          language={match[1]}
+          style={oneDark}
+          showLineNumbers
+          customStyle={{
+            margin: 0,
+            borderRadius: 0,
+          }}
+        >
+          {String(children).replace(/\n$/, '')}
+        </SyntaxHighlighter>
+      </div>
+    );
+  }
+
+  return (
+    <code {...props} className={cn(className, 'rounded border font-semibold')}>
+      {children}
+    </code>
+  );
+}
+
+interface MarkdownProps {
+  children: string;
+  components?: Components;
+}
+
+export function Markdown({ children, components }: MarkdownProps) {
+  return (
+    <ReactMarkdown
+      className='prose dark:prose-invert w-full max-w-[unset] break-words'
+      remarkPlugins={[remarkGfm, remarkToc, remarkMath]}
+      rehypePlugins={[rehypeRaw, rehypeKatex]}
+      components={{
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h1: ({ node, className, ...props }) => (
+          <h1
+            className={cn(
+              'mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h2: ({ node, className, ...props }) => (
+          <h2
+            className={cn(
+              'mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h3: ({ node, className, ...props }) => (
+          <h3
+            className={cn(
+              'mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h4: ({ node, className, ...props }) => (
+          <h4
+            className={cn(
+              'mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h5: ({ node, className, ...props }) => (
+          <h5
+            className={cn('my-4 text-lg font-semibold first:mt-0 last:mb-0', className)}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        h6: ({ node, className, ...props }) => (
+          <h6 className={cn('my-4 font-semibold first:mt-0 last:mb-0', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        p: ({ node, className, ...props }) => (
+          <p className={cn('mb-5 mt-5 leading-7 first:mt-0 last:mb-0', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        a: ({ node, className, ...props }) => (
+          <a
+            target='_blank'
+            className={cn('text-primary font-medium underline underline-offset-4', className)}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        blockquote: ({ node, className, ...props }) => (
+          <blockquote className={cn('border-l-2 pl-6 italic', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ul: ({ node, className, ...props }) => (
+          <ul className={cn('my-5 ml-6 list-disc [&>li]:mt-2', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ol: ({ node, className, ...props }) => (
+          <ol className={cn('my-5 ml-6 list-decimal [&>li]:mt-2', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        hr: ({ node, className, ...props }) => (
+          <hr className={cn('my-5 border-b', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        table: ({ node, className, ...props }) => (
+          <table
+            className={cn(
+              'my-5 w-full border-separate border-spacing-0 overflow-y-auto',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        th: ({ node, className, ...props }) => (
+          <th
+            className={cn(
+              'bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        td: ({ node, className, ...props }) => (
+          <td
+            className={cn(
+              'border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        tr: ({ node, className, ...props }) => (
+          <tr
+            className={cn(
+              'm-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
+              className,
+            )}
+            {...props}
+          />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        sup: ({ node, className, ...props }) => (
+          <sup className={cn('[&>a]:text-xs [&>a]:no-underline', className)} {...props} />
+        ),
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        pre: ({ node, className, ...props }) => (
+          <pre className={cn('overflow-x-auto rounded-b-lg p-0', className)} {...props} />
+        ),
+        code(props) {
+          return <CodeBlock {...(props as CodeBlockProps)} />;
+        },
+        ...components,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}
@@ -0,0 +1,60 @@
+'use client';
+
+import { Table } from '@tanstack/react-table';
+import { Input } from '@workspace/airo-ui/components/input';
+import { Combobox } from '@workspace/airo-ui/custom-components/combobox';
+
+export interface IParams {
+  key: string;
+  placeholder?: string;
+  options?: { label: string; value: string }[];
+}
+interface ColumnFilterProps<TData> {
+  table: Table<TData>;
+  params: IParams[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filters?: any;
+}
+
+export function ColumnFilter<TData>({ table, params, filters }: ColumnFilterProps<TData>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateFilter = (key: string, value: any) => {
+    table.setColumnFilters((prev) => {
+      const newFilters = prev.filter((filter) => filter.id !== key);
+      if (value) {
+        newFilters.push({ id: key, value });
+      }
+      return newFilters;
+    });
+  };
+
+  return (
+    <div className='flex gap-2'>
+      {params.map((param) => {
+        if (param.options) {
+          return (
+            <Combobox
+              key={param.key}
+              className='w-32'
+              placeholder={param.placeholder || 'Choose...'}
+              value={filters[param.key] || ''}
+              onChange={(value) => {
+                updateFilter(param.key, value);
+              }}
+              options={param.options}
+            />
+          );
+        }
+        return (
+          <Input
+            key={param.key}
+            className='w-64 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
+            placeholder={param.placeholder || 'Search...'}
+            value={filters[param.key] || ''}
+            onChange={(event) => updateFilter(param.key, event.target.value)}
+          />
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+export {
+  ProList,
+  type ProListActions,
+  type ProListProps,
+} from '@workspace/airo-ui/custom-components/pro-list/pro-list';
@@ -0,0 +1,111 @@
+import { Table } from '@tanstack/react-table';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/airo-ui/components/select';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from 'lucide-react';
+
+interface PaginationText {
+  textRowsPerPage?: string;
+  textPageOf?: (pageIndex: number, pageCount: number) => string;
+}
+
+interface PaginationProps<TData> {
+  table: Table<TData>;
+  text?: PaginationText;
+}
+
+export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
+  return (
+    <div className='flex flex-wrap items-center justify-between gap-2'>
+      <div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
+        {text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
+          `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+      </div>
+      <div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
+        <div className='flex items-center space-x-2'>
+          <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className='h-8 w-[70px]'>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side='top'>
+              {[10, 20, 50, 100, 200].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button
+          variant='outline'
+          size='icon'
+          className='hidden lg:flex'
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to first page</span>
+          <ChevronsLeftIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to previous page</span>
+          <ChevronLeftIcon className='h-4 w-4' />
+        </Button>
+        <Select
+          value={`${table.getState().pagination.pageIndex + 1}`}
+          onValueChange={(value) => table.setPageIndex(Number(value) - 1)}
+        >
+          <SelectTrigger className='w-[70px]'>
+            <SelectValue placeholder='Select page number' />
+          </SelectTrigger>
+          <SelectContent className='w-12'>
+            {Array.from({ length: table.getPageCount() }, (_, i) => (
+              <SelectItem key={i} value={`${i + 1}`}>
+                {i + 1}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant='outline'
+          size='icon'
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to next page</span>
+          <ChevronRightIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          className='hidden lg:flex'
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to last page</span>
+          <ChevronsRightIcon className='h-4 w-4' />
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,211 @@
+'use client';
+
+import {
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Alert, AlertDescription, AlertTitle } from '@workspace/airo-ui/components/alert';
+import { Button } from '@workspace/airo-ui/components/button';
+import { Checkbox } from '@workspace/airo-ui/components/checkbox';
+import Empty from '@workspace/airo-ui/custom-components/empty';
+import { ColumnFilter, IParams } from '@workspace/airo-ui/custom-components/pro-list/column-filter';
+import { Pagination } from '@workspace/airo-ui/custom-components/pro-list/pagination';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { Loader, RefreshCcw } from 'lucide-react';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+
+export interface ProListProps<TData, TValue> {
+  request: (
+    pagination: {
+      page: number;
+      size: number;
+    },
+    filter: TValue,
+  ) => Promise<{ list: TData[]; total: number }>;
+  params?: IParams[];
+  header?: {
+    title?: React.ReactNode;
+    toolbar?: React.ReactNode | React.ReactNode[];
+  };
+  batchRender?: (rows: TData[]) => React.ReactNode[];
+  renderItem: (item: TData, checkbox: React.ReactNode) => React.ReactNode;
+  action?: React.Ref<ProListActions | undefined>;
+  texts?: Partial<{
+    textRowsPerPage: string;
+    textPageOf: (current: number, total: number) => string;
+    selectedRowsText: (total: number) => string;
+  }>;
+  empty?: React.ReactNode;
+}
+export interface ProListActions {
+  refresh: () => void;
+  reset: () => void;
+}
+
+export function ProList<TData, TValue extends Record<string, unknown>>({
+  request,
+  params,
+  header,
+  batchRender,
+  renderItem,
+  action,
+  texts,
+  empty,
+}: ProListProps<TData, TValue>) {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState<{ [key: number]: boolean }>({});
+  const [data, setData] = useState<TData[]>([]);
+  const [rowCount, setRowCount] = useState<number>(0);
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [loading, setLoading] = useState(false);
+
+  const table = useReactTable({
+    data,
+    columns: [],
+    onPaginationChange: setPagination,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: {
+      columnFilters,
+      rowSelection,
+      pagination,
+    },
+    manualPagination: true,
+    manualFiltering: true,
+    rowCount: rowCount,
+  });
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const response = await request(
+        {
+          page: pagination.pageIndex + 1,
+          size: pagination.pageSize,
+        },
+        Object.fromEntries(columnFilters.map((item) => [item.id, item.value])) as TValue,
+      );
+      setData(response.list);
+      setRowCount(response.total);
+    } catch (error) {
+      console.log('Fetch data error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const reset = async () => {
+    table.resetColumnFilters();
+    table.resetGlobalFilter(true);
+    table.resetColumnVisibility();
+    setRowSelection({});
+    table.resetPagination();
+  };
+
+  useImperativeHandle(action, () => ({
+    refresh: fetchData,
+    reset,
+  }));
+
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pagination.pageIndex, pagination.pageSize, columnFilters]);
+
+  const handleSelectionChange = (index: number, isSelected: boolean) => {
+    setRowSelection((prevSelection) => ({
+      ...prevSelection,
+      [index]: isSelected,
+    }));
+  };
+
+  const selectedRows = data.filter((_, index) => rowSelection[index]);
+  const selectedCount = selectedRows.length;
+
+  return (
+    <div className='flex max-w-full flex-col gap-4'>
+      <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
+        <div>
+          {params ? (
+            <ColumnFilter
+              table={table}
+              params={params}
+              filters={Object.fromEntries(columnFilters.map((item) => [item.id, item.value]))}
+            />
+          ) : (
+            header?.title
+          )}
+        </div>
+        <div className='flex flex-1 items-center justify-end gap-2'>
+          {params && params?.length > 0 && (
+            <>
+              <Button variant='outline' className='h-8 w-8 bg-[#D9D9D9] p-2' onClick={fetchData}>
+                <RefreshCcw className='h-4 w-4 text-[#848484]' />
+              </Button>
+            </>
+          )}
+          {header?.toolbar}
+        </div>
+      </div>
+
+      {selectedCount > 0 && batchRender && (
+        <Alert className='flex items-center justify-between'>
+          <AlertTitle className='m-0'>
+            {texts?.selectedRowsText?.(selectedCount) || `Selected ${selectedCount} rows`}
+          </AlertTitle>
+          <AlertDescription className='flex gap-2'>{batchRender(selectedRows)}</AlertDescription>
+        </Alert>
+      )}
+
+      <div
+        className={cn('relative overflow-x-auto', {
+          'rounded-xl border': data.length === 0,
+        })}
+      >
+        <div className='grid grid-cols-1 gap-4'>
+          {data.length ? (
+            data.map((item, index) => {
+              const isSelected = !!rowSelection[index];
+
+              const checkbox = (
+                <Checkbox
+                  checked={isSelected}
+                  onCheckedChange={(value) => handleSelectionChange(index, !!value)}
+                  aria-label='Select row'
+                />
+              );
+
+              return <div key={index}>{renderItem(item, checkbox)}</div>;
+            })
+          ) : (
+            <div className='flex items-center justify-center py-24'>{empty || <Empty />}</div>
+          )}
+        </div>
+
+        {loading && (
+          <div className='bg-muted/80 absolute top-0 z-20 flex h-full w-full items-center justify-center'>
+            <Loader className='h-4 w-4 animate-spin' />
+          </div>
+        )}
+      </div>
+      {rowCount > 0 && (
+        <Pagination
+          table={table}
+          text={{
+            textRowsPerPage: texts?.textRowsPerPage,
+            textPageOf: texts?.textPageOf,
+          }}
+        />
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,60 @@
+'use client';
+
+import { Table } from '@tanstack/react-table';
+import { Input } from '@workspace/airo-ui/components/input';
+import { Combobox } from '@workspace/airo-ui/custom-components/combobox';
+
+export interface IParams {
+  key: string;
+  placeholder?: string;
+  options?: { label: string; value: string }[];
+}
+interface ColumnFilterProps<TData> {
+  table: Table<TData>;
+  params: IParams[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filters?: any;
+}
+
+export function ColumnFilter<TData>({ table, params, filters }: ColumnFilterProps<TData>) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateFilter = (key: string, value: any) => {
+    table.setColumnFilters((prev) => {
+      const newFilters = prev.filter((filter) => filter.id !== key);
+      if (value) {
+        newFilters.push({ id: key, value });
+      }
+      return newFilters;
+    });
+  };
+
+  return (
+    <div className='flex gap-2'>
+      {params.map((param) => {
+        if (param.options) {
+          return (
+            <Combobox
+              key={param.key}
+              className='min-w-32'
+              placeholder={param.placeholder || 'Choose...'}
+              value={filters[param.key] || ''}
+              onChange={(value) => {
+                updateFilter(param.key, value);
+              }}
+              options={param.options}
+            />
+          );
+        }
+        return (
+          <Input
+            key={param.key}
+            className='min-w-32'
+            placeholder={param.placeholder || 'Search...'}
+            value={filters[param.key] || ''}
+            onChange={(event) => updateFilter(param.key, event.target.value)}
+          />
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,75 @@
+import { flexRender, Header } from '@tanstack/react-table';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@workspace/airo-ui/components/dropdown-menu';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { ArrowDownIcon, ArrowDownUpIcon, ArrowUpIcon, EyeOffIcon } from 'lucide-react';
+
+interface ColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  header: Header<TData, TValue>;
+  text?: Partial<{
+    asc: string;
+    desc: string;
+    hide: string;
+  }>;
+}
+
+export function ColumnHeader<TData, TValue>({
+  header,
+  className,
+  text,
+}: ColumnHeaderProps<TData, TValue>) {
+  const column = header.column;
+  const title = header.isPlaceholder
+    ? null
+    : flexRender(header.column.columnDef.header, header.getContext());
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn('flex w-full items-center', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='ghost'
+            className='flex h-8 w-full justify-start !bg-transparent p-0 text-sm'
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDownIcon className='ml-2 h-4 w-4' />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUpIcon className='ml-2 h-4 w-4' />
+            ) : (
+              <ArrowDownUpIcon className='ml-2 h-4 w-4' />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='start'>
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className='text-muted-foreground/70 mr-2 h-3.5 w-3.5' />
+            {text?.asc || 'ASC'}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className='text-muted-foreground/70 mr-2 h-3.5 w-3.5' />
+            {text?.desc || 'DESC'}
+          </DropdownMenuItem>
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeOffIcon className='text-muted-foreground/70 mr-2 h-3.5 w-3.5' />
+                {text?.hide || 'Hide'}
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
@@ -0,0 +1,47 @@
+'use client';
+
+import { Table } from '@tanstack/react-table';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@workspace/airo-ui/components/dropdown-menu';
+import { ListTodoIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+
+interface ColumnToggleProps<TData> {
+  table: Table<TData>;
+}
+
+export function ColumnToggle<TData>({ table }: ColumnToggleProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline' size='icon'>
+          <ListTodoIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='w-[150px]'>
+        {table
+          .getAllColumns()
+          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+          .map((column) => {
+            const columns = table.getAllColumns().filter((item) => item.getIsVisible());
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className='capitalize'
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                disabled={columns.length === 1 && columns?.[0]?.id === column.id}
+              >
+                {column.columnDef.header as ReactNode}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
@@ -0,0 +1,5 @@
+export {
+  ProTable,
+  type ProTableActions,
+  type ProTableProps,
+} from '@workspace/airo-ui/custom-components/pro-table/pro-table';
@@ -0,0 +1,111 @@
+import { Table } from '@tanstack/react-table';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/airo-ui/components/select';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from 'lucide-react';
+
+interface PaginationText {
+  textRowsPerPage?: string;
+  textPageOf?: (pageIndex: number, pageCount: number) => string;
+}
+
+interface PaginationProps<TData> {
+  table: Table<TData>;
+  text?: PaginationText;
+}
+
+export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
+  return (
+    <div className='flex flex-wrap items-center justify-between gap-2'>
+      <div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
+        {text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
+          `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+      </div>
+      <div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
+        <div className='flex items-center space-x-2'>
+          <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className='h-8 w-[70px]'>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side='top'>
+              {[10, 20, 50, 100, 200].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button
+          variant='outline'
+          size='icon'
+          className='hidden lg:flex'
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to first page</span>
+          <ChevronsLeftIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <span className='sr-only'>Go to previous page</span>
+          <ChevronLeftIcon className='h-4 w-4' />
+        </Button>
+        <Select
+          value={`${table.getState().pagination.pageIndex + 1}`}
+          onValueChange={(value) => table.setPageIndex(Number(value) - 1)}
+        >
+          <SelectTrigger className='w-[70px]'>
+            <SelectValue placeholder='Select page number' />
+          </SelectTrigger>
+          <SelectContent className='w-12'>
+            {Array.from({ length: table.getPageCount() }, (_, i) => (
+              <SelectItem key={i} value={`${i + 1}`}>
+                {i + 1}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant='outline'
+          size='icon'
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to next page</span>
+          <ChevronRightIcon className='h-4 w-4' />
+        </Button>
+        <Button
+          variant='outline'
+          size='icon'
+          className='hidden lg:flex'
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <span className='sr-only'>Go to last page</span>
+          <ChevronsRightIcon className='h-4 w-4' />
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,378 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from '@tanstack/react-table';
+import { Alert, AlertDescription, AlertTitle } from '@workspace/airo-ui/components/alert';
+import { Button } from '@workspace/airo-ui/components/button';
+import { Checkbox } from '@workspace/airo-ui/components/checkbox';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@workspace/airo-ui/components/table';
+import Empty from '@workspace/airo-ui/custom-components/empty';
+import {
+  ColumnFilter,
+  IParams,
+} from '@workspace/airo-ui/custom-components/pro-table/column-filter';
+import { ColumnHeader } from '@workspace/airo-ui/custom-components/pro-table/column-header';
+import { ColumnToggle } from '@workspace/airo-ui/custom-components/pro-table/column-toggle';
+import { Pagination } from '@workspace/airo-ui/custom-components/pro-table/pagination';
+import { SortableRow } from '@workspace/airo-ui/custom-components/pro-table/sortable-row';
+import { ProTableWrapper } from '@workspace/airo-ui/custom-components/pro-table/wrapper';
+import { useSize } from 'ahooks';
+import { GripVertical, ListRestart, Loader, RefreshCcw } from 'lucide-react';
+import React, { Fragment, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+export interface ProTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  request: (
+    pagination: {
+      page: number;
+      size: number;
+    },
+    filter: TValue,
+  ) => Promise<{ list: TData[]; total: number }>;
+  params?: IParams[];
+  header?: {
+    title?: React.ReactNode;
+    toolbar?: React.ReactNode | React.ReactNode[];
+  };
+  actions?: {
+    render?: (row: TData) => React.ReactNode[];
+    batchRender?: (rows: TData[]) => React.ReactNode[];
+  };
+  action?: React.Ref<ProTableActions | undefined>;
+  texts?: Partial<{
+    actions: string;
+    asc: string;
+    desc: string;
+    hide: string;
+    textRowsPerPage: string;
+    textPageOf: (current: number, total: number) => string;
+    selectedRowsText: (total: number) => string;
+  }>;
+  empty?: React.ReactNode;
+  onSort?: (
+    sourceId: string | number,
+    targetId: string | number | null,
+    items: TData[],
+  ) => Promise<TData[]>;
+}
+
+export interface ProTableActions {
+  refresh: () => void;
+  reset: () => void;
+}
+
+export function ProTable<
+  TData extends Record<string, unknown> & { id?: string },
+  TValue extends Record<string, unknown>,
+>({
+  columns,
+  request,
+  params,
+  header,
+  actions,
+  action,
+  texts,
+  empty,
+  onSort,
+}: ProTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [data, setData] = useState<TData[]>([]);
+  const [rowCount, setRowCount] = useState<number>(0);
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 50,
+  });
+  const [loading, setLoading] = useState(false);
+
+  const table = useReactTable({
+    data,
+    columns: [
+      ...(onSort
+        ? [
+            {
+              id: 'sortable',
+              header: (
+                <GripVertical className='h-4 w-4 cursor-move text-gray-500 hover:text-gray-700' />
+              ),
+              enableSorting: false,
+              enableHiding: false,
+            },
+          ]
+        : []),
+      ...(actions?.batchRender ? [createSelectColumn<TData, TValue>()] : []),
+      ...columns.map(
+        (column) =>
+          ({
+            enableSorting: false,
+            ...column,
+          }) as ColumnDef<TData, TValue>,
+      ),
+      ...(actions?.render
+        ? ([
+            {
+              id: 'actions',
+              header: texts?.actions,
+              cell: ({ row }) => (
+                <div className='flex items-center justify-end gap-2'>
+                  {actions?.render?.(row.original).map((item, index) => (
+                    <Fragment key={index}>{item}</Fragment>
+                  ))}
+                </div>
+              ),
+              enableSorting: false,
+              enableHiding: false,
+            },
+          ] as ColumnDef<TData, TValue>[])
+        : []),
+    ] as ColumnDef<TData, TValue>[],
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+    manualPagination: true,
+    manualFiltering: true,
+    rowCount: rowCount,
+    manualSorting: true,
+  });
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const response = await request(
+        {
+          page: pagination.pageIndex + 1,
+          size: pagination.pageSize,
+        },
+        Object.fromEntries(columnFilters.map((item) => [item.id, item.value])) as TValue,
+      );
+      setData(response.list);
+      setRowCount(response.total);
+    } catch (error) {
+      console.log('Fetch data error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const reset = async () => {
+    table.resetSorting();
+    table.resetColumnFilters();
+    table.resetGlobalFilter(true);
+    table.resetColumnVisibility();
+    table.resetRowSelection();
+    table.resetPagination();
+  };
+  const ref = useRef<HTMLDivElement>(null);
+  const size = useSize(ref);
+
+  useImperativeHandle(action, () => ({
+    refresh: fetchData,
+    reset,
+  }));
+
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pagination.pageIndex, pagination.pageSize, columnFilters]);
+
+  const selectedRows = table.getSelectedRowModel().flatRows.map((row) => row.original);
+  const selectedCount = selectedRows.length;
+
+  return (
+    <div className='flex flex-col gap-4' ref={ref}>
+      <div className='flex flex-wrap-reverse items-center justify-between gap-4'>
+        <div>
+          {params ? (
+            <ColumnFilter
+              table={table}
+              params={params}
+              filters={Object.fromEntries(columnFilters.map((item) => [item.id, item.value]))}
+            />
+          ) : (
+            header?.title
+          )}
+        </div>
+        <div className='flex flex-1 items-center justify-end gap-2'>
+          <Button variant='outline' size='icon' onClick={fetchData}>
+            <RefreshCcw />
+          </Button>
+          <ColumnToggle table={table} />
+          <Button variant='outline' size='icon' onClick={reset}>
+            <ListRestart />
+          </Button>
+          {header?.toolbar}
+        </div>
+      </div>
+
+      {selectedCount > 0 && actions?.batchRender && (
+        <Alert className='flex items-center justify-between'>
+          <AlertTitle className='m-0'>
+            {texts?.selectedRowsText?.(selectedCount) || `Selected ${selectedCount} rows`}
+          </AlertTitle>
+          <AlertDescription className='flex gap-2'>
+            {actions.batchRender(selectedRows)}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div
+        className='relative w-auto overflow-x-auto rounded-md border'
+        style={{
+          width: size?.width,
+        }}
+      >
+        <ProTableWrapper data={data} setData={setData} onSort={onSort}>
+          <Table className='w-full'>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id} className={getTableHeaderClass(header.column.id)}>
+                      <ColumnHeader
+                        header={header}
+                        text={{
+                          asc: texts?.asc,
+                          desc: texts?.desc,
+                          hide: texts?.hide,
+                        }}
+                      />
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel()?.rows?.length ? (
+                onSort ? (
+                  table.getRowModel().rows.map((row) => (
+                    <SortableRow
+                      key={row.original.id ? String(row.original.id) : String(row.index)}
+                      id={row.original.id ? String(row.original.id) : String(row.index)}
+                      data-state={row.getIsSelected() && 'selected'}
+                      isSortable
+                    >
+                      {row
+                        .getVisibleCells()
+                        .filter((cell) => {
+                          return cell.column.id !== 'sortable';
+                        })
+                        .map((cell) => (
+                          <TableCell key={cell.id} className={getTableCellClass(cell.column.id)}>
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </TableCell>
+                        ))}
+                    </SortableRow>
+                  ))
+                ) : (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id} className={getTableCellClass(cell.column.id)}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                )
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length + 2} className='py-24'>
+                    {empty || <Empty />}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </ProTableWrapper>
+
+        {loading && (
+          <div className='bg-muted/80 absolute top-0 z-20 flex h-full w-full items-center justify-center'>
+            <Loader className='h-4 w-4 animate-spin' />
+          </div>
+        )}
+      </div>
+      {rowCount > 0 && (
+        <Pagination
+          table={table}
+          text={{
+            textRowsPerPage: texts?.textRowsPerPage,
+            textPageOf: texts?.textPageOf,
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function createSelectColumn<TData, TValue>(): ColumnDef<TData, TValue> {
+  return {
+    id: 'selected',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label='Select all'
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label='Select row'
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  };
+}
+
+function getTableHeaderClass(columnId: string) {
+  if (['sortable', 'selected'].includes(columnId)) {
+    return 'sticky left-0 z-10 bg-background shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&:has([role=checkbox])]:pr-2';
+  } else if (columnId === 'actions') {
+    return 'sticky right-0 z-10 text-right bg-background shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]';
+  }
+  return 'truncate';
+}
+
+function getTableCellClass(columnId: string) {
+  if (['sortable', 'selected'].includes(columnId)) {
+    return 'sticky left-0 bg-background shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]';
+  } else if (columnId === 'actions') {
+    return 'sticky right-0 bg-background shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]';
+  }
+  return 'truncate';
+}
@@ -0,0 +1,39 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TableCell, TableRow } from '@workspace/airo-ui/components/table';
+import { GripVertical } from 'lucide-react';
+import React from 'react';
+
+interface SortableRowProps {
+  id: string;
+  children: React.ReactNode;
+  isSortable: boolean;
+}
+
+export function SortableRow({ id, children, isSortable }: SortableRowProps) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id,
+    disabled: !isSortable,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString({
+      x: 0,
+      y: transform?.y || 0,
+      scaleX: transform?.scaleX || 1,
+      scaleY: transform?.scaleY || 1,
+    }),
+    transition,
+  };
+
+  return (
+    <TableRow ref={setNodeRef} style={style}>
+      {isSortable ? (
+        <TableCell className='cursor-move' {...listeners} {...attributes}>
+          <GripVertical className='h-4 w-4 cursor-move text-gray-500 hover:text-gray-700' />
+        </TableCell>
+      ) : null}
+      {children}
+    </TableRow>
+  );
+}
@@ -0,0 +1,54 @@
+import {
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+
+export function ProTableWrapper<TData extends { id?: string }>({
+  children,
+  onSort,
+  data,
+  setData,
+}: {
+  children: React.ReactNode;
+  onSort?: (
+    sourceId: string | number,
+    targetId: string | number | null,
+    items: TData[],
+  ) => Promise<TData[]>;
+  data: TData[];
+  setData: React.Dispatch<React.SetStateAction<TData[]>>;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (onSort) {
+      const updatedData = await onSort(active.id, over?.id || null, data);
+      setData(updatedData);
+    }
+  };
+  if (!onSort) return children;
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext
+        items={data.map((item) => String(item.id))}
+        strategy={verticalListSortingStrategy}
+      >
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
@@ -0,0 +1,96 @@
+import { Badge } from '@workspace/airo-ui/components/badge';
+import { Input } from '@workspace/airo-ui/components/input';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { X } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+interface TagInputProps {
+  value?: string[];
+  onChange?: (tags: string[]) => void;
+  placeholder?: string;
+  separator?: string;
+  className?: string;
+}
+
+export function TagInput({
+  value = [],
+  onChange,
+  placeholder,
+  separator = ',',
+  className,
+}: TagInputProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [tags, setTags] = useState<string[]>(value);
+
+  useEffect(() => {
+    setTags(value.map((tag) => tag.trim()).filter((tag) => tag));
+  }, [value]);
+
+  function normalizeInput(input: string) {
+    return input.replace(/，/g, ',');
+  }
+
+  function addTag() {
+    const normalizedInput = normalizeInput(inputValue);
+    const newTags = normalizedInput
+      .split(separator)
+      .map((tag) => tag.trim())
+      .filter((tag) => tag && !tags.includes(tag));
+
+    if (newTags.length > 0) {
+      const updatedTags = [...tags, ...newTags];
+      updateTags(updatedTags);
+    }
+    setInputValue('');
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Enter' || event.key === separator || event.key === '，') {
+      event.preventDefault();
+      addTag();
+    } else if (event.key === 'Backspace' && inputValue === '') {
+      event.preventDefault();
+      handleRemoveTag(tags.length - 1);
+    }
+  }
+
+  function handleRemoveTag(index: number) {
+    const newTags = tags.filter((_, i) => i !== index);
+    updateTags(newTags);
+  }
+
+  function updateTags(newTags: string[]) {
+    setTags(newTags);
+    onChange?.(newTags);
+  }
+
+  return (
+    <div
+      className={cn(
+        'border-input focus-within:ring-primary flex min-h-9 w-full flex-wrap items-center gap-2 rounded-md border bg-transparent p-2 shadow-sm transition-colors focus-within:ring-1',
+        className,
+      )}
+    >
+      {tags.map((tag, index) => (
+        <Badge
+          key={tag}
+          variant='outline'
+          className='border-primary bg-primary/10 flex items-center gap-1 px-1'
+        >
+          {tag}
+          <X className='size-4 cursor-pointer' onClick={() => handleRemoveTag(index)} />
+        </Badge>
+      ))}
+      <Input
+        className='h-full min-w-48 flex-1 border-none bg-transparent p-0 shadow-none !ring-0'
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={addTag}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}
+
+export default TagInput;
@@ -0,0 +1,114 @@
+import { Input } from '@workspace/airo-ui/components/input';
+import { Label } from '@workspace/airo-ui/components/label';
+import { cn } from '@workspace/airo-ui/lib/utils';
+import { Upload } from 'lucide-react';
+import { useState } from 'react';
+
+type ReturnType = 'base64' | 'file';
+
+interface UploadImageProps {
+  onChange: (value: string | File) => void;
+  returnType?: ReturnType;
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  maxSize?: number; // Maximum file size in MB
+}
+
+export const UploadImage = ({
+  onChange,
+  returnType = 'base64',
+  id = 'image-upload',
+  children,
+  className,
+  maxSize = 1,
+}: UploadImageProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const toBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  const validateFileSize = (file: File): boolean => {
+    const maxSizeInBytes = maxSize * 1024 * 1024;
+    if (file.size > maxSizeInBytes) {
+      alert(`File size exceeds the limit (${maxSize}MB)`);
+      return false;
+    }
+    return true;
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      if (!validateFileSize(file)) return;
+
+      if (returnType === 'base64') {
+        const base64 = await toBase64(file);
+        onChange(base64);
+      } else {
+        onChange(file);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (!file) return;
+
+    try {
+      if (!validateFileSize(file)) return;
+
+      if (returnType === 'base64') {
+        const base64 = await toBase64(file);
+        onChange(base64);
+      } else {
+        onChange(file);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <Input type='file' accept='image/*' className='hidden' id={id} onChange={handleImageUpload} />
+      <Label
+        htmlFor={id}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={cn(
+          'cursor-pointer',
+          !children && 'flex items-center justify-center rounded-lg border-2 border-dashed p-4',
+          isDragging && 'border-primary bg-muted/50',
+          className,
+        )}
+      >
+        {children || <Upload />}
+      </Label>
+    </>
+  );
+};