@openway/ui 1.0.0 → 1.0.2

package/docs/hooks/useMutationApp.md

@@ -0,0 +1,242 @@
+# ⚡ Hook `useMutationApp` (`@openway/ui/query`)
+
+Hook adapter chuyên dụng bọc quanh `useMutation` của **TanStack Query v5**, được thiết kế tối ưu cho các ứng dụng sử dụng hệ sinh thái **`@openway/ui`**. Hook giúp loại bỏ boilerplate code khi thao tác tạo, sửa, xóa (CUD), tự động hóa toàn diện quy trình hiển thị Toast thông báo trạng thái và làm mới cache dữ liệu (Query Invalidation).
+
+---
+
+## 🌟 Điểm nổi bật
+
+- **Tự động hóa Toast Thông minh**:
+  - Tự động hiển thị `toast.loading` khi bắt đầu thực thi mutation.
+  - Tự động chuyển đổi mượt mà sang `toast.success` hoặc `toast.error` khi hoàn tất mà không bị nhảy popup thừa.
+- **Trích xuất Lỗi Tự động (`extractErrorMessage`)**:
+  - Tự động bóc tách thông điệp lỗi từ cấu trúc `error.response?.data?.message`, `error.response?.data?.error`, NestJS/Laravel validation array, HTTP status codes hoặc standard `Error.message`.
+  - Không cần phải thủ công `catch (err) { toast.error(err.response.data.message) }` ở từng component.
+- **Tự động Invalidate Cache Query**:
+  - Hỗ trợ option `invalidateQueries` nhận vào một hoặc nhiều `QueryKey` (ví dụ `["teachers"]`, `["classes"]`) hoặc hàm tính toán động theo `(data, variables)`.
+  - Khi mutation thành công, tự động gọi `queryClient.invalidateQueries` để các bảng `<Table />` (`useTableQuery`) hoặc `<Select />` (`useSelectInfiniteQuery`) lập tức hiển thị dữ liệu mới nhất.
+- **Bổ sung `isLoading` (alias `isPending`)**:
+  - Cung cấp `isLoading: boolean` tương thích với thói quen sử dụng của TanStack Query v4 và code giao diện thân thuộc.
+- **Zero `any` & Chuẩn Generic Type**:
+  - Hỗ trợ đầy đủ 4 tham số generic type chuẩn của TanStack Query: `<TData, TError, TVariables, TContext>`.
+  - Giữ nguyên toàn bộ options và callback lifecycle (`onMutate`, `onSuccess`, `onError`, `onSettled`).
+
+---
+
+## 🚀 Import
+
+```tsx
+import { useMutationApp, extractErrorMessage } from "@openway/ui/query";
+import type {
+  UseMutationAppOptions,
+  UseMutationAppReturn,
+  UseMutationAppToastOptions,
+  InvalidateQueryTarget,
+} from "@openway/ui/query";
+```
+
+---
+
+## 📖 Hướng dẫn sử dụng
+
+### 1. Thêm mới bản ghi (Create) với Shortcut Message
+
+Cách đơn giản nhất để tạo một mutation có thông báo thành công và tự động refresh dữ liệu bảng:
+
+```tsx
+import { Button, Input, Modal } from "@openway/ui";
+import { useMutationApp } from "@openway/ui/query";
+import { useState } from "react";
+
+interface CreateTeacherDto {
+  name: string;
+  email: string;
+  subjectId: string;
+}
+
+export function CreateTeacherModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  const { mutate, isLoading } = useMutationApp({
+    mutationFn: async (dto: CreateTeacherDto) => {
+      const res = await fetch("/api/teachers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(dto),
+      });
+      if (!res.ok) throw await res.json();
+      return res.json();
+    },
+    // Hiển thị toast thành công & tự động báo lỗi nếu server trả về mã lỗi
+    loadingMessage: "Đang lưu thông tin giáo viên...",
+    successMessage: "Thêm mới giáo viên thành công!",
+    // Tự động làm mới cache của bảng danh sách giáo viên
+    invalidateQueries: [["teachers"]],
+    onSuccess: () => {
+      onClose();
+      setName("");
+      setEmail("");
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    mutate({ name, email, subjectId: "math" });
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} title="Thêm mới Giáo viên">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <Input label="Họ và tên" value={name} onChange={(e) => setName(e.target.value)} required />
+        <Input label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        <div className="flex justify-end gap-2 pt-4">
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            Hủy
+          </Button>
+          <Button type="submit" loading={isLoading}>
+            Lưu giáo viên
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+```
+
+---
+
+### 2. Cập nhật bản ghi với Toast động (`(data, variables)`)
+
+Có thể truyền function để tạo thông điệp Toast chứa tên hoặc thông tin động từ dữ liệu:
+
+```tsx
+import { useMutationApp } from "@openway/ui/query";
+
+interface UpdateUserDto {
+  id: string;
+  name: string;
+}
+
+export function useUpdateUser() {
+  return useMutationApp({
+    mutationFn: async ({ id, name }: UpdateUserDto) => {
+      const res = await fetch(`/api/users/${id}`, {
+        method: "PUT",
+        body: JSON.stringify({ name }),
+      });
+      return res.json();
+    },
+    toast: {
+      loading: (vars) => `Đang cập nhật thông tin người dùng #${vars.id}...`,
+      success: (data, vars) => `Cập nhật người dùng "${vars.name}" thành công!`,
+      error: (err) => `Không thể cập nhật: ${extractErrorMessage(err)}`,
+    },
+    // Làm mới cả danh sách chung và chi tiết user
+    invalidateQueries: (data, vars) => [
+      ["users"],
+      ["user-detail", vars.id],
+    ],
+  });
+}
+```
+
+---
+
+### 3. Xóa dữ liệu (Delete) & Invalidate nhiều Query
+
+```tsx
+import { Button } from "@openway/ui";
+import { useMutationApp } from "@openway/ui/query";
+
+export function DeleteClassButton({ classId, className }: { classId: string; className: string }) {
+  const { mutate, isLoading } = useMutationApp({
+    mutationFn: async (id: string) => {
+      await fetch(`/api/classes/${id}`, { method: "DELETE" });
+    },
+    successMessage: `Đã xóa lớp ${className} khỏi hệ thống!`,
+    // Invalidate cả bảng lớp học và số liệu thống kê ở dashboard
+    invalidateQueries: [
+      ["classes"],
+      ["dashboard-stats"],
+    ],
+  });
+
+  return (
+    <Button
+      variant="soft"
+      color="error"
+      loading={isLoading}
+      onClick={() => {
+        if (confirm(`Bạn có chắc chắn muốn xóa lớp ${className}?`)) {
+          mutate(classId);
+        }
+      }}
+    >
+      Xóa lớp
+    </Button>
+  );
+}
+```
+
+---
+
+### 4. Tắt Toast hoặc Tùy biến Giao diện Toast
+
+```tsx
+// Tắt hoàn toàn toast (nếu muốn tự xử lý UI riêng)
+const mutation1 = useMutationApp({
+  mutationFn: trackUserActivity,
+  toast: false,
+});
+
+// Tùy biến vị trí và kiểu hiển thị của Toast
+const mutation2 = useMutationApp({
+  mutationFn: updateSettings,
+  toast: {
+    variant: "solid",
+    success: "Đã lưu cài đặt!",
+    options: {
+      position: "bottom-center",
+      duration: 3000,
+    },
+  },
+});
+```
+
+---
+
+## 🎛️ Bảng Options (`UseMutationAppOptions`)
+
+Kế thừa toàn bộ options chuẩn của `UseMutationOptions` từ TanStack Query v5, bổ sung thêm:
+
+| Tên Option | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `mutationFn` | `(variables: TVariables) => Promise<TData>` | `undefined` | Hàm bất đồng bộ gọi API thực thi tác vụ mutation. |
+| `invalidateQueries` | `QueryKey \| QueryKey[] \| InvalidateQueryFilters \| InvalidateQueryFilters[] \| ((data, vars) => ...)` | `undefined` | Khóa truy vấn hoặc danh sách khóa truy vấn cần tự động làm mới khi mutation thành công. |
+| `invalidateOptions` | `InvalidateOptions` | `undefined` | Tùy chọn nâng cao khi invalidate (ví dụ: `throwOnError`, `cancelRefetch`). |
+| `toast` | `boolean \| UseMutationAppToastOptions` | `true` | Cấu hình Toast thông báo. Truyền `false` để tắt toàn bộ toast. |
+| `loadingMessage` | `ReactNode \| ((vars) => ReactNode)` | `undefined` | Shortcut đặt thông báo loading khi đang chạy. |
+| `successMessage` | `ReactNode \| ((data, vars) => ReactNode)` | `undefined` | Shortcut đặt thông báo khi thành công. |
+| `errorMessage` | `ReactNode \| ((err, vars) => ReactNode)` | `undefined` | Shortcut đặt thông báo lỗi tùy biến (mặc định tự bóc tách lỗi qua `extractErrorMessage`). |
+| `onSuccess` | `(data, variables, context) => Promise<unknown> \| unknown` | `undefined` | Callback chạy sau khi mutation thành công và sau khi đã refresh cache. |
+| `onError` | `(error, variables, context) => Promise<unknown> \| unknown` | `undefined` | Callback chạy khi mutation gặp lỗi. |
+| `onSettled` | `(data, error, variables, context) => Promise<unknown> \| unknown` | `undefined` | Callback chạy khi mutation kết thúc (dù thành công hay thất bại). |
+
+---
+
+## 📦 Bảng Return (`UseMutationAppReturn`)
+
+Kế thừa toàn bộ kết quả trả về của `UseMutationResult` từ TanStack Query v5:
+
+| Thuộc tính | Kiểu dữ liệu | Mô tả |
+| :--- | :--- | :--- |
+| `mutate` | `(variables: TVariables, options?) => void` | Kích hoạt mutation theo cơ chế fire-and-forget. |
+| `mutateAsync` | `(variables: TVariables, options?) => Promise<TData>` | Kích hoạt mutation và trả về Promise để có thể `await`. |
+| `isLoading` | `boolean` | **Alias tiện ích của `isPending`**, là `true` khi mutation đang chạy. |
+| `isPending` | `boolean` | Trạng thái đang chạy của TanStack Query v5. |
+| `isSuccess` | `boolean` | Là `true` khi mutation đã hoàn tất thành công. |
+| `isError` | `boolean` | Là `true` khi mutation thất bại. |
+| `data` | `TData \| undefined` | Dữ liệu trả về từ `mutationFn` khi thành công. |
+| `error` | `TError \| null` | Đối tượng lỗi trả về từ `mutationFn` khi thất bại. |
+| `reset` | `() => void` | Đặt lại trạng thái mutation về ban đầu (`idle`). |

package/docs/hooks/useSelectInfiniteQuery.md

@@ -0,0 +1,123 @@
+# 🔽 Hook `useSelectInfiniteQuery` (`@openway/ui/query`)
+
+Hook adapter chuyên dụng kết hợp **TanStack Query v5** (`useInfiniteQuery`) với **`useInfiniteScroll`** và **`Skeleton`**, dành riêng cho các thành phần `<Select />` và `<MultiSelect />` ở chế độ máy chủ (`searchMode="server"`).
+
+---
+
+## 🌟 Điểm nổi bật
+
+- **Tự động hóa hoàn toàn**: Trả về trọn gói `selectProps` sẵn sàng spread thẳng vào `<Select {...selectProps} />` hoặc `<MultiSelect {...selectProps} />`.
+- **Phân trang Vô tận (Infinite Scroll)**: Tự động quan sát khi người dùng cuộn đến đáy danh sách qua `useInfiniteScroll` (native `IntersectionObserver`), kích hoạt `fetchNextPage()`.
+- **Hiệu ứng Skeleton Loading**: Tự động hiển thị 2 dòng `Skeleton` nhấp nháy mô phỏng option item tại `listFooter` khi đang tải thêm trang (`isFetchingNextPage`).
+- **Gộp & Khử Trùng lặp Options**: Tự động gom tụ các trang dữ liệu (`pages`) thành danh sách phẳng và khử trùng lặp theo `value`.
+- **Chống Double Debounce**: `<Select />` tự chịu trách nhiệm debounce từ khóa người dùng gõ theo `debounceMs` rồi mới gọi `onSearch`, hook nhận sự kiện và kích hoạt query ngay lập tức, không tạo độ trễ thừa thãi.
+- **Zero `any`**: Type-safe 100% với Generic type `TData`, `TResponse`, `TPageParam`.
+
+---
+
+## 🚀 Import
+
+```tsx
+import { useSelectInfiniteQuery } from "@openway/ui/query";
+import type {
+  SelectQueryParams,
+  UseSelectInfiniteQueryOptions,
+  UseSelectInfiniteQueryReturn,
+} from "@openway/ui/query";
+```
+
+---
+
+## 📖 Hướng dẫn sử dụng
+
+### 1. Phân trang Server cơ bản với Cursor / NextPage
+
+```tsx
+import { Select } from "@openway/ui";
+import { useSelectInfiniteQuery } from "@openway/ui/query";
+
+interface Product {
+  id: number;
+  title: string;
+  price: number;
+}
+
+interface ProductPageResponse {
+  items: Product[];
+  nextPage?: number;
+}
+
+export function InfiniteProductSelect() {
+  const { selectProps, query } = useSelectInfiniteQuery<
+    Product,
+    ProductPageResponse,
+    number
+  >({
+    queryKey: ["products-infinite"],
+    queryFn: async ({ pageParam, search }) => {
+      const res = await fetch(
+        `/api/products?page=${pageParam}&search=${encodeURIComponent(search)}`
+      );
+      return res.json();
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+    mapOption: (item) => {
+      const product = item as Product;
+      return {
+        value: product.id,
+        label: product.title,
+        description: `${product.price.toLocaleString()} đ`,
+        data: product,
+      };
+    },
+    debounceMs: 300,
+    endMessage: "Đã hiển thị toàn bộ sản phẩm",
+  });
+
+  return (
+    <div className="max-w-md">
+      <Select
+        {...selectProps}
+        label="Chọn sản phẩm"
+        placeholder="Tìm kiếm theo tên sản phẩm..."
+        searchable
+        clearable
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## 🎛️ Bảng Options (`UseSelectInfiniteQueryOptions`)
+
+| Tên Option | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `queryKey` | `readonly unknown[]` | **Bắt buộc** | Query key gốc. `[{ search, filters }]` tự động được thêm vào cuối queryKey. |
+| `queryFn` | `(params, context) => Promise<TResponse>` | **Bắt buộc** | Hàm fetch API theo từng trang, nhận `pageParam`, `search`, `filters`. |
+| `initialPageParam` | `TPageParam` | `1` | Giá trị tham số trang ban đầu (page hoặc cursor). |
+| `getNextPageParam` | `(lastPage, allPages, ...) => TPageParam` | Tự động đoán (`nextPage`, `nextCursor`...) | Xác định tham số trang kế tiếp. Trả về `undefined` khi hết dữ liệu. |
+| `selectOptions` | `(response) => SelectOptionItem<TData>[]` | Tự động bóc tách | Hàm trích xuất mảng option từ response mỗi trang. |
+| `mapOption` | `(item, index) => SelectOptionItem<TData>` | `undefined` | Hàm biến đổi phần tử thô thành `SelectOptionItem`. |
+| `debounceMs` | `number` | `300` | Thời gian hoãn tìm kiếm truyền xuống cho Select. |
+| `skeletonLines` | `number` | `2` | Số dòng Skeleton hiển thị ở đáy danh sách khi tải thêm trang. |
+| `endMessage` | `ReactNode` | `undefined` | Văn bản hiển thị dưới đáy danh sách khi đã tải hết tất cả trang. |
+
+---
+
+## 📦 Giá trị trả về (`UseSelectInfiniteQueryReturn`)
+
+- `selectProps`: Gói props truyền thẳng vào `<Select />` hoặc `<MultiSelect />`:
+  - `options`: Mảng options gom tụ từ tất cả các trang đã tải.
+  - `isLoading`: Trạng thái đang tải trang đầu tiên.
+  - `searchMode: "server"`
+  - `debounceMs`: Thời gian debounce.
+  - `onSearch`: Handler nhận từ khóa và filters từ Select.
+  - `listFooter`: Sentinel kèm Skeleton loading khi đang cuộn tải trang tiếp.
+- `query`: Đối tượng `UseInfiniteQueryResult` từ TanStack Query.
+- `options`: Danh sách options đầy đủ.
+- `search`, `setSearch`: Từ khóa tìm kiếm hiện tại.
+- `filters`, `setFilters`: Bộ lọc menu hiện tại.
+- `reset`: Đặt lại toàn bộ tìm kiếm và bộ lọc về giá trị ban đầu.

package/docs/hooks/useTableQuery.md

@@ -0,0 +1,124 @@
+# 📊 Hook `useTableQuery` (`@openway/ui/query`)
+
+Hook adapter chuyên dụng kết nối **TanStack Query v5** (`useQuery`) với component `<Table />`, tự động hóa toàn bộ quy trình phân trang máy chủ (Server-side pagination), sắp xếp nhiều cột (Sorting), lọc dữ liệu (Filtering), và tối ưu UX qua `keepPreviousData`.
+
+---
+
+## 🌟 Điểm nổi bật
+
+- **Tự động đồng bộ với Table**: Trả về trọn gói `tableProps` sẵn sàng spread thẳng vào `<Table {...tableProps} />`.
+- **Server Pagination**: Quản lý `page` (1-indexed), `pageSize`, tự động chuyển trang và tính toán tổng số trang (`pageCount`).
+- **Server Sorting**: Đồng bộ `sortBy` và `sortOrder` ("asc" | "desc") từ trạng thái click header của Table gửi lên server.
+- **Server Filtering & Auto-Reset**: Tự động chuyển đổi mảng filter của TanStack Table thành dictionary phẳng `Record<string, unknown>`, tự động đưa trang về trang 1 khi người dùng thay đổi bộ lọc (`autoResetPageIndex`).
+- **Giữ dữ liệu mượt mà (`keepPreviousData`)**: Dữ liệu trang cũ vẫn hiển thị trong lúc trang mới đang tải ngầm, loại bỏ hiện tượng nhấp nháy trắng bảng.
+- **Zero `any`**: Type-safe 100% với Generic type `TData` và `TResponse`.
+
+---
+
+## 🚀 Import
+
+```tsx
+import { useTableQuery } from "@openway/ui/query";
+import type {
+  TableQueryParams,
+  UseTableQueryOptions,
+  UseTableQueryReturn,
+} from "@openway/ui/query";
+```
+
+---
+
+## 📖 Hướng dẫn sử dụng
+
+### Phân trang, Sắp xếp & Lọc phía Máy chủ
+
+```tsx
+import { Table, type ColumnDef } from "@openway/ui";
+import { useTableQuery } from "@openway/ui/query";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+interface UserApiResponse {
+  data: User[];
+  total: number;
+}
+
+const columns: ColumnDef<User>[] = [
+  { accessorKey: "name", header: "Họ và tên", enableSorting: true },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "role", header: "Vai trò" },
+];
+
+export function UserManagementTable() {
+  const { tableProps, query, page, setPage } = useTableQuery<User, UserApiResponse>({
+    queryKey: ["users-table"],
+    queryFn: async (params) => {
+      const searchParams = new URLSearchParams({
+        page: String(params.page),
+        pageSize: String(params.pageSize),
+        ...(params.sortBy && { sortBy: params.sortBy, sortOrder: params.sortOrder ?? "asc" }),
+      });
+      const res = await fetch(`/api/users?${searchParams}`);
+      return res.json();
+    },
+    // Tự động bóc tách mảng dữ liệu và tổng số dòng từ response
+    selectData: (res) => res.data,
+    selectTotal: (res) => res.total,
+    initialPageSize: 10,
+  });
+
+  return (
+    <div className="space-y-4">
+      <Table
+        {...tableProps}
+        columns={columns}
+        border
+        striped
+        hoverable
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## 🎛️ Bảng Options (`UseTableQueryOptions`)
+
+| Tên Option | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `queryKey` | `readonly unknown[]` | **Bắt buộc** | Query key gốc của TanStack Query. |
+| `queryFn` | `(params, context) => Promise<TResponse>` | **Bắt buộc** | Hàm fetch dữ liệu từ API nhận `TableQueryParams`. |
+| `selectData` | `(res) => TData[]` | Tự trích xuất `data/items/results/rows` | Hàm lấy mảng dữ liệu từ API response. |
+| `selectTotal` | `(res) => number` | Tự trích xuất `total/totalCount/count` | Hàm lấy tổng số bản ghi từ API response. |
+| `initialPage` | `number` | `1` | Trang bắt đầu (1-indexed). |
+| `initialPageSize` | `number` | `10` | Số dòng hiển thị mỗi trang. |
+| `autoResetPageIndex` | `boolean` | `true` | Tự động quay về trang 1 khi đổi bộ lọc hoặc sắp xếp. |
+| `queryOptions` | `Omit<UseQueryOptions, ...>` | `undefined` | Các cấu hình nâng cao của TanStack Query (`staleTime`, `refetchInterval`...). |
+
+---
+
+## 📦 Giá trị trả về (`UseTableQueryReturn`)
+
+- `tableProps`: Gói props truyền thẳng vào `<Table />`:
+  - `data: TData[]`
+  - `pageCount: number`
+  - `pagination: { pageIndex, pageSize }`
+  - `onPaginationChange: OnChangeFn<PaginationState>`
+  - `sorting: SortingState`
+  - `onSortingChange: OnChangeFn<SortingState>`
+  - `columnFilters: ColumnFiltersState`
+  - `onColumnFiltersChange: OnChangeFn<ColumnFiltersState>`
+  - `isLoading: boolean`
+  - `manualPagination: true`
+  - `manualSorting: true`
+  - `manualFiltering: true`
+- `query`: Query result từ `useQuery`.
+- `page`, `setPage`: Xem và thay đổi số trang hiện tại.
+- `pageSize`, `setPageSize`: Xem và thay đổi số dòng/trang.
+- `resetFilters`: Đặt lại toàn bộ bộ lọc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openway/ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "license": "MIT",
   "publishConfig": {
@@ -15,49 +15,68 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./query": {
+      "types": "./dist/query.d.ts",
+      "import": "./dist/query.js",
+      "require": "./dist/query.cjs"
     }
   },
   "files": [
     "dist",
+    "docs",
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "pnpm build",
-    "lint": "eslint",
-    "check-types": "tsc --noEmit",
-    "doctor": "pnpm dlx react-doctor@latest",
-    "cypress:open": "cypress open --component",
-    "cypress:run": "cypress run --component"
-  },
   "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
     "next": ">=16.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": ">=4.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    }
+  },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.27.20",
     "@radix-ui/react-slider": "^1.4.7",
     "@tanstack/match-sorter-utils": "^9.1.2",
+    "@tanstack/react-table": "^9.2.4",
+    "react-dropzone": "^20.1.1",
     "react-easy-crop": "^6.2.3",
     "react-textarea-autosize": "^8.5.9",
     "sonner": "^2.0.8"
   },
   "devDependencies": {
-    "eslint-config-next": "16.3.4",
     "@tailwindcss/postcss": "^4.3.3",
+    "@tanstack/react-query": "^5.102.8",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "cypress": "^15.21.0",
     "eslint": "^9.39.1",
+    "eslint-config-next": "16.3.4",
+    "eslint-config-prettier": "^10.1.8",
     "next": "16.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint",
+    "check-types": "tsc --noEmit",
+    "doctor": "pnpm dlx react-doctor@latest",
+    "cypress:open": "cypress open --component",
+    "cypress:run": "cypress run --component"
   }
-}
+}