feat(FE): Add DailyMarketingReportFilter and

DailyMarketingReportSkeleton components

src/components/pages/report/marketing/filter/DailyMarketingReportFilter.ts

@@ -0,0 +1,42 @@
+import * as yup from 'yup';
+
+export type DailyMarketingReportFilterType = {
+  search: string | null;
+  area_id: string | null;
+  location_id: string | null;
+  warehouse_id: string | null;
+  customer_id: string | null;
+  start_date: string | null;
+  end_date: string | null;
+  marketing_type: string | null;
+  filter_by: string | null;
+  sort_by: string | null;
+};
+
+export const DailyMarketingReportFilterSchema = yup.object({
+  search: yup.string().nullable(),
+  area_id: yup.string().nullable(),
+  location_id: yup.string().nullable(),
+  warehouse_id: yup.string().nullable(),
+  customer_id: yup.string().nullable(),
+  start_date: yup.string().nullable(),
+  end_date: yup
+    .string()
+    .nullable()
+    .test(
+      'is-greater-than-start',
+      'Tanggal akhir tidak boleh masa lampau',
+      function (value) {
+        const { start_date } = this.parent;
+        if (!start_date || !value) return true;
+        return new Date(value) >= new Date(start_date);
+      }
+    ),
+  marketing_type: yup.string().nullable(),
+  filter_by: yup.string().nullable(),
+  sort_by: yup.string().nullable(),
+});
+
+export type DailyMarketingReportFilterValues = yup.InferType<
+  typeof DailyMarketingReportFilterSchema
+>;

src/components/pages/report/marketing/skeleton/DailyMarketingReportSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { DailyMarketingRow } from '@/types/api/report/marketing.d';
+import { ColumnDef } from '@tanstack/react-table';
+
+const DailyMarketingReportSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<DailyMarketingRow>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default DailyMarketingReportSkeleton;