Merge pull request 'efril' (#15) from efril into main

Reviewed-on: #15

src/app/[lang]/(dashboard)/(private)/apps/marketing/campaign/[id]/detail/page.tsx

@@ -0,0 +1,7 @@
+import CampaignDetailContent from '@/views/apps/marketing/campaign/detail'
+
+const CampaignDetailPage = () => {
+  return <CampaignDetailContent />
+}
+
+export default CampaignDetailPage

src/services/api.ts

@@ -5,8 +5,9 @@ const getToken = () => {
   return localStorage.getItem('authToken')
 }
 
+// baseURL: 'https://api-pos.apskel.id/api/v1',
 export const api = axios.create({
-  baseURL: 'https://api-pos.apskel.id/api/v1',
+  baseURL: 'http://127.0.0.1:4000/api/v1',
   headers: {
     'Content-Type': 'application/json'
   },

src/services/mutations/campaign.ts

@@ -1,4 +1,4 @@
-import { CampaignRequest } from '@/types/services/campaign'
+import { CampaignRequest, CampaignRuleRequest } from '@/types/services/campaign'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import { api } from '../api'
@@ -50,3 +50,51 @@ export const useCampaignsMutation = () => {
 
   return { createCampaign, updateCampaign, deleteCampaign }
 }
+
+export const useCampaignRulesMutation = () => {
+  const queryClient = useQueryClient()
+
+  const createCampaignRule = useMutation({
+    mutationFn: async (newCampaignRule: CampaignRuleRequest) => {
+      const response = await api.post('/marketing/campaign-rules', newCampaignRule)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule created successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
+    }
+  })
+
+  const updateCampaignRule = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: CampaignRuleRequest }) => {
+      const response = await api.put(`/marketing/campaign-rules/${id}`, payload)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule updated successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
+    }
+  })
+
+  const deleteCampaignRule = useMutation({
+    mutationFn: async (id: string) => {
+      const response = await api.delete(`/marketing/campaign-rules/${id}`)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('CampaignRule deleted successfully!')
+      queryClient.invalidateQueries({ queryKey: ['campaign-rules/campaign'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Delete failed')
+    }
+  })
+
+  return { createCampaignRule, updateCampaignRule, deleteCampaignRule }
+}

src/services/queries/campaign.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { api } from '../api'
-import { Campaign, Campaigns } from '@/types/services/campaign'
+import { Campaign, CampaignRule, Campaigns } from '@/types/services/campaign'
 
 interface CampaignQueryParams {
   page?: number
@@ -44,3 +44,13 @@ export function useCampaignById(id: string) {
     }
   })
 }
+
+export function useCampaignRulesByCampaignId(id: string) {
+  return useQuery<CampaignRule[]>({
+    queryKey: ['campaign-rules/campaign', id],
+    queryFn: async () => {
+      const res = await api.get(`/marketing/campaign-rules/campaign/${id}`)
+      return res.data.data
+    }
+  })
+}

src/types/services/campaign.ts

@@ -14,8 +14,9 @@ export interface Campaign {
   is_active: boolean
   show_on_app: boolean
   position: number
-  metadata?: Record<string, any>
+  metadata?: {
-  rules?: CampaignRule[]
+    banner_url?: string
+  }
   created_at: string // ISO string
   updated_at: string // ISO string
 }
