t0ng7u
1d27da16e7
✨ refactor: move table pagination to CardPro footer for consistent layout
...
Implement unified pagination system by moving pagination from CardTable
to CardPro footer area, ensuring consistent visual layout across all
table pages.
## Changes Made
### Core Components
- **CardPro**: Add `paginationArea` prop to display pagination in card footer
- **CardTable**: Add `hidePagination` prop to control internal pagination visibility
- **utils.js**: Add `createCardProPagination` helper with responsive design
- Mobile: small size + showQuickJumper + showTotal
- Desktop: default size + showTotal only
### Table Pages Updated
- Users table (type1): Add external pagination control
- Channels table (type3): Move pagination to CardPro footer
- Tokens table (type1): Implement unified pagination layout
- Redemptions table (type1): Apply consistent pagination pattern
- Usage-logs table (type2): Migrate to external pagination
- MJ-logs table (type2): Update pagination configuration
- Task-logs table (type2): Standardize pagination approach
### Bug Fixes
- Fix CardTable desktop pagination visibility when hidePagination=true
- Standardize data access pattern across all table components
- Remove redundant data destructuring in users table for consistency
## Benefits
- ✅ Consistent pagination position across all tables
- ✅ Better visual hierarchy with fixed footer pagination
- ✅ Responsive design optimized for mobile and desktop
- ✅ Unified codebase with reusable pagination utility
- ✅ Backward compatible with existing table functionality
## Files Modified
- `web/src/components/common/ui/CardPro.js`
- `web/src/components/common/ui/CardTable.js`
- `web/src/helpers/utils.js`
- `web/src/components/table/*/index.jsx` (7 tables)
- `web/src/components/table/*/*.jsx` (7 table components)
2025-07-20 02:27:33 +08:00
t0ng7u
0990561f23
🎨 chore: integrate ESLint header automation with AGPL-3.0 notice
...
• Added `.eslintrc.cjs`
- Enables `header` + `react-hooks` plugins
- Inserts standardized AGPL-3.0 license banner for © 2025 QuantumNous
- JS/JSX parsing & JSX support configured
• Installed dev-deps: `eslint`, `eslint-plugin-header`, `eslint-plugin-react-hooks`
• Updated `web/package.json` scripts
- `eslint` → lint with cache
- `eslint:fix` → auto-insert/repair license headers
• Executed `eslint --fix` to prepend license banner to all JS/JSX files
• Ignored runtime cache
- Added `.eslintcache` to `.gitignore` & `.dockerignore`
Result: consistent AGPL-3.0 license headers, reproducible linting across local dev & CI.
2025-07-19 03:30:44 +08:00
t0ng7u
8d964629e0
🌟 feat(ui): reusable CompactModeToggle & mobile-friendly CardPro
...
Summary
-------
Introduce a reusable compact-mode toggle component and greatly improve the CardPro header for small screens. Removes duplicated code, adds i18n support, and refines overall responsiveness.
Details
-------
🎨 UI / Components
• Create `common/ui/CompactModeToggle.js`
– Provides a single source of truth for switching between “Compact list” and “Adaptive list”
– Automatically hides itself on mobile devices via `useIsMobile()`
• Refactor table modules to use the new component
– `Users`, `Tokens`, `Redemptions`, `Channels`, `TaskLogs`, `MjLogs`, `UsageLogs`
– Deletes legacy in-file toggle buttons & reduces repetition
📱 CardPro improvements
• Hide `actionsArea` and `searchArea` on mobile, showing a single “Show Actions / Hide Actions” toggle button
• Add i18n: texts are now pulled from injected `t()` function (`显示操作项` / `隐藏操作项` etc.)
• Extend PropTypes to accept the `t` prop; supply a safe fallback
• Minor cleanup: remove legacy DOM observers & flag CSS, simplify logic
🔧 Integration
• Pass the `t` translation function to every `CardPro` usage across table pages
• Remove temporary custom class hooks after logic simplification
Benefits
--------
✓ Consistent, DRY compact-mode handling across the entire dashboard
✓ Better mobile experience with decluttered headers
✓ Full translation support for newly added strings
✓ Easier future maintenance (single compact toggle, unified CardPro API)
2025-07-19 01:34:59 +08:00
t0ng7u
acf6ec9349
♻️ refactor: restructure LogsTable into modular component architecture
...
Refactor the monolithic LogsTable component (1453 lines) into a modular,
maintainable architecture following the channels table pattern.
## What Changed
### 🏗️ Architecture
- Split single large file into focused, single-responsibility components
- Introduced custom hook `useLogsData` for centralized state management
- Created dedicated column definitions file for better organization
- Implemented modal components for user interactions
### 📁 New Structure
```
web/src/components/table/usage-logs/
├── index.jsx # Main page component orchestrator
├── LogsTable.jsx # Pure table rendering component
├── LogsActions.jsx # Actions area (stats + compact mode)
├── LogsFilters.jsx # Search form component
├── LogsColumnDefs.js # Column definitions and renderers
└── modals/
├── ColumnSelectorModal.jsx # Column visibility settings
└── UserInfoModal.jsx # User information display
web/src/hooks/logs/
└── useLogsData.js # Custom hook for state & logic
```
### 🎯 Key Improvements
- **Maintainability**: Clear separation of concerns, easier to understand
- **Reusability**: Modular components can be reused independently
- **Performance**: Optimized with `useMemo` for column rendering
- **Testing**: Single-responsibility components easier to test
- **Developer Experience**: Better code organization and readability
### 🔧 Technical Details
- Preserved all existing functionality and user experience
- Maintained backward compatibility through existing import path
- Centralized all business logic in `useLogsData` custom hook
- Extracted column definitions to separate module with render functions
- Split complex UI into focused components (table, actions, filters, modals)
### 🐛 Fixes
- Fixed Semi UI component import issues (`Typography.Paragraph`)
- Resolved module export dependencies
- Maintained consistent prop passing patterns
## Breaking Changes
None - all existing imports and functionality preserved.
2025-07-18 22:04:54 +08:00
