src/app/[lang]/(dashboard)/(private)/apps/marketing/customer-analytics/page.tsx

@@ -0,0 +1,7 @@
+import CustomerAnalyticList from '@/views/apps/marketing/customer-analytics'
+
+const CustomerAnalyticsPage = () => {
+  return <CustomerAnalyticList />
+}
+
+export default CustomerAnalyticsPage

src/components/layout/vertical/VerticalMenu.tsx

@@ -162,6 +162,9 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
               </MenuItem>
             </SubMenu>
             <MenuItem href={`/${locale}/apps/marketing/campaign`}>{dictionary['navigation'].campaign}</MenuItem>
+            <MenuItem href={`/${locale}/apps/marketing/customer-analytics`}>
+              {dictionary['navigation'].customer_analytics}
+            </MenuItem>
           </SubMenu>
           <SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
             <SubMenu label={dictionary['navigation'].products}>

src/data/dictionaries/en.json

@@ -132,6 +132,7 @@
     "reward": "Reward",
     "gamification": "Gamification",
     "wheel_spin": "Wheel Spin",
-    "campaign": "Campaign"
+    "campaign": "Campaign",
+    "customer_analytics": "Customer Analytics"
   }
 }

src/data/dictionaries/id.json

@@ -132,6 +132,7 @@
         "reward": "Reward",
         "gamification": "Gamifikasi",
         "wheel_spin": "Wheel Spin",
-        "campaign": "Kampanye"
+        "campaign": "Kampanye",
+        "customer_analytics": "Analisis Pelanggan"
     }
 }

src/types/services/customer.ts

@@ -1,29 +1,40 @@
 export interface Customer {
-  id: string;
-  organization_id: string;
-  name: string;
-  email?: string;
-  phone?: string;
-  address?: string;
-  is_default: boolean;
-  is_active: boolean;
-  metadata: Record<string, any>;
-  created_at: string;
-  updated_at: string;
+  id: string
+  organization_id: string
+  name: string
+  email?: string
+  phone?: string
+  address?: string
+  is_default: boolean
+  is_active: boolean
+  metadata: Record<string, any>
+  created_at: string
+  updated_at: string
 }
 
 export interface Customers {
-  data: Customer[];
-  total_count: number;
-  page: number;
-  limit: number;
-  total_pages: number;
+  data: Customer[]
+  total_count: number
+  page: number
+  limit: number
+  total_pages: number
 }
 
 export interface CustomerRequest {
-  name: string;
-  email?: string;
-  phone?: string;
-  address?: string;
-  is_active?: boolean;
+  name: string
+  email?: string
+  phone?: string
+  address?: string
+  is_active?: boolean
+}
+
+export interface CustomerAnalytics {
+  id: string
+  name: string
+  email?: string
+  phone?: string
+  totalPoints: number
+  totalSpent?: number
+  loyaltyTier?: string // Bronze, Silver, Gold, dst
+  lastTransactionDate?: Date
 }

src/views/apps/marketing/customer-analytics/CustomerAnalyticListTable.tsx