@@ -43,16 +44,19 @@ export interface CampaignRequest {
   is_active: boolean
   show_on_app: boolean
   position: number
-  metadata?: Record<string, any>
+  metadata?: {
-  rules: CampaignRuleRequest[]
+    banner_url?: string
+  }
 }
 
 export interface CampaignRuleRequest {
-  rule_type: RuleType
+  campaign_id: string
+  rule_type: 'TIER' | 'SPEND' | 'PRODUCT' | 'CATEGORY' | 'DAY' | 'LOCATION'
   condition_value?: string
-  reward_type: RewardType
+  reward_type: 'POINTS' | 'TOKENS' | 'REWARD'
   reward_value?: number
   reward_subtype?: string
+  reward_ref_id?: string
 }
 
 export interface Campaigns {

src/utils/transform.ts

@@ -43,6 +43,15 @@ export const formatDateDDMMYYYY = (dateString: Date | string) => {
   return `${day}-${month}-${year}`
 }
 
+export const formatDateYYYYMMDD = (dateString: Date | string) => {
+  const date = new Date(dateString)
+  date.setHours(0, 0, 0, 0)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${year}-${month}-${day}`
+}
+
 export const formatForInputDate = (dateString: Date | string) => {
   const date = new Date(dateString)
   const day = String(date.getDate()).padStart(2, '0')
@@ -51,7 +60,6 @@ export const formatForInputDate = (dateString: Date | string) => {
   return `${year}-${month}-${day}`
 }
 
-
 export const formatDatetime = (dateString: string | number | Date) => {
   const date = new Date(dateString)
 

src/views/apps/ecommerce/products/add/ProductOrganize.tsx

@@ -82,6 +82,8 @@ const ProductOrganize = () => {
             onChange={e => handleSelectChange('printer_type', e.target.value)}
           >
             <MenuItem value={`kitchen`}>Kitchen</MenuItem>
+            <MenuItem value={`bar`}>Bar</MenuItem>
+            <MenuItem value={`ticket`}>Ticket</MenuItem>
           </CustomTextField>
         </form>
       </CardContent>

src/views/apps/marketing/campaign/AddEditCampaignDrawer.tsx

@@ -7,49 +7,22 @@ import Drawer from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
 import MenuItem from '@mui/material/MenuItem'
 import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid2'
 import Box from '@mui/material/Box'
 import Switch from '@mui/material/Switch'
 import FormControlLabel from '@mui/material/FormControlLabel'
-import Chip from '@mui/material/Chip'
-import InputAdornment from '@mui/material/InputAdornment'
 
 // Third-party Imports
-import { useForm, Controller, useFieldArray } from 'react-hook-form'
+import { useForm, Controller } from 'react-hook-form'
 
 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
+import ImageUpload from '@/components/ImageUpload'
 
 // Types
-import { Campaign } from '@/types/services/campaign'
+import { Campaign, CampaignRequest, CampaignType } from '@/types/services/campaign'
 import { useCampaignsMutation } from '@/services/mutations/campaign'
-
+import { useFilesMutation } from '@/services/mutations/files'
-// Updated Type Definitions
+import { formatDateYYYYMMDD } from '@/utils/transform'
-export type CampaignType = 'REWARD' | 'POINTS' | 'TOKENS' | 'MIXED'
-export type RuleType = 'TIER' | 'SPEND' | 'PRODUCT' | 'CATEGORY' | 'DAY' | 'LOCATION'
-export type RewardType = 'POINTS' | 'TOKENS' | 'REWARD'
-
-export interface CampaignRequest {
-  name: string
-  description?: string
-  type: CampaignType
-  start_date: string // ISO string
-  end_date: string // ISO string
-  is_active: boolean
-  show_on_app: boolean
-  position: number
-  metadata?: Record<string, any>
-  rules: CampaignRuleRequest[]
-}
-
-export interface CampaignRuleRequest {
-  rule_type: RuleType
-  condition_value?: string
-  reward_type: RewardType
-  reward_value?: number
-  reward_subtype?: string
-}
 
 type Props = {
   open: boolean
@@ -66,14 +39,7 @@ type FormValidateType = {
   is_active: boolean
   show_on_app: boolean
   position: number
-  // Rules array
+  banner_url: string
-  rules: {
-    rule_type: RuleType
-    condition_value: string
-    reward_type: RewardType
-    reward_value: number
-    reward_subtype: string
-  }[]
 }
 
 // Initial form data
@@ -86,16 +52,7 @@ const initialData: FormValidateType = {
   is_active: true,
   show_on_app: true,
   position: 1,
-  // Initial rule
+  banner_url: ''
-  rules: [
-    {
-      rule_type: 'SPEND',
-      condition_value: '',
-      reward_type: 'POINTS',
-      reward_value: 0,
-      reward_subtype: ''
-    }
-  ]
 }
 
 const AddEditCampaignDrawer = (props: Props) => {
@@ -105,8 +62,10 @@ const AddEditCampaignDrawer = (props: Props) => {
   // States
   const [showMore, setShowMore] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [bannerUrl, setBannerUrl] = useState<string>('')
 
   const { createCampaign, updateCampaign } = useCampaignsMutation()
+  const { mutate: uploadFile, isPending: isUploadPending } = useFilesMutation().uploadFile
 
   // Determine if this is edit mode
   const isEditMode = Boolean(data?.id)
@@ -123,12 +82,6 @@ const AddEditCampaignDrawer = (props: Props) => {
     defaultValues: initialData
   })
 
-  // Field array for rules
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'rules'
-  })
-
   const watchedStartDate = watch('start_date')
   const watchedEndDate = watch('end_date')
 
@@ -144,29 +97,16 @@ const AddEditCampaignDrawer = (props: Props) => {
         is_active: data.is_active ?? true,
         show_on_app: data.show_on_app ?? true,
         position: data.position || 1,
-        // Map existing rules
+        banner_url: data.metadata?.banner_url || ''
-        rules: data.rules?.map(rule => ({
-          rule_type: rule.rule_type,
-          condition_value: rule.condition_value || '',
-          reward_type: rule.reward_type,
-          reward_value: rule.reward_value || 0,
-          reward_subtype: rule.reward_subtype || ''
-        })) || [
-          {
-            rule_type: 'SPEND',
-            condition_value: '',
-            reward_type: 'POINTS',
-            reward_value: 0,
-            reward_subtype: ''
-          }
-        ]
       }
 
       resetForm(formData)
+      setBannerUrl(data.metadata?.banner_url || '')
       setShowMore(true) // Always show more for edit mode
     } else {
       // Reset to initial data for add mode
       resetForm(initialData)
+      setBannerUrl('')
       setShowMore(false)
     }
   }, [data, isEditMode, resetForm])
@@ -175,20 +115,10 @@ const AddEditCampaignDrawer = (props: Props) => {
     try {
       setIsSubmitting(true)
 
-      // Create rules array
+      // Create metadata object
-      const rulesRequest: CampaignRuleRequest[] = formData.rules.map(rule => ({
+      const metadata: { banner_url?: string } = {}
-        rule_type: rule.rule_type,
+      if (bannerUrl.trim()) {
-        condition_value: rule.condition_value || undefined,
+        metadata.banner_url = bannerUrl.trim()
-        reward_type: rule.reward_type,
-        reward_value: rule.reward_value || undefined,
-        reward_subtype: rule.reward_subtype || undefined
-      }))
-
-      // Create metadata from rules if needed
-      const metadata: Record<string, any> = {}
-      const spendRule = formData.rules.find(rule => rule.rule_type === 'SPEND')
-      if (spendRule?.condition_value) {
-        metadata.minPurchase = parseInt(spendRule.condition_value)
       }
 
       // Create CampaignRequest object
@@ -196,13 +126,12 @@ const AddEditCampaignDrawer = (props: Props) => {
         name: formData.name,
         description: formData.description || undefined,
         type: formData.type,
-        start_date: new Date(formData.start_date).toISOString(),
+        start_date: formatDateYYYYMMDD(formData.start_date),
-        end_date: new Date(formData.end_date).toISOString(),
+        end_date: formatDateYYYYMMDD(formData.end_date),
         is_active: formData.is_active,
         show_on_app: formData.show_on_app,
         position: formData.position,
-        metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+        metadata: Object.keys(metadata).length > 0 ? metadata : undefined
-        rules: rulesRequest
       }
 
       if (isEditMode && data?.id) {
@@ -236,70 +165,29 @@ const AddEditCampaignDrawer = (props: Props) => {
   const handleReset = () => {
     handleClose()
     resetForm(initialData)
+    setBannerUrl('')
     setShowMore(false)
   }
 
-  const formatCurrency = (value: number) => {
+  // Handle file upload
-    return new Intl.NumberFormat('id-ID', {
+  const handleBannerUpload = async (file: File): Promise<string> => {
-      style: 'currency',
+    return new Promise((resolve, reject) => {
-      currency: 'IDR',
+      const formData = new FormData()
-      minimumFractionDigits: 0
+      formData.append('file', file)
-    }).format(value)
+      formData.append('file_type', 'image')
-  }
+      formData.append('description', 'campaign banner upload')
 
-  const getRewardTypeLabel = (type: RewardType) => {
+      uploadFile(formData, {
-    switch (type) {
+        onSuccess: r => {
-      case 'POINTS':
+          setBannerUrl(r.file_url)
-        return 'Poin'
+          setValue('banner_url', r.file_url) // Update form value
-      case 'TOKENS':
+          resolve(r.id)
-        return 'Token'
+        },
-      case 'REWARD':
+        onError: er => {
-        return 'Reward'
+          reject(er)
-      default:
-        return type
         }
-  }
+      })
-
+    })
-  const getRewardValuePlaceholder = (type: RewardType) => {
-    switch (type) {
-      case 'POINTS':
-        return 'Jumlah poin yang diberikan'
-      case 'TOKENS':
-        return 'Jumlah token yang diberikan'
-      case 'REWARD':
-        return 'Nilai reward'
-      default:
-        return 'Nilai reward'
-    }
-  }
-
-  const getConditionValuePlaceholder = (ruleType: RuleType) => {
-    switch (ruleType) {
-      case 'SPEND':
-        return 'Minimum pembelian (Rupiah)'
-      case 'TIER':
-        return 'Tier pelanggan (misal: GOLD, SILVER)'
-      case 'PRODUCT':
-        return 'ID atau nama produk'
-      case 'CATEGORY':
-        return 'Kategori produk'
-      case 'DAY':
-        return 'Hari dalam seminggu (misal: MONDAY)'
-      case 'LOCATION':
-        return 'Lokasi atau kota'
-      default:
-        return 'Nilai kondisi'
-    }
-  }
-
-  const getConditionValueInputProps = (ruleType: RuleType) => {
-    if (ruleType === 'SPEND') {
-      return {
-        startAdornment: <InputAdornment position='start'>Rp</InputAdornment>,
-        type: 'number' as const
-      }
-    }
-    return { type: 'text' as const }
   }
 
   return (
@@ -402,202 +290,6 @@ const AddEditCampaignDrawer = (props: Props) => {
               />
             </div>
 
-            {/* Rules Section */}
-            <div>
-              <Box display='flex' alignItems='center' justifyContent='space-between' className='mb-4'>
-                <Typography variant='h6'>Aturan Kampanye</Typography>
-                <Button
-                  variant='outlined'
-                  size='small'
-                  startIcon={<i className='tabler-plus' />}
-                  onClick={() =>
-                    append({
-                      rule_type: 'SPEND',
-                      condition_value: '',
-                      reward_type: 'POINTS',
-                      reward_value: 0,
-                      reward_subtype: ''
-                    })
-                  }
-                >
-                  Tambah Aturan
-                </Button>
-              </Box>
-
-              {fields.map((field, index) => (
-                <Box key={field.id} className='mb-6 p-4 border border-gray-200 rounded-lg'>
-                  <Box display='flex' alignItems='center' justifyContent='between' className='mb-3'>
-                    <Typography variant='subtitle2' className='font-medium'>
-                      Aturan {index + 1}
-                    </Typography>
-                    {fields.length > 1 && (
-                      <IconButton size='small' color='error' onClick={() => remove(index)}>
-                        <i className='tabler-trash text-lg' />
-                      </IconButton>
-                    )}
-                  </Box>
-
-                  <div className='flex flex-col gap-4'>
-                    {/* Rule Type */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Tipe Aturan <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.rule_type`}
-                        control={control}
-                        rules={{ required: 'Tipe aturan wajib dipilih' }}
-                        render={({ field }) => (
-                          <CustomTextField
-                            {...field}
-                            select
-                            fullWidth
-                            size='small'
-                            error={!!errors.rules?.[index]?.rule_type}
-                            helperText={errors.rules?.[index]?.rule_type?.message}
-                          >
-                            <MenuItem value='SPEND'>Minimum Pembelian</MenuItem>
-                            <MenuItem value='TIER'>Tier Pelanggan</MenuItem>
-                            <MenuItem value='PRODUCT'>Produk Tertentu</MenuItem>
-                            <MenuItem value='CATEGORY'>Kategori Produk</MenuItem>
-                            <MenuItem value='DAY'>Hari Tertentu</MenuItem>
-                            <MenuItem value='LOCATION'>Lokasi Tertentu</MenuItem>
-                          </CustomTextField>
-                        )}
-                      />
-                    </div>
-
-                    {/* Condition Value */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Nilai Kondisi <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.condition_value`}
-                        control={control}
-                        rules={{ required: 'Nilai kondisi wajib diisi' }}
-                        render={({ field }) => {
-                          const ruleType = watch(`rules.${index}.rule_type`)
-                          return (
-                            <CustomTextField
-                              {...field}
-                              fullWidth
-                              size='small'
-                              placeholder={getConditionValuePlaceholder(ruleType)}
-                              error={!!errors.rules?.[index]?.condition_value}
-                              helperText={errors.rules?.[index]?.condition_value?.message}
-                              InputProps={getConditionValueInputProps(ruleType)}
-                              type={getConditionValueInputProps(ruleType).type}
-                            />
-                          )
-                        }}
-                      />
-                    </div>
-
-                    {/* Reward Type */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Jenis Reward <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.reward_type`}
-                        control={control}
-                        rules={{ required: 'Jenis reward wajib dipilih' }}
-                        render={({ field }) => (
-                          <CustomTextField
-                            {...field}
-                            select
-                            fullWidth
-                            size='small'
-                            error={!!errors.rules?.[index]?.reward_type}
-                            helperText={errors.rules?.[index]?.reward_type?.message}
-                          >
-                            <MenuItem value='POINTS'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-coins text-primary' />
-                                Points
-                              </div>
-                            </MenuItem>
-                            <MenuItem value='TOKENS'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-ticket text-success' />
-                                Tokens
-                              </div>
-                            </MenuItem>
-                            <MenuItem value='REWARD'>
-                              <div className='flex items-center gap-2'>
-                                <i className='tabler-percentage text-warning' />
-                                Reward
-                              </div>
-                            </MenuItem>
-                          </CustomTextField>
-                        )}
-                      />
-                    </div>
-
-                    {/* Reward Value */}
-                    <div>
-                      <Typography variant='body2' className='mb-2'>
-                        Nilai Reward <span className='text-red-500'>*</span>
-                      </Typography>
-                      <Controller
-                        name={`rules.${index}.reward_value`}
-                        control={control}
-                        rules={{
-                          required: 'Nilai reward wajib diisi',
-                          min: { value: 1, message: 'Nilai reward minimal 1' }
-                        }}
-                        render={({ field }) => {
-                          const rewardType = watch(`rules.${index}.reward_type`)
-                          return (
-                            <CustomTextField
-                              {...field}
-                              fullWidth
-                              size='small'
-                              type='number'
-                              placeholder={getRewardValuePlaceholder(rewardType)}
-                              error={!!errors.rules?.[index]?.reward_value}
-                              helperText={errors.rules?.[index]?.reward_value?.message}
-                              InputProps={{
-                                endAdornment:
-                                  rewardType === 'POINTS' ? (
-                                    <InputAdornment position='end'>Poin</InputAdornment>
-                                  ) : rewardType === 'TOKENS' ? (
-                                    <InputAdornment position='end'>Token</InputAdornment>
-                                  ) : undefined
-                              }}
-                              onChange={e => field.onChange(Number(e.target.value))}
-                            />
-                          )
-                        }}
-                      />
-                    </div>
-
-                    {/* Reward Subtype (jika reward type adalah REWARD) */}
-                    {watch(`rules.${index}.reward_type`) === 'REWARD' && (
-                      <div>
-                        <Typography variant='body2' className='mb-2'>
-                          Sub-tipe Reward
-                        </Typography>
-                        <Controller
-                          name={`rules.${index}.reward_subtype`}
-                          control={control}
-                          render={({ field }) => (
-                            <CustomTextField {...field} select fullWidth size='small'>
-                              <MenuItem value='DISCOUNT_PERCENT'>Diskon Persentase</MenuItem>
-                              <MenuItem value='DISCOUNT_AMOUNT'>Diskon Nominal</MenuItem>
-                              <MenuItem value='CASHBACK'>Cashback</MenuItem>
-                              <MenuItem value='FREE_SHIPPING'>Gratis Ongkir</MenuItem>
-                            </CustomTextField>
-                          )}
-                        />
-                      </div>
-                    )}
-                  </div>
-                </Box>
-              ))}
-            </div>
-
             {/* Tanggal Mulai */}
             <div>
               <Typography variant='body2' className='mb-2'>
