+
+
+ )}
+
+
+ {errors.name}
+ )} + +
+ {
+ // Handle removing existing image in edit mode
+ }}
+ allowMultiple={false}
+ />
+
+
+ Banner Image
+{errors.description}
+ )} + +
+ {
+ const selectedValues = Array.isArray(value) ? value : [value]
+ setFieldValue('skuIds', selectedValues.map(v => Number(v)))
+ }}
+ multiple={true}
+ label="Select Products"
+ placeholder="Select products for banner (optional)"
+ labelFormat={(product) => `${product.productName} (₹${product.price})`}
+ />
+
+
+ {errors.redirectUrl}
+ )} + + {/* Action Buttons */} +
+
+
+
+
+
+ setCancelReason(e.target.value)}
+ placeholder="Enter reason for cancellation..."
+ multiline
+ className="h-24"
+ />
+
+
+
+
+
+
+
+ + Cancel Order +
++ This will cancel the order and mark it as cancelled by admin. A refund record will be created. +
+
+
+
+
+
+ setFieldValue('isReservedCoupon', !(values as any).isReservedCoupon)}
+ />
+
+
+ {/* Coupon Codes */}
+ Is Reserved Coupon
+
+
+
+ {/* Discount Type Selection */}
+ Coupon Codes
++ Each code creates a separate coupon with the same settings. +
+ {(values.couponCodes || []).map((code: string, index: number) => { + const codeError = Array.isArray(errors.couponCodes) + ? (errors.couponCodes as any)[index] + : errors.couponCodes + return ( +
+
+ )
+ })}
+ {(errors.couponCodes as any)?.message && (
+
+ ) => {
+ const next = [...(values.couponCodes || [])]
+ next[index] = e.target.value.toUpperCase()
+ setFieldValue('couponCodes', next)
+ }}
+ error={!!codeError}
+ />
+ {codeError &&
+
+ {codeError}
} +{(errors.couponCodes as any).message}
+ )} +
+
+
+ {patternCode && (
+
+ )}
+
+ + Discount Type * +
+ +
+
+
+
+
+
+ {/* Discount Value */}
+ {values.discountPercent !== undefined && (
+
+ setFieldValue('discountPercent', parseFloat(e.target.value) || 0)}
+ type="number"
+ inputMode="numeric"
+ error={!!(touched.discountPercent && errors.discountPercent)}
+ />
+
+ )}
+
+ {values.flatDiscount !== undefined && (
+
+ setFieldValue('flatDiscount', parseFloat(e.target.value) || 0)}
+ type="number"
+ inputMode="numeric"
+ error={!!(touched.flatDiscount && errors.flatDiscount)}
+ />
+
+ )}
+
+ {/* Minimum Order */}
+
+ setFieldValue('minOrder', parseFloat(e.target.value) || undefined)}
+ type="number"
+ inputMode="numeric"
+ error={!!(touched.minOrder && errors.minOrder)}
+ />
+
+
+ {/* Maximum Discount Value - only for percentage discounts */}
+ {values.flatDiscount === undefined && (
+
+ setFieldValue('maxValue', parseFloat(e.target.value) || undefined)}
+ type="number"
+ inputMode="numeric"
+ error={!!(touched.maxValue && errors.maxValue)}
+ />
+
+ )}
+
+ {/* Validity Period */}
+
+ {
+
+ setFieldValue('validTill', date?.toISOString())
+ }}
+ />
+
+
+ {/* Usage Limit */}
+ Valid Till
+
+ setFieldValue('maxLimitForUser', parseInt(e.target.value) || undefined)}
+ type="number"
+ inputMode="numeric"
+ error={!!(touched.maxLimitForUser && errors.maxLimitForUser)}
+ />
+
+
+ {/* Exclusive Apply */}
+
+
+
+ {/* Target Audience */}
+ Exclusive Apply
+ ++ Target Audience {isReserved ? '(Disabled for Reserved Coupons)' : ''} +
+ +
+
+
+
+
+
+ {/* Applicable User Selection */}
+
+
+
+ Applicable Users (Optional)
+ +
+ setUserSearchQuery(e.target.value)}
+ />
+
+ Select Applicable Users
+
+ item.id.toString()}
+ renderItem={(item) => (
+
+ )}
+ ListFooterComponent={
+ <>
+ {isFetchingUsers ?
+
+ Loading...
: null} + {hasMoreUsers && !isFetchingUsers ? ( + + ) : null} + + } + /> +
+ setMultiCount(e.target.value)}
+ type="number"
+ inputMode="numeric"
+ />
+
+ Add Multiple Coupons
++ Generate {patternCode ? `${patternPrefix}${patternStart + 1}, ${patternPrefix}${patternStart + 2}, ...` : 'sequential'} codes from your pattern +
+
+
+
+
+
+ {showLabel ?
+ )
+}
diff --git a/apps/admin-web/src/components/DateTimeInput.tsx b/apps/admin-web/src/components/DateTimeInput.tsx
new file mode 100644
index 0000000..2260dac
--- /dev/null
+++ b/apps/admin-web/src/components/DateTimeInput.tsx
@@ -0,0 +1,80 @@
+import { p as P } from 'web-components'
+
+interface DateTimeInputProps {
+ value: Date | null
+ setValue: (d: Date | null) => void
+ showLabels?: boolean
+ timeOnly?: boolean
+}
+
+function toDateStr(d: Date | null): string {
+ if (!d) return ''
+ const y = d.getFullYear()
+ const m = String(d.getMonth() + 1).padStart(2, '0')
+ const day = String(d.getDate()).padStart(2, '0')
+ return `${y}-${m}-${day}`
+}
+
+function toTimeStr(d: Date | null): string {
+ if (!d) return ''
+ return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+export default function DateTimeInput({ value, setValue, showLabels = true, timeOnly = false }: DateTimeInputProps) {
+ const handleDateChange = (dateStr: string) => {
+ if (!dateStr) {
+ setValue(null)
+ return
+ }
+ const base = value ? new Date(value) : new Date()
+ const [y, m, day] = dateStr.split('-').map((n) => parseInt(n, 10))
+ base.setFullYear(y, m - 1, day)
+ setValue(base)
+ }
+
+ const handleTimeChange = (timeStr: string) => {
+ if (!timeStr) return
+ const base = value ? new Date(value) : new Date()
+ const [h, min] = timeStr.split(':').map((n) => parseInt(n, 10))
+ base.setHours(h, min, 0, 0)
+ setValue(base)
+ }
+
+ if (timeOnly) {
+ return (
+ {placeholder}
: null} + setValue(e.target.value ? new Date(`${e.target.value}T00:00:00`) : null)} + placeholder={placeholder} + className="w-full rounded border border-gray-300 px-2 py-2 text-sm font-medium text-gray-800" + /> +
+ {showLabels ?
+ )
+ }
+
+ return (
+ Select Time
: null} + handleTimeChange(e.target.value)} + className="w-full rounded border border-gray-300 px-2 py-1 text-sm font-medium text-gray-800" + /> +
+
+ )
+}
diff --git a/apps/admin-web/src/components/MultiSelect.tsx b/apps/admin-web/src/components/MultiSelect.tsx
new file mode 100644
index 0000000..2c430a4
--- /dev/null
+++ b/apps/admin-web/src/components/MultiSelect.tsx
@@ -0,0 +1,151 @@
+import { useMemo, useState } from 'react'
+import { BottomDialog, Checkbox, SearchBar, p as P } from 'web-components'
+import { Check, ChevronDown } from 'lucide-react'
+
+export interface MultiSelectOption {
+ label: string
+ value: string | number
+ disabled?: boolean
+}
+
+interface MultiSelectProps {
+ label?: string
+ topLabel?: string
+ options: MultiSelectOption[]
+ value: (string | number)[]
+ onValueChange: (v: (string | number)[]) => void
+ placeholder?: string
+ disabled?: boolean
+ onSearch?: (q: string) => void
+ error?: boolean
+ className?: string
+ testID?: string
+ // Tolerated for screen compatibility (RN BottomDropdown leftovers) — ignored on web
+ multiple?: boolean
+ triggerComponent?: any
+}
+
+export function MultiSelect({
+ label,
+ topLabel,
+ options,
+ value,
+ onValueChange,
+ placeholder,
+ disabled = false,
+ onSearch,
+ error = false,
+ className,
+ testID,
+}: MultiSelectProps) {
+ const [open, setOpen] = useState(false)
+ const [query, setQuery] = useState('')
+
+ const selectedSet = useMemo(() => new Set(value.map((v) => String(v))), [value])
+
+ const displayText = useMemo(() => {
+ if (value.length === 0) return placeholder ?? label ?? 'Select...'
+ if (value.length === 1) {
+ const found = options.find((o) => String(o.value) === String(value[0]))
+ return found ? found.label : (placeholder ?? label ?? 'Select...')
+ }
+ return `${value.length} selected`
+ }, [value, options, placeholder, label])
+
+ const filtered = useMemo(() => {
+ const q = query.trim().toLowerCase()
+ if (!q) return options
+ return options.filter((o) => o.label.toLowerCase().includes(q))
+ }, [options, query])
+
+ const toggle = (optionValue: string | number) => {
+ const key = String(optionValue)
+ if (selectedSet.has(key)) {
+ onValueChange(value.filter((v) => String(v) !== key))
+ } else {
+ onValueChange([...value, optionValue])
+ }
+ }
+
+ const heading = topLabel ?? label
+
+ return (
+
+ {showLabels ?
+
+ Select Date
: null} + handleDateChange(e.target.value)} + className="w-full rounded border border-gray-300 px-2 py-1 text-sm font-medium text-gray-800" + /> +
+ {showLabels ?
+ Select Time
: null} + handleTimeChange(e.target.value)} + className="w-full rounded border border-gray-300 px-2 py-1 text-sm font-medium text-gray-800" + /> +
+ {heading ? (
+ setOpen(false)}>
+
+
+ )
+}
+
+export default MultiSelect
diff --git a/apps/admin-web/src/components/OrderNotesForm.tsx b/apps/admin-web/src/components/OrderNotesForm.tsx
new file mode 100644
index 0000000..4c736f4
--- /dev/null
+++ b/apps/admin-web/src/components/OrderNotesForm.tsx
@@ -0,0 +1,70 @@
+import { useState, type FC } from 'react'
+import { p as P, MyButton, pInput as PInput } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+
+interface OrderNotesFormProps {
+ orderId: number
+ initialNotes?: string
+ onSuccess?: () => void
+ onCancel?: () => void
+}
+
+export const OrderNotesForm: FC{heading}
+ ) : null} + +
+ {
+ setQuery(q)
+ onSearch?.(q)
+ }}
+ onSearch={onSearch}
+ className="mb-3"
+ />
+
+ {heading ?? placeholder ?? 'Select'}
+
+ {filtered.map((option) => {
+ const checked = selectedSet.has(String(option.value))
+ return (
+
+ {
+ if (!option.disabled) toggle(option.value)
+ }}
+ className={`flex flex-row items-center p-3 border-b border-gray-100 ${option.disabled ? 'opacity-50' : 'cursor-pointer hover:bg-gray-50'}`}
+ >
+ e.stopPropagation()}>
+ {
+ if (!option.disabled) toggle(option.value)
+ }}
+ />
+
+ {option.label}
+ {checked ?
+ )
+ })}
+ {filtered.length === 0 ? (
+ No options found
+ ) : null} +
+
+
+
+
+ setNotes(e.target.value)}
+ placeholder="Enter notes for this order..."
+ multiline
+ numberOfLines={4}
+ className="min-h-24"
+ />
+
+
+ )
+}
diff --git a/apps/admin-web/src/components/OrderOptionsMenu.tsx b/apps/admin-web/src/components/OrderOptionsMenu.tsx
new file mode 100644
index 0000000..87c1d0c
--- /dev/null
+++ b/apps/admin-web/src/components/OrderOptionsMenu.tsx
@@ -0,0 +1,327 @@
+import React from 'react'
+import { p as P, BottomDialog, Checkbox } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import { ChevronRight, Eye, Pencil, XCircle, MapPin, Map, MessageCircle, Phone } from 'lucide-react'
+
+interface OrderOptionsMenuProps {
+ open: boolean
+ onClose: () => void
+ order: {
+ id: number
+ readableId: number
+ isPackaged: boolean
+ isDelivered: boolean
+ isFlashDelivery?: boolean
+ address: string
+ addressId: number
+ adminNotes?: string | null
+ userNotes?: string | null
+ latitude?: number | null
+ longitude?: number | null
+ status?: string
+ }
+ onViewDetails: () => void
+ onTogglePackaged: () => void
+ onToggleDelivered: () => void
+ onOpenAdminNotes: () => void
+ onCancelOrder: () => void
+ onAttachLocation: () => void
+ onWhatsApp: () => void
+ onDial: () => void
+}
+
+function getCurrentPosition(): Promise+ Add Order Notes +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Order #{order.readableId} +
++ Select an action to perform +
+
+
+
+
+
+
+
+
+
+
+
+
+ {order.status !== 'cancelled' && (
+
+ )}
+
+
+
+ {hasCoordinates && (
+
+ )}
+
+
+
+
+
+
+ {message ?? ''}
+
+
+ {({ push, remove }) => (
+
+
+
+
+ )
+ }}
+
+ setFieldValue('storeId', Number(value))}
+ className="w-full"
+ />
+
+
+ Store
+
+ setFieldValue('productType', value as 'item' | 'combo')}
+ className="w-full"
+ />
+
+
+ Product Type
+
+
+ )}
+
+
+
+ {values.variants.map((variant, vIndex) => {
+ const isExistingSku = variant.id != null
+ const isMarkedDeleted = !!variant.isDeleted
+ return (
+ Variants
+ +
+
+ {({ push: pushAttr, remove: removeAttr }) => (
+
+
+
+ setVariantImages((prev) => {
+ const next = [...prev]
+ next[vIndex] = [...(next[vIndex] || []), ...payloads.map((pl) => ({ imgUrl: pl.url, mimeType: pl.mimeType }))]
+ return next
+ })
+ }
+ onImageRemove={(payload) =>
+ setVariantImages((prev) => {
+ const next = [...prev]
+ next[vIndex] = (next[vIndex] || []).filter((img) => img.imgUrl !== payload.url)
+ return next
+ })
+ }
+ allowMultiple={true}
+ />
+
+ {values.productType === 'combo' && (
+
+ )
+ })}
+
+
+
+
+
+
+
+ {(values.variants.length > 1 || isExistingSku) && (
+
+ )}
+ Variant {vIndex + 1}
+ {isMarkedDeleted && ( +
+
+ )}
+ Deleted
+
+
+ )}
+
+
+ {variant.features.map((attr, aIndex) => {
+ const quantityCount = variant.features.filter(isQuantityFeature).length
+ // Quantity features are locked (non-editable), but if there
+ // are duplicates (e.g. 'quantity' + 'Quantity') the user must
+ // be able to delete the extras to fix the form.
+ const canDelete = variant.features.length > 1 && (!isQuantityFeature(attr) || quantityCount > 1)
+ return (
+ Attributes
+ +
+
+ )
+ })}
+
+
+ setFieldValue(
+ `variants.${vIndex}.features.${aIndex}.featureName`,
+ e.target.value.trim().toLowerCase() === 'quantity' ? 'quantity' : e.target.value
+ )
+ }
+ disabled={isQuantityFeature(attr)}
+ className={isQuantityFeature(attr) ? 'text-gray-400' : undefined}
+ />
+
+
+
+ {canDelete && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setFieldValue(`variants.${vIndex}.isFlashAvailable`, !variant.isFlashAvailable)
+ if (variant.isFlashAvailable) setFieldValue(`variants.${vIndex}.flashPrice`, null)
+ }}
+ />
+
+
+ Flash Available
+
+ setFieldValue(`variants.${vIndex}.isOffer`, !variant.isOffer)}
+ />
+
+
+ {!(values.productType === 'combo' && (variant.comboItems?.length || 0) > 0) && (
+ Offer SKU
+
+ setFieldValue(`variants.${vIndex}.isComboOnly`, !variant.isComboOnly)}
+ />
+
+ )}
+
+ {mode === 'edit' && (
+ Combo Only SKU
+
+ setFieldValue(`variants.${vIndex}.isSuspended`, !variant.isSuspended)}
+ />
+
+ )}
+
+ {variant.isFlashAvailable && (
+ Suspend SKU
+
+
+ )}
+
+
+ {variant.comboItems?.map((ci, cIndex) => (
+ Included Items
+ +
+
+ ))}
+
+ ({
+ ...opt,
+ // Disable SKUs already picked in another row of this combo.
+ disabled: (variant.comboItems || []).some(
+ (item, idx) => idx !== cIndex && String(item.skuId) === String(opt.value)
+ ),
+ }))}
+ onValueChange={(val) => {
+ const current = variant.comboItems || []
+ const isDuplicate = current.some(
+ (item, idx) => idx !== cIndex && String(item.skuId) === String(val)
+ )
+ if (isDuplicate) {
+ window.alert('Duplicate: This product is already in the combo')
+ return
+ }
+ setFieldValue(`variants.${vIndex}.comboItems.${cIndex}.skuId`, Number(val))
+ }}
+ placeholder="Select SKU"
+ />
+
+
+
+ {/* Header */}
+
+ )
+}
+
+export default ProductGroupForm
diff --git a/apps/admin-web/src/components/ProductListDialog.tsx b/apps/admin-web/src/components/ProductListDialog.tsx
new file mode 100644
index 0000000..a8071cc
--- /dev/null
+++ b/apps/admin-web/src/components/ProductListDialog.tsx
@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { BottomDialog, p as P } from 'web-components'
+import type { IdName } from '@packages/shared'
+
+type VendorSnippetProduct = IdName
+
+interface ProductListDialogProps {
+ open: boolean
+ onClose: () => void
+ products: VendorSnippetProduct[]
+}
+
+export const ProductListDialog: FC
+
+
+ + {isEditing ? 'Edit Product Group' : 'Create Product Group'} +
+ +
+ {/* Group Name */}
+ formik.setFieldValue('group_name', e.target.value)}
+ style={{ marginBottom: 16 }}
+ />
+ {formik.errors.group_name && (
+ formik.setFieldValue('description', e.target.value)}
+ style={{ marginBottom: 16 }}
+ />
+
+ {/* Products Selection */}
+ formik.setFieldValue('product_ids', value as number[])}
+ multiple={true}
+ label="Products"
+ placeholder="Select products"
+ labelFormat={(product) => product.label}
+ />
+
+ {/* Actions */}
+
+ {formik.errors.group_name}
+ )} + + {/* Description */} +
+
+
+ Cancel
+
+ formik.handleSubmit()}
+ className="flex-1 bg-brand-600 rounded-lg py-4 items-center text-center text-white font-medium cursor-pointer"
+ >
+ {createGroup.isPending || updateGroup.isPending ? 'Saving...' : 'Save'}
+
+
+
+ + Products ({products.length}) +
+
+ {products.map((product, index) => (
+
+
+
+ ))}
+ + {product.name} +
+
+ {showGroups && groups.length > 0 && (
+ id.toString()) : []}
+ onValueChange={(selectedValue) => {
+ const selectedValues = Array.isArray(selectedValue) ? selectedValue : typeof selectedValue === 'string' ? [selectedValue] : []
+ onChange(selectedValues.map(v => Number(v)))
+ }}
+ placeholder={placeholder}
+ disabled={disabled}
+ error={error}
+ onSearch={setSearchQuery}
+ />
+ ) : (
+ {
+ onChange(Number(selectedValue))
+ }}
+ placeholder={placeholder}
+ disabled={disabled}
+ error={error}
+ onSearch={setSearchQuery}
+ />
+ )}
+
+ )
+}
diff --git a/apps/admin-web/src/components/SearchableSelect.tsx b/apps/admin-web/src/components/SearchableSelect.tsx
new file mode 100644
index 0000000..98ef9eb
--- /dev/null
+++ b/apps/admin-web/src/components/SearchableSelect.tsx
@@ -0,0 +1,114 @@
+import { useMemo, useState } from 'react'
+import { BottomDialog, SearchBar, p as P } from 'web-components'
+import { Check, ChevronDown } from 'lucide-react'
+
+export interface SearchableSelectOption {
+ label: string
+ value: string | number
+ disabled?: boolean
+}
+
+interface SearchableSelectProps {
+ label: string
+ options: SearchableSelectOption[]
+ value: string | number
+ onValueChange: (v: string | number) => void
+ onSearch?: (q: string) => void
+ placeholder?: string
+ disabled?: boolean
+ error?: boolean
+ className?: string
+ testID?: string
+ // Tolerated for screen compatibility (RN BottomDropdown leftover) — ignored on web
+ triggerComponent?: any
+}
+
+export function SearchableSelect({
+ label,
+ options,
+ value,
+ onValueChange,
+ onSearch,
+ placeholder,
+ disabled = false,
+ error = false,
+ className,
+ testID,
+}: SearchableSelectProps) {
+ const [open, setOpen] = useState(false)
+ const [query, setQuery] = useState('')
+
+ const selectedLabel = useMemo(() => {
+ const found = options.find((o) => String(o.value) === String(value))
+ return found ? found.label : null
+ }, [options, value])
+
+ const displayText = selectedLabel ?? placeholder ?? label
+
+ const filtered = useMemo(() => {
+ const q = query.trim().toLowerCase()
+ if (!q) return options
+ return options.filter((o) => o.label.toLowerCase().includes(q))
+ }, [options, query])
+
+ const handleSelect = (optionValue: string | number) => {
+ onValueChange(optionValue)
+ setOpen(false)
+ }
+
+ return (
+
+ id.toString())}
+ onValueChange={(selectedValue) => {
+ const selectedValues = Array.isArray(selectedValue) ? selectedValue : typeof selectedValue === 'string' ? [selectedValue] : []
+ const newGroupIds = selectedValues.map(v => parseInt(v as string))
+ handleGroupChange(newGroupIds)
+ }}
+ placeholder="Select product groups (optional)"
+ />
+
+ )}
+
+ {multiple ? (
+
+ setOpen(false)}>
+
+
+ )
+}
+
+export default SearchableSelect
diff --git a/apps/admin-web/src/components/SlotForm.tsx b/apps/admin-web/src/components/SlotForm.tsx
new file mode 100644
index 0000000..18a7537
--- /dev/null
+++ b/apps/admin-web/src/components/SlotForm.tsx
@@ -0,0 +1,229 @@
+import React from 'react'
+import type { SlotSnippetInput } from '@packages/shared'
+import { Formik, FieldArray } from 'formik'
+import DateTimeInput from './DateTimeInput'
+import { p as P, pInput as PInput } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import ProductsSelector from './ProductsSelector'
+
+// Snippet form row — single source in @packages/shared (complete payload)
+type VendorSnippet = SlotSnippetInput
+
+interface SlotFormProps {
+ onSlotAdded?: () => void
+ initialDeliveryTime?: Date | null
+ initialFreezeTime?: Date | null
+ initialIsActive?: boolean
+ slotId?: number
+ initialProductIds?: number[]
+ initialGroupIds?: number[]
+}
+
+export default function SlotForm({
+ onSlotAdded,
+ initialDeliveryTime,
+ initialFreezeTime,
+ initialIsActive = true,
+ slotId,
+ initialProductIds = [],
+ initialGroupIds = [],
+}: SlotFormProps) {
+ const { data: slotData } = trpc.admin.slots.getSlotById.useQuery(
+ { id: slotId! },
+ { enabled: !!slotId }
+ )
+
+ const vendorSnippetsFromSlot = (slotData?.slot?.vendorSnippets || []).map((snippet: any) => ({
+ name: snippet.name || '',
+ groupIds: snippet.groupIds || [],
+ skuIds: snippet.skuIds || [],
+ validTill: snippet.validTill || null,
+ })) as VendorSnippet[]
+
+ const initialValues = {
+ deliveryTime: initialDeliveryTime || (slotData?.slot?.deliveryTime ? new Date(slotData.slot.deliveryTime) : null),
+ freezeTime: initialFreezeTime || (slotData?.slot?.freezeTime ? new Date(slotData.slot.freezeTime) : null),
+ selectedGroupIds: initialGroupIds.length > 0 ? initialGroupIds : (slotData?.slot?.groupIds || []),
+ selectedSkuIds: initialProductIds.length > 0 ? initialProductIds : (slotData?.slot?.products?.map((p: any) => p.id) || []),
+ vendorSnippetList: vendorSnippetsFromSlot,
+ }
+
+ const { mutate: createSlot, isPending: isCreating } = trpc.admin.slots.createSlot.useMutation()
+ const { mutate: updateSlot, isPending: isUpdating } = trpc.admin.slots.updateSlot.useMutation()
+
+ const isEditMode = !!slotId
+ const isPending = isCreating || isUpdating
+
+ const { data: groupsData } = trpc.admin.product.getGroups.useQuery()
+
+ const handleFormSubmit = (values: typeof initialValues) => {
+ if (!values.deliveryTime || !values.freezeTime) {
+ window.alert('Error: Please fill all fields')
+ return
+ }
+
+ if (values.freezeTime > values.deliveryTime) {
+ window.alert('Error: Freeze time must be before or equal to delivery time')
+ return
+ }
+
+ const slotInputData = {
+ deliveryTime: values.deliveryTime.toISOString(),
+ freezeTime: values.freezeTime.toISOString(),
+ isActive: initialIsActive,
+ groupIds: values.selectedGroupIds,
+ skuIds: values.selectedSkuIds,
+ vendorSnippets: values.vendorSnippetList.map((snippet: VendorSnippet) => ({
+ name: snippet.name,
+ skuIds: snippet.skuIds,
+ validTill: snippet.validTill ?? undefined,
+ })),
+ }
+
+ if (isEditMode && slotId) {
+ updateSlot(
+ { id: slotId, ...slotInputData },
+ {
+ onSuccess: () => {
+ window.alert('Success: Slot updated successfully!')
+ onSlotAdded?.()
+ },
+ onError: (error: any) => {
+ console.log({msg: JSON.stringify(error.message)})
+
+ window.alert(`Error: ${error.message || 'Failed to update slot'}`)
+ },
+ }
+ )
+ } else {
+ createSlot(
+ slotInputData,
+ {
+ onSuccess: () => {
+ window.alert('Success: Slot created successfully!')
+ onSlotAdded?.()
+ },
+ onError: (error: any) => {
+ window.alert(`Error: ${error.message || 'Failed to create slot'}`)
+ },
+ }
+ )
+ }
+ }
+
+ return (
+ {label}
+ +
+ {
+ setQuery(q)
+ onSearch?.(q)
+ }}
+ onSearch={onSearch}
+ className="mb-3"
+ />
+
+ {label}
+
+ {filtered.map((option) => {
+ const selected = String(option.value) === String(value)
+ return (
+
+ )
+ })}
+ {filtered.length === 0 ? (
+
+ No options found
+ ) : null} +
+
+ {({ push, remove }) => (
+
+
+
+
+ )}}
+ + {isEditMode ? 'Edit Slot' : 'Create New Slot'} +
+ +
+ setFieldValue('deliveryTime', value)}
+ />
+
+
+ Delivery Date & Time
+
+ setFieldValue('freezeTime', value)}
+ />
+
+
+ Freeze Date & Time
+
+ setFieldValue('selectedSkuIds', newSkuIds)}
+ groups={mappedGroups}
+ selectedGroupIds={values.selectedGroupIds}
+ onGroupChange={(newGroupIds) => setFieldValue('selectedGroupIds', newGroupIds)}
+ label="Select Products"
+ placeholder="Select products for this slot"
+ />
+
+
+ {/* Vendor Snippets */}
+
+
+ )}
+ Vendor Snippets
+ {values.vendorSnippetList.map((snippet: VendorSnippet, index: number) => ( +
+
+ ))}
+
+
+ setFieldValue(`vendorSnippetList.${index}.name`, e.target.value)}
+ />
+
+
+
+ setFieldValue(`vendorSnippetList.${index}.skuIds`, newSkuIds)}
+ groups={mappedGroups.filter(group =>
+ values.selectedGroupIds.includes(group.id)
+ ).map(group => ({
+ ...group,
+ products: group.products.filter((prod: any) => values.selectedSkuIds.includes(prod.id))
+ }))}
+ selectedGroupIds={snippet.groupIds || []}
+ onGroupChange={(newGroupIds) => setFieldValue(`vendorSnippetList.${index}.groupIds`, newGroupIds)}
+ label="Select Products"
+ placeholder="Select products for snippet"
+ isDisabled={(sku) => !values.selectedSkuIds.includes(sku.id)}
+ />
+
+
+
+
+ + Snippet Options +
+ + {options.map((option, index) => { + const Icon = iconMap[option.icon] + return ( + + ) + })} +
+ {/* Order Header */}
+
+ )
+}
+
+const SnippetOrdersView: FC
+
+
+ {/* Slot Info */}
+ {slotTime && (
+
+
+ {order.orderId}
+{order.customerName}
+
+
+ ₹{order.totalAmount}
++ {orderDate.toLocaleDateString()} +
+
+
+ )}
+
+ {/* Products */}
+ + Delivery: {slotTime.toLocaleString()} +
+
+
+
+ {/* Matched Products Summary */}
+ Products:
+ {order.products.map((product, index) => { + const isMatched = order.matchedProducts.includes(product.productId) + return ( +
+
+ )
+ })}
+
+
+ + {product.productName} + {isMatched && ' ⭐'} +
++ {product.quantity} {product.unit} × ₹{product.price} +
++ ₹{product.subtotal.toFixed(2)} +
+
+
+ + Matched {order.matchedProducts.length} product(s) from snippet "{order.snippetCode}" +
+
+ {/* Header */}
+
+
+
+
+ {/* Orders List */}
+
+
+
+
+
+ Orders for "{snippetCode}"
++ {totalOrders} order{totalOrders !== 1 ? 's' : ''} • Total: ₹{totalRevenue.toFixed(2)} +
+
+ {orders.length === 0 ? (
+
+
+
+ ) : (
+ No matching orders
++ No orders found that match this snippet's criteria +
+
+ {orders.map((order, index) => (
+
+
+ ))}
+
+ )}
+
+
+ setFieldValue('products', value)}
+ multiple={true}
+ label="Products"
+ placeholder="Select products"
+ isDisabled={(sku) => sku.storeId !== null && sku.storeId !== storeId}
+ labelFormat={(sku) => `${sku.productName} - ₹${sku.price}`}
+ />
+
+ )
+ }}
+
+ setFieldValue('owner', Number(value))}
+ className="mb-4"
+ />
+
+ Owner
+
+
+ setFormInitialValues((prev) => ({
+ ...prev,
+ imageUrl: undefined,
+ }))
+ }
+ allowMultiple={false}
+ />
+
+
+ Store Image
+
+
+ {item.imageUrl ? (
+ 
+ ) : (
+
+ )
+}
+
+const TagForm = forwardRef
+
+ )}
+ + {item.label} +
+ +
+
+ )
+ }}
+ {errors.tagName}
+ ) : null} + +{errors.tagDescription}
+ ) : null} + + {/* Image Upload Section */} +
+ {
+ setImages((prev) => [...prev, ...payload.map((img) => ({
+ imgUrl: img.url,
+ mimeType: img.mimeType,
+ }))])
+ }}
+ onImageRemove={(payload) => {
+ if (payload.mimeType === null) {
+ setRemovedExisting(true)
+ }
+ setImages((prev) => prev.filter((item) => item.imgUrl !== payload.url))
+ }}
+ allowMultiple={false}
+ />
+
+
+ {/* Dashboard Tag Checkbox */}
+ + Tag Image {mode === 'edit' ? '(Upload new to replace)' : '(Optional)'} +
+ +
+ {
+ const newValue = !isDashboardTagChecked
+ setIsDashboardTagChecked(newValue)
+ setFieldValue('isDashboardTag', newValue)
+ }}
+ />
+
+
+ {/* Related Stores Dropdown */}
+ Mark as Dashboard Tag
+
+ id.toString())}
+ options={stores.map(store => ({
+ label: store.name,
+ value: store.id.toString(),
+ }))}
+ onValueChange={(selectedValues) => {
+ const numericValues = (selectedValues as string[]).map(v => parseInt(v))
+ setFieldValue('relatedStores', numericValues)
+ }}
+ />
+
+
+ {/* Products Section: selector + reorderable list */}
+ + Related Stores +
+
+
+
+
+ + Products +
+
+ {selectedProducts.length > 0 && (
+
+ prod.productId)} strategy={verticalListSortingStrategy}>
+ {selectedProducts.map((prod) => (
+
+
+ ) : (
+
+
+
+ )}
+ {selectedProducts.length > 0 ? (
+ + Drag to reorder • {selectedProducts.length} items +
+
+
+ )}
+ No products selected yet
+
+
+ + Tag Options +
+ + {options.map((option, index) => { + const Icon = option.icon + return ( + + ) + })} +
+ setAdminComment(e.target.value)}
+ placeholder="Enter details about the incident..."
+ multiline
+ className="h-24"
+ />
+
+ setNegativityScore(e.target.value)}
+ placeholder="0"
+ type="number"
+ inputMode="numeric"
+ className="mt-4"
+ />
+
+
+
+
+
+
+
+ + Add User Incident +
++ Record an incident for this user. This will be visible in their profile. +
+
+
+
+ + Higher negativity scores indicate more serious incidents (e.g., repeated cancellations, abusive behavior). +
+
+
+
+
+
+
+
+
+
+
+ {incidentsData?.incidents && incidentsData.incidents.length > 0 ? (
+ + User Incidents +
+ +
+ {incidentsData.incidents.map((incident: any, index: number) => (
+
+ ) : (
+
+
+ ))}
+
+
+
+ {incident.adminComment && (
+
+
+ {incident.negativityScore && (
+ + {dayjs(incident.dateAdded).format('MMM DD, YYYY • h:mm A')} +
+
+
+ )}
+ + Score: {incident.negativityScore} +
+
+
+ )}
+
+ + {incident.adminComment} +
+
+
+ + Added by {incident.addedBy} +
+ {incident.orderId && ( + <> ++ Order #{incident.orderId} +
+ + )} +
+
+ )}
+ + No incidents recorded for this user +
+
+
+ )
+}
+
+export default VendorSnippetForm
diff --git a/apps/admin-web/src/components/context/staff-auth-context.tsx b/apps/admin-web/src/components/context/staff-auth-context.tsx
new file mode 100644
index 0000000..75b8413
--- /dev/null
+++ b/apps/admin-web/src/components/context/staff-auth-context.tsx
@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { useNavigate, useLocation } from '@tanstack/react-router'
+import queryClient from '../../lib/query-client'
+import { EventBus, FORCE_LOGOUT_EVENT } from '../../lib/event-bus'
+import { trpc } from '../../lib/trpc-client'
+import { saveJWT, getJWT, deleteJWT } from '../../hooks/useJWT'
+import type { IdName } from '@packages/shared'
+
+type Staff = IdName
+
+interface StaffAuthContextType {
+ isLoggedIn: boolean
+ isLoading: boolean
+ staff: Staff | null
+ login: (name: string, password: string) => Promise
+
+
+
+
+ + {isEditing ? 'Edit Vendor Snippet' : 'Create Vendor Snippet'} +
+ +
+
+
+ {/* Submit Button */}
+
+ {/* Snippet Code */}
+
+
+
+
+ {/* Is Permanent Checkbox */}
+ {formik.errors.snippetCode}
+ )} +
+
+
+
+ {/* Slot Selection - Only show if not permanent */}
+ {!formik.values.isPermanent && (
+ + Check if this snippet is permanent and not tied to a specific delivery slot +
+
+ formik.setFieldValue('slotId', String(value))}
+ className="w-full"
+ />
+ {formik.errors.slotId && formik.touched.slotId && (
+
+ )}
+
+ {/* Product Selection */}
+ Delivery Slot
+{formik.errors.slotId}
+ )} +
+ parseInt(id))}
+ onChange={(selectedProductIds) => formik.setFieldValue('skuIds', (selectedProductIds as number[]).map(id => id.toString()))}
+ multiple={true}
+ label="Select Products"
+ placeholder="Select products"
+ labelFormat={(product) => product.label}
+ />
+ {formik.errors.skuIds && formik.touched.skuIds && (
+
+
+ {/* Valid Till Date */}
+ {formik.errors.skuIds}
+ )} +
+ formik.setFieldValue('validTill', date)}
+ placeholder="Select expiry date"
+ showLabel={false}
+ />
+
+ Valid Till (Optional)
++ Leave empty for no expiry +
+
+
+
+ {children}
+
+ Loading banner...
+
+
+ Banner not found
+
+
+ {/* Header */}
+
+
+
+ Edit Banner
+
+
+
+
+ {/* Header */}
+
+
+
+ Create Banner
+
+
+
+
+ Loading banners...
+
+
+ Error loading banners
+
+
+
+
+ {/* Slots Row */}
+
+
+ {/* Floating Action Button */}
+
+
+
+ {editMode ? `Select banner for Slot ${selectedSlot}` : 'Banner Slots'}
+
+
+
+ {/* Banners List */}
+
+ {[1, 2, 3, 4].map((slotNum) => {
+ const assignedBannerId = slotAssignments[slotNum]
+ const bannerName = getBannerNameById(assignedBannerId)
+ const isSelected = editMode && selectedSlot === slotNum
+
+ return (
+
+ )
+ })}
+
+
+ {/* Action buttons in edit mode */}
+ {editMode && (
+
+ {/* Save/Cancel buttons */}
+
+ )}
+
+
+
+
+
+ {/* Empty Slot button */}
+
+
+ {editMode && (
+
+
+
+ Tap a banner below to assign it to Slot {selectedSlot}
+
+
+ )}
+
+ {banners.length === 0 ? (
+
+
+ No Banners Yet
+
+ Start by creating your first banner using the button above.
+
+
+ ) : (
+ banners.map((banner) => {
+ const isAssignedToSlot = Object.values(slotAssignments).includes(banner.id)
+ const isAssignedToSelectedSlot = slotAssignments[selectedSlot || 0] === banner.id
+ const canInteract = editMode
+
+ return (
+ handleBannerSelect(banner.id) : undefined}
+ role={canInteract ? 'button' : undefined}
+ tabIndex={canInteract ? 0 : undefined}
+ onKeyDown={canInteract ? (e) => { if (e.key === 'Enter') handleBannerSelect(banner.id) } : undefined}
+ className={`mb-3 w-full rounded-xl border bg-white p-4 text-left shadow-sm ${canInteract ? 'cursor-pointer' : ''} ${canInteract && isAssignedToSelectedSlot
+ ? 'border-blue-500 bg-blue-50'
+ : canInteract && isAssignedToSlot
+ ? 'border-green-300 bg-green-50'
+ : canInteract
+ ? 'border-gray-200'
+ : 'border-gray-100'
+ }`}
+ >
+
+ 
+
+
+
+ {banner.name}
+
+
+ {canInteract && isAssignedToSelectedSlot && (
+
+
+ {banner.description}
+
+ )}
+
+
+ Created: {new Date(banner.createdAt).toLocaleDateString()}
+
+ {banner.serialNum && banner.serialNum >= 1 && banner.serialNum <= 4 && (
+
+ Slot {banner.serialNum}
+
+ )}
+
+
+
+
+ )
+ })
+ )}
+
+
+ Loading complaints...
+
+ )
+ }
+
+ if (isError) {
+ return (
+
+ Error
+
+ {error?.message || 'Failed to load complaints'}
+
+
+
+ )
+ }
+
+ return (
+
+ {
+ setDialogOpen(false)
+ setSelectedComplaintId(null)
+ }}
+ title="Resolve Complaint"
+ message="Add admin notes for this resolution:"
+ confirmText="Resolve"
+ cancelText="Cancel"
+ isLoading={resolveComplaint.isPending}
+ />
+ {viewerOpen && viewerImages.length > 0 && (
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.coupons.$id.edit.tsx b/apps/admin-web/src/routes/dashboard.coupons.$id.edit.tsx
new file mode 100644
index 0000000..8f61633
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.coupons.$id.edit.tsx
@@ -0,0 +1,126 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { AppContainer, p as MyText } from 'web-components'
+import CouponForm from '../components/CouponForm'
+import { trpc } from '@/lib/trpc-client'
+import { ErrorToast } from '@/services/toaster'
+import dayjs from 'dayjs'
+
+// Ported from common-ui/shared-types (CreateCouponPayload) — @packages/shared
+// does not export it, so the shape is copied here to keep behavior identical.
+interface CreateCouponPayload {
+ couponCodes: string[],
+ discountPercent?: number,
+ flatDiscount?: number,
+ minOrder?: number,
+ maxValue?: number,
+ validTill?: string,
+ maxLimitForUser?: number,
+ isApplyForAll: boolean,
+ isUserBased: boolean,
+ targetUsers?: number[],
+ productIds?: number[],
+ skuIds?: number[],
+ applicableUsers?: number[],
+ applicableProducts?: number[],
+ exclusiveApply?: boolean
+}
+
+export const Route = createFileRoute('/dashboard/coupons/$id/edit')({
+ component: EditCoupon,
+})
+
+function EditCoupon() {
+ const { id } = Route.useParams()
+ const couponId = parseInt(id as string)
+
+ const { data: coupon, isLoading, refetch } = trpc.admin.coupon.getById.useQuery({ id: couponId })
+ const { refetch: refetchCoupons } = trpc.admin.coupon.getAll.useInfiniteQuery(
+ { limit: 20, search: '' },
+ {
+ enabled: false,
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ }
+ )
+ const { refetch: refetchReservedCoupons } = trpc.admin.coupon.getReservedCoupons.useInfiniteQuery(
+ { limit: 20, search: '' },
+ {
+ enabled: false,
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ }
+ )
+ const updateCoupon = trpc.admin.coupon.update.useMutation()
+
+ const handleUpdateCoupon = (values: CreateCouponPayload & { isReservedCoupon?: boolean }) => {
+ // Transform targetUsers array to targetUser for backend compatibility
+ const { targetUsers, ...rest } = values
+ const updates = {
+ ...rest,
+ targetUser: targetUsers?.[0] || undefined,
+ }
+
+ // For flat discounts, send the discount value as maxValue too
+ if (updates.flatDiscount !== undefined) {
+ updates.maxValue = updates.flatDiscount
+ }
+
+ updateCoupon.mutate({ id: couponId, updates }, {
+ onSuccess: async () => {
+ await refetch()
+ await refetchCoupons()
+ await refetchReservedCoupons()
+ window.alert('Success: Coupon updated successfully')
+ window.history.back()
+ },
+ onError: (error: any) => {
+ ErrorToast(error.message || 'Failed to update coupon')
+ },
+ })
+ }
+
+ if (isLoading) {
+ return (
+
+ item.id.toString()}
+ renderItem={(item) => (
+
+
+
+ {item.text}
+
+
+ {item.response && (
+
+ )}
+ ListEmptyComponent={
+
+
+ Complaint #{item.id}
+
+
+
+ {item.status === 'resolved' ? 'Resolved' : 'Pending'}
+
+
+
+
+
+
+ {item.response}
+
+
+ )}
+
+ {item.images && item.images.length > 0 && (
+
+
+ Admin Reply
+
+
+
+
+ Attached Images:
+
+
+ )}
+
+
+ {item.images.map((imageUri: string, index: number) => (
+ 
openImageViewer(item.images as string[], index)}
+ className="h-16 w-16 cursor-pointer rounded-lg border border-gray-200 object-cover"
+ />
+ ))}
+
+
+ |
+
+
+ {item.status === 'pending' && (
+
+ )}
+
+
+ No complaints
+
+
+ All complaints will appear here
+
+
+ }
+ ListFooterComponent={
+ isFetchingNextPage ? (
+
+
+
+
+ Loading more...
+
+ ) : hasNextPage ? (
+
+
+ ) : null
+ }
+ />
+ setViewerOpen(false)}>
+
+ {viewerImages.length > 1 && (
+
+ )}
+ 
e.stopPropagation()}
+ />
+ {viewerImages.length > 1 && (
+
+ )}
+
+ )}
+
+ {viewerIndex + 1} / {viewerImages.length}
+
+
+ Loading...
+
+
+ Coupon not found
+
+
+
+ )
+}
+
+const ReservedCouponItem = ({ item }: { item: any }) => {
+ const getStatus = () => {
+ if (item.isRedeemed) return 'redeemed'
+ if (item.validTill && new Date(item.validTill) <= new Date()) return 'expired'
+ return 'active'
+ }
+
+ const status = getStatus()
+
+ const getBorderColor = () => {
+ if (status === 'active') return 'border-green-500'
+ if (status === 'expired') return 'border-yellow-500'
+ return 'border-blue-500'
+ }
+
+ const getBgColor = () => {
+ if (status === 'active') return 'bg-green-100'
+ if (status === 'expired') return 'bg-yellow-100'
+ return 'bg-blue-100'
+ }
+
+ const getTextColor = () => {
+ if (status === 'active') return 'text-green-600'
+ if (status === 'expired') return 'text-yellow-600'
+ return 'text-blue-600'
+ }
+
+ const getIconColor = () => {
+ if (status === 'active') return '#10b981'
+ if (status === 'expired') return '#f59e0b'
+ return '#3b82f6'
+ }
+
+ return (
+
+
+ {item.discountPercent ? (
+
+ {status === 'active' ? 'Active' : status === 'expired' ? 'Expired' : 'Inactive'}
+
+
+
+
+
+ {item.couponCode}
+ ID: {item.id}
+
+
+
+
+ Discount: {item.discountPercent ? `${item.discountPercent}% off` : item.flatDiscount ? `₹${item.flatDiscount} off` : 'N/A'}
+
+
+ Valid Till: {item.validTill ? new Date(item.validTill).toLocaleDateString() : 'No expiry'}
+
+
+
+
+ Min Order: {item.minOrder ? `₹${item.minOrder}` : 'None'}
+ Max: {item.maxValue ? `₹${item.maxValue}` : 'None'}
+
+
+
+
+ {item.applicableProducts && item.applicableProducts.length > 0 && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ )
+}
+
+const GeneralTab = () => {
+ const [refreshing, setRefreshing] = useState(false)
+ const [searchQuery, setSearchQuery] = useState('')
+ const [statusFilters, setStatusFilters] = useState
+
+ {item.discountPercent ? (
+
+ {status === 'active' ? 'Active' : status === 'expired' ? 'Expired' : 'Redeemed'}
+
+
+
+
+
+ {item.secretCode}
+ Coupon: {item.couponCode}
+
+
+
+
+ Discount: {item.discountPercent ? `${item.discountPercent}% off` : item.flatDiscount ? `₹${item.flatDiscount} off` : 'N/A'}
+
+
+ Valid Till: {item.validTill ? new Date(item.validTill).toLocaleDateString() : 'No expiry'}
+
+
+
+ {item.isRedeemed && item.redeemedUser && (
+
+ Min Order: {item.minOrder ? `₹${item.minOrder}` : 'None'}
+ Max: {item.maxValue ? `₹${item.maxValue}` : 'None'}
+
+
+
+
+
+ Redeemed on: {item.redeemedAt ? new Date(item.redeemedAt).toLocaleDateString() : 'N/A'}
+
+
+ )}
+
+
+
+
+
+
+ Loading Coupons...
+
+ )
+ }
+
+ if (error) {
+ return (
+
+ Failed to load coupons
+ refetch()} variant="red">
+ Retry
+
+
+ )
+ }
+
+ return (
+
+ item.id.toString()}
+ renderItem={(item) =>
+ )
+}
+
+const ReservedTab = () => {
+ const [refreshing, setRefreshing] = useState(false)
+ const [searchQuery, setSearchQuery] = useState('')
+ const [statusFilters, setStatusFilters] = useState
+ setStatusFilters(value as string[])}
+ multiple={true}
+ triggerComponent={({ onClick }: any) => (
+
+ )}
+ />
+
+
+
+
+ {isFetchingNextPage ? (
+ Loading more...
+ ) : hasNextPage ? (
+ fetchNextPage()}>
+ Load more
+
+ ) : null}
+
+ }
+ ListEmptyComponent={
+
+ No Coupons Found
+ {searchQuery ? (
+ setSearchQuery('')} variant="blue" className="mt-4 bg-gray-500">
+ Clear Search
+
+ ) : null}
+
+ }
+ />
+
+ Loading Reserved Coupons...
+
+ )
+ }
+
+ if (error) {
+ return (
+
+ Failed to load reserved coupons
+ refetch()} variant="red">
+ Retry
+
+
+ )
+ }
+
+ return (
+
+ item.id.toString()}
+ renderItem={(item) =>
+ )
+}
+
+function Coupons() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const [tab, setTab] = useState<'general' | 'reserved'>('general')
+
+ if (location.pathname !== '/dashboard/coupons') {
+ return
+ setStatusFilters(value as string[])}
+ multiple={true}
+ triggerComponent={({ onClick }: any) => (
+
+ )}
+ />
+
+
+
+
+ {isFetchingNextPage ? (
+ Loading more...
+ ) : hasNextPage ? (
+ fetchNextPage()}>
+ Load more
+
+ ) : null}
+
+ }
+ ListEmptyComponent={
+
+ No Reserved Coupons Found
+ {searchQuery ? (
+ setSearchQuery('')} variant="blue" className="mt-4 bg-gray-500">
+ Clear Search
+
+ ) : null}
+
+ }
+ />
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.customize-app.ordering.tsx b/apps/admin-web/src/routes/dashboard.customize-app.ordering.tsx
new file mode 100644
index 0000000..c153e41
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.customize-app.ordering.tsx
@@ -0,0 +1,301 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
+import { SortableContext, useSortable, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, Image as ImageIcon, XCircle, ChevronLeft, CircleAlert, Package } from 'lucide-react'
+import { AppContainer, p as MyText } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import type { StoreProductCard } from '@packages/shared'
+import type { DragOrderItemProps } from '@/types/drag-order-item'
+
+export const Route = createFileRoute('/dashboard/customize-app/ordering')({
+ component: AllItemsOrder,
+})
+
+type Product = Pick
+ {([
+ { key: 'general', title: 'General' },
+ { key: 'reserved', title: 'Reserved' },
+ ] as const).map((r) => (
+
+ ))}
+
+
+ {tab === 'general' ?
+
+
+ 
+ ) : (
+
+ )
+}
+
+function AllItemsOrder() {
+ const queryClient = useQueryClient()
+ const [products, setProducts] = useState
+
+
+ {item.images?.[0] ? (
+
+
+ )}
+
+
+
+ {item.name.length > 30 ? item.name.substring(0, 30) + '...' : item.name}
+
+
+ {item.isOutOfStock && (
+
+
+
+
+
+ All Items Order
+
+
+
+
+
+ {isLoadingConstants ? 'Loading order...' : 'Loading products...'}
+
+
+
+
+
+
+ All Items Order
+
+
+
+ Error
+
+ {constantsError ? 'Failed to load order' : 'Failed to load products'}
+
+
+
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.customize-app.popular.tsx b/apps/admin-web/src/routes/dashboard.customize-app.popular.tsx
new file mode 100644
index 0000000..0d4cad8
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.customize-app.popular.tsx
@@ -0,0 +1,413 @@
+import React, { useState, useEffect } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
+import { SortableContext, useSortable, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, Image as ImageIcon, Trash2, ChevronLeft, CircleAlert, Package, Plus } from 'lucide-react'
+import { AppContainer, p as MyText, BottomDialog } from 'web-components'
+import ProductsSelector from '../components/ProductsSelector'
+import { trpc } from '@/lib/trpc-client'
+import type { StoreProductCard } from '@packages/shared'
+import type { DragOrderItemProps } from '@/types/drag-order-item'
+
+export const Route = createFileRoute('/dashboard/customize-app/popular')({
+ component: CustomizePopularItems,
+})
+
+type PopularProduct = Omit<
+ StoreProductCard,
+ 'price' | 'marketPrice' | 'unitNotation' | 'images'
+> & {
+ price: number
+ marketPrice: number | null
+ images: string[] | null
+ storeId: number | null
+ nextDeliveryDate: string | null
+}
+
+interface ProductItemProps extends DragOrderItemProps
+
+
+ All Items Order
+
+
+
+
+ {products.length === 0 ? (
+
+
+ No products available
+
+
+ ) : (
+
+
+ )}
+
+
+ Long press and drag to reorder • {products.length} items
+
+
+
+
+
+ p.id)} strategy={verticalListSortingStrategy}>
+ {products.map((product) => (
+ {}} isActive={false} />
+ ))}
+
+
+
+
+
+ )
+}
+
+function CustomizePopularItems() {
+ const queryClient = useQueryClient()
+ const [popularProducts, setPopularProducts] = useState
+
+
+
+ ) : (
+
+
+
+
+ {item.images?.[0] ? (
+
+
+ )}
+
+
+
+ {item.name}
+
+
+ ₹{item.price}
+
+
+
+
+
+
+
+
+
+ Popular Items
+
+
+
+
+
+
+
+ {isLoadingConstants ? 'Loading constants...' : 'Loading products...'}
+
+
+
+
+
+
+
+ Popular Items
+
+
+
+
+
+ Error
+
+ {constantsError ? 'Failed to load constants' : 'Failed to load products'}
+
+
+
+
+ {
+ setShowAddDialog(false)
+ setSelectedProductIds([])
+ }}
+ >
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.customize-app.tsx b/apps/admin-web/src/routes/dashboard.customize-app.tsx
new file mode 100644
index 0000000..ef9a36b
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.customize-app.tsx
@@ -0,0 +1,271 @@
+import React from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { Formik } from 'formik'
+import { Pencil, ChevronRight, ArrowDownUp } from 'lucide-react'
+import { p as MyText, pInput as MyTextInput, AppContainer, Checkbox } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+
+export const Route = createFileRoute('/dashboard/customize-app')({
+ component: CustomizeApp,
+})
+
+type ConstantFormData = Record
+
+
+ Popular Items
+
+
+
+
+ {popularProducts.length === 0 ? (
+
+
+ No popular items configured
+
+
+ Add products to display as popular items
+
+
+ ) : (
+
+
+ p.id)} strategy={verticalListSortingStrategy}>
+ {popularProducts.map((product) => (
+ {}}
+ isActive={false}
+ onDelete={handleDelete}
+ />
+ ))}
+
+
+
+ )}
+
+
+
+ Long press an item to drag and reorder
+
+
+
+
+
+
+
+
+ setSelectedProductIds(val as number[])}
+ multiple={true}
+ label="Select Products"
+ placeholder="Choose products..."
+ labelFormat={(product) => `${product.productName} - ₹${product.price}`}
+ />
+
+
+
+
+
+ Add Popular Items
+
+
+ Select products to add to popular items
+
+
+
+ {availableProducts.length === 0 ? (
+
+
+ All products are already in popular items
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ )}
+
+
+ {CONST_LABELS[constantKey] || constantKey}
+
+
+
+ )
+ }
+
+ if (constantKey === 'allItemsOrder') {
+ return (
+
+
+ {CONST_LABELS[constantKey] || constantKey}
+
+
+
+ )
+ }
+
+ if (typeof value === 'boolean') {
+ return (
+
+
+ {CONST_LABELS[constantKey] || constantKey}
+
+
+ )
+ }
+
+ if (typeof value === 'number') {
+ return (
+
+ setFieldValue(fieldName, !value)}
+ size={28}
+ />
+
+ {value ? 'Enabled' : 'Disabled'}
+
+
+
+ Loading constants...
+
+ )
+ }
+
+ if (!constants) {
+ return (
+
+ Failed to load constants
+
+ )
+ }
+
+ const initialValues: ConstantFormData = constants.reduce((acc, constant) => {
+ acc[constant.key] = constant.value ?? ''
+ return acc
+ }, {} as ConstantFormData)
+
+ return (
+
+ Customize App Constants
+
+ Modify application constants. Changes will take effect immediately.
+
+
+
+ {({ handleSubmit, values, setFieldValue }) => (
+
+
+
+ {constants.map((constant) => {
+ if (!CONST_VISIBILITY[constant.key]) {
+ return null
+ }
+
+ return (
+
+ )}
+
+
+ )
+ })}
+
+
+
+ {/* Quick Actions */}
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.notifications.tsx b/apps/admin-web/src/routes/dashboard.notifications.tsx
new file mode 100644
index 0000000..4193039
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.notifications.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { ChevronLeft } from 'lucide-react'
+import { AppContainer, p as MyText, pInput as MyTextInput } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import type { UserMiniInfo } from '@packages/shared'
+import { MultiSelect } from '../components/MultiSelect'
+
+export const Route = createFileRoute('/dashboard/notifications')({
+ component: SendNotifications,
+})
+
+type User = Omit
+ Quick Actions
+
+
+ {/* Categorized Menu Items */}
+
+ {quickActions.map((item) => (
+
+ ))}
+
+
+ {categories.map((category) => {
+ const categoryItems = menuItems.filter((item) => item.category === category.key)
+ if (categoryItems.length === 0) return null
+
+ return (
+
+
+
+ )
+ })}
+
+
+ {category.icon}
+
+ {category.title}
+
+ {categoryItems.map((item) => (
+
+
+ Loading users...
+
+
+
+
+
+ Send Notifications
+
+
+
+
+
+ Title
+ setTitle(e.target.value)}
+ placeholder="Enter notification title..."
+ className="text-gray-900"
+ />
+
+
+
+ Message
+ setMessage(e.target.value)}
+ placeholder="Enter notification message..."
+ multiline
+ numberOfLines={4}
+ className="text-gray-900"
+ />
+
+
+
+ Select Users (Optional)
+ setSelectedUserIds(value as number[])}
+ onSearch={(query: string) => setSearchQuery(query)}
+ />
+
+ {getDisplayText()}
+
+
+ Leave empty to send to all users
+
+
+
+
+
+
+ Loading order details...
+
+
+ )
+ }
+
+ if (error || !orderData) {
+ return (
+
+
+ )
+ }
+
+ const order = orderData
+
+ // Calculate subtotal and discount for order summary
+ const subtotal = order.items.reduce((sum, item) => sum + item.amount, 0)
+ const discountAmount = order.discountAmount || 0
+
+ const handleGenerateCoupon = () => {
+ generateCouponMutation.mutate({ orderId: order.id })
+ }
+
+ const handleInitiateRefund = () => {
+ const value = parseFloat(refundValue)
+ if (isNaN(value) || value <= 0) {
+ ErrorToast('Please enter a valid refund value')
+ return
+ }
+
+ const mutationData: any = {
+ orderId: order.id,
+ }
+
+ if (refundType === 'percent') {
+ if (value > 100) {
+ ErrorToast('Refund percentage cannot exceed 100%')
+ return
+ }
+ mutationData.refundPercent = value
+ } else {
+ mutationData.refundAmount = value
+ }
+
+ initiateRefundMutation.mutate(mutationData)
+ setInitiateRefundDialogOpen(false)
+ }
+
+ const handlePackagingToggle = (itemId: number, field: 'isPackaged' | 'isPackageVerified', value: boolean) => {
+ // Add item to updating set to disable UI
+ setUpdatingItems((prev) => new Set(prev).add(itemId))
+
+ updateItemPackagingMutation.mutate(
+ {
+ orderItemId: itemId,
+ [field]: value,
+ },
+ {
+ onSettled: () => {
+ // Remove item from updating set
+ setUpdatingItems((prev) => {
+ const newSet = new Set(prev)
+ newSet.delete(itemId)
+ return newSet
+ })
+ },
+ }
+ )
+ }
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'delivered':
+ return 'text-green-600 bg-green-50 border-green-100'
+ case 'cancelled':
+ return 'text-red-600 bg-red-50 border-red-100'
+ default:
+ return 'text-yellow-600 bg-yellow-50 border-yellow-100'
+ }
+ }
+
+ const statusStyle = getStatusColor(order.status)
+
+ return (
+
+
+ Oops!
+
+
+ {error?.message || 'Failed to load order details'}
+
+
+
+
+ {/* Order ID & Status Card */}
+
+
+
+ {/* Bottom Action Bar */}
+
+
+
+ {/* Cancellation Reason */}
+ {order.status === 'cancelled' && order.cancelReason && (
+
+
+
+
+ Order ID
+
+ #{order.readableId}
+
+
+
+
+
+ {order.status}
+
+
+ {order.isFlashDelivery && (
+
+ ⚡
+
+ )}
+
+
+
+ {order.isFlashDelivery ? '1 Hr Delivery:' : 'Delivery at:'} {order.isFlashDelivery
+ ? dayjs(order.createdAt).add(30, 'minutes').format('MMM DD, YYYY • h:mm A')
+ : order.slotInfo?.time ? dayjs(order.slotInfo.time).format('MMM DD, YYYY • h:mm A') : 'Not scheduled'}
+
+
+ {order.isFlashDelivery && (
+
+
+ ⚡ 1 Hr Delivery • High Priority
+
+
+ )}
+
+
+ Placed on {dayjs(order.createdAt).format('MMM DD, YYYY • h:mm A')}
+
+
+
+
+ {order.cancelReason}
+
+
+ )}
+
+ {/* Order Progress (Simplified Timeline) */}
+ {order.status !== 'cancelled' && (
+
+
+ Cancellation Reason
+
+
+
+
+ Order Status
+
+
+ )}
+
+ {/* Customer Details */}
+
+
+ {/* Order Items */}
+
+ {/* Placed */}
+
+
+
+
+ Placed
+
+
+
+
+ {/* Packaged */}
+
+
+
+ Packaged
+
+
+
+
+ {/* Delivered */}
+
+
+ {order.isFlashDelivery && order.isDelivered ? (
+
+
+
+ {order.isFlashDelivery && order.isDelivered ? 'Flash Delivered' : 'Delivered'}
+
+ {order.isFlashDelivery && (
+
+ ⚡ 30-Min
+
+ )}
+
+
+
+ Items Ordered
+
+ {order.items.map((item, index) => (
+
+
+ {/* 1 Hr Delivery Priority Notice */}
+ {order.isFlashDelivery && (
+
+
+
+ ₹{item.amount}
+
+
+ ))}
+
+
+
+ {item.name}
+
+
+ {Number(item.quantity)} x {item.unit} × ₹{item.price}
+
+
+
+
+
+
+
+
+
+
+ Subtotal ({order.items.length} items)
+
+
+ ₹{subtotal}
+
+
+ {discountAmount > 0 && (
+
+
+ Discount
+
+
+ -₹{discountAmount}
+
+
+ )}
+ {order.deliveryCharge > 0 && (
+
+
+ ₹{order.deliveryCharge}
+
+
+ )}
+
+
+ Delivery Charge
+
+
+
+
+
+ ₹{order.totalAmount}
+
+
+
+
+ Total Amount
+
+ {order.isFlashDelivery && (
+
+ ⚡ FLASH
+
+ )}
+
+
+
+ ⚡ This is a high-priority flash delivery order that must be delivered within 1 hr of placement.
+
+
+ )}
+
+ {/* Admin Notes */}
+ {order.adminNotes && (
+
+
+ 1 Hr Delivery Order
+
+
+
+
+ Expected Delivery: {dayjs(order.createdAt).add(30, 'minutes').format('MMM DD, YYYY • h:mm A')}
+
+
+
+
+ {order.adminNotes}
+
+
+ )}
+
+ {/* User Incidents Section */}
+ {order.userId && (
+
+
+ Admin Notes
+
+
+
+
+ Coupon Applied
+
+
+ )}
+
+ {/* Refund Coupon Section */}
+ {order.orderStatus?.refundCouponId && (
+
+
+ {order.couponDescription}
+
+
+
+
+ {order.couponCode}
+
+
+
+
+ Discount Applied:
+
+
+ -₹{order.discountAmount}
+
+
+
+
+ Refund Coupon
+
+
+ )}
+
+ {/* TEMPORARILY HIDDEN: Refund Details Section */}
+ {/* WARNING: This section contains functional refund and cancellation management features */}
+ {/* DO NOT REMOVE - This is temporarily commented out for UI simplification */}
+ {/* When ready to re-enable, simply uncomment the entire block below */}
+
+
+ Generated refund coupon for order cancellation
+
+
+
+
+ {order.couponCode}
+
+
+
+
+ Value:
+
+
+ ₹{order.couponData?.discountAmount}
+
+
+
+ {order.status !== 'cancelled' && (
+
+ )}
+
+
+
+ {/* Generate Coupon Dialog */}
+
+
+
+
+
+ Generate Refund Coupon
+
+
+ Create a one-time use coupon for the customer equal to the order amount. Valid for 30 days.
+
+
+
+
+
+ This only works for online payment orders. COD orders cannot generate refund coupons.
+
+
+
+
+
+
+
+
+
+
+
+
+ Initiate Refund
+
+
+ Process a refund directly to the customer's source account via Razorpay.
+
+
+
+ {/* Refund Type Selection */}
+
+
+ Refund Type
+
+
+
+ {/* Refund Value Input */}
+
+
+
+
+
+
+ setRefundValue(e.target.value)}
+ type="number"
+ placeholder={refundType === 'percent' ? '100' : '0.00'}
+ className="bg-white"
+ />
+
+
+
+
+ For COD orders, refunds are processed immediately upon delivery confirmation.
+
+
+
+
+
+
+
+
+ Admin Notes
+ setNotesText(e.target.value)}
+ placeholder="Enter admin notes..."
+ className="min-h-24"
+ />
+
+ )
+}
+
+// Order list row — derived from shared AdminOrderListItem (serialized dates,
+// coupon display fields, optional flags)
+type OrderItemRow = Omit<
+ AdminOrderListItemProduct,
+ 'id' | 'skuName' | 'features' | 'isPackaged' | 'isPackageVerified'
+> & {
+ id?: number,
+ isPackaged?: boolean,
+ isPackageVerified?: boolean
+}
+
+type OrderType = Omit<
+ AdminOrderListItem,
+ 'customerName' | 'customerMobile' | 'items' | 'createdAt' | 'adminNotes' | 'userNotes' | 'userNegativityScore'
+> & {
+ customerName: string | null,
+ customerMobile?: string | null,
+ items: OrderItemRow[],
+ createdAt: string,
+ adminNotes?: string | null,
+ userNotes?: string | null,
+ userNegativityScore?: number,
+ couponCode?: string,
+ couponDescription?: string,
+ discountAmount?: number
+}
+
+const OrderItem = ({ order, refetch }: { order: OrderType, refetch: () => void }) => {
+ const navigate = useNavigate()
+ const [menuOpen, setMenuOpen] = useState(false)
+ const [itemsDialogOpen, setItemsDialogOpen] = useState(false)
+ const [notesDialogOpen, setNotesDialogOpen] = useState(false)
+ const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
+ const [userNotesDialogOpen, setUserNotesDialogOpen] = useState(false)
+ const [adminNotesDialogOpen, setAdminNotesDialogOpen] = useState(false)
+ const [updatingItems, setUpdatingItems] = useState
+ {
+ updateNotesMutation.mutate(
+ { orderId: parseInt(orderId), adminNotes: notesText },
+ {
+ onSuccess: () => {
+ onClose()
+ window.alert('Success: Notes updated successfully')
+ refetch()
+ },
+ onError: (error: any) => {
+ ErrorToast(error.message || 'Failed to update notes')
+ },
+ }
+ )
+ }}
+ >
+ Save
+
+
+ { if (e.key === 'Enter') handleOrderPress() }}
+ className="mx-4 mb-4 flex w-[calc(100%-2rem)] cursor-pointer flex-col overflow-hidden rounded-xl border border-gray-100 bg-white text-left shadow-sm"
+ >
+ {/* Header Section */}
+
+
+
+
+
+ {/* Main Content */}
+
+
+
+
+
+
+
+ 0 ? 'text-yellow-600' : 'text-gray-900')}`}>
+ {order.customerName || order.customerMobile || 'Unknown Customer'}
+
+
+ #{order.readableId}
+
+ {order.isFlashDelivery && (
+
+ FLASH
+
+ )}
+
+
+
+ {dayjs(order.createdAt).format('MMM D, h:mm A')}
+
+ {order.userNegativityScore && order.userNegativityScore > 0 && (
+
+ Negative Customer
+
+ )}
+
+
+ {/* Status Badges */}
+
+
+
+ Packaged
+ {}}
+ size={18}
+ fillColor="#6B7280"
+ checkColor="#FFFFFF"
+ />
+
+ e.stopPropagation()}
+ >
+ Delivered
+ handleMarkDelivered(!order.isDelivered)}
+ size={18}
+ fillColor="#10B981"
+ checkColor="#FFFFFF"
+ />
+
+ {order.status === 'cancelled' && (
+
+ CANCELLED
+
+ )}
+
+
+ {/* Delivery Info */}
+
+
+
+ {/* Items Summary & Total */}
+
+ Delivery Address
+
+ {order.address}
+
+
+
+
+ {order.isFlashDelivery ? '1 Hr Delivery:' : 'Slot:'} {order.isFlashDelivery ? dayjs(order.createdAt).add(30, 'minutes').format('MMM D, h:mm A') : order.deliveryTime ? dayjs(order.deliveryTime).format('ddd, MMM D • h:mm A') : 'Not scheduled'}
+
+
+ {order.isFlashDelivery && (
+
+
+ 1 Hour Delivery • High Priority
+
+
+ )}
+
+
+
+ {/* Coupons */}
+ {order.couponCode && (
+
+
+
+
+
+ Total:
+ {`₹${order.totalAmount}`}
+
+
+
+ Applied Coupons
+
+ )}
+
+ {/* Notes Section */}
+
+
+ {order.couponCode}
+
+ {order.couponDescription && (
+
+ {order.couponDescription}
+
+ )}
+ {order.discountAmount && (
+
+ {`Discount: ₹${order.discountAmount}`}
+
+ )}
+
+
+ {order.userNotes && (
+
+ )}
+ {order.adminNotes && (
+
+ )}
+
+
+ {/* Footer / Delivery Charge */}
+ {order.deliveryCharge > 0 && (
+
+
+ )}
+
+ Delivery Charge
+ {`₹${order.deliveryCharge}`}
+
+
+
+ {`Total: ₹${order.totalAmount}`}
+
+ {order.items.map((item, idx) => (
+
+
+
+ Order Items
+
+ {order.isFlashDelivery && (
+
+ FLASH
+
+ )}
+
+
+
+ ))}
+
+
+ {`${item.quantity} x ${item.unit}`}
+
+
+ {item.name.length > 30 ? `${item.name.substring(0, 30)}...` : item.name}
+
+ {item.isPackaged !== undefined && item.isPackageVerified !== undefined && (
+ <>
+
+ pkg
+ handleItemPackagingToggle(item.id!, 'isPackaged', !item.isPackaged)}
+ size={18}
+ fillColor={updatingItems.has(item.id!) ? '#F59E0B' : '#10B981'}
+ checkColor="#FFFFFF"
+ />
+
+
+ verf
+ handleItemPackagingToggle(item.id!, 'isPackageVerified', !item.isPackageVerified)}
+ size={18}
+ fillColor={updatingItems.has(item.id!) ? '#F59E0B' : '#10B981'}
+ checkColor="#FFFFFF"
+ />
+
+ {updatingItems.has(item.id!) && (
+
+
+
+ User Notes
+
+
+
+
+ {order.userNotes}
+
+
+
+
+ Admin Notes
+
+
+
+
+ {order.adminNotes}
+
+
+
+
+ Loading orders...
+
+ )
+ }
+
+ const slotOptions = [
+ { label: '⚡ Flash Deliveries', value: 'flash' },
+ ...(slotsData?.slots?.map((slot) => ({
+ label: dayjs(slot.deliveryTime).format('ddd DD MMM, h:mm a'),
+ value: slot.id.toString(),
+ })) || [])
+ ]
+
+ return (
+ <>
+
+
+ {!isLoading && selectedSlotType && (
+
+ {
+ if (val === 'flash') {
+ setSelectedSlotType('flash')
+ setSelectedSlot(null)
+ setFlashDeliveryFilter('flash')
+ // Reset other filters when switching to flash
+ setPackagedFilter('all')
+ setPackagedChecked(false)
+ setNotPackagedChecked(false)
+ setDeliveredFilter('all')
+ setDeliveredChecked(false)
+ setNotDeliveredChecked(false)
+ setCancellationFilter('all')
+ setCancelledChecked(false)
+ setNotCancelledChecked(false)
+ } else {
+ setSelectedSlotType('slot')
+ setSelectedSlot(val ? Number(val) : null)
+ setFlashDeliveryFilter('all')
+ }
+ }}
+ />
+
+
+
+
+ {selectedSlotType === 'flash'
+ ? `${orders.length} Flash delivery orders`
+ : `${orders.length} Orders in slot`
+ }
+
+
+ )}
+
+ }
+ ListFooterComponent={
+
+ {isFetchingNextPage ? (
+ fetchNextPage()}>
+ Load more
+
+ ) : null}
+
+ }
+ />
+
+
+
+ Loading more...
+
+ ) : hasNextPage ? (
+
+ Packaged Status
+
+
+ {
+ const newValue = !packagedChecked
+ setPackagedChecked(newValue)
+ if (newValue && notPackagedChecked) {
+ setPackagedFilter('all')
+ } else if (newValue) {
+ setPackagedFilter('packaged')
+ } else if (notPackagedChecked) {
+ setPackagedFilter('not_packaged')
+ } else {
+ setPackagedFilter('all')
+ }
+ }}
+ />
+ Packaged
+
+
+ {
+ const newValue = !notPackagedChecked
+ setNotPackagedChecked(newValue)
+ if (packagedChecked && newValue) {
+ setPackagedFilter('all')
+ } else if (newValue) {
+ setPackagedFilter('not_packaged')
+ } else if (packagedChecked) {
+ setPackagedFilter('packaged')
+ } else {
+ setPackagedFilter('all')
+ }
+ }}
+ />
+ Not Packaged
+
+
+ Delivered Status
+
+
+ {
+ const newValue = !deliveredChecked
+ setDeliveredChecked(newValue)
+ if (newValue && notDeliveredChecked) {
+ setDeliveredFilter('all')
+ } else if (newValue) {
+ setDeliveredFilter('delivered')
+ } else if (notDeliveredChecked) {
+ setDeliveredFilter('not_delivered')
+ } else {
+ setDeliveredFilter('all')
+ }
+ }}
+ />
+ Delivered
+
+
+ {
+ const newValue = !notDeliveredChecked
+ setNotDeliveredChecked(newValue)
+ if (deliveredChecked && newValue) {
+ setDeliveredFilter('all')
+ } else if (newValue) {
+ setDeliveredFilter('not_delivered')
+ } else if (deliveredChecked) {
+ setDeliveredFilter('delivered')
+ } else {
+ setDeliveredFilter('all')
+ }
+ }}
+ />
+ Not Delivered
+
+
+ Cancellation Status
+
+
+ {
+ const newValue = !cancelledChecked
+ setCancelledChecked(newValue)
+ if (newValue && notCancelledChecked) {
+ setCancellationFilter('all')
+ } else if (newValue) {
+ setCancellationFilter('cancelled')
+ } else if (notCancelledChecked) {
+ setCancellationFilter('not_cancelled')
+ } else {
+ setCancellationFilter('all')
+ }
+ }}
+ />
+ Cancelled
+
+
+ {
+ const newValue = !notCancelledChecked
+ setNotCancelledChecked(newValue)
+ if (cancelledChecked && newValue) {
+ setCancellationFilter('all')
+ } else if (newValue) {
+ setCancellationFilter('not_cancelled')
+ } else if (cancelledChecked) {
+ setCancellationFilter('cancelled')
+ } else {
+ setCancellationFilter('all')
+ }
+ }}
+ />
+ Not Cancelled
+
+
+ Delivery Type
+
+
+ {
+ const newValue = !flashChecked
+ setFlashChecked(newValue)
+ if (newValue && regularChecked) {
+ setFlashDeliveryFilter('all')
+ } else if (newValue) {
+ setFlashDeliveryFilter('flash')
+ } else if (regularChecked) {
+ setFlashDeliveryFilter('regular')
+ } else {
+ setFlashDeliveryFilter('all')
+ }
+ }}
+ />
+ ⚡ 1 Hr Delivery
+
+
+ {
+ const newValue = !regularChecked
+ setRegularChecked(newValue)
+ if (flashChecked && newValue) {
+ setFlashDeliveryFilter('all')
+ } else if (newValue) {
+ setFlashDeliveryFilter('regular')
+ } else if (flashChecked) {
+ setFlashDeliveryFilter('flash')
+ } else {
+ setFlashDeliveryFilter('all')
+ }
+ }}
+ />
+ Regular Delivery
+
+
+
+ Slot {slotId} Statistics
+
+
+ )
+}
+
+interface OrderItemProps {
+ item: OrderWithSequence,
+ isPending: boolean,
+ setSelectedOrder: (order: OrderWithSequence | null) => void,
+ setShowOrderMenu: (show: boolean) => void,
+ selectedOrderIds: number[],
+ onToggleOrder: (id: number) => void,
+ assignedUserName?: string | null,
+ staffData?: { staff?: Array<{ id: number, name: string }> },
+ setSelectedUserId?: (id: number) => void
+}
+
+const OrderItem: React.FC
+ {stats.map((stat, index) => (
+
+
+
+ ))}
+
+
+ {stat.value}
+
+ {stat.label}
+
+
+
+ )
+}
+
+function DeliverySequences() {
+ const { slotId } = Route.useSearch()
+ const selectedSlotId = slotId ? Number(slotId) : null
+ const [localOrderedOrders, setLocalOrderedOrders] = useState<
+ OrderWithSequence[]
+ >([])
+ const [showOrderMenu, setShowOrderMenu] = useState(false)
+ const [selectedOrder, setSelectedOrder] = useState
+
+
+ {/* Checkbox and Drag Handle */}
+
+ {/* Admin Notes */}
+ {orderItem.adminNotes && (
+
+ onToggleOrder(orderItem.id)}
+ size={20}
+ fillColor="#3b82f6"
+ checkColor="#FFFFFF"
+ />
+
+
+ {/* Content */}
+
+
+
+
+
+
+
+
+
+ #{orderItem.readableId}
+
+
+
+ Pkg
+
+ {}}
+ size={16}
+ fillColor="#6B7280"
+ checkColor="#FFFFFF"
+ />
+
+
+
+
+
+ ₹{orderItem.totalAmount}
+
+
+
+
+
+
+ {orderItem.address}
+
+ {orderItem.latitude && orderItem.longitude && (
+
+ )}
+
+ {assignedUserName && (
+
+
+ Assigned to{' '}
+
+
+
+ )}
+
+
+ {orderItem.adminNotes}
+
+
+ )}
+
+
+ Loading slots...
+
+ )
+ }
+
+ if (slotsData.slots.length === 0) {
+ return (
+
+
+ No slots available
+
+
+ )
+ }
+
+ return (
+
+ {selectedSlotId ? (
+ <>
+ {/* Header Section */}
+ setShowOrderMenu(false)}
+ order={{
+ id: selectedOrder?.id || 0,
+ readableId: selectedOrder?.readableId || 0,
+ isPackaged: selectedOrder?.isPackaged || false,
+ isDelivered: selectedOrder?.isDelivered || false,
+ address: selectedOrder?.address || '',
+ addressId: selectedOrder?.addressId || 0,
+ adminNotes: selectedOrder?.adminNotes || null,
+ latitude: selectedOrder?.latitude || null,
+ longitude: selectedOrder?.longitude || null,
+ }}
+ onViewDetails={() => {
+ if (selectedOrder) {
+ navigate({ to: '/dashboard/orders/$id', params: { id: String(selectedOrder.id) } })
+ }
+ setShowOrderMenu(false)
+ }}
+ onTogglePackaged={() => {
+ if (!selectedOrder) return
+ updatePackagedMutation.mutate(
+ { orderId: selectedOrder.id.toString(), isPackaged: !selectedOrder.isPackaged },
+ {
+ onSuccess: () => {
+ refetchOrders()
+ refetchSequence()
+ },
+ onError: () => {
+ ErrorToast('Failed to update packaged status')
+ },
+ }
+ )
+ }}
+ onToggleDelivered={() => {
+ if (!selectedOrder) return
+ updateDeliveredMutation.mutate(
+ { orderId: selectedOrder.id.toString(), isDelivered: !selectedOrder.isDelivered },
+ {
+ onSuccess: () => {
+ refetchOrders()
+ refetchSequence()
+ },
+ onError: () => {
+ ErrorToast('Failed to update delivered status')
+ },
+ }
+ )
+ }}
+ onOpenAdminNotes={() => {
+ setShowOrderMenu(false)
+ setNotesDialogOpen(true)
+ }}
+ onCancelOrder={() => {
+ setShowOrderMenu(false)
+ setCancelDialogOpen(true)
+ }}
+ onAttachLocation={() => {}}
+ onWhatsApp={() => {}}
+ onDial={() => {}}
+ />
+
+ setCancelDialogOpen(false)}
+ onSuccess={() => {
+ refetchOrders()
+ refetchSequence()
+ }}
+ />
+
+ setNotesDialogOpen(false)}>
+ {
+ refetchOrders()
+ refetchSequence()
+ setNotesDialogOpen(false)
+ }}
+ onCancel={() => setNotesDialogOpen(false)}
+ />
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.orders.tsx b/apps/admin-web/src/routes/dashboard.orders.tsx
new file mode 100644
index 0000000..e1d5435
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.orders.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react'
+import { createFileRoute, Outlet, useLocation, useNavigate } from '@tanstack/react-router'
+import { ListOrdered, Route as RouteIcon } from 'lucide-react'
+import { p as MyText, Dropdown } from 'web-components'
+import dayjs from 'dayjs'
+import { trpc } from '@/lib/trpc-client'
+import { useNavigationTarget } from '@/lib/navigation-target'
+import { useMarkDataFetchers } from '@/lib/refresh-context'
+
+export const Route = createFileRoute('/dashboard/orders')({
+ component: ManageOrders,
+})
+
+function ManageOrders() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const { getNavigationTarget } = useNavigationTarget()
+ const [selectedSlotId, setSelectedSlotId] = useState
+
+
+
+
+ {/* Content Section */}
+ {ordersLoading ? (
+
+ {
+ if (val !== '' && val !== null && val !== undefined) {
+ navigate({ to: '/dashboard/orders/sequence', search: { slotId: String(Number(val)) }, replace: true })
+ }
+ }}
+ />
+
+
+ setSelectedUserId(Number(val))}
+ />
+
+
+
+ Loading orders...
+
+ ) : localOrderedOrders.length === 0 ? (
+
+
+ No orders found for this slot
+
+
+ ) : (
+
+
+ o.sequenceId)}
+ strategy={verticalListSortingStrategy}
+ >
+ {localOrderedOrders.map((item) => (
+ {
+ setSelectedOrderIds((prev) =>
+ prev.includes(id)
+ ? prev.filter((i) => i !== id)
+ : [...prev, id]
+ )
+ }}
+ assignedUserName={selectedUserId === -2 ? item.assignedUserName : undefined}
+ staffData={staffData}
+ setSelectedUserId={setSelectedUserId}
+ />
+ ))}
+
+
+
+ )}
+
+ {/* Assignment panel (replaces FAB-triggered dropdown; SearchableSelect renders its own trigger) */}
+ {selectedOrderIds.length > 0 && (
+
+ opt.value !== -1),
+ { label: 'None', value: -3 },
+ ]}
+ value={-1}
+ onValueChange={(val) => {
+ const numVal = Number(val)
+ if (numVal !== -1) {
+ if (numVal === -3) {
+ // Unassign selected orders
+ const newSequence = { ...(deliverySequence as any) }
+ Object.keys(newSequence).forEach((userId) => {
+ newSequence[userId] = newSequence[userId].filter(
+ (id: number) => !selectedOrderIds.includes(id)
+ )
+ })
+ // Save
+ updateSequenceMutation.mutate(
+ {
+ id: selectedSlotId,
+ deliverySequence: newSequence,
+ },
+ {
+ onSuccess: () => {
+ setSelectedOrderIds([])
+ refetchSequence()
+ window.alert(
+ 'Success: Orders unassigned successfully'
+ )
+ },
+ onError: (error: any) => {
+ ErrorToast(
+ `Failed to unassign orders: ${
+ error.message || 'Unknown error'
+ }`
+ )
+ },
+ }
+ )
+ } else {
+ // Assign selected orders to the user
+ // Update deliverySequence map
+ const newSequence = { ...(deliverySequence as any) }
+ // Remove from all other users
+ Object.keys(newSequence).forEach((userId) => {
+ newSequence[userId] = newSequence[userId].filter(
+ (id: number) => !selectedOrderIds.includes(id)
+ )
+ })
+ // Add to selected user
+ if (!newSequence[String(numVal)])
+ newSequence[String(numVal)] = []
+ newSequence[String(numVal)] = [
+ ...new Set([
+ ...newSequence[String(numVal)],
+ ...selectedOrderIds,
+ ]),
+ ]
+ // Save
+ updateSequenceMutation.mutate(
+ {
+ id: selectedSlotId,
+ deliverySequence: newSequence,
+ },
+ {
+ onSuccess: () => {
+ setSelectedOrderIds([])
+ refetchSequence()
+ window.alert(
+ 'Success: Orders assigned successfully'
+ )
+ },
+ onError: (error: any) => {
+ ErrorToast(
+ `Failed to assign orders: ${
+ error.message || 'Unknown error'
+ }`
+ )
+ },
+ }
+ )
+ }
+ }
+ }}
+ />
+
+ )}
+
+ {/* FAB for Save */}
+ {hasSequenceChanged && (
+
+
+
+ )}
+
+ ) : (
+
+
+ No slot selected. Please select a slot to view delivery sequence.
+
+
+
+ )}
+
+ {/* Order Menu Dialog */}
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.prices.tsx b/apps/admin-web/src/routes/dashboard.prices.tsx
new file mode 100644
index 0000000..4c2e005
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.prices.tsx
@@ -0,0 +1,420 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { Save, Pencil, EllipsisVertical, Shuffle } from 'lucide-react'
+import {
+ AppContainer,
+ p as MyText,
+ pInput as MyTextInput,
+ BottomDialog,
+ Checkbox,
+ MyFlatList,
+} from 'web-components'
+import MultiSelect from '@/components/MultiSelect'
+import { trpc } from '@/lib/trpc-client'
+
+export const Route = createFileRoute('/dashboard/prices')({
+ component: PricesOverview,
+})
+
+interface SkuItemProps {
+ sku: any
+ productName: string
+ hasChanges: (skuId: number) => boolean
+ pendingChanges: Record
+ setSelectedSlotId(String(val))}
+ className="w-full"
+ />
+
+
+ {menuItems.map((item, index) => (
+
+ ))}
+
+
+
+ )
+}
+
+interface PendingChange {
+ price?: number
+ marketPrice?: number | null
+ flashPrice?: number | null
+ isFlashAvailable?: boolean
+}
+
+interface EditDialogState {
+ open: boolean
+ sku: any
+ productName: string
+ tempPrice: string
+ tempMarketPrice: string
+ tempFlashPrice: string
+}
+
+function PricesOverview() {
+ const navigate = useNavigate()
+ const [selectedStores, setSelectedStores] = useState
+
+
+
+ {changed && (
+
+ )}
+
+
+ 
+
+
+
+
+
+
+
+ {productName.length > 20 ? productName.substring(0, 20) + '...' : productName}
+
+
+ {sku.displayName || sku.name || ''}
+
+
+
+
+ {
+ const currentValue = change.isFlashAvailable ?? sku.isFlashAvailable ?? false
+ setPendingChanges((prev) => ({
+ ...prev,
+ [sku.id]: {
+ ...prev[sku.id],
+ isFlashAvailable: !currentValue,
+ },
+ }))
+ }}
+ />
+
+ Flash
+
+
+
+
+ Our Price
+
+
+
+ ₹{displayPrice}
+
+
+
+ Market Price
+
+
+
+ {displayMarketPrice ? `₹${displayMarketPrice}` : 'N/A'}
+
+
+
+ Flash Price
+
+
+
+ {displayFlashPrice ? `₹${displayFlashPrice}` : 'N/A'}
+
+
+
+ Size
+
+
+ {displayUnit}
+
+
+
+ (
+ setEditDialog({ ...editDialog, open: false, tempFlashPrice: '', tempMarketPrice: '', tempPrice: '' })}>
+
+
+ setShowMenu(false)}>
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.product-groupings.$id.edit.tsx b/apps/admin-web/src/routes/dashboard.product-groupings.$id.edit.tsx
new file mode 100644
index 0000000..6dd80ca
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.product-groupings.$id.edit.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { AppContainer, p as MyText } from 'web-components'
+import ProductGroupForm from '../components/ProductGroupForm'
+import { trpc } from '@/lib/trpc-client'
+
+export const Route = createFileRoute('/dashboard/product-groupings/$id/edit')({
+ component: EditProductGroup,
+})
+
+function EditProductGroup() {
+ const { id } = Route.useParams()
+
+ const groupId = parseInt(id as string)
+
+ const { data: groupsData, isLoading } = trpc.admin.product.getGroups.useQuery()
+ const groups = groupsData?.groups || []
+ const group = groups.find((g) => g.id === groupId)
+
+ if (isLoading) {
+ return (
+
+
+
+ {productsLoading || storesLoading ? (
+
+ setSelectedStores(value as string[])}
+ placeholder="Select stores"
+ />
+
+
+
+
+
+ Loading...
+
+ ) : (
+
+ {editDialog.productName}
+ {editDialog.sku?.displayName || editDialog.sku?.name || ''}
+
+
+
+ Our Price
+ setEditDialog({ ...editDialog, tempPrice: e.target.value })}
+ type="number"
+ placeholder="Enter price"
+ />
+
+
+
+ Market Price (Optional)
+ setEditDialog({ ...editDialog, tempMarketPrice: e.target.value })}
+ type="number"
+ placeholder="Enter market price"
+ />
+
+
+
+ Flash Price (Optional)
+ setEditDialog({ ...editDialog, tempFlashPrice: e.target.value })}
+ type="number"
+ placeholder="Enter flash price"
+ />
+
+
+
+
+
+ Options
+
+
+
+
+ Loading group...
+
+
+ Group not found
+
+
+
+ )
+}
+
+function ProductGroupings() {
+ const navigate = useNavigate()
+ const {
+ data: groupsData,
+ isLoading,
+ error,
+ refetch,
+ } = trpc.admin.product.getGroups.useQuery()
+ const deleteGroup = trpc.admin.product.deleteGroup.useMutation()
+
+ const groups = groupsData?.groups || []
+ const [viewProducts, setViewProducts] = useState
+
+
+
+
+ {group.description && (
+
+
+
+
+
+
+
+ Group Name
+
+
+ {group.groupName}
+
+
+
+
+
+
+
+
+ {group.description}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {dayjs(group.createdAt).format('MMM DD, YYYY')}
+
+
+
+ Loading product groups...
+
+
+ Error loading groups
+
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.product-tags.edit.tsx b/apps/admin-web/src/routes/dashboard.product-tags.edit.tsx
new file mode 100644
index 0000000..9c5e984
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.product-tags.edit.tsx
@@ -0,0 +1,118 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { AppContainer, p as MyText, type ImageUploaderNeoItem } from 'web-components'
+import TagForm, { type TagFormData as BaseTagFormData } from '../components/TagForm'
+import { trpc } from '@/lib/trpc-client'
+import { useUploadToObjectStorage } from '@/hooks/useUploadToObjectStorage'
+
+export const Route = createFileRoute('/dashboard/product-tags/edit')({
+ validateSearch: (s: Record
+ {groups.length === 0 ? (
+
+
+ ))
+ )}
+
+
+
+
+ No Groups Yet
+
+
+ Start by creating your first product group using the button below.
+
+
+ ) : (
+ groups.map((group, index) => (
+
+
+
+ Loading tag...
+
+
+ Tag not found
+
+
+ ({ id: store.id, name: store.name })) || []}
+ />
+
+
+ ({ id: store.id, name: store.name })) || []}
+ />
+
+
+
+ ) : (
+
+ )
+}
+
+function TagOrders() {
+ const queryClient = useQueryClient()
+ const [tags, setTags] = useState
+
+
+ {item.imageUrl ? (
+
+
+ )}
+
+
+
+ {item.tagName}
+
+
+
+
+
+
+ Tag Orders
+
+
+
+
+
+ {isLoadingConstants ? 'Loading order...' : 'Loading tags...'}
+
+
+
+
+
+
+ Tag Orders
+
+
+
+ Error
+
+ {constantsError ? 'Failed to load order' : 'Failed to load tags'}
+
+
+
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.product-tags.tsx b/apps/admin-web/src/routes/dashboard.product-tags.tsx
new file mode 100644
index 0000000..c1e0ac1
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.product-tags.tsx
@@ -0,0 +1,142 @@
+import React from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { ArrowDownUp, Plus, CircleAlert, Tags, LayoutDashboard } from 'lucide-react'
+import { p as MyText, MyFlatList } from 'web-components'
+import { useManualRefresh, useMarkDataFetchers } from '@/lib/refresh-context'
+import { TagMenu } from '../components/TagMenu'
+import { trpc } from '@/lib/trpc-client'
+import type { ProductTagCore } from '@packages/shared'
+
+export const Route = createFileRoute('/dashboard/product-tags')({
+ component: ProductTags,
+})
+
+interface TagItemData extends ProductTagCore {
+ id: number
+ tagDescription: string | null
+ imageUrl: string | null
+ isDashboardTag: boolean
+ createdAt: string | Date
+}
+
+interface TagItemProps {
+ item: TagItemData
+ onDeleteSuccess: () => void
+}
+
+const TagItem: React.FC
+
+
+ Tag Orders
+
+
+
+
+ {tags.length === 0 ? (
+
+
+ No tags available
+
+
+ ) : (
+
+
+ )}
+
+
+ Long press and drag to reorder • {tags.length} items
+
+
+
+
+
+ t.id)} strategy={verticalListSortingStrategy}>
+ {tags.map((tag) => (
+ {}} isActive={false} />
+ ))}
+
+
+
+
+
+)
+
+interface TagHeaderProps {
+ onAddNewTag: () => void
+ onOrderTags: () => void
+}
+
+const TagHeader: React.FC
+
+
+ {item.imageUrl && (
+
+ )}
+
+
+ {item.tagName}
+ {item.tagDescription && (
+ {item.tagDescription}
+ )}
+ {item.isDashboardTag && (
+
+
+ Dashboard Tag
+
+ )}
+
+
+
+
+)
+
+function ProductTags() {
+ const navigate = useNavigate()
+ const { data: tagsData, isLoading, error, refetch } = trpc.admin.product.getProductTags.useQuery()
+
+ const tags = tagsData?.tags || []
+
+ useManualRefresh(refetch)
+
+ useMarkDataFetchers(() => {
+ refetch()
+ })
+
+ const handleAddNewTag = () => {
+ navigate({ to: '/dashboard/product-tags/new' })
+ }
+
+ const handleOrderTags = () => {
+ navigate({ to: '/dashboard/product-tags/order' })
+ }
+
+ if (isLoading) {
+ return (
+
+ Loading tags...
+
+ )
+ }
+
+ if (error) {
+ return (
+
+ Error
+ {error?.message || 'Failed to load tags'}
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.products.$id.tsx b/apps/admin-web/src/routes/dashboard.products.$id.tsx
new file mode 100644
index 0000000..dbea6e7
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.products.$id.tsx
@@ -0,0 +1,461 @@
+import React, { useState, useRef } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import {
+ Star,
+ CircleAlert,
+ ArrowLeft,
+ Pencil,
+ FileText,
+ LayoutGrid,
+ Tag,
+ MessageSquareText,
+ BadgeCheck,
+ Reply,
+ X,
+ MessageCircle,
+ Quote,
+} from 'lucide-react'
+import { AppContainer, p as MyText, BottomDialog, ImageUploader, ImageCarousel } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import { useMarkDataFetchers } from '@/lib/refresh-context'
+import { useUploadToObjectStorage } from '@/hooks/useUploadToObjectStorage'
+import { Formik } from 'formik'
+
+export const Route = createFileRoute('/dashboard/products/$id')({
+ component: ProductDetail,
+})
+
+interface ReviewResponseFormProps {
+ reviewId: number
+ onClose: () => void
+}
+
+const ReviewResponseForm: React.FC
+ No tags yet
+ Create your first product tag
+
+ }
+ className="pb-4"
+ />
+
+
+
+
+ )}
+
+ Attach Images
+ handleFilesSelected(e.target.files)}
+ />
+ fileInputRef.current?.click()}
+ onRemoveImage={handleRemoveImage}
+ />
+
+
+
+
+
+ Loading...
+
+
+ Product Not Found
+
+
+
+ setResponseDialogOpen(false)}>
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.products.edit.tsx b/apps/admin-web/src/routes/dashboard.products.edit.tsx
new file mode 100644
index 0000000..7685a74
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.products.edit.tsx
@@ -0,0 +1,227 @@
+import React, { useRef, useMemo } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { AppContainer, p as MyText, type ImageUploaderNeoItem, type ImageUploaderNeoPayload } from 'web-components'
+import ProductForm, { type ProductFormRef } from '../components/ProductForm'
+import { trpc } from '@/lib/trpc-client'
+import { useManualRefresh } from '@/lib/refresh-context'
+import { useUploadToObjectStorage } from '@/hooks/useUploadToObjectStorage'
+
+export const Route = createFileRoute('/dashboard/products/edit')({
+ validateSearch: (s: Record
+
+
+
+ {defaultSku?.images && defaultSku.images.length > 0 ? (
+ ({ uri: url }))}
+ className="[&_img]:h-80"
+ />
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {product.name}
+
+
+
+
+
+
+
+ {product.skus?.length ?? 0} Variant{(product.skus?.length ?? 0) !== 1 ? 's' : ''}
+
+
+
+
+
+
+
+
+ Rating
+
+ {reviewsData?.reviews.length || 0}
+ Reviews
+
+
+ {product.incrementStep || 1}
+ Step
+
+
+
+
+
+
+
+
+
+ {product.shortDescription && (
+
+
+ Description
+ {product.shortDescription}
+ )} + ++ {product.longDescription || 'No detailed description available for this product.'} +
+
+
+
+ {product.deals && product.deals.length > 0 && (
+
+
+
+
+
+ {product.skus?.map((sku) => (
+
+
+ Variants
+
+ {product.skus?.length ?? 0}
+
+
+ {sku.features?.map((f) => (
+
+ ))}
+
+ {f.featureName}
+ {f.featureValue}
+
+ ))}
+
+
+
+
+ {sku.images && sku.images.length > 0 && (
+
+
+ ₹{sku.price}
+ {sku.marketPrice && ( +₹{sku.marketPrice}
+ )} +
+ {sku.isFlashAvailable && (
+
+
+ Flash ₹{sku.flashPrice}
+
+ )}
+
+
+ {sku.isOutOfStock ? 'Out of Stock' : 'In Stock'}
+
+
+
+ {sku.images.map((url, idx) => (
+ 
+ ))}
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+ {product.deals.map((deal, index) => (
+
+
+ Special Deals
+
+
+ ))}
+
+
+ Buy {deal.quantity}
+Valid until {new Date(deal.validTill).toLocaleDateString()}
+
+
+ ₹{deal.price}
+Total Price
+
+
+
+
+
+
+
+ {reviewsData && reviewsData.reviews.length > 0 ? (
+ reviewsData.reviews.map((review) => (
+
+
+
+
+ Reviews
+
+ {reviewsData?.reviews.length || 0} Total
+
+
+
+ ))
+ ) : (
+
+
+
+
+
+ {review.userName}
+
+
+
+ {[1, 2, 3, 4, 5].map((star) => (
+
+ {review.reviewBody}
+ + {review.signedImageUrls && review.signedImageUrls.length > 0 && ( +
+ {review.signedImageUrls.map((url, index) => (
+
+ ))}
+
+ )}
+
+ {review.adminResponse ? (
+
+
+ ) : (
+
+ )}
+
+
+ {review.adminResponse}
+ {review.signedAdminImageUrls && review.signedAdminImageUrls.length > 0 && ( +
+ {review.signedAdminImageUrls.map((url, index) => (
+
+ ))}
+
+ )}
+
+
+ )}
+
+
+
+ Reply to Review
+
+
+
+ {selectedReview && (
+
+ {
+ setResponseDialogOpen(false)
+ setSelectedReview(null)
+ }}
+ />
+
+ )}
+
+
+ {selectedReview.reviewBody}
+
+
+
+
+ + Replying to {selectedReview.userName} +
+ Loading product...
+
+
+ Product not found
+
+
+ Loading products...
+
+
+ Error loading products
+
+
+
+ Products
+ navigate({ to: '/dashboard/products/new' })}>
+ Add Product
+
+
+
+
+
+
+
+
+
+ )
+
+ const renderItem = (product: any) => {
+ const defaultSku = getDefaultSku(product)
+ const skuImages = defaultSku?.images ?? null
+ const isOut = defaultSku?.isOutOfStock ?? false
+
+ return (
+
+ {skuImages && skuImages.length > 0 ? (
+ 
+ ) : (
+
+ )
+ }
+
+ return (
+
+
+ )}
+
+
+
+ {product.shortDescription}
+
+ )}
+
+
+
+
+ {product.name}
+
+
+
+ {product.shortDescription && (
+
+
+
+ {isOut ? 'Out' : 'In'}
+
+
+
+
+ {product.skus?.length ?? 0} Variants
+
+
+
+
+
+
+
+
+
+ item.id.toString()}
+ ListHeaderComponent={listHeader}
+ ListEmptyComponent={
+
+
+
+ {searchTerm || activeFilter !== 'all' ? 'No products match your filters' : 'No products found'}
+
+
+ {searchTerm || activeFilter !== 'all' ? 'Try adjusting your search or filters' : 'Start by adding your first product'}
+
+ {(searchTerm || activeFilter !== 'all') && (
+
+ )}
+
+ }
+ className="pb-4"
+ />
+ toggleSlotSelection(slot.id)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') toggleSlotSelection(slot.id)
+ }}
+ className="mb-4 cursor-pointer rounded-3xl border border-gray-100 bg-white p-5 text-left shadow-sm"
+ >
+
+ )
+}
+
+function RebalanceOrders() {
+ const [selectedSlots, setSelectedSlots] = useState
+
+
+
+
+
+ e.stopPropagation()}>
+ toggleSlotSelection(slot.id)}
+ size={24}
+ />
+
+
+
+
+
+ Slot #{slot.id}
+ ID: {slot.id}
+
+
+
+ {statusText}
+
+
+
+
+
+ {slotProducts.length > 0 ? (
+
+
+ {dayjs(slot.deliveryTime).format('DD MMM, h:mm A')}
+
+
+
+
+ Delivery
+
+
+
+ {dayjs(slot.freezeTime).format('DD MMM, h:mm A')}
+
+
+
+ Freeze
+
+
+
+ ) : null}
+
+
+
+ Products
+
+
+ {displayProducts}
+ {slotProducts.length > 2 && (
+
+ )}
+
+
+ Loading slots...
+
+ )
+ }
+
+ return (
+
+
+
+
+
+ setDialogOpen(false)}>
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.slots.$id.edit.tsx b/apps/admin-web/src/routes/dashboard.slots.$id.edit.tsx
new file mode 100644
index 0000000..6e8785b
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.slots.$id.edit.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { p as MyText, AppContainer } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import SlotForm from '../components/SlotForm'
+
+export const Route = createFileRoute('/dashboard/slots/$id/edit')({
+ component: EditSlot,
+})
+
+function EditSlot() {
+ const { id } = Route.useParams()
+ const slotId = parseInt(id as string)
+
+ const { data: slot, isLoading } = trpc.admin.slots.getSlotById.useQuery({ id: slotId })
+
+ const handleSlotUpdated = () => {
+ window.history.back()
+ }
+
+ if (isLoading) {
+ return (
+
+ Rebalance Upcoming Slots
+ {selectedSlots.length > 0 && (
+
+ {selectedSlots.length} slot{selectedSlots.length === 1 ? '' : 's'} selected
+
+ )}
+ {upcomingSlots.length === 0 ? (
+ item.id.toString()}
+ renderItem={(item) => (
+
+
+
+ No upcoming slots available for rebalancing.
+
+ ) : (
+
+ No upcoming slots available for rebalancing.
+
+ }
+ />
+ )}
+
+ All Products
+
+
+ {dialogProducts.map((item, index) => (
+
+
+ {item}
+
+ ))}
+
+ Loading slot...
+
+
+ Slot not found
+
+
+ Loading slot details...
+
+ )
+ }
+
+ if (error || !slot) {
+ return (
+
+ Error loading slot details
+
+ )
+ }
+
+ return (
+
+ setDialogOpen(false)}>
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.slots.new.tsx b/apps/admin-web/src/routes/dashboard.slots.new.tsx
new file mode 100644
index 0000000..015851c
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.slots.new.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { p as MyText, AppContainer } from 'web-components'
+import SlotForm from '../components/SlotForm'
+import { trpc } from '@/lib/trpc-client'
+
+export const Route = createFileRoute('/dashboard/slots/new')({
+ validateSearch: (s: Record
+ {/* Header */}
+
+
+ {/* FAB for Edit Slot */}
+
+
+
+
+ Slot #{slot.id}
+
+
+
+ {/* Vendor Snippets Section */}
+
+
+ {slot.isActive ? 'Active' : 'Inactive'}
+
+
+
+
+
+ Delivery: {dayjs(slot.deliveryTime).format('MMM DD, YYYY hh:mm A')}
+
+
+ Freeze: {dayjs(slot.freezeTime).format('MMM DD, YYYY hh:mm A')}
+
+
+
+
+
+
+ {/* Products Section */}
+
+ Vendor Snippets
+
+ {vendorSnippets.length} snippets
+
+
+
+ {vendorSnippets.length === 0 ? (
+
+ No vendor snippets for this slot
+
+ ) : (
+
+ {vendorSnippets.map((snippet, index) => {
+ const isExpired = snippet.validTill && dayjs(snippet.validTill).isBefore(dayjs())
+
+ return (
+
+ )}
+
+
+ )
+ })}
+
+
+
+
+
+ {snippet.snippetCode}
+
+
+
+
+
+ {isExpired ? 'Expired' : 'Active'}
+
+
+
+
+
+ Expires {dayjs(snippet.validTill).format('MMM DD')}
+
+
+ )}
+
+
+ {snippet.createdAt && (
+
+
+
+
+
+
+ {snippet.validTill && (
+
+
+
+ Created {dayjs(snippet.createdAt).format('MMM DD, YYYY')}
+
+
+ )}
+
+
+
+ Products
+
+ {products.length} items
+
+
+
+ {products.length === 0 ? (
+
+ No products in this slot
+
+ ) : (
+
+ {products.map((product) => (
+
+
+ {product.name}
+
+
+ ))}
+
+ )}
+
+ Snippet Products
+
+
+ {dialogProducts.length === 0 ? (
+
+
+
+ No products found for this snippet
+
+
+ ) : (
+ dialogProducts.map((product) => (
+
+
+ {product.name}
+
+ {product.shortDescription && (
+
+ {product.shortDescription}
+
+ )}
+
+ ))
+ )}
+
+ Loading base slot...
+
+ navigate({ to: '/dashboard/slots/detail', search: { slotId: String(slot.id) } })}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => { if (e.key === 'Enter') navigate({ to: '/dashboard/slots/detail', search: { slotId: String(slot.id) } }) }}
+ className="w-full cursor-pointer text-left"
+ >
+
+ )
+}
+
+function Slots() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const { data: slotsData, isLoading, refetch } = trpc.admin.slots.getAll.useQuery()
+
+ const slots = slotsData?.slots || []
+
+ // Dialog state
+ const [dialogOpen, setDialogOpen] = useState(false)
+ const [dialogProducts, setDialogProducts] = useState
+ {/* Header: ID and Status */}
+
+
+
+
+ {/* Replicate Menu Dialog */}
+
+
+
+
+ Slot #{slot.id}
+ ID: {slot.id}
+
+
+
+
+ {statusText}
+
+ {slot.isCapacityFull && (
+
+ FULL
+
+ )}
+
+
+ e.stopPropagation()}>
+ setMenuOpen(false)}>
+
+
+
+ {/* Divider */}
+
+
+ {/* Details Grid */}
+
+ Slot #{slot.id} Actions
+
+ {/* Capacity Toggle */}
+
+
+
+
+
+
+ {/* Delivery Time */}
+
+
+ {/* Products */}
+ {slotProducts.length > 0 ? (
+
+
+ {dayjs(slot.deliveryTime).format('DD MMM, h:mm A')}
+
+
+
+ {/* Freeze Time */}
+
+ Delivery
+
+
+
+ {dayjs(slot.freezeTime).format('DD MMM, h:mm A')}
+
+
+
+ Freeze
+
+
+
+ ) : null}
+
+
+
+ Products
+
+
+ {displayProducts}
+ {slotProducts.length > 2 && (
+
+ )}
+
+
+ Loading slots...
+
+ )
+ }
+
+ return (
+
+ item.id.toString()}
+ renderItem={(item) => (
+ setDialogOpen(false)}>
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.stores.edit.tsx b/apps/admin-web/src/routes/dashboard.stores.edit.tsx
new file mode 100644
index 0000000..4c60e8b
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.stores.edit.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { AppContainer, p as MyText } from 'web-components'
+import StoreForm, { type StoreFormData } from '../components/StoreForm'
+import { trpc } from '@/lib/trpc-client'
+import { ErrorToast } from '@/services/toaster'
+
+export const Route = createFileRoute('/dashboard/stores/edit')({
+ validateSearch: (s: Record
+ All Products
+
+
+ {dialogProducts.map((item, index) => (
+
+
+ {item}
+
+ ))}
+
+ Loading store...
+
+
+ Store not found
+
+
+ Edit Store
+
+
+ Add New Store
+
+
+
+ )
+}
+
+function Stores() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const [isEditMode, setIsEditMode] = useState(false)
+
+ const { data: storesData, isLoading, error, refetch } = trpc.admin.store.getStores.useQuery()
+ const { mutateAsync: deleteStoreAsync } = trpc.admin.store.deleteStore.useMutation()
+
+ useMarkDataFetchers(() => {
+ refetch()
+ })
+
+ const stores = storesData?.stores || []
+
+ const handleEdit = (storeId: number) => {
+ navigate({ to: '/dashboard/stores/edit', search: { id: String(storeId) } })
+ }
+
+ const handleDelete = (storeId: number) => {
+ if (!window.confirm('Delete Store: Are you sure you want to delete this store? This action cannot be undone. All products will be unassigned from this store.')) return
+ ;(async () => {
+ try {
+ await deleteStoreAsync({ storeId })
+ refetch()
+ window.alert('Success: Store deleted successfully')
+ } catch (err: any) {
+ ErrorToast(err.message || 'Failed to delete store')
+ }
+ })()
+ }
+
+ if (location.pathname !== '/dashboard/stores') {
+ return
+ {/* Delete Button - Only visible in edit mode */}
+ {isEditMode && (
+
+ )}
+
+
+ onEdit(item.id)}
+ role={isEditMode ? undefined : 'button'}
+ tabIndex={isEditMode ? undefined : 0}
+ onKeyDown={isEditMode ? undefined : (e) => { if (e.key === 'Enter') onEdit(item.id) }}
+ className={`flex-1 ${isEditMode ? '' : 'cursor-pointer'}`}
+ >
+ {/* Image Section - Portrait oriented */}
+
+
+ {item.imageUrl ? (
+
+ ) : (
+
+
+ {/* Content Section */}
+
+
+ )}
+
+ {/* Status Dot */}
+
+
+
+ {item.name}
+
+
+
+
+ ID: #{item.id}
+
+
+ {item.createdAt ? new Date(item.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : 'N/A'}
+
+
+
+ {/* Action Footer */}
+
+ View Details
+
+
+
+ Loading stores...
+
+ )
+ }
+
+ if (error) {
+ return (
+
+
+ Oops!
+ We couldn't load the stores. Please try again.
+ refetch()} variant="red" className="rounded-xl px-8 py-3">
+ Retry
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.tsx b/apps/admin-web/src/routes/dashboard.tsx
new file mode 100644
index 0000000..fea355f
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.tsx
@@ -0,0 +1,190 @@
+import React, { useState } from 'react'
+import { createFileRoute, Outlet, useNavigate, useLocation, Navigate } from '@tanstack/react-router'
+import {
+ LayoutDashboard,
+ Package,
+ DollarSign,
+ Group,
+ Images,
+ CalendarClock,
+ TriangleAlert,
+ ShoppingBag,
+ TicketPercent,
+ Code2,
+ Store,
+ Users,
+ Megaphone,
+ LogOut,
+ Menu,
+ ArrowLeft,
+ RefreshCw,
+ UserRound,
+} from 'lucide-react'
+import { p as MyText } from 'web-components'
+import { useStaffAuth } from '../components/context/staff-auth-context'
+import { EventBus, REFRESH_EVENT } from '../lib/event-bus'
+
+export const Route = createFileRoute('/dashboard')({
+ component: DashboardShell,
+})
+
+const SCREEN_TITLES: Record
+
+
+ {stores.length === 0 ? (
+
+
+
+ Stores
+ Manage your outlets
+
+
+
+
+ {stores.length} Locations
+
+
+
+ No stores found
+ Get started by adding your first store location.
+
+ ) : (
+
+ {stores.map((item) => (
+
+ )}
+
+ {/* Floating Action Button for Adding New Store */}
+
+
+
+
+
+
+ )
+ }
+
+ if (!isLoggedIn) {
+ return
+ {staff && (
+
+ )
+
+ return (
+
+
+ )}
+
+
+ {staff.name}
+ Staff Member
+
+
+ {/* Desktop sidebar */}
+
+
+ {/* Mobile drawer */}
+ {sidebarOpen && (
+ {
+}
+
+const getStatusColor = (status: string) => {
+ switch (status) {
+ case 'delivered':
+ return 'text-green-600 bg-green-50 border-green-100'
+ case 'cancelled':
+ return 'text-red-600 bg-red-50 border-red-100'
+ default:
+ return 'text-yellow-600 bg-yellow-50 border-yellow-100'
+ }
+}
+
+const OrderItem: React.FC = ({ order, onPress }) => {
+ const statusStyle = getStatusColor(order.status)
+
+ return (
+
+
+ )
+ }
+
+ if (error || !data) {
+ return (
+
+
+ )
+ }
+
+ const { user, orders } = data
+ const displayName = user.name || 'Unnamed User'
+
+ return (
+
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.users.tsx b/apps/admin-web/src/routes/dashboard.users.tsx
new file mode 100644
index 0000000..4b405a9
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.users.tsx
@@ -0,0 +1,265 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { ShoppingBag, CircleAlert, Users } from 'lucide-react'
+import { AppContainer, p as MyText, SearchBar, MyFlatList, MyButton } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import { formatDistanceToNow } from 'date-fns'
+
+export const Route = createFileRoute('/dashboard/users')({
+ component: UserManagement,
+})
+
+interface User {
+ id: number
+ name: string | null
+ mobile: string | null
+ createdAt: string
+ totalOrders: number
+ lastOrderDate: string | null
+ isSuspended: boolean
+}
+
+interface UserItemProps {
+ user: User
+ index: number
+ onClick: () => void
+}
+
+const UserItem: React.FC = ({ user, index, onClick }) => {
+ const displayName = user.name || 'Unnamed User'
+ const hasOrders = user.totalOrders > 0
+
+ const lastOrderText = user.lastOrderDate
+ ? formatDistanceToNow(new Date(user.lastOrderDate), { addSuffix: true })
+ : 'Never'
+
+ return (
+ = ({ searchTerm, onSearchChange, userCount, refreshing, onRefresh }) => (
+ handleUserPress(item.id)} />
+ }, [handleUserPress])
+
+ if (isLoading && !hasLoadedOnce) {
+ return (
+
+
+ )
+ }
+
+ if (isError) {
+ return (
+
+
+ )
+ }
+
+ return (
+ (null)
+ const [showOrdersView, setShowOrdersView] = useState(false)
+ const [ordersData, setOrdersData] = useState(null)
+ const [showProductList, setShowProductList] = useState(false)
+ const [selectedProducts, setSelectedProducts] = useState(null)
+
+ useManualRefresh(() => {
+ void refetch()
+ })
+
+ useMarkDataFetchers(() => {
+ refetch()
+ })
+
+ const handleCreate = () => {
+ setShowCreateForm(true)
+ setEditingSnippet(null)
+ }
+
+ const handleViewProducts = (products: VendorSnippetProduct[]) => {
+ setSelectedProducts(products)
+ setShowProductList(true)
+ }
+
+ const handleEdit = (snippet: VendorSnippet) => {
+ const formSnippet: VendorSnippetFormType = {
+ id: snippet.id,
+ snippetCode: snippet.snippetCode,
+ slotId: snippet.slotId || 0,
+ isPermanent: snippet.isPermanent,
+ skuIds: snippet.skuIds,
+ validTill: snippet.validTill,
+ createdAt: snippet.createdAt,
+ }
+ setEditingSnippet(formSnippet)
+ setShowCreateForm(true)
+ }
+
+ const handleDelete = (id: number) => {
+ deleteSnippet.mutate(
+ { id },
+ {
+ onSuccess: () => {
+ refetch()
+ },
+ },
+ )
+ }
+
+ const handleViewOrders = async (snippetCode: string) => {
+ try {
+ const trpcClient = getTrpcClient()
+ const result =
+ await trpcClient.admin.vendorSnippets.getOrdersBySnippet.query({
+ snippetCode,
+ })
+ if (result.success) {
+ setOrdersData({
+ orders: result.data,
+ snippetCode: snippetCode,
+ })
+ setShowOrdersView(true)
+ } else {
+ window.alert('Error: Failed to fetch orders')
+ }
+ } catch (error: any) {
+ window.alert(`Error: ${error.message || 'Failed to fetch orders'}`)
+ }
+ }
+
+ if (isLoading) {
+ return (
+
+
+ )
+ }
+
+ if (error) {
+ return (
+
+
+ )
+ }
+
+ if (showOrdersView && ordersData) {
+ return (
+ {
+ setShowOrdersView(false)
+ setOrdersData(null)
+ }}
+ />
+ )
+ }
+
+ if (showCreateForm) {
+ return (
+ {
+ setShowCreateForm(false)
+ setEditingSnippet(null)
+ }}
+ onSuccess={() => {
+ setShowCreateForm(false)
+ setEditingSnippet(null)
+ refetch()
+ }}
+ />
+ )
+ }
+
+ return (
+ <>
+
+
+
+
+
+ setShowProductList(false)}
+ products={selectedProducts || []}
+ />
+
+ )
+}
diff --git a/apps/admin-web/src/routes/index.tsx b/apps/admin-web/src/routes/index.tsx
new file mode 100644
index 0000000..6e4a0b8
--- /dev/null
+++ b/apps/admin-web/src/routes/index.tsx
@@ -0,0 +1,26 @@
+import { createFileRoute, Navigate } from '@tanstack/react-router'
+import { AppContainer } from 'web-components'
+import { useStaffAuth } from '../components/context/staff-auth-context'
+
+export const Route = createFileRoute('/')({
+ component: Index,
+})
+
+function Index() {
+ const { isLoggedIn, isLoading } = useStaffAuth()
+
+ if (isLoading) {
+ return (
+
+
+ )
+ }
+
+ if (isLoggedIn) {
+ return (null)
+ const { login, isLoggingIn, loginError } = useStaffAuth()
+
+ const handleLogin = async () => {
+ if (!name.trim() || !password.trim()) {
+ // Same guard as admin-ui's Alert.alert("Error", ...)
+ setLocalError('Please enter both name and password')
+ return
+ }
+ setLocalError(null)
+
+ try {
+ await login(name.trim(), password)
+ } catch (error) {
+ // Error is handled in the context
+ }
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/admin-web/src/services/toaster.tsx b/apps/admin-web/src/services/toaster.tsx
new file mode 100644
index 0000000..ad5588d
--- /dev/null
+++ b/apps/admin-web/src/services/toaster.tsx
@@ -0,0 +1,18 @@
+import { toast } from 'sonner'
+
+// Same API as admin-ui services/toaster.tsx, backed by sonner for web.
+export function InfoToast(message: string) {
+ toast.info(message, { duration: 10000 })
+}
+
+export function ErrorToast(message: string) {
+ toast.error(message)
+}
+
+export function SuccessToast(message: string) {
+ toast.success(message)
+}
+
+export function NotificationToast(title: string, subtitle: string, _data: any) {
+ toast.info(title, { description: subtitle })
+}
diff --git a/apps/admin-web/src/ssr.tsx b/apps/admin-web/src/ssr.tsx
new file mode 100644
index 0000000..aad9423
--- /dev/null
+++ b/apps/admin-web/src/ssr.tsx
@@ -0,0 +1,8 @@
+import {
+ createStartHandler,
+ defaultStreamHandler,
+} from '@tanstack/react-start/server'
+
+export default createStartHandler({
+ handler: defaultStreamHandler,
+})
diff --git a/apps/admin-web/src/styles.css b/apps/admin-web/src/styles.css
new file mode 100644
index 0000000..e28c7a5
--- /dev/null
+++ b/apps/admin-web/src/styles.css
@@ -0,0 +1,150 @@
+
+@import "tailwindcss";
+
+@theme {
+ --color-brand-25: #EFF8FF;
+ --color-brand-50: #F5FAFF;
+ --color-brand-100: #D1E9FF;
+ --color-brand-200: #B2DDFF;
+ --color-brand-300: #84CAFF;
+ --color-brand-400: #53B1FD;
+ --color-brand-500: #2E90FA;
+ --color-brand-600: #1570EF;
+ --color-brand-700: #175CD3;
+ --color-brand-800: #1849A9;
+ --color-brand-900: #194185;
+ /* Flash delivery accent — consistent with user-ui */
+ --color-flash-25: #FFF5F6;
+ --color-flash-50: #FFE8EA;
+ --color-flash-100: #FFD1D6;
+ --color-flash-200: #FFA3AE;
+ --color-flash-300: #FF7585;
+ --color-flash-400: #F81260;
+ --color-flash-500: #E11D48;
+ --color-flash-600: #C40E50;
+ --color-flash-700: #9E0A3F;
+
+ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+ min-height: 100%;
+}
+
+body {
+ margin: 0;
+ background-color: #f9fafb;
+ color: #111827;
+ font-family: var(--font-sans);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+/* Safe area padding for mobile devices */
+.pb-safe {
+ padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* Hide scrollbar but allow scrolling */
+.scrollbar-hide {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+ display: none;
+}
+
+/* Line clamp utilities */
+.line-clamp-2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+/* Focus rings — architecture, not decoration */
+:focus-visible {
+ outline: 2px solid var(--color-brand-600);
+ outline-offset: 2px;
+ border-radius: 4px;
+}
+
+/* App shell — full-height flex column for content; sidebar rail at md+.
+ Sticky topbar/search live inside .shell-main so they can stick against
+ the viewport while scrolling. */
+.shell-grid {
+ min-height: 100vh;
+ display: grid;
+ grid-template-areas: "main";
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: minmax(0, 1fr);
+}
+
+@media (min-width: 768px) {
+ .shell-grid {
+ grid-template-areas: "sidebar main";
+ grid-template-columns: 20vw minmax(0, 1fr);
+ grid-template-rows: minmax(0, 1fr);
+ }
+}
+
+.shell-sidebar {
+ grid-area: sidebar;
+}
+
+/* Flex column so sticky header elements are bounded by the full column,
+ not a fixed grid row. */
+.shell-main {
+ grid-area: main;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.shell-topbar {
+ flex-shrink: 0;
+}
+
+.shell-content {
+ flex: 1;
+ min-width: 0;
+}
+
+/* Typography scale — display */
+.display-1 {
+ font-size: clamp(2rem, 4vw, 3rem);
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ font-weight: 800;
+}
+
+.display-2 {
+ font-size: clamp(1.5rem, 2.5vw, 2rem);
+ line-height: 1.2;
+ letter-spacing: -0.015em;
+ font-weight: 800;
+}
+
+/* Rule under section titles — flat, editorial */
+.section-rule {
+ border-bottom: 1px solid #e5e7eb;
+ padding-bottom: 1rem;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ *, *::before, *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/apps/admin-web/src/types/drag-order-item.ts b/apps/admin-web/src/types/drag-order-item.ts
new file mode 100644
index 0000000..447013f
--- /dev/null
+++ b/apps/admin-web/src/types/drag-order-item.ts
@@ -0,0 +1,6 @@
+// Common props for draggable reorder rows (customize-app / product-tags order screens)
+export interface DragOrderItemProps {
+ item: T
+ drag: () => void
+ isActive: boolean
+}
diff --git a/apps/admin-web/src/types/vendor-snippets.ts b/apps/admin-web/src/types/vendor-snippets.ts
new file mode 100644
index 0000000..cf433c1
--- /dev/null
+++ b/apps/admin-web/src/types/vendor-snippets.ts
@@ -0,0 +1,32 @@
+import type { IdName } from '@packages/shared';
+import type { AdminVendorSnippetInput } from '@packages/shared'
+
+export type VendorSnippetProduct = IdName;
+
+export interface VendorSnippet {
+ id: number;
+ snippetCode: string;
+ slotId: number | null;
+ isPermanent: boolean;
+ skuIds: number[];
+ products: VendorSnippetProduct[];
+ validTill: string | null;
+ createdAt: string;
+ accessUrl?: string;
+ slot?: {
+ id: number;
+ deliveryTime: string;
+ freezeTime: string;
+ isActive: boolean;
+ deliverySequence?: unknown;
+ isFlash?: boolean;
+ } | null;
+}
+
+// Vendor-snippet form row — anchored to the shared input (wire validTill);
+// form requires slotId and carries the serialized createdAt.
+export type VendorSnippetForm = Omit & {
+ id: number;
+ slotId: number;
+ createdAt: string;
+}
\ No newline at end of file
diff --git a/apps/admin-web/tsconfig.json b/apps/admin-web/tsconfig.json
new file mode 100644
index 0000000..d24e38d
--- /dev/null
+++ b/apps/admin-web/tsconfig.json
@@ -0,0 +1,33 @@
+{
+ "include": ["**/*.ts", "**/*.tsx"],
+ "compilerOptions": {
+ "target": "ES2022",
+ "jsx": "react-jsx",
+ "module": "ESNext",
+ "paths": {
+ "#/*": ["./src/*"],
+ "@/*": ["./src/*", "../../apps/backend/*"],
+ "web-components": ["../../packages/web-components/src"],
+ "web-components/*": ["../../packages/web-components/src/*"],
+ "@packages/shared": ["../../packages/shared"],
+ "@packages/shared/*": ["../../packages/shared/*"],
+ "@backend/*": ["../../apps/backend/src/*"]
+ },
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "types": ["vite/client", "node"],
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ /* Linting */
+ "skipLibCheck": true,
+ "strict": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ }
+}
diff --git a/apps/admin-web/vite.config.ts b/apps/admin-web/vite.config.ts
new file mode 100644
index 0000000..58b0a78
--- /dev/null
+++ b/apps/admin-web/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { nitro } from 'nitro/vite'
+
+import { cloudflare } from "@cloudflare/vite-plugin";
+
+const config = defineConfig({
+ resolve: { tsconfigPaths: true },
+ server: { port: 4174 },
+ plugins: [
+ devtools(),
+ tailwindcss(),
+ tanstackStart(),
+ viteReact(),
+ cloudflare({
+ viteEnvironment: {
+ name: "ssr"
+ }
+ }),
+ ],
+})
+
+export default config
\ No newline at end of file
diff --git a/apps/admin-web/wrangler.jsonc b/apps/admin-web/wrangler.jsonc
new file mode 100644
index 0000000..5887eb4
--- /dev/null
+++ b/apps/admin-web/wrangler.jsonc
@@ -0,0 +1,12 @@
+{
+ "$schema": "node_modules/wrangler/config-schema.json",
+ "name": "admin-web",
+ "compatibility_date": "2026-05-10",
+ "observability": {
+ "enabled": true
+ },
+ "main": "@tanstack/react-start/server-entry",
+ "compatibility_flags": [
+ "nodejs_compat"
+ ]
+}
diff --git a/apps/backend/src/trpc/apis/admin-apis/apis/complaint.ts b/apps/backend/src/trpc/apis/admin-apis/apis/complaint.ts
index bca4d06..fa20134 100644
--- a/apps/backend/src/trpc/apis/admin-apis/apis/complaint.ts
+++ b/apps/backend/src/trpc/apis/admin-apis/apis/complaint.ts
@@ -1,6 +1,6 @@
import { router, protectedProcedure } from '@/src/trpc/trpc-index'
import { z } from 'zod';
-import { generateSignedUrlsFromS3Urls } from '@/src/lib/s3-client'
+import { scaffoldAssetUrl } from '@/src/lib/s3-client'
import { queueDataPusher } from '@/src/lib/queue-data-pusher'
import {
getComplaintById,
@@ -68,29 +68,25 @@ export const complaintRouter = router({
const complaintsToReturn = hasMore ? complaintsData.slice(0, limit) : complaintsData;
- const complaintsWithSignedImages = await Promise.all(
- complaintsToReturn.map(async (c: ComplaintWithUser) => {
- const signedImages = c.images
- ? await generateSignedUrlsFromS3Urls(c.images as string[])
- : [];
+ const complaintsWithImageUrls = complaintsToReturn.map((c: ComplaintWithUser) => {
+ const images = scaffoldAssetUrl((c.images as string[]) || [])
- return {
- id: c.id,
- text: c.complaintBody,
- userId: c.userId,
- userName: c.userName,
- userMobile: c.userMobile,
- orderId: c.orderId,
- status: c.isResolved ? 'resolved' : 'pending',
- createdAt: c.createdAt,
- images: signedImages,
- response: c.response,
- };
- })
- );
+ return {
+ id: c.id,
+ text: c.complaintBody,
+ userId: c.userId,
+ userName: c.userName,
+ userMobile: c.userMobile,
+ orderId: c.orderId,
+ status: c.isResolved ? 'resolved' : 'pending',
+ createdAt: c.createdAt,
+ images,
+ response: c.response,
+ };
+ });
return {
- complaints: complaintsWithSignedImages,
+ complaints: complaintsWithImageUrls,
nextCursor: hasMore
? complaintsToReturn[complaintsToReturn.length - 1].id
: undefined,
diff --git a/apps/backend/src/trpc/apis/admin-apis/apis/product.ts b/apps/backend/src/trpc/apis/admin-apis/apis/product.ts
index bc66c67..e26083c 100644
--- a/apps/backend/src/trpc/apis/admin-apis/apis/product.ts
+++ b/apps/backend/src/trpc/apis/admin-apis/apis/product.ts
@@ -1,7 +1,7 @@
import { router, protectedProcedure } from '@/src/trpc/trpc-index'
import { z } from 'zod'
import { ApiError } from '@/src/lib/api-error'
-import { generateSignedUrlsFromS3Urls, scaffoldAssetUrl, claimUploadUrl, extractKeyFromPresignedUrl, deleteImageUtil } from '@/src/lib/s3-client'
+import { scaffoldAssetUrl, claimUploadUrl, extractKeyFromPresignedUrl, deleteImageUtil } from '@/src/lib/s3-client'
import { scheduleStoreInitialization } from '@/src/stores/store-initializer'
import { createAvailabilityCacheFile } from '@/src/lib/cloud_cache'
import {
@@ -65,21 +65,17 @@ export const productRouter = router({
});
*/
- const productsWithSignedUrls = await Promise.all(
- products.map(async (product) => ({
- ...product,
- skus: await Promise.all(
- product.skus.map(async (sku) => ({
- ...sku,
- images: await generateSignedUrlsFromS3Urls((sku.images as string[]) || []),
- }))
- ),
- }))
- )
+ const productsWithImageUrls = products.map((product) => ({
+ ...product,
+ skus: product.skus.map((sku) => ({
+ ...sku,
+ images: scaffoldAssetUrl((sku.images as string[]) || []),
+ })),
+ }))
return {
- products: productsWithSignedUrls,
- count: productsWithSignedUrls.length,
+ products: productsWithImageUrls,
+ count: productsWithImageUrls.length,
}
}),
@@ -136,18 +132,16 @@ export const productRouter = router({
throw new ApiError('Product not found', 404)
}
- const productWithSignedUrls = {
+ const productWithImageUrls = {
...product,
- skus: await Promise.all(
- product.skus.map(async (sku) => ({
- ...sku,
- images: await generateSignedUrlsFromS3Urls((sku.images as string[]) || []),
- }))
- ),
+ skus: product.skus.map((sku) => ({
+ ...sku,
+ images: scaffoldAssetUrl((sku.images as string[]) || []),
+ })),
}
return {
- product: productWithSignedUrls,
+ product: productWithImageUrls,
}
}),
@@ -258,18 +252,16 @@ export const productRouter = router({
await scheduleStoreInitialization()
- const productWithSignedUrls = {
+ const productWithImageUrls = {
...newProduct,
- skus: await Promise.all(
- newProduct.skus.map(async (sku) => ({
- ...sku,
- images: await generateSignedUrlsFromS3Urls((sku.images as string[]) || []),
- }))
- ),
+ skus: newProduct.skus.map((sku) => ({
+ ...sku,
+ images: scaffoldAssetUrl((sku.images as string[]) || []),
+ })),
}
return {
- product: productWithSignedUrls,
+ product: productWithImageUrls,
message: 'Product created successfully',
}
}),
@@ -356,18 +348,16 @@ export const productRouter = router({
await scheduleStoreInitialization()
- const productWithSignedUrls = {
+ const productWithImageUrls = {
...updatedProduct,
- skus: await Promise.all(
- updatedProduct.skus.map(async (sku) => ({
- ...sku,
- images: await generateSignedUrlsFromS3Urls((sku.images as string[]) || []),
- }))
- ),
+ skus: updatedProduct.skus.map((sku) => ({
+ ...sku,
+ images: scaffoldAssetUrl((sku.images as string[]) || []),
+ })),
}
return {
- product: productWithSignedUrls,
+ product: productWithImageUrls,
message: 'Product updated successfully',
}
}),
@@ -544,17 +534,15 @@ export const productRouter = router({
return { reviews: reviewsWithSignedUrls, hasMore };
*/
- const reviewsWithSignedUrls = await Promise.all(
- reviews.map(async (review) => ({
- ...review,
- signedImageUrls: await generateSignedUrlsFromS3Urls((review.imageUrls as string[]) || []),
- signedAdminImageUrls: await generateSignedUrlsFromS3Urls((review.adminResponseImages as string[]) || []),
- }))
- )
+ const reviewsWithImageUrls = reviews.map((review) => ({
+ ...review,
+ signedImageUrls: scaffoldAssetUrl((review.imageUrls as string[]) || []),
+ signedAdminImageUrls: scaffoldAssetUrl((review.adminResponseImages as string[]) || []),
+ }))
const hasMore = offset + limit < totalCount
- return { reviews: reviewsWithSignedUrls, hasMore }
+ return { reviews: reviewsWithImageUrls, hasMore }
}),
respondToReview: protectedProcedure
@@ -852,15 +840,13 @@ export const productRouter = router({
.query(async (): Promise<{ tags: Array<{ id: number; tagName: string; tagDescription: string | null; imageUrl: string | null; isDashboardTag: boolean; relatedStores: number[] | null; createdAt: Date }>; message: string }> => {
const tags = await getAllProductTagInfosInDb()
- const tagsWithSignedUrls = await Promise.all(
- tags.map(async (tag) => ({
- ...tag,
- imageUrl: tag.imageUrl ? scaffoldAssetUrl(tag.imageUrl) : null,
- }))
- )
+ const tagsWithImageUrls = tags.map((tag) => ({
+ ...tag,
+ imageUrl: tag.imageUrl ? scaffoldAssetUrl(tag.imageUrl) : null,
+ }))
return {
- tags: tagsWithSignedUrls,
+ tags: tagsWithImageUrls,
message: 'Tags retrieved successfully',
}
}),
diff --git a/change-log.txt b/change-log.txt
index 548d277..097297f 100644
--- a/change-log.txt
+++ b/change-log.txt
@@ -1441,3 +1441,28 @@ apps/admin-ui/src/components/ProductForm.tsx (onSubmit normalization — single
+ marketPrice: v.marketPrice == null || v.marketPrice === '' ? null : Number(v.marketPrice)
+ flashPrice: v.flashPrice == null || v.flashPrice === '' ? null : Number(v.flashPrice)
(features normalization unchanged). Semantics preserved: cleared price → undefined → yup required() blocks submit; cleared market/flash → null/undefined as the old parseFloat-conditional did. add.tsx pre-check (price == null || price <= 0) and edit.tsx (marketPrice ?? undefined) work unchanged — values are genuinely numeric past this point.
+
+[2026-09-06 00:00:00] Scaffold apps/admin-web as copy of apps/web-ui (src, public, package.json, package-lock.json, vite.config.ts, tsconfig.json, wrangler.jsonc, README.md). Excluded: node_modules, dist, .output, .tanstack, .wrangler.
+Planned edits: package.json name web-ui->admin-web + add sonner, @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, date-fns (web equivalents of react-native-toast-message, react-native-draggable-flatlist, date-fns already used by admin-ui); vite.config.ts port 4174->4175; wrangler.jsonc worker name; root package.json workspaces + !"apps/admin-web" + admin-web scripts (mirror web-ui standalone treatment).
+
+[2026-09-06 00:05:00] admin-web infra batch 1 (new files): src/lib/event-bus.ts (DeviceEventEmitter-compatible bus + REFRESH_EVENT/FORCE_LOGOUT_EVENT consts), src/lib/trpc-client.ts (admin: BASE_API_URL https://devapi.freshyo.in fallback + VITE_API_URL override, Bearer JWT, 401 UNAUTHORIZED -> force-logout emit), src/lib/query-client.ts (singleton, retry 3 — same as admin-ui), src/lib/refresh-context.tsx (RefreshProvider/useRefresh/useManualRefresh/useMarkDataFetchers/useFocusCallback web ports), src/lib/theme.ts (exact theme.colors hex copy from packages/ui), src/lib/navigation-target.ts (useNavigationTarget zustand copy), src/hooks/useJWT.ts, src/hooks/useUploadToObjectStorage.ts (trpc path fix only), src/services/toaster.tsx (sonner-backed same 4-function API), src/types/vendor-snippets.ts + drag-order-item.ts (verbatim copies), src/components/context/staff-auth-context.tsx (expo-router/DeviceEventEmitter -> TanStack/bus). Deleted copied user-app src/routes/*, src/components/*, src/hooks/*, src/lib/* (scaffold placeholders, replaced by admin ports).
+
+[2026-09-06 00:30:00] admin-web dashboard heading fixes (3 edits): (1) dashboard.index.tsx MenuItemComponent text wrapper span flex-1 -> flex min-w-0 flex-1 flex-col (title/subtitle stacked vertically like mobile RN column layout; was rendering inline same-line); (2) dashboard.index.tsx quick-action title add numberOfLines={2} (parity with mobile index.tsx:257); (3) dashboard.products.$id.tsx reply-quote raw
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.users.$id.tsx b/apps/admin-web/src/routes/dashboard.users.$id.tsx
new file mode 100644
index 0000000..c17db7e
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.users.$id.tsx
@@ -0,0 +1,250 @@
+import React, { useCallback } from 'react'
+import type { OrderCardActionProps } from '@packages/shared'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { ChevronLeft, ChevronRight, CircleAlert, User as UserIcon, Clock, ShoppingBag } from 'lucide-react'
+import { AppContainer, p as MyText, Checkbox } from 'web-components'
+import { trpc } from '@/lib/trpc-client'
+import { formatDistanceToNow } from 'date-fns'
+import dayjs from 'dayjs'
+import { UserIncidentsView } from '../components/UserIncidentsView'
+
+export const Route = createFileRoute('/dashboard/users/$id')({
+ component: UserDetails,
+})
+
+interface Order {
+ id: number
+ readableId: number
+ totalAmount: string
+ createdAt: string
+ status: string
+ isFlashDelivery: boolean
+ itemCount: number
+}
+
+interface OrderItemProps extends OrderCardActionProps setSidebarOpen(false)} />
+
+
+ )}
+
+
+ {/* Header — same chrome as admin-ui drawer header */}
+
+
+ {title}
+
+
+
+
+
+
+ {
+ if (e.key === 'Enter') onPress()
+ }}
+ className="mb-3 cursor-pointer rounded-xl border border-gray-100 bg-white p-4 text-left shadow-sm transition-colors hover:bg-gray-50"
+ >
+
+ )
+}
+
+function UserDetails() {
+ const navigate = useNavigate()
+ const { id } = Route.useParams() as { id: string }
+ const userId = id ? parseInt(id) : 0
+
+ const { data, isLoading, error, refetch } = trpc.admin.user.getUserDetails.useQuery(
+ { userId },
+ { enabled: !!userId }
+ )
+
+ const updateSuspension = trpc.admin.user.updateUserSuspension.useMutation({
+ onSuccess: () => {
+ refetch()
+ },
+ })
+
+ const handleOrderPress = useCallback((orderId: number) => {
+ navigate({ to: '/dashboard/orders/$id', params: { id: String(orderId) } })
+ }, [navigate])
+
+ const handleSuspensionToggle = useCallback((isSuspended: boolean) => {
+ updateSuspension.mutate({ userId, isSuspended })
+ }, [userId, updateSuspension])
+
+ if (isLoading) {
+ return (
+
+
+ {order.status}
+
+
+
+
+
+
+ #{order.readableId}
+
+ {order.isFlashDelivery && (
+
+ ⚡
+
+ )}
+
+
+
+
+ ₹{order.totalAmount}
+
+
+
+
+
+ {dayjs(order.createdAt).format('MMM DD, YYYY • h:mm A')}
+
+
+ {order.itemCount} {order.itemCount === 1 ? 'item' : 'items'}
+
+
+
+
+ View Order Details
+
+
+
+
+ Loading user details...
+
+
+ Error
+
+ {error?.message || 'Failed to load user details'}
+
+
+
+
+
+
+
+ User Details
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {displayName}
+
+
+
+
+ {user.mobile || 'No Mobile'}
+
+ {user.isSuspended && (
+
+ Suspended
+
+ )}
+
+
+
+
+
+
+ Registered {formatDistanceToNow(new Date(user.createdAt), { addSuffix: true })}
+
+
+
+ handleSuspensionToggle(!user.isSuspended)}
+ size={28}
+ />
+ )}
+
+
+
+ Suspend User
+
+
+ Prevent user from placing orders
+
+
+ {updateSuspension.isPending ? (
+
+ ) : (
+
+ handleOrderPress(order.id)}
+ />
+ ))
+ )}
+
+
+ Order History
+
+ {orders.length} {orders.length === 1 ? 'order' : 'orders'}
+
+
+
+ {orders.length === 0 ? (
+
+
+ No orders yet
+
+
+ ) : (
+ orders.map((order) => (
+ {
+ if (e.key === 'Enter') onClick()
+ }}
+ className="mb-3 cursor-pointer rounded-xl border border-gray-100 bg-white p-4 text-left shadow-sm transition-colors hover:bg-gray-50"
+ >
+
+ )
+}
+
+interface ListHeaderProps {
+ searchTerm: string
+ onSearchChange: (text: string) => void
+ userCount: number
+ refreshing: boolean
+ onRefresh: () => void
+}
+
+const ListHeader: React.FC
+
+
+ {index + 1}
+
+
+
+
+ {displayName}
+
+
+
+ Registered: {formatDistanceToNow(new Date(user.createdAt), { addSuffix: true })}
+
+
+
+
+
+ {user.mobile || 'No Mobile'}
+
+ {user.isSuspended && (
+
+ Suspended
+
+ )}
+
+
+
+
+ Last: {lastOrderText}
+
+
+
+
+ {user.totalOrders} orders
+
+
+
+
+
+)
+
+const ListFooter: React.FC<{ isFetching: boolean, hasNextPage: boolean, onLoadMore: () => void }> = ({ isFetching, hasNextPage, onLoadMore }) => {
+ if (isFetching) {
+ return (
+
+
+
+
+
+ Showing {userCount} users
+
+
+
+
+
+
+ )
+ }
+ if (hasNextPage) {
+ return (
+
+
+ )
+ }
+ return null
+}
+
+function UserManagement() {
+ const navigate = useNavigate()
+ const [searchTerm, setSearchTerm] = useState('')
+ const [refreshing, setRefreshing] = useState(false)
+ const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+
+ const {
+ data,
+ isLoading,
+ isError,
+ error,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ refetch,
+ } = trpc.admin.user.getAllUsers.useInfiniteQuery(
+ {
+ limit: 30,
+ search: searchTerm || undefined,
+ },
+ {
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ }
+ )
+
+ useEffect(() => {
+ if (data?.pages?.length) {
+ setHasLoadedOnce(true)
+ }
+ }, [data])
+
+ const users = useMemo(() => {
+ const allUsers = data?.pages.flatMap((page) => page.users) || []
+ const uniqueUsers = allUsers.filter((user, index, self) =>
+ index === self.findIndex((u) => u.id === user.id)
+ )
+ return uniqueUsers
+ }, [data])
+
+ const handleRefresh = useCallback(async () => {
+ setRefreshing(true)
+ await refetch()
+ setRefreshing(false)
+ }, [refetch])
+
+ const handleLoadMore = useCallback(() => {
+ if (hasNextPage && !isFetchingNextPage) {
+ fetchNextPage()
+ }
+ }, [hasNextPage, isFetchingNextPage, fetchNextPage])
+
+ const handleUserPress = useCallback((userId: number) => {
+ navigate({ to: '/dashboard/users/$id', params: { id: String(userId) } })
+ }, [navigate])
+
+ const renderUserItem = useCallback((item: User, index: number) => {
+ return
+
+ Loading users...
+
+
+ Error
+
+ {error?.message || 'Failed to load users'}
+
+
+
+
+ item.id.toString()}
+ ListHeaderComponent={
+
+ )
+}
diff --git a/apps/admin-web/src/routes/dashboard.vendor-snippets.tsx b/apps/admin-web/src/routes/dashboard.vendor-snippets.tsx
new file mode 100644
index 0000000..28c02c6
--- /dev/null
+++ b/apps/admin-web/src/routes/dashboard.vendor-snippets.tsx
@@ -0,0 +1,421 @@
+import React, { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { AppContainer, p as MyText, div as MyTouchableOpacity } from 'web-components'
+import { useManualRefresh, useMarkDataFetchers } from '@/lib/refresh-context'
+import { theme } from '@/lib/theme'
+import { trpc, getTrpcClient } from '@/lib/trpc-client'
+import { Fingerprint, CalendarCheck, ShoppingBag, Link2, ChevronRight, Plus, Code2 } from 'lucide-react'
+import dayjs from 'dayjs'
+import VendorSnippetForm from '../components/VendorSnippetForm'
+import SnippetOrdersView from '../components/SnippetOrdersView'
+import { SnippetMenu } from '../components/SnippetMenu'
+import { ProductListDialog } from '../components/ProductListDialog'
+import type {
+ VendorSnippet,
+ VendorSnippetProduct,
+ VendorSnippetForm as VendorSnippetFormType,
+} from '@/types/vendor-snippets'
+
+export const Route = createFileRoute('/dashboard/vendor-snippets')({
+ component: VendorSnippets,
+})
+
+const SnippetItem = ({
+ snippet,
+ onEdit,
+ onDelete,
+ onViewOrders,
+ onViewProducts,
+ index,
+}: {
+ snippet: VendorSnippet
+ onEdit: (snippet: VendorSnippet) => void
+ onDelete: (id: number) => void
+ onViewOrders: (snippetCode: string) => void
+ onViewProducts: (products: VendorSnippetProduct[]) => void
+ index: number
+}) => {
+
+ const isExpired =
+ snippet.validTill && dayjs(snippet.validTill).isBefore(dayjs())
+
+ const handleCopyLink = async () => {
+ try {
+ if (!snippet.accessUrl) {
+ window.alert('Error: No link available')
+ return
+ }
+ if (typeof navigator.share === 'function') {
+ await navigator.share({ text: snippet.accessUrl })
+ } else {
+ await navigator.clipboard.writeText(snippet.accessUrl)
+ window.alert('Link copied to clipboard')
+ }
+ } catch (error: any) {
+ if (error?.name === 'AbortError') return
+ window.alert('Error: Failed to share link')
+ }
+ }
+
+ return (
+
+
+ No users found
+
+ {searchTerm && (
+
+ Try adjusting your search
+
+ )}
+
+ }
+ />
+
+
+ )
+}
+
+function VendorSnippets() {
+ const {
+ data: snippets,
+ isLoading,
+ error,
+ refetch,
+ } = trpc.admin.vendorSnippets.getAll.useQuery()
+
+ const createSnippet = trpc.admin.vendorSnippets.create.useMutation()
+ const updateSnippet = trpc.admin.vendorSnippets.update.useMutation()
+ const deleteSnippet = trpc.admin.vendorSnippets.delete.useMutation()
+
+ void createSnippet
+ void updateSnippet
+
+ const [showCreateForm, setShowCreateForm] = useState(false)
+ const [editingSnippet, setEditingSnippet] =
+ useState
+
+
+
+
+
+
+
+
+
+
+
+ Identifier
+
+
+ {snippet.snippetCode}
+
+
+
+
+
+
+
+ {isExpired ? 'Expired' : 'Active'}
+
+
+
+
+
+
+
+
+ {snippet.isPermanent ? (
+ <>
+
+ Permanent
+
+
+ Always Active
+
+
+ ) : snippet.slot?.deliveryTime ? (
+ <>
+
+ {dayjs(snippet.slot.deliveryTime).format('ddd, MMM DD')}
+
+
+ Time: {dayjs(snippet.slot.deliveryTime).format('hh:mm A')}
+
+
+ ) : (
+ <>
+
+ Schedule Pending
+
+
+ N/A
+
+
+ )}
+
+ {snippet.validTill && (
+
+
+ Expires
+
+
+ {dayjs(snippet.validTill).format('MMM DD')}
+
+
+ )}
+
+ {}}
+ activeOpacity={0.7}
+ className="flex-row items-center"
+ >
+
+ View Slot
+
+
+
+
+ onViewProducts(snippet.products)}
+ className="mr-4 flex-row items-center"
+ >
+
+ {snippet.skuIds.length} Items
+
+
+
+
+ Share
+
+
+
+
+
+ Loading vendor snippets...
+
+
+ Error loading snippets
+
+
+
+
+ {snippets && snippets.length === 0 ? (
+
+
+ ))
+ )}
+
+
+
+
+ No Snippets Yet
+
+
+ Start by creating your first vendor identifier using the
+ button below.
+
+
+ ) : (
+ snippets?.map((snippet, index) => (
+
+
+
+
+
+
+
+ Admin Login
+
+
+ setName(e.target.value)}
+ autoCapitalize="none"
+ autoCorrect="off"
+ className="mb-5"
+ data-testid="login-name-input"
+ aria-label="login-name-input"
+ />
+
+ setPassword(e.target.value)}
+ type="password"
+ autoCapitalize="none"
+ autoCorrect="off"
+ className="mb-8"
+ data-testid="login-password-input"
+ aria-label="login-password-input"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleLogin()
+ }}
+ />
+
+ {(loginError || localError) && (
+
+ {localError ?? loginError}
+
+ )}
+
+
+ ->