Merge branch 'development' into feat/FE/US-335/production-data-report

src/components/Navbar.tsx

@@ -54,7 +54,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
 
       <div className='flex gap-2'>
         <Dropdown
-          position='bottom-end'
+          align='end'
+          direction='bottom'
           trigger={
             <div className='btn btn-ghost btn-circle avatar'>
               <div className='w-10 rounded-full border flex justify-center items-center'>
@@ -62,9 +63,11 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
               </div>
             </div>
           }
-          contentClassName='w-52 mt-3'
+          className={{
+            content: 'w-52 mt-3',
+          }}
         >
-          <Menu className='p-2 bg-base-100 shadow rounded-box menu-sm'>
+          <Menu>
             <MenuItem title='Logout' onClick={logoutClickHandler} />
           </Menu>
         </Dropdown>

src/components/Tabs.tsx

@@ -21,6 +21,7 @@ export interface TabsProps
   className?:
     | string
     | {
+        container?: string;
         wrapper?: string;
         tab?: string;
         content?: string;
@@ -53,10 +54,14 @@ const Tabs = ({
     onTabChange?.(tabId);
   };
 
-  const { wrapper: wrapperClassName, tab: tabClassName } =
-    typeof className === 'object'
-      ? className
-      : { wrapper: className, tab: undefined };
+  const {
+    container: containerClassName,
+    wrapper: wrapperClassName,
+    tab: tabClassName,
+    content: contentClassName,
+  } = typeof className === 'object'
+    ? className
+    : { wrapper: className, tab: undefined };
 
   const getTabsClasses = () => {
     const variantClasses: Record<string, string> = {
@@ -104,7 +109,7 @@ const Tabs = ({
       {...props}
       className={cn(
         'w-full',
-        typeof className === 'string' ? className : undefined
+        typeof className === 'string' ? className : containerClassName
       )}
     >
       <div role='tablist' className={getTabsClasses()}>
@@ -121,7 +126,9 @@ const Tabs = ({
         ))}
       </div>
 
-      {activeContent && <div className='mt-4'>{activeContent}</div>}
+      {activeContent && (
+        <div className={cn('mt-4', contentClassName)}>{activeContent}</div>
+      )}
     </div>
   );
 };

src/components/dropdown/Dropdown.tsx

@@ -1,111 +1,109 @@
-'use client';
+import React, { ReactNode, useState, useRef } from 'react';
 
-import { ReactNode, useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/helper';
 
-interface DropdownProps {
+export interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
+  className?: {
+    wrapper?: string;
+    trigger?: string;
+    content?: string;
+  };
   align?: 'start' | 'center' | 'end';
+  direction?: 'top' | 'bottom' | 'left' | 'right';
   hover?: boolean;
-  className?: string;
-  contentClassName?: string;
+  defaultOpen?: boolean;
+  open?: boolean;
+  close?: boolean;
+  controlled?: boolean;
 }
 
 const Dropdown = ({
   trigger,
   children,
-  position = 'bottom',
-  align = 'start',
-  hover = false,
   className,
-  contentClassName,
+  align,
+  direction,
+  hover,
+  defaultOpen = false,
+  open,
+  close,
+  controlled = false,
 }: DropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
+  const toggleDropdown = () => {
+    if (!controlled) {
+      const newState = !isOpen;
+      setIsOpen(newState);
     }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Build position classes
-  const getPositionClasses = () => {
-    const classes: string[] = [];
-
-    // Handle combined positions like 'top-start'
-    if (position.includes('-')) {
-      const [pos, al] = position.split('-');
-      classes.push(`dropdown-${pos}`);
-      classes.push(`dropdown-${al}`);
-    } else {
-      classes.push(`dropdown-${position}`);
-      if (align !== 'start') {
-        classes.push(`dropdown-${align}`);
-      }
-    }
-
-    return classes.join(' ');
   };
 
-  const handleToggle = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // alert('clicked');
-    setIsOpen(!isOpen);
+  const getWrapperClasses = () => {
+    const openState = controlled ? open : isOpen;
+
+    return cn(
+      'dropdown',
+      {
+        'dropdown-start': align === 'start',
+        'dropdown-center': align === 'center',
+        'dropdown-end': align === 'end',
+        'dropdown-top': direction === 'top',
+        'dropdown-bottom': direction === 'bottom',
+        'dropdown-left': direction === 'left',
+        'dropdown-right': direction === 'right',
+        'dropdown-hover': hover,
+        'dropdown-open': openState && !close,
+        'dropdown-close': close,
+      },
+      className?.wrapper
+    );
   };
 
+  const getTriggerClasses = () => {
+    return cn(className?.trigger);
+  };
+
+  const getContentClasses = () => {
+    return cn(
+      'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
+      className?.content
+    );
+  };
+
+  if (controlled) {
+    return (
+      <div className={getWrapperClasses()}>
+        {trigger}
+        {open && !close && (
+          <div tabIndex={-1} className={getContentClasses()}>
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
-    <div
-      ref={dropdownRef}
-      className={cn(
-        'dropdown',
-        getPositionClasses(),
-        hover && 'dropdown-hover',
-        isOpen && 'dropdown-open',
-        className
-      )}
-    >
-      {/* Trigger Button */}
-      <div onClick={handleToggle} className='cursor-pointer'>
+    <div ref={dropdownRef} className={getWrapperClasses()}>
+      <div
+        tabIndex={0}
+        role='button'
+        className={getTriggerClasses()}
+        onClick={toggleDropdown}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        }}
+      >
         {trigger}
       </div>
-
-      {/* Dropdown Content - Only render when open */}
-      {isOpen && (
-        <div
-          tabIndex={-1}
-          className={cn('dropdown-content z-[10]', contentClassName)}
-          onClick={() => setIsOpen(false)} // Close on item click
-        >
+      {!close && (
+        <div tabIndex={-1} className={getContentClasses()}>
           {children}
         </div>
       )}

src/components/helper/RequireAuth.tsx

@@ -27,6 +27,9 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     SWRHttpKey
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
+
+    // refresh every 13 minutes
+    refreshInterval: 13 * 60 * 1000,
   });
 
   useEffect(() => {

src/components/menu/MenuItem.tsx

@@ -8,6 +8,7 @@ interface MenuItemProps {
   href?: string;
   icon?: string;
   active?: boolean;
+  isLoading?: boolean;
   onClick?: () => void;
   className?: string;
 }
@@ -17,6 +18,7 @@ const MenuItem = ({
   href,
   icon,
   active = false,
+  isLoading = false,
   className,
   onClick,
 }: MenuItemProps) => {
@@ -50,17 +52,28 @@ const MenuItem = ({
 
   return (
     <li>
-      {href && (
+      {!isLoading && href && (
         <Link href={href} className={menuItemBaseClassName}>
           {menuItemContent}
         </Link>
       )}
 
-      {!href && (
+      {!isLoading && !href && (
         <button className={menuItemBaseClassName} onClick={onClick}>
           {menuItemContent}
         </button>
       )}
+
+      {isLoading && (
+        <button className={menuItemBaseClassName}>
+          <span
+            className={cn('loading loading-dots loading-md mx-auto', {
+              'text-gray-400': !active,
+              'text-black': active,
+            })}
+          />
+        </button>
+      )}
     </li>
   );
 };

src/components/pages/report/DailyMarketingReportContent.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import { pdf } from '@react-pdf/renderer';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import DailyMarketingsTable from '@/components/pages/report/DailyMarketingsTable';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import DailyMarketingReportPDF from '@/components/pages/report/DailyMarketingReportPDF';
+
+import { Area } from '@/types/api/master-data/area';
+import {
+  AreaApi,
+  CustomerApi,
+  LocationApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Customer } from '@/types/api/master-data/customer';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+import { MARKETING_TYPE_OPTIONS } from '@/config/constant';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { isResponseError } from '@/lib/api-helper';
+
+const DailyMarketingReportContent = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      area_id: '',
+      location_id: '',
+      warehouse_id: '',
+      customer_id: '',
+      start_date: '',
+      end_date: '',
+      marketing_type: '',
+      filter_by: '',
+      sort_by: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      area_id: 'area_id',
+      location_id: 'location_id',
+      warehouse_id: 'warehouse_id',
+      customer_id: 'customer_id',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      marketing_type: 'marketing_type',
+      filter_by: 'filter_by',
+      sort_by: 'sort_by',
+    },
+  });
+
+  const dailyMarketingsReportUrl = `${MarketingReportApi.basePath}${getTableFilterQueryString()}`;
+
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+  const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
+
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedArea(val as OptionType);
+    updateFilter('area_id', val ? ((val as OptionType).value as string) : '');
+  };
+
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation(val as OptionType);
+    updateFilter(
+      'location_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedWarehouse, setSelectedWarehouse] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setWarehouseInputValue,
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
+
+  const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedWarehouse(val as OptionType);
+    updateFilter(
+      'warehouse_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
+    null
+  );
+  const {
+    setInputValue: setCustomerInputValue,
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+
+  const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedCustomer(val as OptionType);
+    updateFilter(
+      'customer_id',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('start_date', e.target.value ? e.target.value : '');
+  };
+
+  const endDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('end_date', e.target.value ? e.target.value : '');
+  };
+
+  const [selectedMarketingType, setSelectedMarketingType] =
+    useState<OptionType | null>(null);
+  const marketingTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedMarketingType(val as OptionType);
+    updateFilter(
+      'marketing_type',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const filterByChangeHandler = (filterBy: string) => {
+    updateFilter('filter_by', filterBy);
+  };
+
+  const sortByChangeHandler = (sort: 'asc' | 'desc' | '') => {
+    updateFilter('sort_by', sort);
+  };
+
+  const exportToExcelHandler = async () => {
+    setIsLoadingExportingToExcel(true);
+
+    await MarketingReportApi.exportDailyMarketingToExcel(
+      getTableFilterQueryString()
+    );
+
+    setIsLoadingExportingToExcel(false);
+  };
+
+  const exportToPdfHandler = async () => {
+    setIsLoadingExportingToPdf(true);
+
+    const params = new URLSearchParams(getTableFilterQueryString());
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const dailyMarketingsReport = await httpClient<
+        BaseApiResponse<DailyMarketingReport>
+      >(`${MarketingReportApi.basePath}${queryString}`);
+
+      if (isResponseError(dailyMarketingsReport)) {
+        toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+        return;
+      }
+
+      const openPdf = async () => {
+        const dailyMarketingReportPdfBlob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+
+        const dailyMarketingReportPdfUrl = URL.createObjectURL(
+          dailyMarketingReportPdfBlob
+        );
+        window.open(dailyMarketingReportPdfUrl, '_blank');
+      };
+
+      const downloadPdf = async () => {
+        const blob = await pdf(
+          <DailyMarketingReportPDF data={dailyMarketingsReport.data} />
+        ).toBlob();
+        const url = URL.createObjectURL(blob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'laporan-penjualan-harian.pdf';
+        link.click();
+
+        URL.revokeObjectURL(url);
+      };
+
+      await openPdf();
+    } catch (error) {
+      toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
+    }
+
+    setIsLoadingExportingToPdf(false);
+  };
+
+  const handleReset = () => {
+    setSelectedArea(null);
+    setSelectedLocation(null);
+    setSelectedWarehouse(null);
+    setSelectedCustomer(null);
+    setSelectedMarketingType(null);
+    resetFilter();
+  };
+
+  return (
+    <div className='w-full border border-gray-200 p-4'>
+      <div>
+        <h2 className='text-xl font-bold text-center'>Penjualan Harian</h2>
+      </div>
+
+      {/* Filters */}
+      <div className='flex flex-col gap-4 mb-6'>
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={areaOptions}
+            isLoading={isLoadingAreaOptions}
+            value={selectedArea}
+            onChange={areaChangeHandler}
+            onInputChange={setAreaInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
+            value={selectedLocation}
+            onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Gudang'
+            placeholder='Pilih Gudang'
+            options={warehouseOptions}
+            isLoading={isLoadingWarehouseOptions}
+            value={selectedWarehouse}
+            onChange={warehouseChangeHandler}
+            onInputChange={setWarehouseInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <SelectInput
+            label='Customer'
+            placeholder='Pilih Customer'
+            options={customerOptions}
+            isLoading={isLoadingCustomerOptions}
+            value={selectedCustomer}
+            onChange={customerChangeHandler}
+            onInputChange={setCustomerInputValue}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='startDate'
+            label='Tanggal Awal'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.start_date}
+            onChange={startDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <DateInput
+            name='endDate'
+            label='Tanggal Akhir'
+            placeholder='Tanggal Realisasi'
+            value={tableFilterState.end_date}
+            onChange={endDateChangeHandler}
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+        </div>
+
+        <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Tipe Marketing'
+            placeholder='Pilih Tipe Marketing'
+            options={MARKETING_TYPE_OPTIONS}
+            value={selectedMarketingType}
+            onChange={marketingTypeChangeHandler}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
+          <div className='col-span-12 sm:col-span-6 lg:col-span-8 flex flex-wrap sm:justify-end items-end gap-2'>
+            <Button
+              color='primary'
+              // onClick={handleSearch}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+              Cari
+            </Button>
+
+            <Button
+              color='warning'
+              onClick={handleReset}
+              className='flex-1 sm:flex-none'
+            >
+              <Icon icon='heroicons-outline:refresh' width={20} height={20} />
+              Reset
+            </Button>
+
+            <Dropdown
+              align='end'
+              direction='bottom'
+              trigger={
+                <Button>
+                  Export{' '}
+                  <Icon
+                    icon='heroicons-outline:download'
+                    width={20}
+                    height={20}
+                  />
+                </Button>
+              }
+            >
+              <Menu>
+                <MenuItem
+                  title='Export to Excel'
+                  icon='icon-park-outline:excel'
+                  isLoading={isLoadingExportingToExcel}
+                  onClick={exportToExcelHandler}
+                  className='text-nowrap'
+                />
+                <MenuItem
+                  title='Export to PDF'
+                  icon='icon-park-outline:file-pdf-one'
+                  onClick={exportToPdfHandler}
+                  className='text-nowrap'
+                />
+              </Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      <DailyMarketingsTable
+        dailyMarketingsReportUrl={dailyMarketingsReportUrl}
+        onSetPage={setPage}
+        pageSize={tableFilterState.pageSize}
+        onSetPageSize={setPageSize}
+        searchValue={tableFilterState.search}
+        onSearchChange={searchChangeHandler}
+        onFilterByChange={filterByChangeHandler}
+        onSortByChange={sortByChangeHandler}
+      />
+    </div>
+  );
+};
+
+export default DailyMarketingReportContent;

src/components/pages/report/DailyMarketingReportPDF.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+import {
+  Document,
+  Image,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+
+import { DailyMarketingReport } from '@/types/api/report/marketing';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+
+interface DailyMarketingReportPDFProps {
+  data?: DailyMarketingReport;
+}
+
+const DailyMarketingReportPDFStyle = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 64,
+    paddingHorizontal: 16, // Reduce padding to fit more columns
+    orientation: 'landscape',
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 10,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 400,
+    marginBottom: 10,
+  },
+
+  title: {
+    marginTop: 16,
+    fontSize: 14,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 30,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  // Table Styles
+  table: {
+    width: '100%',
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#000000',
+    borderBottomWidth: 0,
+    fontSize: 7, // Smaller font for report
+  },
+  tableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
+    alignItems: 'center',
+    minHeight: 20,
+  },
+  tableHeader: {
+    backgroundColor: '#f0f0f0',
+    fontWeight: 'bold',
+  },
+
+  // Columns definition (Total 100%)
+  colNo: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colDoDate: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAging: {
+    width: '3%',
+    padding: 2,
+    textAlign: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colWarehouse: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colCustomer: {
+    width: '9%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colSales: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colProduct: {
+    width: '8%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  }, // Reduced slightly
+  colDoNumber: {
+    width: '7%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colVehicle: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colMarketingType: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'left',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colQty: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colAvgWeight: {
+    width: '4%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colTotalWeight: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppPrice: {
+    width: '5%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colSalesAmount: {
+    width: '6%',
+    padding: 2,
+    textAlign: 'right',
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+  },
+  colHppAmount: { width: '6%', padding: 2, textAlign: 'right' }, // Last column
+
+  // Text inside columns
+  cellText: {
+    fontSize: 6,
+  },
+  headerText: {
+    fontSize: 7,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+  // Utils
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTop: '2px solid black',
+    borderBottom: '2px solid black',
+  },
+
+  // Summary
+  summaryContainer: {
+    marginTop: 12,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+  summaryTable: {
+    width: '30%',
+    borderWidth: 1,
+    borderColor: '#000000',
+    fontSize: 8,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    padding: 2,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  summaryLabel: {
+    width: '50%',
+    fontWeight: 'bold',
+  },
+  summaryValue: {
+    width: '50%',
+    textAlign: 'right',
+  },
+});
+
+const DailyMarketingReportPDF = ({ data }: DailyMarketingReportPDFProps) => {
+  const rows = data?.rows || [];
+  const summary = data?.summary;
+
+  return (
+    <Document>
+      <Page
+        style={DailyMarketingReportPDFStyle.page}
+        orientation='landscape'
+        size='A4'
+      >
+        <View>
+          <View style={DailyMarketingReportPDFStyle.companyInfoHeader}>
+            <Image
+              style={DailyMarketingReportPDFStyle.companyLogo}
+              src='/assets/img/lti-logo.png'
+            />
+
+            <Text style={DailyMarketingReportPDFStyle.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={DailyMarketingReportPDFStyle.companyName}>
+              PT LUMBUNG TELUR INDONESIA
+            </Text>
+            <Text style={DailyMarketingReportPDFStyle.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={DailyMarketingReportPDFStyle.doubleDivider} />
+          </View>
+        </View>
+
+        <Text style={DailyMarketingReportPDFStyle.title}>
+          Laporan Penjualan Harian
+        </Text>
+
+        {/* Data Table */}
+        <View style={DailyMarketingReportPDFStyle.table}>
+          {/* Header */}
+          <View
+            style={[
+              DailyMarketingReportPDFStyle.tableRow,
+              DailyMarketingReportPDFStyle.tableHeader,
+            ]}
+          >
+            <View style={DailyMarketingReportPDFStyle.colNo}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl SO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoDate}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Tgl DO
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAging}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Aging</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Gudang
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colCustomer}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Pelanggan
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSales}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Sales</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colProduct}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Produk
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>No DO</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colVehicle}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Plat No
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Tipe</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colQty}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Qty</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Rerata
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>Berat</Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Hrg Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                HPP/kg
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total Jual
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+              <Text style={DailyMarketingReportPDFStyle.headerText}>
+                Total HPP
+              </Text>
+            </View>
+          </View>
+
+          {/* Rows */}
+          {rows.map((row, index) => (
+            <View style={DailyMarketingReportPDFStyle.tableRow} key={index}>
+              <View style={DailyMarketingReportPDFStyle.colNo}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {index + 1}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.so_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoDate}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatDate(row.do_date, 'DD/MM/YYYY')}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAging}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.aging_days}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colWarehouse}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.warehouse?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colCustomer}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.customer?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSales}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.sales}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colProduct}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.product?.name}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colDoNumber}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.do_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colVehicle}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.vehicle_number}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colMarketingType}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {row.marketing_type}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colQty}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.qty)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colAvgWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.average_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colTotalWeight}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatNumber(row.total_weight_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppPrice}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_price_per_kg)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colSalesAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.sales_amount)}
+                </Text>
+              </View>
+              <View style={DailyMarketingReportPDFStyle.colHppAmount}>
+                <Text style={DailyMarketingReportPDFStyle.cellText}>
+                  {formatCurrency(row.hpp_amount)}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+
+        {/* Summary */}
+        <View style={DailyMarketingReportPDFStyle.summaryContainer}>
+          <View style={DailyMarketingReportPDFStyle.summaryTable}>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Qty:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_qty ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Berat (kg):
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatNumber(summary?.total_weight_kg ?? 0)}
+              </Text>
+            </View>
+            <View style={DailyMarketingReportPDFStyle.summaryRow}>
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total Penjualan:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_sales_amount ?? 0)}
+              </Text>
+            </View>
+            <View
+              style={[
+                DailyMarketingReportPDFStyle.summaryRow,
+                { borderBottomWidth: 0 },
+              ]}
+            >
+              <Text style={DailyMarketingReportPDFStyle.summaryLabel}>
+                Total HPP:
+              </Text>
+              <Text style={DailyMarketingReportPDFStyle.summaryValue}>
+                {formatCurrency(summary?.total_hpp_amount ?? 0)}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={DailyMarketingReportPDFStyle.footer} fixed>
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default DailyMarketingReportPDF;

