@haus-tech/badge-plugin 4.0.5 → 4.0.6

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 4.0.6-0
+
+### 🚀 Features
+
+- **badge-plugin:** add dashboard integration and enhance badge management ([2603563](https://github.com/WeAreHausTech/haus-tech-vendure-plugins/commit/2603563))
+
+## 4.0.5
+
+This was a version bump only for badge-plugin to align it with other projects, there were no code changes.
+
 ## 4.0.4
 
 This was a version bump only for badge-plugin to align it with other projects, there were no code changes.

package/README.md

@@ -2,7 +2,8 @@
 name: badge-plugin
 title: Badge Plugin
 description: Vendure plugin that allows you to manage and display badges for products in your e-commerce store.
-version: 4.0.3
+version: 4.0.6-0
+tags: [vendure, plugin, badge]
 ---
 
 # Badge Plugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haus-tech/badge-plugin",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Adds a badge to product images",
   "author": "Haus Tech",
   "repository": "https://github.com/WeAreHausTech/haus-tech-vendure-plugins",

package/src/api/admin.resolver.d.ts

@@ -8,6 +8,7 @@ export declare class BadgeAdminResolver {
     private badgeService;
     constructor(config: BadgePluginOptions, badgeService: BadgeService);
     badges(ctx: RequestContext, args: any): Promise<PaginatedList<Badge>>;
+    badge(ctx: RequestContext, id: string): Promise<Badge | null>;
     createBadge(ctx: RequestContext, input: CreateBadgeInput): Promise<Badge>;
     updateBadge(ctx: RequestContext, input: UpdateBadgeInput): Promise<Badge | ErrorResult>;
     deleteBadge(ctx: RequestContext, ids: string[]): Promise<DeletionResponse>;

package/src/api/admin.resolver.js

@@ -29,6 +29,9 @@ let BadgeAdminResolver = class BadgeAdminResolver {
     async badges(ctx, args) {
         return this.badgeService.findAll(ctx, args.options || undefined);
     }
+    async badge(ctx, id) {
+        return this.badgeService.findOne(ctx, parseInt(id, 10));
+    }
     async createBadge(ctx, input) {
         return this.badgeService.create(ctx, input);
     }
@@ -62,6 +65,14 @@ __decorate([
     __metadata("design:paramtypes", [core_1.RequestContext, Object]),
     __metadata("design:returntype", Promise)
 ], BadgeAdminResolver.prototype, "badges", null);
+__decorate([
+    (0, graphql_1.Query)(),
+    __param(0, (0, core_1.Ctx)()),
+    __param(1, (0, graphql_1.Args)('id')),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [core_1.RequestContext, String]),
+    __metadata("design:returntype", Promise)
+], BadgeAdminResolver.prototype, "badge", null);
 __decorate([
     (0, graphql_1.Mutation)(),
     __param(0, (0, core_1.Ctx)()),

package/src/api/admin.resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin.resolver.js","sourceRoot":"","sources":["../../../../../packages/badge-plugin/src/api/admin.resolver.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6CAAiE;AACjE,wCAAuF;AACvF,4DAAuD;AAEvD,gDAKyB;AACzB,4CAA6D;AAC7D,2CAAuC;AAIhC,IAAM,kBAAkB,GAAxB,MAAM,kBAAkB;IAEU;IAC7B;IAFV,YACuC,MAA0B,EACvD,YAA0B;QADG,WAAM,GAAN,MAAM,CAAoB;QACvD,iBAAY,GAAZ,YAAY,CAAc;IACjC,CAAC;IAGE,AAAN,KAAK,CAAC,MAAM,CAAQ,GAAmB,EAAU,IAAS;QACxD,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAA;IAClE,CAAC;IAGK,AAAN,KAAK,CAAC,WAAW,CACR,GAAmB,EACX,KAAuB;QAEtC,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IAC7C,CAAC;IAGK,AAAN,KAAK,CAAC,WAAW,CACR,GAAmB,EACX,KAAuB;QAEtC,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IAC7C,CAAC;IAGK,AAAN,KAAK,CAAC,WAAW,CACR,GAAmB,EACb,GAAa;QAE1B,IAAI,CAAC;YACH,KAAK,MAAM,OAAO,IAAI,GAAG,EAAE,CAAC;gBAC1B,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;gBACzE,IAAI,KAAK,EAAE,CAAC;oBACV,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBAC5C,CAAC;YACH,CAAC;YACD,OAAO,EAAE,MAAM,EAAE,0BAAc,CAAC,OAAO,EAAE,CAAA;QAC3C,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,OAAO,EAAE,MAAM,EAAE,0BAAc,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAA;QACnE,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;CACF,CAAA;AAjDY,gDAAkB;AAOvB;IADL,IAAA,eAAK,GAAE;IACM,WAAA,IAAA,UAAG,GAAE,CAAA;IAAuB,WAAA,IAAA,cAAI,GAAE,CAAA;;qCAAvB,qBAAc;;gDAEtC;AAGK;IADL,IAAA,kBAAQ,GAAE;IAER,WAAA,IAAA,UAAG,GAAE,CAAA;IACL,WAAA,IAAA,cAAI,EAAC,OAAO,CAAC,CAAA;;qCADF,qBAAc;;qDAI3B;AAGK;IADL,IAAA,kBAAQ,GAAE;IAER,WAAA,IAAA,UAAG,GAAE,CAAA;IACL,WAAA,IAAA,cAAI,EAAC,OAAO,CAAC,CAAA;;qCADF,qBAAc;;qDAI3B;AAGK;IADL,IAAA,kBAAQ,GAAE;IAER,WAAA,IAAA,UAAG,GAAE,CAAA;IACL,WAAA,IAAA,cAAI,EAAC,KAAK,CAAC,CAAA;;qCADA,qBAAc;;qDAc3B;AAGD;IADC,IAAA,eAAK,GAAE;;;;8DAGP;6BAhDU,kBAAkB;IAD9B,IAAA,kBAAQ,GAAE;IAGN,WAAA,IAAA,eAAM,EAAC,+BAAmB,CAAC,CAAA;6CACN,4BAAY;GAHzB,kBAAkB,CAiD9B"}
+{"version":3,"file":"admin.resolver.js","sourceRoot":"","sources":["../../../../../packages/badge-plugin/src/api/admin.resolver.ts"],"names":[],"mappings":"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"}

package/src/api/api-extensions.js

@@ -24,11 +24,13 @@ exports.adminApiExtensions = (0, graphql_tag_1.gql) `
 
   extend type Query {
     badges(options: BadgeListOptions): BadgeList!
+    badge(id: ID!): Badge
   }
 
   input CreateBadgeInput {
     assetId: ID!
     position: String
+    collectionId: ID
   }
 
   extend type Mutation {
@@ -43,6 +45,7 @@ exports.adminApiExtensions = (0, graphql_tag_1.gql) `
     id: ID!
     collectionId: ID
     position: String
+    assetId: ID
   }
 
   extend type Mutation {

package/src/api/api-extensions.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-extensions.js","sourceRoot":"","sources":["../../../../../packages/badge-plugin/src/api/api-extensions.ts"],"names":[],"mappings":";;;AAAA,6CAAiC;AAEpB,QAAA,kBAAkB,GAAG,IAAA,iBAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDpC,CAAA;AAEY,QAAA,iBAAiB,GAAG,IAAA,iBAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnC,CAAA"}
+{"version":3,"file":"api-extensions.js","sourceRoot":"","sources":["../../../../../packages/badge-plugin/src/api/api-extensions.ts"],"names":[],"mappings":";;;AAAA,6CAAiC;AAEpB,QAAA,kBAAkB,GAAG,IAAA,iBAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDpC,CAAA;AAEY,QAAA,iBAAiB,GAAG,IAAA,iBAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnC,CAAA"}

package/src/badge.plugin.js

@@ -75,6 +75,7 @@ exports.BadgePlugin = BadgePlugin = BadgePlugin_1 = __decorate([
             resolvers: [admin_resolver_1.BadgeAdminResolver],
         },
         entities: [badge_entity_1.Badge],
+        dashboard: './dashboard/index.tsx',
         compatibility: '^3.0.0',
     })
 ], BadgePlugin);

package/src/badge.plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.plugin.js","sourceRoot":"","sources":["../../../../packages/badge-plugin/src/badge.plugin.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wCAAiE;AACjE,yDAA4E;AAC5E,yDAAyD;AAEzD,2CAAiD;AACjD,wDAA6C;AAE7C,+BAA2B;AAC3B,2DAAsD;AACtD,uDAK4B;AA+BrB,IAAM,WAAW,GAAjB,MAAM,WAAW;;IACtB,MAAM,CAAC,OAAO,GAAuB;QACnC,kBAAkB,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,CAAC;KAC7E,CAAA;IAED,MAAM,CAAC,IAAI,CAAC,OAA4B;QACtC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,CAAC;QACD,OAAO,aAAW,CAAA;IACpB,CAAC;IAED,MAAM,CAAC,EAAE,GAAqB;QAC5B,aAAa,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,IAAI,CAAC;QACpC,YAAY,EAAE;YACZ,EAAE,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,yBAAyB,CAAC;YAC9C,EAAE,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,yBAAyB,CAAC;SAC/C;QACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;QACpD,SAAS,EAAE,CAAC,cAAc,CAAC;QAC3B,iBAAiB;QACjB,QAAQ;QACR,sBAAsB;QACtB,yBAAyB;QACzB,6CAA6C;QAC7C,qCAAqC;QACrC,SAAS;QACT,QAAQ;QACR,wBAAwB;QACxB,iDAAiD;QACjD,yCAAyC;QACzC,SAAS;QACT,OAAO;KACR,CAAA;;AAjCU,kCAAW;sBAAX,WAAW;IAzBvB,IAAA,oBAAa,EAAC;QACb,OAAO,EAAE,CAAC,yBAAkB,CAAC;QAC7B,SAAS,EAAE;YACT;gBACE,OAAO,EAAE,+BAAmB;gBAC5B,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO;aACtC;YACD,4BAAY;SACb;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,kCAAiB;YACzB,SAAS,EAAE;gBACT,iCAAiB;gBACjB,qCAAqB;gBACrB,0CAA0B;gBAC1B,4CAA4B;aAC7B;SACF;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,mCAAkB;YAC1B,SAAS,EAAE,CAAC,mCAAkB,CAAC;SAChC;QACD,QAAQ,EAAE,CAAC,oBAAK,CAAC;QACjB,aAAa,EAAE,QAAQ;KACxB,CAAC;GACW,WAAW,CAkCvB"}
+{"version":3,"file":"badge.plugin.js","sourceRoot":"","sources":["../../../../packages/badge-plugin/src/badge.plugin.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wCAAiE;AACjE,yDAA4E;AAC5E,yDAAyD;AAEzD,2CAAiD;AACjD,wDAA6C;AAE7C,+BAA2B;AAC3B,2DAAsD;AACtD,uDAK4B;AAiCrB,IAAM,WAAW,GAAjB,MAAM,WAAW;;IACtB,MAAM,CAAC,OAAO,GAAuB;QACnC,kBAAkB,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,CAAC;KAC7E,CAAA;IAED,MAAM,CAAC,IAAI,CAAC,OAA4B;QACtC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,CAAC;QACD,OAAO,aAAW,CAAA;IACpB,CAAC;IAED,MAAM,CAAC,EAAE,GAAqB;QAC5B,aAAa,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,IAAI,CAAC;QACpC,YAAY,EAAE;YACZ,EAAE,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,yBAAyB,CAAC;YAC9C,EAAE,EAAE,IAAA,WAAI,EAAC,SAAS,EAAE,yBAAyB,CAAC;SAC/C;QACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;QACpD,SAAS,EAAE,CAAC,cAAc,CAAC;QAC3B,iBAAiB;QACjB,QAAQ;QACR,sBAAsB;QACtB,yBAAyB;QACzB,6CAA6C;QAC7C,qCAAqC;QACrC,SAAS;QACT,QAAQ;QACR,wBAAwB;QACxB,iDAAiD;QACjD,yCAAyC;QACzC,SAAS;QACT,OAAO;KACR,CAAA;;AAjCU,kCAAW;sBAAX,WAAW;IA3BvB,IAAA,oBAAa,EAAC;QACb,OAAO,EAAE,CAAC,yBAAkB,CAAC;QAC7B,SAAS,EAAE;YACT;gBACE,OAAO,EAAE,+BAAmB;gBAC5B,UAAU,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO;aACtC;YACD,4BAAY;SACb;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,kCAAiB;YACzB,SAAS,EAAE;gBACT,iCAAiB;gBACjB,qCAAqB;gBACrB,0CAA0B;gBAC1B,4CAA4B;aAC7B;SACF;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,mCAAkB;YAC1B,SAAS,EAAE,CAAC,mCAAkB,CAAC;SAChC;QACD,QAAQ,EAAE,CAAC,oBAAK,CAAC;QACjB,SAAS,EAAE,uBAAuB;QAElC,aAAa,EAAE,QAAQ;KACxB,CAAC;GACW,WAAW,CAkCvB"}

package/src/dashboard/badge-detail.tsx

@@ -0,0 +1,470 @@
+import {
+  DashboardRouteDefinition,
+  detailPageRouteLoader,
+  useDetailPage,
+  Page,
+  PageTitle,
+  PageActionBar,
+  PageActionBarRight,
+  PageLayout,
+  PageBlock,
+  FormFieldWrapper,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Label,
+  VendureImage,
+} from '@vendure/dashboard'
+import { AnyRoute, useNavigate } from '@tanstack/react-router'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useState, useRef, useEffect } from 'react'
+import { toast } from 'sonner'
+import { api } from '@vendure/dashboard'
+import { graphql } from '@/gql'
+import { UploadIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+
+const getBadgeDetailDocument = graphql(`
+  query GetBadgeDetail($id: ID!) {
+    badge(id: $id) {
+      id
+      createdAt
+      updatedAt
+      collection {
+        id
+        name
+      }
+      collectionId
+      position
+      assetId
+      asset {
+        id
+        name
+        type
+        mimeType
+        width
+        height
+        fileSize
+        source
+        preview
+      }
+    }
+  }
+`)
+
+const createBadgeDocument = graphql(`
+  mutation CreateBadge($input: CreateBadgeInput!) {
+    createBadge(input: $input) {
+      id
+    }
+  }
+`)
+
+const updateBadgeDocument = graphql(`
+  mutation UpdateBadge($input: UpdateBadgeInput!) {
+    updateBadge(input: $input) {
+      id
+    }
+  }
+`)
+
+const getBadgePluginConfigDocument = graphql(`
+  query GetBadgePluginConfig {
+    getBadgePluginConfig {
+      availablePositions
+    }
+  }
+`)
+
+const getCollectionsDocument = graphql(`
+  query GetCollections {
+    collections {
+      items {
+        id
+        name
+        slug
+      }
+    }
+  }
+`)
+
+const createAssetsDocument = graphql(`
+  mutation CreateAssets($input: [CreateAssetInput!]!) {
+    createAssets(input: $input) {
+      ... on Asset {
+        id
+        name
+        source
+        preview
+      }
+      ... on MimeTypeError {
+        message
+      }
+    }
+  }
+`)
+
+export const badgeDetailRoute: DashboardRouteDefinition = {
+  path: '/badges/$id',
+  loader: detailPageRouteLoader({
+    queryDocument: getBadgeDetailDocument,
+    breadcrumb: (isNew, entity) => [
+      { path: '/badges', label: 'Badges' },
+      isNew ? 'New Badge' : `Badge ${entity?.id || ''}`,
+    ],
+  }),
+  component: (route) => {
+    return <BadgeDetailPage route={route as any} />
+  },
+}
+
+function BadgeDetailPage({ route }: { route: AnyRoute }) {
+  const params = route.useParams()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const creatingNewEntity = params.id === 'new'
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [uploadedAsset, setUploadedAsset] = useState<{
+    id: string
+    name: string
+    preview: string
+    source: string
+  } | null>(null)
+  const [uploading, setUploading] = useState(false)
+
+  const { data: configData } = useQuery({
+    queryKey: ['badge-plugin-config'],
+    queryFn: () => api.query(getBadgePluginConfigDocument),
+  })
+
+  const { data: collectionsData } = useQuery({
+    queryKey: ['collections'],
+    queryFn: () => api.query(getCollectionsDocument),
+  })
+
+  const availablePositions = configData?.getBadgePluginConfig?.availablePositions || []
+
+  const collections = collectionsData?.collections?.items || []
+
+  const setValuesForUpdate = useCallback(
+    (
+      badge:
+        | {
+          id: string
+          position: string
+          collectionId: string | null
+          assetId: string
+          asset: {
+            id: string
+            name: string
+            preview: string
+          }
+        }
+        | null
+        | undefined,
+    ) => {
+      const position =
+        badge?.position && badge.position.trim() !== ''
+          ? badge.position
+          : availablePositions?.length > 0
+            ? availablePositions[0]
+            : ''
+
+      return {
+        id: badge?.id ?? '',
+        position: position || 'top-left',
+        collectionId: badge?.collectionId ?? null,
+        assetId: badge?.assetId ?? '',
+      }
+    },
+    [availablePositions],
+  )
+
+  const { form, submitHandler, entity, isPending, resetForm, refreshEntity } = useDetailPage({
+    queryDocument: getBadgeDetailDocument,
+    createDocument: creatingNewEntity ? createBadgeDocument : undefined,
+    updateDocument: creatingNewEntity ? undefined : updateBadgeDocument,
+    setValuesForUpdate,
+    params: creatingNewEntity ? { id: 'new' } : { id: params.id },
+    onSuccess: async (data) => {
+      toast.success(creatingNewEntity ? 'Successfully created badge' : 'Successfully saved badge')
+      resetForm()
+      if (creatingNewEntity) {
+        await navigate({ to: `/badges/${data.id}` })
+      } else {
+        await refreshEntity()
+      }
+      queryClient.invalidateQueries({ queryKey: ['badges'] })
+    },
+    onError: (err) => {
+      toast.error(creatingNewEntity ? 'Failed to create badge' : 'Failed to save badge', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      })
+    },
+  })
+
+  const createAssetMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const input = [{ file }]
+      const result: any = await api.mutate(createAssetsDocument, { input })
+      const assetResult = result.createAssets[0]
+      if ('id' in assetResult) {
+        return assetResult
+      } else if ('message' in assetResult) {
+        throw new Error(assetResult.message)
+      }
+      throw new Error('Failed to upload asset')
+    },
+    onSuccess: (asset) => {
+      setUploadedAsset({
+        id: asset.id,
+        name: asset.name || 'Uploaded image',
+        preview: asset.preview || '',
+        source: asset.source || asset.preview || '',
+      })
+      form.setValue('assetId', asset.id, { shouldDirty: true, shouldValidate: true })
+      setUploading(false)
+      toast.success('Image uploaded successfully')
+    },
+    onError: (error) => {
+      toast.error('Failed to upload image', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      })
+      setUploading(false)
+    },
+  })
+
+  // Track synced entity ID to prevent re-syncing
+  const syncedEntityIdRef = useRef<string | null>(null)
+  const entityIdRef = useRef<string | null>(null)
+
+  // Sync uploadedAsset state when entity changes (only when entity.id changes)
+  useEffect(() => {
+    if (entity?.id && entity.id !== entityIdRef.current) {
+      entityIdRef.current = entity.id
+      syncedEntityIdRef.current = null // Reset sync tracking when entity changes
+      if (entity?.asset) {
+        setUploadedAsset({
+          id: entity.asset.id,
+          name: entity.asset.name,
+          preview: entity.asset.preview,
+          source: entity.asset.source,
+        })
+      }
+    }
+  }, [entity?.id, entity?.asset])
+
+  // Sync form values when entity loads (for edit mode)
+  // Run whenever entity data or availablePositions changes
+  useEffect(() => {
+    const badge = entity
+    if (!creatingNewEntity && badge?.id) {
+      const entityPosition = badge.position
+      const entityCollectionId = badge.collectionId
+
+      // Set position - use entity value if available, otherwise keep what's there
+      if (entityPosition) {
+        if (availablePositions.length > 0 && availablePositions.includes(entityPosition)) {
+          form.setValue('position', entityPosition, { shouldDirty: false })
+        } else if (availablePositions.length === 0) {
+          // If positions not loaded yet, set it anyway (will be validated later)
+          form.setValue('position', entityPosition, { shouldDirty: false })
+        }
+      }
+
+      // Always sync collection - set it immediately
+      form.setValue('collectionId', entityCollectionId ?? null, { shouldDirty: false })
+      form.setValue('assetId', badge.assetId ?? '', { shouldDirty: false })
+    }
+
+    // Initialize default values for new badges
+    if (creatingNewEntity && availablePositions.length > 0) {
+      form.setValue('position', availablePositions[0])
+      form.setValue('collectionId', null)
+    }
+  }, [entity, availablePositions, creatingNewEntity, form])
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please select an image file')
+        return
+      }
+      setUploading(true)
+      createAssetMutation.mutate(file)
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (creatingNewEntity) {
+      if (!uploadedAsset?.id) {
+        toast.error('Please upload an image first')
+        return
+      }
+
+      const formValues = form.getValues()
+      try {
+        const result = await api.mutate(createBadgeDocument, {
+          input: {
+            assetId: uploadedAsset.id,
+            position: formValues.position || availablePositions[0] || 'top-left',
+            collectionId: formValues.collectionId || null,
+          },
+        })
+
+        toast.success('Badge created successfully')
+        await navigate({ to: `/badges/${result.createBadge.id}` })
+        queryClient.invalidateQueries({ queryKey: ['badges'] })
+      } catch (error: any) {
+        toast.error('Failed to create badge', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        })
+      }
+      return
+    }
+
+    await submitHandler(e)
+  }
+
+  const currentAsset =
+    uploadedAsset ||
+    (entity?.asset
+      ? {
+        id: entity.asset.id,
+        name: entity.asset.name,
+        preview: entity.asset.preview,
+        source: entity.asset.source,
+      }
+      : null)
+  const currentAssetForPreview =
+    currentAsset == null
+      ? null
+      : (entity?.asset && currentAsset.id === entity.asset.id
+        ? entity.asset
+        : { ...currentAsset, type: 'IMAGE' }) as ComponentProps<typeof VendureImage>['asset']
+  const hasAssetChanged = Boolean(
+    !creatingNewEntity && uploadedAsset?.id && uploadedAsset.id !== entity?.assetId,
+  )
+
+  return (
+    <Page pageId="badge-detail" form={form} submitHandler={handleSubmit}>
+      <PageTitle>
+        {creatingNewEntity ? 'New Badge' : entity?.id ? `Badge ${entity.id}` : 'Edit Badge'}
+      </PageTitle>
+      <PageActionBar>
+        <PageActionBarRight>
+          <Button
+            type="submit"
+            disabled={
+              creatingNewEntity
+                ? !uploadedAsset || !form.formState.isValid || isPending || uploading
+                : (!form.formState.isDirty && !hasAssetChanged) || isPending || uploading
+            }
+          >
+            {isPending || uploading ? 'Saving...' : creatingNewEntity ? 'Create' : 'Update'}
+          </Button>
+        </PageActionBarRight>
+      </PageActionBar>
+      <PageLayout>
+        <PageBlock column="main" blockId="main-form">
+          <div className="space-y-4">
+            <div className="space-y-2" style={{ maxWidth: '400px' }}>
+              <Label>Image</Label>
+              <div className="space-y-4">
+                {currentAsset ? (
+                  <div className="space-y-2">
+                    <VendureImage asset={currentAssetForPreview} alt={currentAsset.name} preset="full" />
+                    <div className="text-sm text-muted-foreground">{currentAsset.name}</div>
+                  </div>
+                ) : (
+                  <div className="border-2 border-dashed border-muted rounded-lg p-8 text-center">
+                    <UploadIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <p className="text-sm text-muted-foreground mb-4">No image uploaded</p>
+                  </div>
+                )}
+                <div>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                    className="w-full"
+                  >
+                    <UploadIcon className="mr-2 h-4 w-4" />
+                    {uploading ? 'Uploading...' : currentAsset ? 'Change Image' : 'Upload Image'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div style={{ maxWidth: '700px' }} className="space-y-4">
+              <FormFieldWrapper
+                control={form.control}
+                name="position"
+                label="Position"
+                render={({ field }) => {
+                  // Ensure value is valid - use field.value if it exists and is in availablePositions, otherwise empty string
+                  const validValue =
+                    field.value && availablePositions.includes(field.value) ? field.value : ''
+                  return (
+                    <Select value={validValue} onValueChange={field.onChange}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select position" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availablePositions.map((pos) => (
+                          <SelectItem key={pos} value={pos}>
+                            {pos}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )
+                }}
+              />
+              <FormFieldWrapper
+                control={form.control}
+                name="collectionId"
+                label="Collection"
+                render={({ field }) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val === 'none' ? null : val)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="No collection" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">No collection</SelectItem>
+                      {collections.map((collection) => (
+                        <SelectItem key={collection.id} value={collection.id}>
+                          {collection.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </div>
+          </div>
+        </PageBlock>
+      </PageLayout>
+    </Page>
+  )
+}