@@ -723,6 +415,23 @@ const AddEditCampaignDrawer = (props: Props) => {
                   />
                 </div>
 
+                {/* Banner Upload */}
+                <div>
+                  <Typography variant='body2' className='mb-2'>
+                    Banner Kampanye
+                  </Typography>
+                  <ImageUpload
+                    onUpload={handleBannerUpload}
+                    maxFileSize={1 * 1024 * 1024} // 1MB
+                    currentImageUrl={bannerUrl}
+                    dragDropText='Drop banner image here'
+                    browseButtonText='Choose Banner'
+                  />
+                  <Typography variant='caption' color='text.secondary' className='mt-1 block'>
+                    Format: JPG, PNG. Ukuran maksimal: 1MB
+                  </Typography>
+                </div>
+
                 {/* Position */}
                 <div>
                   <Typography variant='body2' className='mb-2'>

src/views/apps/marketing/campaign/CampaignListTable.tsx

@@ -141,85 +141,6 @@ const getCampaignTypeColor = (type: string): ThemeColor => {
   }
 }
 
-const getCampaignTypeIcon = (type: string): string => {
-  switch (type) {
-    case 'POINTS':
-      return 'tabler-coins'
-    case 'TOKENS':
-      return 'tabler-ticket'
-    case 'REWARD':
-      return 'tabler-gift'
-    case 'MIXED':
-      return 'tabler-layers-intersect'
-    default:
-      return 'tabler-tag'
-  }
-}
-
-const getRewardTypeColor = (rewardType: string): ThemeColor => {
-  switch (rewardType) {
-    case 'POINTS':
-      return 'primary'
-    case 'TOKENS':
-      return 'success'
-    case 'REWARD':
-      return 'warning'
-    default:
-      return 'info'
-  }
-}
-
-const getRewardTypeIcon = (rewardType: string): string => {
-  switch (rewardType) {
-    case 'POINTS':
-      return 'tabler-coins'
-    case 'TOKENS':
-      return 'tabler-ticket'
-    case 'REWARD':
-      return 'tabler-percentage'
-    default:
-      return 'tabler-gift'
-  }
-}
-
-const formatRewardValue = (rewardType: string, rewardValue?: number, rewardSubtype?: string): string => {
-  if (!rewardValue) return '-'
-
-  switch (rewardType) {
-    case 'POINTS':
-      return `${formatPoints(rewardValue)} Poin`
-    case 'TOKENS':
-      return formatCurrency(rewardValue)
-    case 'REWARD':
-      if (rewardSubtype === 'DISCOUNT_PERCENT') {
-        return `${rewardValue}%`
-      }
-      return formatCurrency(rewardValue)
-    default:
-      return rewardValue.toString()
-  }
-}
-
-const getMinimumPurchase = (campaign: Campaign): number => {
-  // Check rules for spend condition
-  const spendRule = campaign.rules?.find(rule => rule.rule_type === 'SPEND')
-  if (spendRule?.condition_value) {
-    return parseInt(spendRule.condition_value)
-  }
-
-  // Fallback to metadata
-  return campaign.metadata?.minPurchase || 0
-}
-
-const getPrimaryReward = (campaign: Campaign): { type: string; value?: number; subtype?: string } => {
-  const primaryRule = campaign.rules?.[0]
-  return {
-    type: primaryRule?.reward_type || 'POINTS',
-    value: primaryRule?.reward_value,
-    subtype: primaryRule?.reward_subtype
-  }
-}
-
 // Column Definitions
 const columnHelper = createColumnHelper<CampaignWithAction>()
 