src/components/pages/report/DailyMarketingsTable.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { DailyMarketingRow } from '@/types/api/report/marketing';
+import { MarketingReportApi } from '@/services/api/report/marketing-report';
+
+interface DailyMarketingsTableProps {
+  dailyMarketingsReportUrl: string;
+  onSetPage: (page: number) => void;
+  pageSize: number;
+  onSetPageSize: (pageSize: number) => void;
+  searchValue: string;
+  onSearchChange: ChangeEventHandler<HTMLInputElement>;
+  onFilterByChange: (filterBy: string) => void;
+  onSortByChange: (sort: 'asc' | 'desc' | '') => void;
+}
+
+const DailyMarketingsTable = ({
+  dailyMarketingsReportUrl,
+  onSetPage,
+  pageSize,
+  onSetPageSize,
+  searchValue,
+  onSearchChange,
+  onFilterByChange,
+  onSortByChange,
+}: DailyMarketingsTableProps) => {
+  const { data: dailyMarketings, isLoading: isLoadingDailyMarketings } = useSWR(
+    dailyMarketingsReportUrl,
+    MarketingReportApi.getAllDailyMarketingFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const dailyMarketingColumns: ColumnDef<DailyMarketingRow>[] = [
+    {
+      header: 'No',
+      cell: (props) => props.row.index + 1,
+    },
+    {
+      accessorKey: 'so_date',
+      header: 'Tanggal Jual',
+      cell: (props) => formatDate(props.row.original.so_date, 'DD-MMM-YYYY'),
+      footer: 'Total',
+    },
+    {
+      accessorKey: 'do_date',
+      header: 'Tanggal DO',
+      cell: (props) => formatDate(props.row.original.do_date, 'DD-MMM-YYYY'),
+    },
+    {
+      accessorKey: 'aging_days',
+      header: 'Aging',
+      cell: (props) => `${props.row.original.aging_days} hari`,
+    },
+    {
+      accessorKey: 'warehouse.name',
+      header: 'Gudang',
+    },
+    {
+      accessorKey: 'customer.name',
+      header: 'Pelanggan',
+    },
+    {
+      accessorKey: 'do_number',
+      header: 'No. DO',
+    },
+    {
+      accessorKey: 'sales',
+      header: 'Sales/Marketing',
+    },
+    {
+      accessorKey: 'vehicle_number',
+      header: 'No. Polisi',
+      cell: (props) => (
+        <span className='text-nowrap'>{props.row.original.vehicle_number}</span>
+      ),
+    },
+    {
+      accessorKey: 'marketing_type',
+      header: 'Marketing Type',
+    },
+    {
+      accessorKey: 'product.name',
+      header: 'Produk',
+    },
+    {
+      accessorKey: 'qty',
+      header: 'Kuantitas',
+      cell: (props) => formatNumber(props.row.original.qty),
+      footer: () => {
+        const totalQty = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_qty
+          : 0;
+
+        return formatNumber(totalQty);
+      },
+    },
+    {
+      accessorKey: 'average_weight_kg',
+      header: 'Bobot Rata-Rata (Kg)',
+      cell: (props) => formatNumber(props.row.original.average_weight_kg),
+    },
+    {
+      accessorKey: 'total_weight_kg',
+      header: 'Bobot Total (Kg)',
+      cell: (props) => formatNumber(props.row.original.total_weight_kg),
+      footer: () => {
+        const totalWeightKg = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_weight_kg
+          : 0;
+
+        return formatNumber(totalWeightKg);
+      },
+    },
+    {
+      accessorKey: 'sales_price_per_kg',
+      header: 'Harga Jual (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
+    },
+    {
+      accessorKey: 'hpp_price_per_kg',
+      header: 'HPP (Rp)',
+      cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
+    },
+    {
+      accessorKey: 'sales_amount',
+      header: 'Total (Rp)',
+      cell: (props) => formatCurrency(props.row.original.sales_amount),
+      footer: () => {
+        const totalSalesAmount = isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.summary.total_sales_amount
+          : 0;
+
+        return formatCurrency(totalSalesAmount);
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (sorting.length === 1) {
+      onFilterByChange(sorting[0].id);
+      onSortByChange(sorting[0].desc ? 'desc' : 'asc');
+    } else {
+      onFilterByChange('');
+      onSortByChange('');
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(dailyMarketings)
+          ? dailyMarketings.data.rows.length > 0
+          : false
+      );
+    }
+  }, [dailyMarketings, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Penjualan Harian</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <div className='flex flex-col gap-2 mb-4'>
+            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Penjualan Harian'
+                value={searchValue}
+                onChange={onSearchChange}
+                className={{ wrapper: 'sm:max-w-3xs' }}
+              />
+            </div>
+          </div>
+
+          <Table<DailyMarketingRow>
+            data={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.data.rows
+                : []
+            }
+            columns={dailyMarketingColumns}
+            pageSize={pageSize}
+            onPageSizeChange={onSetPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(dailyMarketings)
+                ? dailyMarketings?.meta?.total_results
+                : 0
+            }
+            onPageChange={onSetPage}
+            isLoading={isLoadingDailyMarketings}
+            sorting={sorting}
+            setSorting={setSorting}
+            renderFooter={true}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(dailyMarketings) &&
+                  dailyMarketings?.data?.rows.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default DailyMarketingsTable;

src/components/pages/report/MarketingReportContent.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { JSX, useState } from 'react';
+
+import Tabs from '@/components/Tabs';
+import DailyMarketingReportContent from '@/components/pages/report/DailyMarketingReportContent';
+
+type MarketingReportTabType =
+  | 'daily'
+  | 'transaction'
+  | 'hpp-comparison'
+  | 'daily-hpp';
+
+const marketingReportTabs: {
+  id: MarketingReportTabType;
+  label: string;
+  content: JSX.Element;
+}[] = [
+  {
+    id: 'daily',
+    label: 'Penjualan Harian',
+    content: <DailyMarketingReportContent />,
+  },
+];
+
+const MarketingReportContent = () => {
+  const [activeTab, setActiveTab] = useState<string>('daily');
+
+  return (
+    <section className='w-full max-w-7xl pb-16'>
+      <Tabs
+        activeTabId={activeTab}
+        onTabChange={setActiveTab}
+        tabs={marketingReportTabs}
+        variant='lifted'
+        className={{
+          content: '-m-px pl-px',
+        }}
+      />
+    </section>
+  );
+};
+
+export default MarketingReportContent;