MobX

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class TodoStore {
  todos: Todo[] = [];
  
  constructor() {
    makeAutoObservable(this);
  }

  addTodo(text: string) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  toggleTodo(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.completed = !todo.completed;
  }

  get completedTodos() {
    return this.todos.filter(t => t.completed);
  }

  get activeTodos() {
    return this.todos.filter(t => !t.completed);
  }
}

const store = new TodoStore();

// React component
const TodoList = observer(() => {
  return (
    <div>
      <h2>المهام ({store.activeTodos.length})</h2>
      <ul>
        {store.todos.map(todo => (
          <li
            key={todo.id}
            onClick={() => store.toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
      <p>مكتمل: {store.completedTodos.length}</p>
    </div>
  );
});