@@ -331,7 +252,7 @@ const CampaignListTable = () => {
         cell: ({ row }) => (
           <div className='flex items-center gap-4'>
             <div className='flex flex-col'>
-              <Link href={getLocalizedUrl(`/apps/campaigns/${row.original.id}/detail`, locale as Locale)}>
+              <Link href={getLocalizedUrl(`/apps/marketing/campaign/${row.original.id}/detail`, locale as Locale)}>
                 <Typography className='font-medium cursor-pointer hover:underline text-primary'>
                   {row.original.name}
                 </Typography>
@@ -356,38 +277,6 @@ const CampaignListTable = () => {
           />
         )
       }),
-      columnHelper.accessor('metadata', {
-        header: 'Minimum Pembelian',
-        cell: ({ row }) => {
-          const minPurchase = getMinimumPurchase(row.original)
-          return (
-            <div className='flex items-center gap-2'>
-              <Icon className='tabler-coin' sx={{ color: 'var(--mui-palette-primary-main)' }} />
-              <Typography color='text.primary'>{minPurchase > 0 ? formatCurrency(minPurchase) : '-'}</Typography>
-            </div>
-          )
-        }
-      }),
-      columnHelper.accessor('rules', {
-        header: 'Reward Utama',
-        cell: ({ row }) => {
-          const reward = getPrimaryReward(row.original)
-          return (
-            <div className='flex items-center gap-2'>
-              <Icon
-                className={getRewardTypeIcon(reward.type)}
-                sx={{ color: `var(--mui-palette-${getRewardTypeColor(reward.type)}-main)` }}
-              />
-              <Chip
-                label={formatRewardValue(reward.type, reward.value, reward.subtype)}
-                color={getRewardTypeColor(reward.type)}
-                variant='tonal'
-                size='small'
-              />
-            </div>
-          )
-        }
-      }),
       columnHelper.accessor('start_date', {
         header: 'Periode Kampanye',
         cell: ({ row }) => (

src/views/apps/marketing/campaign/detail/AddEditCampaignRuleDrawer.tsx

@@ -0,0 +1,417 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+
+// Third-party Imports
+import { useForm, Controller } from 'react-hook-form'
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+// Types
+import { CampaignRule, RuleType, RewardType, CampaignRuleRequest } from '@/types/services/campaign'
+import { useCampaignRulesMutation } from '@/services/mutations/campaign'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  campaignId: string // Required campaign ID
+  data?: CampaignRule | null // Data for edit mode
+}
+
+type FormValidateType = {
+  rule_type: RuleType
+  condition_value: string
+  reward_type: RewardType
+  reward_value: number
+  reward_subtype: string
+  reward_ref_id: string
+}
+
+// Initial form data
+const initialData: FormValidateType = {
+  rule_type: 'SPEND',
+  condition_value: '',
+  reward_type: 'POINTS',
+  reward_value: 0,
+  reward_subtype: '',
+  reward_ref_id: ''
+}
+
+const AddEditCampaignRuleDrawer = (props: Props) => {
+  // Props
+  const { open, handleClose, campaignId, data } = props
+
+  // States
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const { createCampaignRule, updateCampaignRule } = useCampaignRulesMutation()
+
+  // Determine if this is edit mode
+  const isEditMode = Boolean(data?.id)
+
+  // Hooks
+  const {
+    control,
+    reset: resetForm,
+    handleSubmit,
+    watch,
+    formState: { errors }
+  } = useForm<FormValidateType>({
+    defaultValues: initialData
+  })
+
+  const watchedRewardType = watch('reward_type')
+
+  // Effect to populate form when editing
+  useEffect(() => {
+    if (isEditMode && data) {
+      const formData: FormValidateType = {
+        rule_type: data.rule_type,
+        condition_value: data.condition_value || '',
+        reward_type: data.reward_type,
+        reward_value: data.reward_value || 0,
+        reward_subtype: data.reward_subtype || '',
+        reward_ref_id: data.reward_ref_id || ''
+      }
+
+      resetForm(formData)
+    } else {
+      // Reset to initial data for add mode
+      resetForm(initialData)
+    }
+  }, [data, isEditMode, resetForm])
+
+  const handleFormSubmit = async (formData: FormValidateType) => {
+    try {
+      setIsSubmitting(true)
+
+      // Create CampaignRuleRequest object
+      const ruleRequest: CampaignRuleRequest = {
+        campaign_id: campaignId,
+        rule_type: formData.rule_type,
+        condition_value: formData.condition_value.trim() || undefined,
+        reward_type: formData.reward_type,
+        reward_value: formData.reward_value > 0 ? formData.reward_value : undefined,
+        reward_subtype: formData.reward_subtype.trim() || undefined,
+        reward_ref_id: formData.reward_ref_id.trim() || undefined
+      }
+
+      if (isEditMode && data?.id) {
+        // Update existing campaign rule
+        updateCampaignRule.mutate(
+          { id: data.id, payload: ruleRequest },
+          {
+            onSuccess: () => {
+              handleReset()
+              handleClose()
+            },
+            onError: error => {
+              console.error('Error updating campaign rule:', error)
+            }
+          }
+        )
+      } else {
+        // Create new campaign rule
+        createCampaignRule.mutate(ruleRequest, {
+          onSuccess: () => {
+            handleReset()
+            handleClose()
+          },
+          onError: error => {
+            console.error('Error creating campaign rule:', error)
+          }
+        })
+      }
+    } catch (error) {
+      console.error('Error submitting campaign rule:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleReset = () => {
+    handleClose()
+    resetForm(initialData)
+  }
+
+  // Helper function to get rule type options
+  const getRuleTypeOptions = () => [
+    { value: 'TIER', label: 'Tier Based', icon: 'tabler-medal' },
+    { value: 'SPEND', label: 'Spending Amount', icon: 'tabler-wallet' },
+    { value: 'PRODUCT', label: 'Product Based', icon: 'tabler-package' },
+    { value: 'CATEGORY', label: 'Category Based', icon: 'tabler-category' },
+    { value: 'DAY', label: 'Day Based', icon: 'tabler-calendar' },
+    { value: 'LOCATION', label: 'Location Based', icon: 'tabler-map-pin' }
+  ]
+
+  // Helper function to get reward type options
+  const getRewardTypeOptions = () => [
+    { value: 'POINTS', label: 'Points', icon: 'tabler-coins' },
+    { value: 'TOKENS', label: 'Tokens', icon: 'tabler-ticket' },
+    { value: 'REWARD', label: 'Reward Item', icon: 'tabler-gift' }
+  ]
+
+  // Helper function to get condition placeholder based on rule type
+  const getConditionPlaceholder = (ruleType: RuleType) => {
+    switch (ruleType) {
+      case 'TIER':
+        return 'e.g., GOLD, SILVER, BRONZE'
+      case 'SPEND':
+        return 'e.g., 100000 (minimum spend amount)'
+      case 'PRODUCT':
+        return 'e.g., product_id_123'
+      case 'CATEGORY':
+        return 'e.g., electronics, fashion'
+      case 'DAY':
+        return 'e.g., monday, weekend'
+      case 'LOCATION':
+        return 'e.g., jakarta, bandung'
+      default:
+        return 'Enter condition value'
+    }
+  }
+
+  // Helper function to get reward subtype options based on reward type
+  const getRewardSubtypeOptions = (rewardType: RewardType) => {
+    switch (rewardType) {
+      case 'POINTS':
+        return ['bonus', 'cashback', 'referral']
+      case 'TOKENS':
+        return ['game', 'lottery', 'voucher']
+      case 'REWARD':
+        return ['product', 'discount', 'currency', 'experience']
+      default:
+        return []
+    }
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        '& .MuiDrawer-paper': {
+          width: { xs: 300, sm: 400 },
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        }
+      }}
+    >
+      {/* Sticky Header */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderBottom: 1,
+          borderColor: 'divider'
+        }}
+      >
+        <div className='flex items-center justify-between plb-5 pli-6'>
+          <Typography variant='h5'>{isEditMode ? 'Edit Campaign Rule' : 'Add New Campaign Rule'}</Typography>
+          <IconButton size='small' onClick={handleReset}>
+            <i className='tabler-x text-2xl text-textPrimary' />
+          </IconButton>
+        </div>
+      </Box>
+
+      {/* Scrollable Content */}
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        <form id='campaign-rule-form' onSubmit={handleSubmit(handleFormSubmit)}>
+          <div className='flex flex-col gap-6 p-6'>
+            {/* Rule Type */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Rule Type <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='rule_type'
+                control={control}
+                rules={{ required: 'Rule type is required' }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.rule_type}
+                    helperText={errors.rule_type?.message}
+                  >
+                    {getRuleTypeOptions().map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        <div className='flex items-center gap-2'>
+                          <i className={`${option.icon} text-primary`} />
+                          {option.label}
+                        </div>
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Condition Value */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Condition Value
+              </Typography>
+              <Controller
+                name='condition_value'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder={getConditionPlaceholder(watch('rule_type'))}
+                    error={!!errors.condition_value}
+                    helperText={errors.condition_value?.message}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Reward Type */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Type <span className='text-red-500'>*</span>
+              </Typography>
+              <Controller
+                name='reward_type'
+                control={control}
+                rules={{ required: 'Reward type is required' }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.reward_type}
+                    helperText={errors.reward_type?.message}
+                  >
+                    {getRewardTypeOptions().map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        <div className='flex items-center gap-2'>
+                          <i className={`${option.icon} text-primary`} />
+                          {option.label}
+                        </div>
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Reward Value */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Value
+              </Typography>
+              <Controller
+                name='reward_value'
+                control={control}
+                rules={{
+                  min: { value: 1, message: 'Reward value must be at least 1' }
+                }}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    type='number'
+                    placeholder={`Enter ${watchedRewardType.toLowerCase()} amount`}
+                    error={!!errors.reward_value}
+                    helperText={errors.reward_value?.message}
+                    onChange={e => field.onChange(Number(e.target.value))}
+                  />
+                )}
+              />
+            </div>
+
+            {/* Reward Subtype */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Subtype
+              </Typography>
+              <Controller
+                name='reward_subtype'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    select
+                    fullWidth
+                    error={!!errors.reward_subtype}
+                    helperText={errors.reward_subtype?.message}
+                  >
+                    <MenuItem value=''>
+                      <em>None</em>
+                    </MenuItem>
+                    {getRewardSubtypeOptions(watchedRewardType).map(subtype => (
+                      <MenuItem key={subtype} value={subtype}>
+                        {subtype.charAt(0).toUpperCase() + subtype.slice(1)}
+                      </MenuItem>
+                    ))}
+                  </CustomTextField>
+                )}
+              />
+            </div>
+
+            {/* Reward Reference ID */}
+            <div>
+              <Typography variant='body2' className='mb-2'>
+                Reward Reference ID
+              </Typography>
+              <Controller
+                name='reward_ref_id'
+                control={control}
+                render={({ field }) => (
+                  <CustomTextField
+                    {...field}
+                    fullWidth
+                    placeholder='e.g., product_id, voucher_id (optional)'
+                    error={!!errors.reward_ref_id}
+                    helperText={errors.reward_ref_id?.message || 'Optional reference to specific reward item'}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </form>
+      </Box>
+
+      {/* Sticky Footer */}
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          backgroundColor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          p: 3
+        }}
+      >
+        <div className='flex items-center gap-4'>
+          <Button variant='contained' type='submit' form='campaign-rule-form' disabled={isSubmitting}>
+            {isSubmitting ? (isEditMode ? 'Updating...' : 'Creating...') : isEditMode ? 'Update Rule' : 'Create Rule'}
+          </Button>
+          <Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
+            Cancel
+          </Button>
+        </div>
+      </Box>
+    </Drawer>
+  )
+}
+
+export default AddEditCampaignRuleDrawer

src/views/apps/marketing/campaign/detail/index.tsx

@@ -0,0 +1,401 @@
+'use client'
+
+import Loading from '@/components/layout/shared/Loading'
+import { useCampaignById, useCampaignRulesByCampaignId } from '@/services/queries/campaign'
+import { CampaignRule, RewardType, RuleType } from '@/types/services/campaign'
+import { formatCurrency } from '@/utils/transform'
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  CardContent,
+  Chip,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Box,
+  Divider,
+  Button,
+  IconButton,
+  Tooltip,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText
+} from '@mui/material'
+// Using Tabler icons instead of Material-UI icons
+import { useParams } from 'next/navigation'
+import { useState } from 'react'
+
+const CampaignDetailContent = () => {
+  const params = useParams()
+
+  // State for dialogs
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
+  const [selectedRule, setSelectedRule] = useState<CampaignRule | null>(null)
+
+  const { data: campaign, isLoading, error } = useCampaignById(params?.id as string)
+  const { data: rules, isLoading: rulesLoading, error: rulesError } = useCampaignRulesByCampaignId(params?.id as string)
+
+  if (isLoading) return <Loading />
+
+  // Action handlers
+  const handleAddRule = () => {
+    // TODO: Implement add rule functionality
+    // Could open a modal/form or navigate to add rule page
+    console.log('Add new rule for campaign:', params?.id)
+  }
+
+  const handleEditRule = (rule: CampaignRule) => {
+    // TODO: Implement edit rule functionality
+    // Could open a modal/form or navigate to edit rule page
+    console.log('Edit rule:', rule.id)
+    setSelectedRule(rule)
+    // You might want to open an edit modal here
+  }
+
+  const handleDeleteRule = (rule: CampaignRule) => {
+    setSelectedRule(rule)
+    setSelectedRuleId(rule.id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDeleteRule = async () => {
+    if (selectedRuleId) {
+      try {
+        // TODO: Implement actual delete API call
+        console.log('Deleting rule:', selectedRuleId)
+        // await deleteRuleMutation.mutateAsync(selectedRuleId)
+
+        // Close dialog and reset state
+        setDeleteDialogOpen(false)
+        setSelectedRuleId(null)
+        setSelectedRule(null)
+
+        // Show success message or refresh data
+      } catch (error) {
+        console.error('Failed to delete rule:', error)
+        // Handle error (show toast, etc.)
+      }
+    }
+  }
+
+  const cancelDelete = () => {
+    setDeleteDialogOpen(false)
+    setSelectedRuleId(null)
+    setSelectedRule(null)
+  }
+
+  // Helper function to format rule type display
+  const formatRuleType = (ruleType: RuleType) => {
+    const ruleTypeLabels: Record<RuleType, string> = {
+      TIER: 'Tier Based',
+      SPEND: 'Spending Amount',
+      PRODUCT: 'Product Based',
+      CATEGORY: 'Category Based',
+      DAY: 'Day Based',
+      LOCATION: 'Location Based'
+    }
+    return ruleTypeLabels[ruleType] || ruleType
+  }
+
+  // Helper function to get rule type color
+  const getRuleTypeColor = (ruleType: RuleType): 'primary' | 'secondary' | 'success' | 'warning' | 'info' => {
+    const colorMap: Record<RuleType, 'primary' | 'secondary' | 'success' | 'warning' | 'info'> = {
+      TIER: 'primary',
+      SPEND: 'success',
+      PRODUCT: 'info',
+      CATEGORY: 'warning',
+      DAY: 'secondary',
+      LOCATION: 'primary'
+    }
+    return colorMap[ruleType] || 'primary'
+  }
+
+  // Helper function to format reward type display
+  const formatRewardType = (rewardType: RewardType) => {
+    const rewardTypeLabels: Record<RewardType, string> = {
+      POINTS: 'Points',
+      TOKENS: 'Tokens',
+      REWARD: 'Reward Item'
+    }
+    return rewardTypeLabels[rewardType] || rewardType
+  }
+
+  // Helper function to get reward type color
+  const getRewardTypeColor = (rewardType: RewardType): 'primary' | 'secondary' | 'success' => {
+    const colorMap: Record<RewardType, 'primary' | 'secondary' | 'success'> = {
+      POINTS: 'success',
+      TOKENS: 'primary',
+      REWARD: 'secondary'
+    }
+    return colorMap[rewardType] || 'primary'
+  }
+
+  // Helper function to format reward value
+  const formatRewardValue = (rewardValue?: number, rewardType?: RewardType, rewardSubtype?: string) => {
+    if (!rewardValue) return '-'
+
+    // Format based on reward type
+    switch (rewardType) {
+      case 'POINTS':
+        return `${rewardValue.toLocaleString()} pts`
+      case 'TOKENS':
+        return `${rewardValue.toLocaleString()} tokens`
+      case 'REWARD':
+        // For reward items, check if it's currency-based
+        if (rewardSubtype === 'currency') {
+          return formatCurrency(rewardValue)
+        }
+        return rewardValue.toString()
+      default:
+        return rewardValue.toString()
+    }
+  }
+
+  // Helper function to format date
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  return (
+    <>
+      <div className='space-y-6'>
+        {/* Header Card */}
+        <Card>
+          <CardHeader
+            avatar={<Avatar src={campaign?.metadata?.banner_url || ''} alt={campaign?.name} className='w-16 h-16' />}
+            title={
+              <div className='flex items-center gap-3'>
+                <Typography variant='h4' component='h1' className='font-bold'>
+                  {campaign?.name} ({campaign?.type})
+                </Typography>
+
+                <Chip
+                  label={campaign?.is_active ? 'Active' : 'Inactive'}
+                  color={campaign?.is_active ? 'success' : 'error'}
+                  size='small'
+                />
+                <Chip
+                  label={campaign?.show_on_app ? 'Show on App' : 'Hide on App'}
+                  color={campaign?.show_on_app ? 'info' : 'error'}
+                  size='small'
+                />
+              </div>
+            }
+            subheader={
+              <div className='flex flex-col gap-1 mt-2'>
+                <Typography variant='body2' color='textSecondary'>
+                  {campaign?.start_date} - {campaign?.end_date}
+                </Typography>
+                <Typography variant='body2' color='textSecondary'>
+                  {campaign?.description}
+                </Typography>
+              </div>
+            }
+          />
+        </Card>
+
+        {/* Campaign Rules Table */}
+        <Card>
+          <CardHeader
+            title={
+              <div className='flex items-center justify-between'>
+                <div>
+                  <Typography variant='h5' component='h2' className='font-semibold'>
+                    Campaign Rules
+                  </Typography>
+                  {rules && rules.length > 0 && (
+                    <Chip
+                      label={`${rules.length} rule${rules.length !== 1 ? 's' : ''}`}
+                      size='small'
+                      variant='outlined'
+                      className='mt-1'
+                    />
+                  )}
+                </div>
+                <Button
+                  variant='contained'
+                  startIcon={<i className='tabler-plus' />}
+                  onClick={handleAddRule}
+                  size='small'
+                >
+                  Add Rule
+                </Button>
+              </div>
+            }
+            subheader={
+              <Typography variant='body2' color='textSecondary'>
+                Rules and rewards configuration for this campaign
+              </Typography>
+            }
+          />
+          <Divider />
+          <CardContent className='p-0'>
+            {rulesLoading ? (
+              <Box className='p-8 text-center'>
+                <Loading />
+              </Box>
+            ) : rulesError ? (
+              <Box className='p-8 text-center'>
+                <Typography variant='body1' color='error'>
+                  Failed to load campaign rules
+                </Typography>
+                <Typography variant='body2' color='textSecondary' className='mt-1'>
+                  {rulesError.message || 'Please try refreshing the page'}
+                </Typography>
+              </Box>
+            ) : rules && rules.length > 0 ? (
+              <TableContainer component={Paper} elevation={0}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Rule Type</TableCell>
+                      <TableCell>Condition</TableCell>
+                      <TableCell>Reward Type</TableCell>
+                      <TableCell>Reward Value</TableCell>
+                      <TableCell>Subtype</TableCell>
+                      <TableCell>Created</TableCell>
+                      <TableCell>Updated</TableCell>
+                      <TableCell align='center' width={120}>
+                        Actions
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rules.map((rule: CampaignRule) => (
+                      <TableRow key={rule.id} hover>
+                        <TableCell>
+                          <Chip
+                            label={formatRuleType(rule.rule_type)}
+                            variant='outlined'
+                            size='small'
+                            color={getRuleTypeColor(rule.rule_type)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='body2'>{rule.condition_value || '-'}</Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Chip
+                            label={formatRewardType(rule.reward_type)}
+                            variant='outlined'
+                            size='small'
+                            color={getRewardTypeColor(rule.reward_type)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='body2' className='font-medium'>
+                            {formatRewardValue(rule.reward_value, rule.reward_type, rule.reward_subtype)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          {rule.reward_subtype && (
+                            <Chip label={rule.reward_subtype} variant='outlined' size='small' color='default' />
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='caption' color='textSecondary'>
+                            {formatDate(rule.created_at)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell>
+                          <Typography variant='caption' color='textSecondary'>
+                            {formatDate(rule.updated_at)}
+                          </Typography>
+                        </TableCell>
+                        <TableCell align='center'>
+                          <Box className='flex items-center gap-1'>
+                            <Tooltip title='Edit rule'>
+                              <IconButton size='small' onClick={() => handleEditRule(rule)} color='primary'>
+                                <i className='tabler-edit' />
+                              </IconButton>
+                            </Tooltip>
+                            <Tooltip title='Delete rule'>
+                              <IconButton size='small' onClick={() => handleDeleteRule(rule)} color='error'>
+                                <i className='tabler-trash' />
+                              </IconButton>
+                            </Tooltip>
+                          </Box>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            ) : (
+              <Box className='p-8 text-center'>
+                <Typography variant='body1' color='textSecondary'>
+                  No rules configured for this campaign
+                </Typography>
+                <Typography variant='body2' color='textSecondary' className='mt-1'>
+                  Add rules to define how rewards are distributed
+                </Typography>
+                <Button
+                  variant='outlined'
+                  startIcon={<i className='tabler-plus' />}
+                  onClick={handleAddRule}
+                  className='mt-4'
+                >
+                  Add First Rule
+                </Button>
+              </Box>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        open={deleteDialogOpen}
+        onClose={cancelDelete}
+        aria-labelledby='delete-rule-dialog-title'
+        aria-describedby='delete-rule-dialog-description'
+      >
+        <DialogTitle id='delete-rule-dialog-title'>Confirm Delete Rule</DialogTitle>
+        <DialogContent>
+          <DialogContentText id='delete-rule-dialog-description'>
+            Are you sure you want to delete this rule? This action cannot be undone.
+            {selectedRule && (
+              <Box className='mt-3 p-3 bg-gray-50 rounded'>
+                <Typography variant='body2' className='font-medium'>
+                  Rule Details:
+                </Typography>
+                <Typography variant='caption' display='block'>
+                  Type: {formatRuleType(selectedRule.rule_type)}
+                </Typography>
+                <Typography variant='caption' display='block'>
+                  Reward:{' '}
+                  {formatRewardValue(selectedRule.reward_value, selectedRule.reward_type, selectedRule.reward_subtype)}
+                </Typography>
+              </Box>
+            )}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={cancelDelete} color='primary'>
+            Cancel
+          </Button>
+          <Button onClick={confirmDeleteRule} color='error' variant='contained'>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default CampaignDetailContent