fix: polish channel groups and add production deployment

src/apps/client/ClientBatchTasksPage.tsx

@@ -103,6 +103,7 @@ export function ClientBatchTasksPage() {
   const [application, setApplication] = useState('all');
   const [submittedDateRange, setSubmittedDateRange] = useState<DateRangeValue>({});
   const [hoveredTaskId, setHoveredTaskId] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
   const [selectedTask, setSelectedTask] = useState<BatchTask | null>(null);
 
   function loadTasks() {
@@ -136,6 +137,14 @@ export function ClientBatchTasksPage() {
     const matchesEndDate = !submittedDateRange.end || submittedDate <= submittedDateRange.end;
     return matchesKeyword && matchesApplication && matchesStartDate && matchesEndDate;
   });
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(filteredTasks.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visibleTasks = filteredTasks.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [application, keyword, submittedDateRange.end, submittedDateRange.start, tasks.length]);
 
   function terminateTask(id: string) {
     const source = tasks.find((item) => item.id === id);
@@ -253,7 +262,7 @@ export function ClientBatchTasksPage() {
               </tr>
             </thead>
             <tbody>
-              {filteredTasks.map((record, index) => {
+              {visibleTasks.map((record, index) => {
                 const { signature, content } = splitSignature(record.templateContent);
 
                 return (
@@ -284,7 +293,14 @@ export function ClientBatchTasksPage() {
             </tbody>
           </table>
         </div>
-        <Pagination total={filteredTasks.length} />
+        <Pagination
+          nextDisabled={currentPage >= totalPages}
+          onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
+          onPrevious={() => setPage((value) => Math.max(1, value - 1))}
+          page={currentPage}
+          previousDisabled={currentPage <= 1}
+          total={filteredTasks.length}
+        />
       </div>
 
       <Modal