@spacemade/ui 0.0.1

package/src/pages/admin/entitlements/index.tsx

@@ -0,0 +1,646 @@
+import { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import { AdminLayout } from '@components/common/layout/admin/AdminLayout'
+import WithAuth from '@components/hoc/WithAuth'
+import { transformToURLFormat, generateUUID } from '@helpers/string'
+import { Product, ProductType } from '@store/model'
+import { ProductFeature } from '@store/model/product-feature'
+import { useGetProductsQuery, useUpdateProductMutation } from '@store/slice/api/productsApiSlice'
+import { useGetProductFeaturesQuery } from '@store/slice/api/productFeaturesApiSlice'
+import { toast } from 'react-toastify'
+
+type EditableEntitlement = {
+  localId: string
+  id?: string
+  featureId: string
+  featureName?: string
+  slug: string
+  isEnabled: boolean
+  includedUnits: string
+  overageUnitAmount: string
+  hardCap: boolean
+}
+
+type ProductEntitlementDraft = {
+  productId: string
+  productName: string
+  productSlug: string
+  entitlements: EditableEntitlement[]
+}
+
+const ENTITLEMENT_SORT_PRIORITY = [
+  'request',
+  'input-token',
+  'output-token',
+  'user',
+  'provider',
+  'second',
+  'project',
+  'storage',
+]
+
+const buildEntitlementSlug = (productSlug: string, featureName: string) =>
+  transformToURLFormat(`${productSlug} ${featureName}`)
+
+const toTrimmedString = (value: unknown) => String(value ?? '').trim()
+
+const resolveUsageLikePriority = (value: string): number => {
+  const text = String(value || '').toLowerCase()
+  const checks: Array<{ key: string; match: (v: string) => boolean }> = [
+    { key: 'request', match: (v) => v.includes('request') },
+    { key: 'input-token', match: (v) => v.includes('input-token') || v.includes('input token') },
+    { key: 'output-token', match: (v) => v.includes('output-token') || v.includes('output token') },
+    { key: 'user', match: (v) => v.includes('user') },
+    { key: 'provider', match: (v) => v.includes('provider') },
+    { key: 'second', match: (v) => v.includes('second') },
+    { key: 'project', match: (v) => v.includes('project') },
+    { key: 'storage', match: (v) => v.includes('storage') },
+  ]
+
+  for (const check of checks) {
+    if (!check.match(text)) continue
+    const idx = ENTITLEMENT_SORT_PRIORITY.indexOf(check.key)
+    if (idx !== -1) return idx
+  }
+
+  return ENTITLEMENT_SORT_PRIORITY.length
+}
+
+const sortFeatureOptions = (items: ProductFeature[]): ProductFeature[] => {
+  return [...items]
+    .map((feature, originalIndex) => ({ feature, originalIndex }))
+    .sort((a, b) => {
+      const rankA = resolveUsageLikePriority(`${a.feature.name} ${(a.feature as any).measureUnit || ''}`)
+      const rankB = resolveUsageLikePriority(`${b.feature.name} ${(b.feature as any).measureUnit || ''}`)
+      if (rankA !== rankB) return rankA - rankB
+      const nameA = String(a.feature.name || '')
+      const nameB = String(b.feature.name || '')
+      const nameCompare = nameA.localeCompare(nameB)
+      if (nameCompare !== 0) return nameCompare
+      return a.originalIndex - b.originalIndex
+    })
+    .map(({ feature }) => feature)
+}
+
+const sortEntitlementRows = (
+  rows: EditableEntitlement[],
+  featureMap: Map<string, ProductFeature>
+): EditableEntitlement[] => {
+  return [...rows]
+    .map((row, originalIndex) => ({ row, originalIndex }))
+    .sort((a, b) => {
+      const featureA = featureMap.get(a.row.featureId)
+      const featureB = featureMap.get(b.row.featureId)
+      const rankA = resolveUsageLikePriority(
+        `${a.row.slug} ${featureA?.name || ''} ${(featureA as any)?.measureUnit || ''}`
+      )
+      const rankB = resolveUsageLikePriority(
+        `${b.row.slug} ${featureB?.name || ''} ${(featureB as any)?.measureUnit || ''}`
+      )
+      if (rankA !== rankB) return rankA - rankB
+      return a.originalIndex - b.originalIndex
+    })
+    .map(({ row }) => row)
+}
+
+const normalizeOverageValue = (value: string): string | null => {
+  let normalized = toTrimmedString(value).replace(/,/g, '.')
+  if (!normalized) return null
+  if (normalized.startsWith('.')) normalized = `0${normalized}`
+
+  if (!/^\d+(\.\d{1,12})?$/.test(normalized)) {
+    throw new Error('Overage must be a positive number with up to 12 decimals.')
+  }
+
+  const asNumber = Number(normalized)
+  if (!Number.isFinite(asNumber) || asNumber <= 0) {
+    throw new Error('Overage must be greater than 0.')
+  }
+
+  return normalized.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '')
+}
+
+const normalizeIncludedUnits = (value: string): number | null => {
+  const normalized = toTrimmedString(value)
+  if (!normalized) return null
+
+  if (!/^\d+$/.test(normalized)) {
+    throw new Error('Included units must be a non-negative whole number.')
+  }
+
+  return Number(normalized)
+}
+
+const buildDraftFromProduct = (product: Product): ProductEntitlementDraft => {
+  const entitlements = Array.isArray((product as any)?.featureEntitlements)
+    ? (product as any).featureEntitlements
+    : []
+
+  return {
+    productId: product.id,
+    productName: product.name,
+    productSlug: product.slug,
+    entitlements: entitlements.map((ent: any) => {
+      const featureId = String(
+        ent.featureId ??
+          ent.feature_id ??
+          ent.feature?.id ??
+          ent.billingUnitTypeId ??
+          ent.billing_unit_type_id ??
+          ''
+      )
+      const featureName = String(
+        ent.featureName ??
+          ent.feature_name ??
+          ent.feature?.name ??
+          ent.feature?.measureUnitType?.name ??
+          ''
+      )
+      const slug = String(ent.slug ?? '')
+      return {
+        localId: String(ent.id || generateUUID()),
+        id: ent.id ? String(ent.id) : undefined,
+        featureId,
+        featureName,
+        slug,
+        isEnabled: Boolean(ent.isEnabled ?? ent.is_enabled ?? true),
+        includedUnits:
+          ent.includedUnits == null && ent.included_units == null
+            ? ''
+            : String(ent.includedUnits ?? ent.included_units),
+        overageUnitAmount:
+          ent.overageUnitAmount == null && ent.overage_unit_amount == null
+            ? ''
+            : String(ent.overageUnitAmount ?? ent.overage_unit_amount),
+        hardCap: Boolean(ent.hardCap ?? ent.hard_cap ?? false),
+      }
+    }),
+  }
+}
+
+const EntitlementsAdmin = () => {
+  const [nameFilter, setNameFilter] = useState('')
+  const [savingByProductId, setSavingByProductId] = useState<Record<string, boolean>>({})
+  const [draftsByProductId, setDraftsByProductId] = useState<Record<string, ProductEntitlementDraft>>({})
+
+  const {
+    data: productsResp,
+    isLoading: isProductsLoading,
+    isFetching: isProductsFetching,
+    refetch: refetchProducts,
+  } = useGetProductsQuery({
+    isAdmin: true,
+    showAll: true,
+    type: ProductType.Plan,
+    limit: 200,
+    page: 1,
+    include: ['featureEntitlements'],
+  })
+
+  const {
+    data: featuresResp,
+    isLoading: isFeaturesLoading,
+  } = useGetProductFeaturesQuery({
+    limit: 200,
+    page: 1,
+  })
+
+  const [updateProduct] = useUpdateProductMutation()
+
+  const products = useMemo(
+    () =>
+      [...(productsResp?.results ?? [])].sort((a, b) =>
+        String(a.name || '').localeCompare(String(b.name || ''))
+      ),
+    [productsResp?.results]
+  )
+
+  const features = useMemo(
+    () => sortFeatureOptions(featuresResp?.results ?? []),
+    [featuresResp?.results]
+  )
+
+  const featureById = useMemo(
+    () => new Map(features.map((feature) => [String(feature.id), feature])),
+    [features]
+  )
+
+  const productById = useMemo(
+    () => new Map(products.map((product) => [String(product.id), product])),
+    [products]
+  )
+
+  useEffect(() => {
+    setDraftsByProductId((prev) => {
+      const next: Record<string, ProductEntitlementDraft> = {}
+      let changed = false
+
+      for (const product of products) {
+        if (prev[product.id]) {
+          const prevDraft = prev[product.id]
+          if (
+            prevDraft.productName !== product.name ||
+            prevDraft.productSlug !== product.slug
+          ) {
+            next[product.id] = {
+              ...prevDraft,
+              productName: product.name,
+              productSlug: product.slug,
+            }
+            changed = true
+          } else {
+            next[product.id] = prevDraft
+          }
+          continue
+        }
+
+        next[product.id] = buildDraftFromProduct(product)
+        changed = true
+      }
+
+      if (Object.keys(prev).length !== Object.keys(next).length) changed = true
+
+      return changed ? next : prev
+    })
+  }, [products])
+
+  const visibleProductIds = useMemo(() => {
+    const normalizedFilter = toTrimmedString(nameFilter).toLowerCase()
+    if (!normalizedFilter) return products.map((product) => product.id)
+
+    return products
+      .filter((product) => {
+        const text = `${product.name} ${product.slug}`.toLowerCase()
+        return text.includes(normalizedFilter)
+      })
+      .map((product) => product.id)
+  }, [products, nameFilter])
+
+  const setProductDraft = (
+    productId: string,
+    updateFn: (draft: ProductEntitlementDraft) => ProductEntitlementDraft
+  ) => {
+    setDraftsByProductId((prev) => {
+      const current = prev[productId]
+      if (!current) return prev
+      return {
+        ...prev,
+        [productId]: updateFn(current),
+      }
+    })
+  }
+
+  const addEntitlementRow = (productId: string) => {
+    setProductDraft(productId, (draft) => ({
+      ...draft,
+      entitlements: [
+        ...draft.entitlements,
+        {
+          localId: generateUUID(),
+          featureId: '',
+          slug: '',
+          isEnabled: true,
+          includedUnits: '',
+          overageUnitAmount: '',
+          hardCap: false,
+        },
+      ],
+    }))
+  }
+
+  const removeEntitlementRow = (productId: string, localId: string) => {
+    setProductDraft(productId, (draft) => ({
+      ...draft,
+      entitlements: draft.entitlements.filter((row) => row.localId !== localId),
+    }))
+  }
+
+  const updateEntitlementField = (
+    productId: string,
+    localId: string,
+    patch: Partial<EditableEntitlement>
+  ) => {
+    setProductDraft(productId, (draft) => ({
+      ...draft,
+      entitlements: draft.entitlements.map((row) =>
+        row.localId === localId ? { ...row, ...patch } : row
+      ),
+    }))
+  }
+
+  const resetProductDraft = (productId: string) => {
+    const product = productById.get(productId)
+    if (!product) return
+    setDraftsByProductId((prev) => ({
+      ...prev,
+      [productId]: buildDraftFromProduct(product),
+    }))
+  }
+
+  const handleSaveProduct = async (productId: string) => {
+    const draft = draftsByProductId[productId]
+    if (!draft) return
+
+    if (savingByProductId[productId]) return
+
+    try {
+      const seenFeatureIds = new Set<string>()
+      const payloadEntitlements: Array<Record<string, any>> = []
+
+      for (const row of draft.entitlements) {
+        const featureId = toTrimmedString(row.featureId)
+        const hasSomeInput =
+          featureId ||
+          toTrimmedString(row.includedUnits) ||
+          toTrimmedString(row.overageUnitAmount) ||
+          row.hardCap ||
+          !row.isEnabled
+
+        if (!featureId) {
+          if (hasSomeInput) {
+            throw new Error('Select a feature for each entitlement row or remove that row.')
+          }
+          continue
+        }
+
+        if (seenFeatureIds.has(featureId)) {
+          throw new Error('Duplicate features are not allowed in the same product.')
+        }
+        seenFeatureIds.add(featureId)
+
+        const includedUnits = normalizeIncludedUnits(row.includedUnits)
+        const overageUnitAmount = normalizeOverageValue(row.overageUnitAmount)
+        const featureName = String(featureById.get(featureId)?.name || featureId)
+        const slug = toTrimmedString(row.slug) || buildEntitlementSlug(draft.productSlug, featureName)
+
+        const nextPayloadRow: Record<string, any> = {
+          feature_id: featureId,
+          slug,
+          is_enabled: !!row.isEnabled,
+          included_units: includedUnits,
+          overage_unit_amount: overageUnitAmount,
+          hard_cap: !!row.hardCap,
+        }
+        if (row.id) nextPayloadRow.id = row.id
+        payloadEntitlements.push(nextPayloadRow)
+      }
+
+      setSavingByProductId((prev) => ({ ...prev, [productId]: true }))
+
+      await updateProduct({
+        payload: {
+          id: productId,
+          feature_entitlements: payloadEntitlements,
+        } as any,
+      }).unwrap()
+
+      toast.success(`Entitlements saved for ${draft.productName}.`)
+      void refetchProducts()
+    } catch (error: any) {
+      const message =
+        error?.data?.message ||
+        error?.message ||
+        'Failed to save entitlements for this product.'
+      toast.error(message)
+    } finally {
+      setSavingByProductId((prev) => ({ ...prev, [productId]: false }))
+    }
+  }
+
+  return (
+    <AdminLayout>
+      <AppPageTitle title="Entitlements" />
+
+      <div className="card border-0 bg-light mb-4">
+        <div className="card-body d-flex flex-column flex-md-row gap-3 align-items-md-end">
+          <div className="flex-grow-1">
+            <label className="form-label mb-1">Filter products</label>
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Filter by plan name or slug"
+              value={nameFilter}
+              onChange={(event) => setNameFilter(event.target.value)}
+            />
+          </div>
+          <div>
+            <span className="small text-muted">
+              {visibleProductIds.length} of {products.length} products
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {(isProductsLoading || isFeaturesLoading) && (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      )}
+
+      {!isProductsLoading && !products.length && (
+        <div className="alert alert-warning">No plan products found.</div>
+      )}
+
+      {visibleProductIds.map((productId) => {
+        const draft = draftsByProductId[productId]
+        if (!draft) return null
+        const sortedRows = sortEntitlementRows(draft.entitlements, featureById)
+
+        return (
+          <div key={productId} className="card mb-4">
+            <div className="card-header d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
+              <div>
+                <h5 className="mb-1">{draft.productName}</h5>
+                <div className="small text-muted">
+                  <span className="me-2">Slug: {draft.productSlug}</span>
+                  <Link href={`/admin/products/${draft.productId}`}>Open product editor</Link>
+                </div>
+              </div>
+
+              <div className="d-flex gap-2">
+                <Button
+                  outline
+                  className="border-light-gray"
+                  onClick={() => addEntitlementRow(productId)}
+                >
+                  + Add Entitlement
+                </Button>
+                <Button
+                  outline
+                  className="border-light-gray"
+                  onClick={() => resetProductDraft(productId)}
+                >
+                  Reset
+                </Button>
+                <Button
+                  color="primary"
+                  className="text-white"
+                  isLoading={!!savingByProductId[productId]}
+                  onClick={() => handleSaveProduct(productId)}
+                >
+                  Save
+                </Button>
+              </div>
+            </div>
+
+            <div className="card-body">
+              <div className="table-responsive">
+                <table className="table align-middle">
+                  <thead>
+                    <tr>
+                      <th style={{ minWidth: 260 }}>Feature</th>
+                      <th style={{ minWidth: 120 }}>Included Units</th>
+                      <th style={{ minWidth: 170 }}>Overage / Unit</th>
+                      <th style={{ minWidth: 90 }}>Enabled</th>
+                      <th style={{ minWidth: 90 }}>Hard Cap</th>
+                      <th style={{ minWidth: 260 }}>Slug</th>
+                      <th style={{ width: 80 }} />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {!draft.entitlements.length && (
+                      <tr>
+                        <td colSpan={7} className="text-muted">
+                          No entitlements set for this product.
+                        </td>
+                      </tr>
+                    )}
+
+                    {sortedRows.map((row) => (
+                      <tr key={row.localId}>
+                        <td>
+                          <select
+                            className="form-select form-select-sm"
+                            value={row.featureId}
+                            onChange={(event) => {
+                              const featureId = event.target.value
+                              const featureName = String(
+                                featureById.get(featureId)?.name || featureId
+                              )
+                              updateEntitlementField(productId, row.localId, {
+                                featureId,
+                                featureName,
+                                slug: featureId
+                                  ? buildEntitlementSlug(draft.productSlug, featureName)
+                                  : '',
+                              })
+                            }}
+                          >
+                            <option value="">Select feature</option>
+                            {row.featureId && !featureById.has(row.featureId) && (
+                              <option value={row.featureId}>
+                                {row.featureName
+                                  ? `${row.featureName} (missing from list)`
+                                  : `Unknown feature (${row.featureId.slice(0, 8)}...)`}
+                              </option>
+                            )}
+                            {features.map((feature: ProductFeature) => {
+                              const unit = String((feature as any).measureUnit || '').trim()
+                              const label = unit
+                                ? `${feature.name} (${unit})`
+                                : feature.name
+                              return (
+                                <option key={feature.id} value={feature.id}>
+                                  {label}
+                                </option>
+                              )
+                            })}
+                          </select>
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className="form-control form-control-sm"
+                            value={row.includedUnits}
+                            placeholder="e.g. 1000"
+                            onChange={(event) =>
+                              updateEntitlementField(productId, row.localId, {
+                                includedUnits: event.target.value,
+                              })
+                            }
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className="form-control form-control-sm"
+                            value={row.overageUnitAmount}
+                            placeholder="e.g. 0.0100"
+                            onChange={(event) =>
+                              updateEntitlementField(productId, row.localId, {
+                                overageUnitAmount: event.target.value,
+                              })
+                            }
+                          />
+                        </td>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              checked={row.isEnabled}
+                              onChange={(event) =>
+                                updateEntitlementField(productId, row.localId, {
+                                  isEnabled: event.target.checked,
+                                })
+                              }
+                            />
+                          </div>
+                        </td>
+                        <td>
+                          <div className="form-check">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              checked={row.hardCap}
+                              onChange={(event) =>
+                                updateEntitlementField(productId, row.localId, {
+                                  hardCap: event.target.checked,
+                                })
+                              }
+                            />
+                          </div>
+                        </td>
+                        <td>
+                          <code>{row.slug || '-'}</code>
+                        </td>
+                        <td className="text-end">
+                          <Button
+                            outline
+                            className="border-light-gray px-2"
+                            onClick={() => removeEntitlementRow(productId, row.localId)}
+                          >
+                            <i className="bi bi-trash" />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+
+      {isProductsFetching && !isProductsLoading && (
+        <div className="w-100 d-flex justify-content-center py-2">
+          <Spinner color="primary" />
+        </div>
+      )}
+    </AdminLayout>
+  )
+}
+
+EntitlementsAdmin.getInitialProps = async () => {
+  return {
+    pageTitle: 'Entitlements',
+    isAppNav: true,
+    showDetailTopNav: true,
+  }
+}
+
+export default WithAuth(EntitlementsAdmin, { needSystemAdminRole: true })