feat(quota): integrate monthly & role quotas, reset dialogs, profile usage widget, and cron UI (!16) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(quota): integrate monthly & role quotas, reset dialogs, profile usage widget, and cron UI

Features & UI Enhancements: Resource Quota Controls, Profile Usage Widget & Cron UI

Summary

This PR delivers dynamic resource quota visualization, role quota templating, user/role quota reset workflows, and developer cron job scheduling, adhering strictly to the Organic Biophilic design system and bilingual i18n standards.

Key Changes

1. Dashboard vs. Profile Quota Visualization (`quota-usage-widget.tsx`)

Added showMonthly?: boolean (default false) and customizable title/subtitle props.
Dashboard (/): Compact daily focus displaying daily pages crawled (pagesCrawledToday / maxPagesLimit), daily jobs used, real-time concurrent job slots, 00:00 reset countdown, and daily-only warning thresholds.
Profile Settings (/settings/profile): Promoted quota monitoring to a dedicated Section 2 displaying both daily and monthly quotas, next month reset date, and quick Reset Quota action.

2. User & Role Quota Reset Workflows

User Reset Dialog (user-reset-quota-dialog.tsx): Modal allowing administrators to reset user usage to 0, with an option to restore maximum limits to role defaults (resetLimitsToRole).
Role Reset Dialog (role-reset-quota-dialog.tsx): Bulk quota reset for all users sharing a role with syncLimits option.
Integrated quick reset trigger buttons into user-table.tsx and role-table.tsx.
Updated React Query invalidation to ['auth'] in use-users.ts and use-roles.ts for instant cross-application state synchronization without page reloads.

3. Role Quota Templating & User Management

Enhanced RoleFormModal with 5 configurable quota limit inputs and a syncUsersQuota checkbox.
Displayed daily and monthly quota indicators in RoleCard, RoleTable, and UserTable.
Added monthly quota inputs to advanced options in both UserCreateModal and UserEditModal.

4. Developer Settings & Navigation

Added Cron Jobs scheduler view (/settings/developer/cron) with execution triggers, interval controls, and execution result modals.
Integrated quick integration code snippets (cURL & Node.js) directly into the API Keys tab and deprecated standalone docs tab.

5. Bilingual Localization (`translations.ts`)

Synced comprehensive vi and en translation dictionaries for daily/monthly quotas, dialogs, tooltips, and profile settings.

## Features & UI Enhancements: Resource Quota Controls, Profile Usage Widget & Cron UI

### Summary
This PR delivers dynamic resource quota visualization, role quota templating, user/role quota reset workflows, and developer cron job scheduling, adhering strictly to the Organic Biophilic design system and bilingual i18n standards.

---

### Key Changes

#### 1. Dashboard vs. Profile Quota Visualization (`quota-usage-widget.tsx`)
- Added `showMonthly?: boolean` (default `false`) and customizable `title`/`subtitle` props.
- **Dashboard (`/`)**: Compact daily focus displaying daily pages crawled (`pagesCrawledToday / maxPagesLimit`), daily jobs used, real-time concurrent job slots, 00:00 reset countdown, and daily-only warning thresholds.
- **Profile Settings (`/settings/profile`)**: Promoted quota monitoring to a dedicated Section 2 displaying both daily and monthly quotas, next month reset date, and quick Reset Quota action.

#### 2. User & Role Quota Reset Workflows
- **User Reset Dialog (`user-reset-quota-dialog.tsx`)**: Modal allowing administrators to reset user usage to 0, with an option to restore maximum limits to role defaults (`resetLimitsToRole`).
- **Role Reset Dialog (`role-reset-quota-dialog.tsx`)**: Bulk quota reset for all users sharing a role with `syncLimits` option.
- Integrated quick reset trigger buttons into `user-table.tsx` and `role-table.tsx`.
- Updated React Query invalidation to `['auth']` in `use-users.ts` and `use-roles.ts` for instant cross-application state synchronization without page reloads.

#### 3. Role Quota Templating & User Management
- Enhanced `RoleFormModal` with 5 configurable quota limit inputs and a `syncUsersQuota` checkbox.
- Displayed daily and monthly quota indicators in `RoleCard`, `RoleTable`, and `UserTable`.
- Added monthly quota inputs to advanced options in both `UserCreateModal` and `UserEditModal`.

#### 4. Developer Settings & Navigation
- Added Cron Jobs scheduler view (`/settings/developer/cron`) with execution triggers, interval controls, and execution result modals.
- Integrated quick integration code snippets (cURL & Node.js) directly into the API Keys tab and deprecated standalone docs tab.

#### 5. Bilingual Localization (`translations.ts`)
- Synced comprehensive `vi` and `en` translation dictionaries for daily/monthly quotas, dialogs, tooltips, and profile settings.