diff --git a/src/feature-module/projects/projecttracker.jsx b/src/feature-module/projects/projecttracker.jsx index 5d15244..fb90682 100644 --- a/src/feature-module/projects/projecttracker.jsx +++ b/src/feature-module/projects/projecttracker.jsx @@ -8,11 +8,15 @@ import { Plus } from 'feather-icons-react'; import dayjs from 'dayjs'; +import { useSelector } from 'react-redux'; const { Option } = Select; const { RangePicker } = DatePicker; const ProjectTracker = () => { + // Get theme from Redux + const isDarkMode = useSelector((state) => state.theme?.isDarkMode); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [filterStatus, setFilterStatus] = useState('All Status'); const [filterManager, setFilterManager] = useState('All Managers'); @@ -26,21 +30,21 @@ const ProjectTracker = () => { // API data state const [projectData, setProjectData] = useState([]); const [loading, setLoading] = useState(false); - const [pagination, setPagination] = useState({ - currentPage: 1, - pageSize: 10, - totalCount: 0, - totalPages: 1 - }); + + // Pagination state + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [totalCount, setTotalCount] = useState(0); + const [totalPages, setTotalPages] = useState(1); // Load projects from API - const loadProjects = async (page = 1, pageSize = 10) => { + const loadProjects = async (page = currentPage, size = pageSize) => { setLoading(true); try { const apiBaseUrl = process.env.REACT_APP_API_BASE_URL || ''; console.log('Loading projects from:', `${apiBaseUrl}Projects`); - const response = await fetch(`${apiBaseUrl}Projects?page=${page}&pageSize=${pageSize}`, { + const response = await fetch(`${apiBaseUrl}Projects?page=${page}&pageSize=${size}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -78,28 +82,30 @@ const ProjectTracker = () => { })); setProjectData(mappedData); - setPagination(result.pagination || { - currentPage: 1, - pageSize: 10, - totalCount: result.data.length, - totalPages: 1 - }); + + // Update pagination state + if (result.pagination) { + setCurrentPage(result.pagination.currentPage); + setTotalCount(result.pagination.totalCount); + setTotalPages(result.pagination.totalPages); + } else { + setTotalCount(result.data.length); + setTotalPages(Math.ceil(result.data.length / size)); + } console.log('Mapped data:', mappedData); } else { console.warn('No data found in API response'); setProjectData([]); + setTotalCount(0); + setTotalPages(1); } } catch (error) { console.error('Error loading projects:', error); // Set empty data on error setProjectData([]); - setPagination({ - currentPage: 1, - pageSize: 10, - totalCount: 0, - totalPages: 1 - }); + setTotalCount(0); + setTotalPages(1); } finally { setLoading(false); } @@ -148,10 +154,32 @@ const ProjectTracker = () => { }, []); // Handle pagination change - const handleTableChange = (paginationInfo) => { - loadProjects(paginationInfo.current, paginationInfo.pageSize); + const handlePageChange = (page) => { + setCurrentPage(page); + loadProjects(page, pageSize); }; + // Handle page size change + const handlePageSizeChange = (newPageSize) => { + setPageSize(newPageSize); + setCurrentPage(1); // Reset to first page when changing page size + loadProjects(1, newPageSize); + }; + + // Handle table change (for Ant Design Table) + const handleTableChange = (paginationInfo) => { + if (paginationInfo.current !== currentPage) { + handlePageChange(paginationInfo.current); + } + if (paginationInfo.pageSize !== pageSize) { + handlePageSizeChange(paginationInfo.pageSize); + } + }; + + // Calculate pagination info + const startRecord = totalCount > 0 ? (currentPage - 1) * pageSize + 1 : 0; + const endRecord = Math.min(currentPage * pageSize, totalCount); + // Table columns configuration const columns = [ { @@ -168,13 +196,13 @@ const ProjectTracker = () => { ) }, { - title: '', + title: 'Mức độ', dataIndex: 'priority', - width: 20, + width: 30, render: (priority) => (
{ ) }, { - title: 'Category', + title: 'Danh mục', dataIndex: 'category', + width: 100, key: 'category', render: (category, record) => ( @@ -408,6 +437,94 @@ const ProjectTracker = () => {
+ + { dataSource={projectData} loading={loading} onChange={handleTableChange} - pagination={{ - current: pagination.currentPage, - pageSize: pagination.pageSize, - total: pagination.totalCount, - showSizeChanger: true, - showQuickJumper: true, - showTotal: (total, range) => - `Row Per Page: ${range[1] - range[0] + 1} Entries | Showing ${range[0]} to ${range[1]} of ${total} entries` - }} + pagination={false} /> + + {/* Custom Pagination */} +
{ + e.currentTarget.style.transform = 'translateY(-2px)'; + e.currentTarget.style.boxShadow = '0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(52, 152, 219, 0.2)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.transform = 'translateY(0)'; + e.currentTarget.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1)'; + }} + > + {/* Pagination Info */} +
+
+ Row Per Page + + Entries +
+ +
+
+ 📊 +
+ + Showing {startRecord} to {endRecord} of {totalCount} entries + +
+
+ + {/* Pagination Buttons */} +
+ {/* Numbered Pagination Buttons */} + {Array.from({ length: totalPages }, (_, i) => { + const pageNum = i + 1; + const isActive = currentPage === pageNum; + + return ( + + ); + })} +
+