Menu
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | dukkani-dashboard |
| description | apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form. |
| triggers | ["apps/dashboard","dashboard hooks","useProductForm"] |
Canonical rules: .cursor/rules/apps/dashboard.mdc
shared/lib/i18n/use-format-order-relative-datetime.ts — useFormatOrderRelativeDateTime(createdAt) for the “Today, … / Yesterday, … / …” line. Use this for order detail and anywhere the copy should match the list and the active locale.shared/lib/order/order.util.ts — groupOrdersByDate(orders, { locale }) uses @dukkani/common/lib calendar-day helpers; pass useLocale() for older-section date headings so they match the dashboard language (not the system locale).toDateString() in feature code; import from @dukkani/common/lib or the hook above.getOrderDetailView(order) in shared/lib/order/order.util.ts — call from the order detail page after order is loaded; useOrderDetailPage does not return placeholder totals/fields for loading.productFormOptions: components/app/products/product-form-options.ts (TanStack formOptions, colocated with form UI). Re-exported from product-form.tsx for convenience; use-product-form imports the options file directly to avoid circular imports with the shell component.useProductStore: Zustand list/catalog state only — not form field values.Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.
Monorepo architecture, app boundaries, package ownership, and cross-domain implementation guidance for Dukkani.
Storefront app guidance for product browsing, cart, checkout, localization, and oRPC integration in apps/storefront.
Best practices for Remotion - Video creation in React
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.