feat: FIT-976: [FSM UI] Data Manager State Column

web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.jsx

@@ -16,8 +16,6 @@ export const PeopleList = ({ onSelect, selectedUser, defaultSelected }) => {
   const [currentPageSize] = usePageSize("page_size", 30);
   const [totalItems, setTotalItems] = useState(0);
 
-  console.log({ currentPage, currentPageSize });
-
   const fetchUsers = useCallback(async (page, pageSize) => {
     const response = await api.callApi("memberships", {
       params: {

web/libs/datamanager/src/components/CellViews/TaskState.jsx

@@ -0,0 +1,87 @@
+import { isDefined } from "../../utils/utils";
+import { Badge } from "@humansignal/ui";
+import { Tooltip } from "@humansignal/ui";
+
+// Map state values to human-readable labels
+export const stateLabels = {
+  CREATED: "Created",
+  ANNOTATION_IN_PROGRESS: "Annotating",
+  ANNOTATION_COMPLETE: "Annotated",
+  REVIEW_IN_PROGRESS: "In Review",
+  REVIEW_COMPLETE: "Reviewed",
+  ARBITRATION_NEEDED: "Needs Arbitration",
+  ARBITRATION_IN_PROGRESS: "In Arbitration",
+  ARBITRATION_COMPLETE: "Arbitrated",
+  COMPLETED: "Done",
+};
+
+// Map state values to descriptions for tooltips
+const stateDescriptions = {
+  CREATED: "Task has been created and is ready for annotation",
+  ANNOTATION_IN_PROGRESS: "Task is currently being annotated",
+  ANNOTATION_COMPLETE: "Annotation has been completed",
+  REVIEW_IN_PROGRESS: "Task is under review",
+  REVIEW_COMPLETE: "Review has been completed",
+  ARBITRATION_NEEDED: "Task requires arbitration due to disagreements",
+  ARBITRATION_IN_PROGRESS: "Task is currently in arbitration",
+  ARBITRATION_COMPLETE: "Arbitration has been completed",
+  COMPLETED: "Task is fully complete",
+};
+
+// State color mapping following the 4-color system
+// Grey: Initial states, Blue: In-progress, Yellow: Attention/Churn, Green: Terminal/Complete
+export const STATE_COLORS = {
+  // Grey - Initial
+  CREATED: "grey",
+
+  // Blue - In Progress
+  ANNOTATION_IN_PROGRESS: "blue",
+  REVIEW_IN_PROGRESS: "blue",
+  ARBITRATION_IN_PROGRESS: "blue",
+
+  // Yellow - Attention/Churn
+  ARBITRATION_NEEDED: "yellow",
+
+  // Green - Complete/Terminal
+  ANNOTATION_COMPLETE: "green",
+  REVIEW_COMPLETE: "green",
+  ARBITRATION_COMPLETE: "green",
+  COMPLETED: "green",
+};
+
+// Map colors to Tailwind CSS classes for chip styling
+export const colorToClasses = {
+  grey: "bg-neutral-emphasis border-neutral-border text-neutral-content",
+  blue: "bg-primary-emphasis border-primary-border-subtlest text-primary-content",
+  yellow: "bg-warning-emphasis border-warning-border-subtlest text-warning-content",
+  green: "bg-positive-emphasis border-positive-border-subtlest text-positive-content",
+};
+
+export const TaskState = (cell) => {
+  const { value } = cell;
+
+  if (!isDefined(value) || value === null || value === "") {
+    return null;
+  }
+
+  const label = stateLabels[value] || value;
+  const description = stateDescriptions[value] || value;
+  const color = STATE_COLORS[value] || "grey";
+  const colorClasses = colorToClasses[color];
+
+  return (
+    <div className="flex items-center">
+      <Tooltip title={description}>
+        <span>
+          <Badge className={colorClasses}>{label}</Badge>
+        </span>
+      </Tooltip>
+    </div>
+  );
+};
+
+TaskState.userSelectable = false;
+
+TaskState.style = {
+  minWidth: 140,
+};

web/libs/datamanager/src/components/CellViews/index.js

@@ -17,6 +17,7 @@ export { StringCell as String } from "./StringCell";
 export { StringCell as Text } from "./StringCell";
 export { VideoCell as Video } from "./VideoCell";
 export { ProjectCell as Project } from "./ProjectCell";
+export { TaskState } from "./TaskState";
 
 export function normalizeCellAlias(alias) {
   // remove trailing separators to make `toStudlyCaps` safe

web/libs/datamanager/src/components/Filters/types/TaskStateFilter.jsx

@@ -0,0 +1,59 @@
+import { observer } from "mobx-react";
+import { Select, Badge } from "@humansignal/ui";
+import { stateLabels, STATE_COLORS, colorToClasses } from "../../CellViews/TaskState";
+import { useMemo } from "react";
+
+const BaseInput = observer(({ value, onChange, placeholder }) => {
+  const options = useMemo(() => {
+    return Object.keys(stateLabels).map((key) => {
+      const textLabel = stateLabels[key];
+      const color = STATE_COLORS[key] || "grey";
+      const colorClasses = colorToClasses[color];
+
+      return {
+        value: key,
+        textLabel,
+        label: <Badge className={colorClasses}>{textLabel}</Badge>,
+      };
+    });
+  }, []);
+
+  return (
+    <Select
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      searchable={true}
+      onSearch={(value) => {
+        // Search against textLabel which should match any of the stateLabels values
+        return options.filter((option) => option.textLabel.toLowerCase().includes(value.toLowerCase()));
+      }}
+      selectedValueRenderer={(option) => {
+        if (!option) return null;
+
+        const color = STATE_COLORS[option.value] || "grey";
+        const colorClasses = colorToClasses[color];
+
+        return <Badge className={`${colorClasses} h-[18px] text-[12px]`}>{option.textLabel}</Badge>;
+      }}
+      size="small"
+      triggerClassName="min-w-[100px]"
+    />
+  );
+});
+
+export const TaskStateFilter = [
+  {
+    key: "contains",
+    label: "contains",
+    valueType: "list",
+    input: (props) => <BaseInput {...props} />,
+  },
+  {
+    key: "not_contains",
+    label: "not contains",
+    valueType: "list",
+    input: (props) => <BaseInput {...props} />,
+  },
+];

web/libs/datamanager/src/components/Filters/types/index.js

@@ -5,3 +5,4 @@ export { DatetimeFilter as Datetime } from "./Datetime";
 export { ListFilter as List } from "./List";
 export { NumberFilter as Number, NumberFilter as AgreementSelected } from "./Number";
 export { StringFilter as Image, StringFilter as String } from "./String";
+export { TaskStateFilter as TaskState } from "./TaskStateFilter";

web/libs/datamanager/src/stores/Tabs/tab_column.jsx

@@ -29,6 +29,7 @@ export const ViewColumnType = types.enumeration([
   "TimeSeries",
   "Unknown",
   "AgreementSelected",
+  "TaskState",
 ]);
 
 const typeShortMap = {