@@ -0,0 +1,593 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, useMemo, useCallback } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Checkbox from '@mui/material/Checkbox'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import TablePagination from '@mui/material/TablePagination'
+import type { TextFieldProps } from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { rankItem } from '@tanstack/match-sorter-utils'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getFilteredRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/react-table'
+import type { ColumnDef, FilterFn } from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+import type { Locale } from '@configs/i18n'
+
+// Component Imports
+import OptionMenu from '@core/components/option-menu'
+import TablePaginationComponent from '@components/TablePaginationComponent'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Util Imports
+import { getInitials } from '@/utils/getInitials'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { formatCurrency } from '@/utils/transform'
+
+// Style Imports
+import tableStyles from '@core/styles/table.module.css'
+import Loading from '@/components/layout/shared/Loading'
+
+// Customer Analytics Interface
+export interface CustomerAnalytics {
+  id: string
+  name: string
+  email?: string
+  phone?: string
+  totalPoints: number
+  totalSpent?: number
+  loyaltyTier?: string // Bronze, Silver, Gold, dst
+  lastTransactionDate?: Date
+}
+
+declare module '@tanstack/table-core' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+type CustomerAnalyticsWithAction = CustomerAnalytics & {
+  action?: string
+}
+
+// Styled Components
+const Icon = styled('i')({})
+
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<TextFieldProps, 'onChange'>) => {
+  // States
+  const [value, setValue] = useState(initialValue)
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
+}
+
+// Dummy data for customer analytics
+const DUMMY_CUSTOMER_ANALYTICS_DATA: CustomerAnalytics[] = [
+  {
+    id: '1',
+    name: 'Ahmad Wijaya',
+    email: 'ahmad.wijaya@email.com',
+    phone: '+628123456789',
+    totalPoints: 1250,
+    totalSpent: 5500000,
+    loyaltyTier: 'Gold',
+    lastTransactionDate: new Date('2024-09-10')
+  },
+  {
+    id: '2',
+    name: 'Siti Nurhaliza',
+    email: 'siti.nurhaliza@email.com',
+    phone: '+628234567890',
+    totalPoints: 850,
+    totalSpent: 3200000,
+    loyaltyTier: 'Silver',
+    lastTransactionDate: new Date('2024-09-15')
+  },
+  {
+    id: '3',
+    name: 'Budi Santoso',
+    email: 'budi.santoso@email.com',
+    phone: '+628345678901',
+    totalPoints: 2100,
+    totalSpent: 8750000,
+    loyaltyTier: 'Gold',
+    lastTransactionDate: new Date('2024-09-12')
+  },
+  {
+    id: '4',
+    name: 'Maya Puspita',
+    email: 'maya.puspita@email.com',
+    phone: '+628456789012',
+    totalPoints: 450,
+    totalSpent: 1800000,
+    loyaltyTier: 'Bronze',
+    lastTransactionDate: new Date('2024-09-08')
+  },
+  {
+    id: '5',
+    name: 'Rizki Pratama',
+    email: 'rizki.pratama@email.com',
+    phone: '+628567890123',
+    totalPoints: 1680,
+    totalSpent: 6300000,
+    loyaltyTier: 'Gold',
+    lastTransactionDate: new Date('2024-09-16')
+  },
+  {
+    id: '6',
+    name: 'Dewi Lestari',
+    email: 'dewi.lestari@email.com',
+    phone: '+628678901234',
+    totalPoints: 320,
+    totalSpent: 1200000,
+    loyaltyTier: 'Bronze',
+    lastTransactionDate: new Date('2024-09-05')
+  },
+  {
+    id: '7',
+    name: 'Eko Prasetyo',
+    email: 'eko.prasetyo@email.com',
+    phone: '+628789012345',
+    totalPoints: 975,
+    totalSpent: 4100000,
+    loyaltyTier: 'Silver',
+    lastTransactionDate: new Date('2024-09-14')
+  },
+  {
+    id: '8',
+    name: 'Lina Marlina',
+    email: 'lina.marlina@email.com',
+    phone: '+628890123456',
+    totalPoints: 1580,
+    totalSpent: 6800000,
+    loyaltyTier: 'Gold',
+    lastTransactionDate: new Date('2024-09-11')
+  }
+]
+
+// Mock data hook with dummy data
+const useCustomerAnalytics = ({ page, limit, search }: { page: number; limit: number; search: string }) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Simulate loading
+  useEffect(() => {
+    setIsLoading(true)
+    const timer = setTimeout(() => setIsLoading(false), 500)
+    return () => clearTimeout(timer)
+  }, [page, limit, search])
+
+  // Filter data based on search
+  const filteredData = useMemo(() => {
+    if (!search) return DUMMY_CUSTOMER_ANALYTICS_DATA
+
+    return DUMMY_CUSTOMER_ANALYTICS_DATA.filter(
+      customer =>
+        customer.name.toLowerCase().includes(search.toLowerCase()) ||
+        customer.email?.toLowerCase().includes(search.toLowerCase()) ||
+        customer.phone?.toLowerCase().includes(search.toLowerCase()) ||
+        customer.loyaltyTier?.toLowerCase().includes(search.toLowerCase())
+    )
+  }, [search])
+
+  // Paginate data
+  const paginatedData = useMemo(() => {
+    const startIndex = (page - 1) * limit
+    const endIndex = startIndex + limit
+    return filteredData.slice(startIndex, endIndex)
+  }, [filteredData, page, limit])
+
+  return {
+    data: {
+      customers: paginatedData,
+      total_count: filteredData.length
+    },
+    isLoading,
+    error: null,
+    isFetching: isLoading
+  }
+}
+
+// Utility functions
+const getLoyaltyTierColor = (loyaltyTier?: string): ThemeColor => {
+  switch (loyaltyTier?.toLowerCase()) {
+    case 'bronze':
+      return 'warning'
+    case 'silver':
+      return 'info'
+    case 'gold':
+      return 'success'
+    default:
+      return 'secondary'
+  }
+}
+
+const getLoyaltyTierIcon = (loyaltyTier?: string): string => {
+  switch (loyaltyTier?.toLowerCase()) {
+    case 'bronze':
+      return 'tabler-medal'
+    case 'silver':
+      return 'tabler-medal-2'
+    case 'gold':
+      return 'tabler-crown'
+    default:
+      return 'tabler-user'
+  }
+}
+
+// Column Definitions
+const columnHelper = createColumnHelper<CustomerAnalyticsWithAction>()
+
+const CustomerAnalyticListTable = () => {
+  // States
+  const [rowSelection, setRowSelection] = useState({})
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [search, setSearch] = useState('')
+
+  const { data, isLoading, error, isFetching } = useCustomerAnalytics({
+    page: currentPage,
+    limit: pageSize,
+    search
+  })
+
+  const customers = data?.customers ?? []
+  const totalCount = data?.total_count ?? 0
+
+  // Hooks
+  const { lang: locale } = useParams()
+
+  const handlePageChange = useCallback((event: unknown, newPage: number) => {
+    setCurrentPage(newPage)
+  }, [])
+
+  const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setPageSize(newPageSize)
+    setCurrentPage(1) // Reset to first page
+  }, [])
+
+  const handleViewCustomer = (customerId: string) => {
+    console.log('Viewing customer:', customerId)
+    // Add your view logic here
+  }
+
+  const handleDeleteCustomer = (customerId: string) => {
+    if (confirm('Apakah Anda yakin ingin menghapus data pelanggan ini?')) {
+      console.log('Deleting customer:', customerId)
+      // Add your delete logic here
+    }
+  }
+
+  const columns = useMemo<ColumnDef<CustomerAnalyticsWithAction, any>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            {...{
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler()
+            }}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            {...{
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              indeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler()
+            }}
+          />
+        )
+      },
+      columnHelper.accessor('name', {
+        header: 'Pelanggan',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-4'>
+            <CustomAvatar size={38}>{getInitials(row.original.name)}</CustomAvatar>
+            <div className='flex flex-col'>
+              <Link href={getLocalizedUrl(`/apps/customers/${row.original.id}/detail`, locale as Locale)}>
+                <Typography className='font-medium cursor-pointer hover:underline text-primary'>
+                  {row.original.name}
+                </Typography>
+              </Link>
+              {row.original.email && (
+                <Typography variant='body2' color='text.secondary'>
+                  {row.original.email}
+                </Typography>
+              )}
+            </div>
+          </div>
+        )
+      }),
+      columnHelper.accessor('phone', {
+        header: 'No. Telepon',
+        cell: ({ row }) => <Typography color='text.primary'>{row.original.phone || '-'}</Typography>
+      }),
+      columnHelper.accessor('totalPoints', {
+        header: 'Total Poin',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-2'>
+            <Icon className='tabler-coins' sx={{ color: 'var(--mui-palette-primary-main)' }} />
+            <Typography color='text.primary' className='font-medium'>
+              {row.original.totalPoints.toLocaleString('id-ID')} Poin
+            </Typography>
+          </div>
+        )
+      }),
+      columnHelper.accessor('totalSpent', {
+        header: 'Total Belanja',
+        cell: ({ row }) => (
+          <Typography color='text.primary' className='font-medium'>
+            {row.original.totalSpent ? formatCurrency(row.original.totalSpent) : '-'}
+          </Typography>
+        )
+      }),
+      columnHelper.accessor('loyaltyTier', {
+        header: 'Tier Loyalitas',
+        cell: ({ row }) => (
+          <div className='flex items-center gap-2'>
+            <Icon
+              className={getLoyaltyTierIcon(row.original.loyaltyTier)}
+              sx={{ color: `var(--mui-palette-${getLoyaltyTierColor(row.original.loyaltyTier)}-main)` }}
+            />
+            <Chip
+              label={row.original.loyaltyTier || 'Belum Ada'}
+              color={getLoyaltyTierColor(row.original.loyaltyTier)}
+              variant='tonal'
+              size='small'
+            />
+          </div>
+        )
+      }),
+      columnHelper.accessor('lastTransactionDate', {
+        header: 'Transaksi Terakhir',
+        cell: ({ row }) => (
+          <Typography color='text.primary'>
+            {row.original.lastTransactionDate
+              ? new Date(row.original.lastTransactionDate).toLocaleDateString('id-ID', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric'
+                })
+              : '-'}
+          </Typography>
+        )
+      }),
+      {
+        id: 'actions',
+        header: 'Aksi',
+        cell: ({ row }) => (
+          <div className='flex items-center'>
+            <OptionMenu
+              iconButtonProps={{ size: 'medium' }}
+              iconClassName='text-textSecondary text-[22px]'
+              options={[
+                {
+                  text: 'Lihat Detail',
+                  icon: 'tabler-eye text-[22px]',
+                  menuItemProps: {
+                    className: 'flex items-center gap-2 text-textSecondary',
+                    onClick: () => handleViewCustomer(row.original.id)
+                  }
+                },
+                {
+                  text: 'Hapus',
+                  icon: 'tabler-trash text-[22px]',
+                  menuItemProps: {
+                    className: 'flex items-center gap-2 text-textSecondary',
+                    onClick: () => handleDeleteCustomer(row.original.id)
+                  }
+                }
+              ]}
+            />
+          </div>
+        ),
+        enableSorting: false
+      }
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locale, handleViewCustomer, handleDeleteCustomer]
+  )
+
+  const table = useReactTable({
+    data: customers as CustomerAnalytics[],
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter
+    },
+    state: {
+      rowSelection,
+      globalFilter,
+      pagination: {
+        pageIndex: currentPage,
+        pageSize
+      }
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: Math.ceil(totalCount / pageSize)
+  })
+
+  return (
+    <Card>
+      <div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
+        <CustomTextField
+          select
+          value={table.getState().pagination.pageSize}
+          onChange={e => table.setPageSize(Number(e.target.value))}
+          className='max-sm:is-full sm:is-[70px]'
+        >
+          <MenuItem value='10'>10</MenuItem>
+          <MenuItem value='25'>25</MenuItem>
+          <MenuItem value='50'>50</MenuItem>
+        </CustomTextField>
+        <div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
+          <DebouncedInput
+            value={search ?? ''}
+            onChange={value => setSearch(value as string)}
+            placeholder='Cari Pelanggan'
+            className='max-sm:is-full'
+          />
+          <Button
+            color='secondary'
+            variant='tonal'
+            startIcon={<i className='tabler-upload' />}
+            className='max-sm:is-full'
+          >
+            Ekspor
+          </Button>
+        </div>
+      </div>
+      <div className='overflow-x-auto'>
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <table className={tableStyles.table}>
+            <thead>
+              {table.getHeaderGroups().map(headerGroup => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map(header => (
+                    <th key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            className={classnames({
+                              'flex items-center': header.column.getIsSorted(),
+                              'cursor-pointer select-none': header.column.getCanSort()
+                            })}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {{
+                              asc: <i className='tabler-chevron-up text-xl' />,
+                              desc: <i className='tabler-chevron-down text-xl' />
+                            }[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
+                          </div>
+                        </>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            {table.getFilteredRowModel().rows.length === 0 ? (
+              <tbody>
+                <tr>
+                  <td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
+                    Tidak ada data tersedia
+                  </td>
+                </tr>
+              </tbody>
+            ) : (
+              <tbody>
+                {table
+                  .getRowModel()
+                  .rows.slice(0, table.getState().pagination.pageSize)
+                  .map(row => {
+                    return (
+                      <tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
+                        {row.getVisibleCells().map(cell => (
+                          <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                        ))}
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            )}
+          </table>
+        )}
+      </div>
+      <TablePagination
+        component={() => (
+          <TablePaginationComponent
+            pageIndex={currentPage}
+            pageSize={pageSize}
+            totalCount={totalCount}
+            onPageChange={handlePageChange}
+          />
+        )}
+        count={totalCount}
+        rowsPerPage={pageSize}
+        page={currentPage}
+        onPageChange={handlePageChange}
+        onRowsPerPageChange={handlePageSizeChange}
+        rowsPerPageOptions={[10, 25, 50]}
+        disabled={isLoading}
+      />
+    </Card>
+  )
+}
+
+export default CustomerAnalyticListTable

src/views/apps/marketing/customer-analytics/index.tsx

@@ -0,0 +1,17 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import CustomerAnalyticListTable from './CustomerAnalyticListTable'
+
+// Type Imports
+
+const CustomerAnalyticList = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CustomerAnalyticListTable />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CustomerAnalyticList