File Management - Copy this React, Tailwind Component to your project

Tôi muốn tạo một trang web có thiết kế khá giống trang bên trên nhưng nội dung sẽ khác và có một vài thay đổi. Trang tôi muốn tạo trang Quản lý kho có bố cục như sau: Trên cùng thanh điều hướng gồm có 3 tab "Tổng quan", "Quản lý kho", "Báo cáo". Các tab được căn giữa giữa màn hình. Khi nhấn vào tab nào thì thông tin tab đó sẽ xuất hiện (cần có animation khi chuyển giữa các tab một cách mượt mà). Tab "Quản lý kho" sẽ có bố cục như sau: đầu tiên là phần Thêm dữ liệu với tính năng tải file lên (giống như trang phía trên vậy), tiếp theo là một khung tự nhập hiện lên ở dạng bảng (bảng này giống như bảng ở trang phía trên vậy) nhưng sẽ có các cột sau sau: "Tên sản phẩm", "Danh mục" (phần danh mục này gồm các tùy chọn "Bàn phím", "Chuột máy tính", "Tai nghe", "Loa", "Dây sạc"), "Số lượng nhập", "Giá tiền", "Ngày nhập". Bảng này ban đầu hiện ra chỉ có các cột và không có dòng nào mà chỉ có dòng "Thêm dữ liệu". Mỗi khi nhấn "Thêm dữ liệu" thì một dòng trống xuất hiện phía trên dòng thêm dữ liệu và dòng "Thêm dữ liệu bị đẩy xuống cuối bảng (cần có animation mượt mà cho thao tác này). Ở dòng trống xuất hiện này thì người dùng sẽ nhập từng cột dữ liệu vào đây, cuối dòng này có icon thùng rác, khi nhấn vào sẽ xóa đi dòng đó và đẩy tất cả các dòng bên dưới lên (cần có animation mượt mà cho thao tác này). Bên dưới phần này là nút "Thêm dữ liệu vào kho", khi nhấn nút này thì file excel đã thêm ở trên (nếu có) và toàn bộ các dòng được nhập ở bảng tự nhập sẽ biến mất (cần có animation mượt mà cho thao tác này), đồng thời toàn bộ dữ liệu trong file excel và trong bảng tự nhập sẽ được cập nhật vào một bảng ở phía dưới (cần có animation mượt mà cho thao tác này. Bảng này là danh sách các mặt hàng trong kho có các cột như sau: "Tên sản phẩm", "Danh mục" (phần danh mục này gồm các tùy chọn "Bàn phím", "Chuột máy tính", "Tai nghe", "Loa", "Dây sạc"), "Số lượng tồn kho", "Giá tiền", "Ngày nhập". Đối với các dòng dữ liệu có cùng "Tên sản phẩm" thì chỉ xuất hiện một lần trong bảng này thôi và cột "Số lượng tồn kho" là tổng số lượng của các dòng dữ liệu này, "Giá tiền" là giá trung bình của tất cả các dòng dữ liệu trên, "Ngày nhập" là ngày nhập mới nhất trong các dòng dữ liệu. Trên mỗi dòng của bảng này có icon cây bút và thùng rác. Khi nhấn vào thì cho phép sửa dữ liệu trên hàng đó, khi nhấn vào thùng rác thì sẽ xóa dòng dữ liệu đó (cần có animation mượt mà cho thao tác này), đồng thời xuất hiện chữ hoàn tác cuối trang, nếu nhấn hoàn tác thì dòng dữ liệu đó sẽ trở lại (cần có animation mượt mà cho thao tác này)