feat: command center starting page#365
Conversation
WalkthroughThis pull request introduces new Vue components and updates to existing card components within the Command Center UI. A new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard
participant ChannelStore
participant StatCard
participant ActiveCard
User->>Dashboard: Request Command Center page
Dashboard->>ChannelStore: Fetch channel state
ChannelStore-->>Dashboard: Return state data
Dashboard->>StatCard: Render stat cards with computed data
StatCard->>ActiveCard: Use ActiveCard for layout
ActiveCard-->>StatCard: Render card view
StatCard-->>Dashboard: Display stat card
Dashboard-->>User: Present updated dashboard
Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
Progress: resolved 0, reused 0, downloaded 1, added 0 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
apps/web-app/app/pages/command-center/product/[productId]/usage.vue (1)
46-46: 💡 Verification agent🧩 Analysis chain
Verify row selection functionality consistency.
According to the AI summary, the checkbox UI for row selection has been removed. However, I notice that row selection binding (
v-model:row-selection="rowSelection") is still present in the UTable component, therowSelectionref is still defined, and there's UI that displays the count of selected rows. This might lead to inconsistent functionality.If row selection is meant to be removed completely, consider removing these related elements as well.
Also applies to: 65-65, 104-104
🏁 Script executed:
#!/bin/bash # Check if there are any remaining selection UI components in the file grep -B 2 -A 2 "UCheckbox" apps/web-app/app/pages/command-center/product/[productId]/usage.vue # Check if the selection column exists elsewhere in the file grep -B 5 -A 5 "select.*column" apps/web-app/app/pages/command-center/product/[productId]/usage.vue # Check if the selection functionality is still used in the component grep -B 2 -A 2 "rowSelection" apps/web-app/app/pages/command-center/product/[productId]/usage.vueLength of output: 583
Action: Verify and Remove Row Selection Bindings if Unintended
The verification confirms that although the checkbox UI appears to have been removed (no UCheckbox UI found), the
v-model:row-selection="rowSelection"binding remains in the UTable component, and therowSelectionref is still defined. This creates an inconsistency that can lead to unexpected behavior.
- File:
apps/web-app/app/pages/command-center/product/[productId]/usage.vue
- Line 46 (and similar occurrences at lines 65 and 104): The
v-model:row-selection="rowSelection"attribute exists.- Variable Declaration: The
rowSelectionref is still declared and utilized.If the design intent was to completely remove row selection functionality, please ensure that these bindings and any related UI elements (such as the row count display) are also removed to maintain consistency.
🧹 Nitpick comments (2)
apps/web-app/i18n/locales/ka-GE.json (1)
250-250: Consider translating "Category" to Georgian.While the addition is good, the value "Category" appears to be in English rather than translated to Georgian, unlike most other entries in this localization file.
apps/web-app/app/pages/command-center/index.vue (1)
23-23: Make sure useChannelStore is importedI don't see an import statement for
useChannelStore. Ensure it's properly imported or globally registered.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (17)
apps/web-app/app/components/CommandCenter/ActiveCard.vue(1 hunks)apps/web-app/app/components/CommandCenter/CreateCard.vue(1 hunks)apps/web-app/app/components/CommandCenter/LinkCard.vue(1 hunks)apps/web-app/app/components/CommandCenter/MenuCategoryCard.vue(1 hunks)apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue(1 hunks)apps/web-app/app/components/CommandCenter/ProductVariantCard.vue(2 hunks)apps/web-app/app/components/CommandCenter/StatCard.vue(1 hunks)apps/web-app/app/pages/command-center/index.vue(1 hunks)apps/web-app/app/pages/command-center/menu/[menuId]/category/[categoryId].vue(1 hunks)apps/web-app/app/pages/command-center/product/[productId]/usage.vue(2 hunks)apps/web-app/app/pages/command-center/product/index.vue(0 hunks)apps/web-app/i18n/locales/en-US.json(1 hunks)apps/web-app/i18n/locales/ka-GE.json(1 hunks)apps/web-app/i18n/locales/ru-RU.json(1 hunks)package.json(2 hunks)packages/ui/package.json(0 hunks)pnpm-workspace.yaml(2 hunks)
💤 Files with no reviewable changes (2)
- packages/ui/package.json
- apps/web-app/app/pages/command-center/product/index.vue
🔇 Additional comments (19)
package.json (2)
5-5: PNPM Package Manager Version UpdateThe
"packageManager"field has been updated to"pnpm@10.7.1", which aligns with the intended upgrade. Please ensure that all local developer environments and CI pipelines are configured to use this version.
25-28: Engine PNPM Requirement ConsistencyThe
"engines"section now requires"pnpm": ">=10.7.1", ensuring consistency with the updated package manager version. Verify that this change supports all your build and deployment tools.pnpm-workspace.yaml (3)
4-4: Verify Dependency RemovalsThe AI summary indicates that the dependency
@iconify-json/pixelarticonshas been removed. Please double-check that none of the workspace packages still require it and that this removal was intentional.
25-25: Updated @types/node VersionThe version for
@types/nodehas been upgraded to^22.14.0. Ensure that this version is compatible with your current Node.js environment and any type-dependent tooling you are using.
53-53: Vite Dependency Version UpgradeThe
vitedependency has been updated to^6.2.5, representing a minor bump from the previous version. Confirm that any custom configurations or plugins work seamlessly with this update.apps/web-app/app/pages/command-center/product/[productId]/usage.vue (2)
101-103: Good initialization of column visibility state.Initializing
columnVisibilitywith a default configuration where the 'id' column is hidden by default is a good practice. This provides a better initial user experience by hiding technical information that's typically not needed by regular users.
120-120: Good enhancement for internationalization.Converting hardcoded string headers to use translation functions (
t('center.menu.category')andt('center.menu.products')) improves the internationalization support of the component, allowing the column headers to be displayed in different languages based on the user's locale.Also applies to: 126-126
apps/web-app/i18n/locales/en-US.json (1)
247-251: Add new "category" localization key.
The new"category": "Category"entry in the"menu"section enhances the multilingual support by standardizing category labels. Please ensure that this change is consistently reflected across all locale files (e.g.ka-GE.json,ru-RU.json).apps/web-app/app/pages/command-center/menu/[menuId]/category/[categoryId].vue (1)
14-14: Update grid layout for responsive design.
The change in grid classes—switching toxl:grid-cols-5and2xl:grid-cols-6—adjusts the number of product cards per row on extra-large screens, aligning the layout with the new design requirements. Please verify that the updated layout renders correctly across different screen resolutions.apps/web-app/app/components/CommandCenter/CreateCard.vue (1)
2-2: Adjust CreateCard minimum height.
Changing the minimum height frommin-h-56tomin-h-40standardizes the height of Command Center cards. Ensure that the reduced height still accommodates the component’s content and maintains a balanced UI within the overall design.apps/web-app/app/components/CommandCenter/LinkCard.vue (1)
2-2: Increase LinkCard minimum height for consistency.
The update frommin-h-28tomin-h-40provides a more uniform appearance across Command Center cards. It is recommended to double-check that this change does not lead to excessive whitespace or misalignment within the component’s layout.apps/web-app/app/components/CommandCenter/MenuCategoryCard.vue (1)
1-3: Standardize MenuCategoryCard height.
Raising the minimum height frommin-h-28tomin-h-40aligns this component with the new uniform standard applied to similar components. Verify that the updated height maintains visual balance and accommodates variable content sizes in different use cases.apps/web-app/i18n/locales/ru-RU.json (1)
250-250: Addition of Russian translation for "category" looks good.Translation is appropriate and consistent with the localization pattern in the file.
apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue (1)
2-2: Card height standardization is a good improvement.Increasing the minimum height from
min-h-28tomin-h-40helps establish consistent card sizing throughout the UI.apps/web-app/app/components/CommandCenter/ActiveCard.vue (1)
1-9: Well-structured reusable card component.This new component encapsulates common card styling with nice interactive behaviors (hover scaling and active state). The use of a slot for content makes it flexible and reusable.
Some observations:
- Good use of animation with
duration-200for smooth transitions- Nice touch with the subtle scaling effects for hover and active states
- Component follows the single responsibility principle
apps/web-app/app/components/CommandCenter/StatCard.vue (2)
1-11: Clean implementation of statistics card UI.The template is well-structured with clear visual hierarchy between icon, title and description.
13-19: Props type definition looks good.All required props are clearly defined with appropriate types.
For future enhancement, you might consider adding default values or making some props optional if that would improve component flexibility.
apps/web-app/app/components/CommandCenter/ProductVariantCard.vue (1)
2-30: Component refactoring looks goodThe refactoring from a div to the
CommandCenterActiveCardcomponent improves the modularity of the UI and maintains all the original content and functionality. This change aligns well with component-based architecture principles.apps/web-app/app/pages/command-center/index.vue (1)
3-18: Grid layout implementation looks goodThe responsive grid implementation is well structured, with appropriate column adjustments for different screen sizes. Using NuxtLink for navigation from each card is a good practice for SPA navigation.
| const items = computed(() => [ | ||
| { | ||
| to: '/command-center/settings/orders', | ||
| icon: 'i-lucide-clock', | ||
| title: `${channel.workingDay?.open} - ${channel.workingDay?.close}`, | ||
| description: getLocalizedDayOfWeek(channel.workingDay?.day), | ||
| }, | ||
| { | ||
| to: '/command-center/product', | ||
| icon: 'i-lucide-cooking-pot', | ||
| title: channel.activeProducts.length.toString(), | ||
| description: t('center.menu.products'), | ||
| }, | ||
| { | ||
| to: '/command-center/warehouse', | ||
| icon: 'i-lucide-map-pin-house', | ||
| title: channel.warehouses.length.toString(), | ||
| description: t('center.menu.warehouses'), | ||
| }, | ||
| ...channel.menus.map((menu) => ({ | ||
| to: `/command-center/menu/${menu.id}`, | ||
| icon: 'i-lucide-layout-list', | ||
| title: menu.name, | ||
| description: t('center.menu.title'), | ||
| })), | ||
| ]) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Consider handling potential edge cases
The implementation of the items array looks good, but there are a few edge cases to consider:
- Line 30: What happens if
workingDayis null or undefined? Consider adding fallback values. - Line 44: What if
channel.menusis empty or undefined? Consider adding a default card in this case.
🏁 Script executed:
#!/bin/bash
# Check if there are null checks or fallbacks for workingDay and menus elsewhere
rg -A 3 "workingDay" --type vue apps/web-app
rg -A 3 "channel.menus" --type vue apps/web-appLength of output: 148
Action Required: Enhance Fallback Handling in Command Center Items
Please verify the following:
- Working Day Data: If
channel.workingDayis null or undefined, ensure that fallback values (e.g., default opening/closing times or placeholder text) are provided rather than displaying "undefined - undefined" and potentially passing an undefined value togetLocalizedDayOfWeek. - Menus Array: When
channel.menusis empty or undefined, confirm if a default card or fallback option should be added to the items array to improve user experience.
Double-check that these edge-case conditions are either handled elsewhere in the codebase or, if not, update the implementation accordingly.
---
🏁 Script executed:
```shell
#!/bin/bash
# Re-run the grep queries targeting .vue files by using the appropriate glob pattern,
# so we can check for fallback handling for workingDay and menus.
rg -A 3 "workingDay" -g "*.vue" apps/web-app/
rg -A 3 "channel.menus" -g "*.vue" apps/web-app/
Length of output: 4609
Action Required: Implement Fallback Values for workingDay and menus in Command Center Items
Please add proper fallback handling to mitigate potential issues when edge-case data is missing. In particular:
-
Working Day Handling (Line 25-30):
Currently, the title is computed astitle: `${channel.workingDay?.open} - ${channel.workingDay?.close}`,
If
channel.workingDayis null or undefined, this will result in “undefined - undefined”. Consider using fallback values such as:title: `${channel.workingDay?.open ?? 'N/A'} - ${channel.workingDay?.close ?? 'N/A'}`, description: getLocalizedDayOfWeek(channel.workingDay?.day ?? 'defaultDay'),
This ensures that even when
channel.workingDayis absent, the UI displays a sensible default. -
Menus Handling (Line 44):
The spread operation onchannel.menusassumes it exists and is non-empty. If it is empty or undefined, the UI might miss rendering a default card. Consider adding a default card like:...(channel.menus && channel.menus.length > 0 ? channel.menus.map((menu) => ({ to: `/command-center/menu/${menu.id}`, icon: 'i-lucide-layout-list', title: menu.name, description: t('center.menu.title'), })) : [{ to: '/command-center/menu/default', icon: 'i-lucide-layout-list', title: t('center.menu.defaultTitle'), description: t('center.menu.defaultDescription'), }] ),
This ensures the UI gracefully degrades if
channel.menusis missing or empty.
Kindly verify that these changes align with the rest of the codebase and update accordingly.
| to: '/command-center/settings/orders', | ||
| icon: 'i-lucide-clock', | ||
| title: `${channel.workingDay?.open} - ${channel.workingDay?.close}`, | ||
| description: getLocalizedDayOfWeek(channel.workingDay?.day), |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the getLocalizedDayOfWeek function
The getLocalizedDayOfWeek function is used on line 30 but I don't see it imported. Ensure it's properly imported or defined elsewhere in the codebase.
🏁 Script executed:
#!/bin/bash
# Check for the definition or import of getLocalizedDayOfWeek
rg -A 3 "getLocalizedDayOfWeek" --type ts --type vue apps/web-appLength of output: 93
Here's a revised review comment:
Action Required: Verify the Import or Definition of getLocalizedDayOfWeek
The function getLocalizedDayOfWeek is used on line 30 of apps/web-app/app/pages/command-center/index.vue, but there’s no visible import or local definition. Please confirm whether this function is defined globally, injected by a plugin, or intended to be imported from a specific module. If it should be imported, add the required import statement. Otherwise, ensure that its definition is correctly included in the codebase.
To help verify this, please run a search without relying on the --type vue flag (since vue files aren’t recognized by default). For example:
After reviewing the findings, adjust the code accordingly.
🏁 Script executed:
#!/bin/bash
# Search the entire apps/web-app folder for any reference to getLocalizedDayOfWeek
rg -A 3 "getLocalizedDayOfWeek" apps/web-appLength of output: 1522
Action Required: Missing Import for getLocalizedDayOfWeek
The function is defined in apps/web-app/app/utils/helpers.ts (as confirmed by your search) but is not imported in apps/web-app/app/pages/command-center/index.vue. Please add the proper import statement. For example, if your project supports the @ alias for the app directory, you might add:
import { getLocalizedDayOfWeek } from '@/app/utils/helpers'Otherwise, adjust the relative path accordingly, such as:
import { getLocalizedDayOfWeek } from '../../utils/helpers'This change will ensure that the function is available when used on line 30.
|
Summary by CodeRabbit
StatCardandActiveCard, enhancing the command center dashboard with dynamic statistics.