update

src/pages/settings/user/log-activity/LogActivityPage.tsx

@@ -0,0 +1,14 @@
+import { Container, DataGridInner } from '@/components';
+import { LogActivityContextProvider } from './hooks';
+
+export default function LogActivityPage() {
+  return (
+    <LogActivityContextProvider>
+      <Container>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+      </Container>
+    </LogActivityContextProvider>
+  );
+}

src/pages/settings/user/log-activity/blocks/DatePicker.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
+import { DateRange } from 'react-day-picker';
+import { format } from 'date-fns';
+import { KeenIcon } from '@/components/keenicons';
+import { cn } from '@/lib/utils';
+
+interface DateRangePickerProps {
+  date: DateRange | undefined;
+  setDate: (date: DateRange | undefined) => void;
+}
+
+const DatePicker = ({ date, setDate }: any) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          id="date"
+          className={cn(
+            'btn btn-sm btn-light data-[state=open]:bg-light-active',
+            !date && 'text-gray-400'
+          )}
+        >
+          <KeenIcon icon="calendar" className="me-0.5" />
+          {date?.to ? <>{format(date.to, 'LLL dd, y')}</> : <span>Pick a date</span>}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="end">
+        <Calendar
+          initialFocus
+          mode="single"
+          defaultMonth={date?.to}
+          selected={date?.to}
+          onSelect={(value) => setDate({ from: value, to: value })}
+          numberOfMonths={1}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { DatePicker };

src/pages/settings/user/log-activity/blocks/DateRangePicker.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
+import { DateRange } from 'react-day-picker';
+import { format } from 'date-fns';
+import { KeenIcon } from '@/components/keenicons';
+import { cn } from '@/lib/utils';
+
+interface DateRangePickerProps {
+  date: DateRange | undefined;
+  setDate: (date: DateRange | undefined) => void;
+}
+
+const DateRangePicker = ({ date, setDate }: DateRangePickerProps) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          id="date"
+          className={cn(
+            'btn btn-sm btn-light data-[state=open]:bg-light-active',
+            !date && 'text-gray-400'
+          )}
+        >
+          <KeenIcon icon="calendar" className="me-0.5" />
+          {date?.from ? (
+            date.to ? (
+              <>
+                {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+              </>
+            ) : (
+              format(date.from, 'LLL dd, y')
+            )
+          ) : (
+            <span>Pick a date range</span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="end">
+        <Calendar
+          initialFocus
+          mode="range"
+          defaultMonth={date?.from}
+          selected={date}
+          onSelect={setDate}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { DateRangePicker };

src/pages/settings/user/log-activity/blocks/ListToolBar.tsx

@@ -0,0 +1,146 @@
+import { ContentLoader, DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useLogActivityContext } from '../hooks';
+import { toAbsoluteUrl } from '@/utils';
+import { DateRangePicker } from './DateRangePicker';
+import { toast } from 'sonner';
+import { useCallback, useState } from 'react';
+import { DateRange } from 'react-day-picker';
+
+type LoadingButton = 'filter' | 'reset' | 'export' | 'refresh' | null;
+
+const ListToolBar = () => {
+  const { table, reload } = useDataGrid();
+  const { date, setDate, doExportData } = useLogActivityContext();
+  const [searchUsername, setSearchUsername] = useState('');
+  // const [filteredDate, setFilteredDate] = useState<DateRange | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingButton, setLoadingButton] = useState<LoadingButton>(null);
+
+  const [filter, setFilter] = useState<{
+    from: Date | undefined;
+    to: Date | undefined;
+    type?: string;
+  }>({
+    from: new Date(new Date().setDate(new Date().getDate() - 31)),
+    to: new Date(),
+    type: ''
+  });
+
+  const handleExport = () => {
+    const sorting = table.getState().sorting;
+    doExportData(sorting, table.getState().columnFilters);
+  };
+
+  const handleFilterData = useCallback(() => {
+    try {
+      setIsLoading(true);
+      setLoadingButton('filter');
+      const filters = [];
+
+      if (searchUsername) {
+        filters.push({
+          id: 'username',
+          value: searchUsername
+        });
+      }
+
+      if (date?.from && date?.to) {
+        filters.push({
+          id: 'user_activity.created_at',
+          value: {
+            from: `${date.from.toISOString().split('T')[0]} 00:00:00`,
+            to: `${date.to.toISOString().split('T')[0]} 23:59:59`
+          }
+        });
+      }
+
+      table.setColumnFilters(filters);
+    } catch (error) {
+      toast.error('Error filtering data');
+    } finally {
+      setLoadingButton(null);
+      setIsLoading(false);
+    }
+  }, [date, searchUsername, table]);
+
+  const handleResetData = () => {
+    const today = new Date();
+    const oneMonthAgo = new Date(today);
+    oneMonthAgo.setDate(today.getDate() - 31);
+
+    setDate({ from: oneMonthAgo, to: today });
+    setFilter({
+      from: oneMonthAgo,
+      to: today,
+      type: ''
+    });
+    setSearchUsername('');
+    table.setColumnFilters([]);
+    reload();
+  };
+
+  return (
+    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
+      <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex gap-3 items-center">
+            <div className="w-auto min-w-[120px]">
+              <label className="input input-sm">
+                <KeenIcon icon="magnifier" />
+                <input
+                  type="text"
+                  placeholder="Search username"
+                  value={searchUsername}
+                  onChange={(event) => setSearchUsername(event.target.value)}
+                />
+              </label>
+            </div>
+            <div className="w-auto min-w-[220px]">
+              <DateRangePicker date={date} setDate={setDate} />
+            </div>
+            <DefaultTooltip title={'Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                disabled={isLoading}
+                onClick={handleFilterData}
+              >
+                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
+              </Button>
+            </DefaultTooltip>
+            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleResetData}
+                disabled={isLoading}
+              >
+                <KeenIcon icon="arrow-circle-left" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+
+          <div className="flex gap-3">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant={'outline'} className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+            <DefaultTooltip title={'Export Data'} placement={'top'}>
+              <Button onClick={handleExport} className="h-7.5" variant={'outline'}>
+                <img
+                  src={toAbsoluteUrl('/media/file-types/xls.svg')}
+                  className="dark:hidden h-5"
+                  alt="Export to Excel"
+                />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ListToolBar };

src/pages/settings/user/log-activity/blocks/index.ts

@@ -0,0 +1 @@
+export * from './ListToolBar';

src/pages/settings/user/log-activity/hooks/LogActivityContext.tsx

@@ -0,0 +1,243 @@
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { Toaster } from '@/components/ui/sonner';
+import { ColumnDef } from '@tanstack/react-table';
+import { DataGridColumnHeader, DataGridProvider } from '@/components';
+import { ListToolBar } from '../blocks';
+import { useCallApi } from '@/hooks';
+import { Badge } from '@/components/ui/badge';
+import moment from 'moment';
+import { getAuth } from '@/auth';
+import { DateRange } from 'react-day-picker';
+import { format } from 'date-fns';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+
+interface ContextProps {
+  doExportData: (sorting: any, filter: any) => Promise<any>;
+  date: DateRange | undefined;
+  setDate: (date: DateRange | undefined) => void;
+}
+
+const initialProps: ContextProps = {
+  doExportData: async () => ({ data: [], totalCount: 0 }),
+  date: undefined,
+  setDate: () => {}
+};
+
+const LogActivityContext = createContext<ContextProps>(initialProps);
+
+const API_URL = apiConfig.service_dashboard;
+
+const LogActivityContextProvider = ({ children }: { children: React.ReactNode }) => {
+  /* state */
+  const { GetData } = useCallApi();
+  const { GetExportData } = useCallApi();
+
+  /* action */
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+    to: new Date()
+  });
+
+  /* Data Grid Options */
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.created_at,
+        id: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader title="Timestamp" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        accessorFn: (row) => row.user.username,
+        id: 'username',
+        header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.module,
+        id: 'module',
+        header: ({ column }) => <DataGridColumnHeader title="Module" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.action,
+        id: 'action',
+        header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const { action } = row.original;
+          const statusMap: any = {
+            C: ['Create', 'success'],
+            U: ['Update', 'default'],
+            D: ['Delete', 'destructive'],
+            l: ['Login', 'outline'],
+            O: ['Logout', 'outline'],
+            E: ['Export', 'outline']
+          };
+
+          return <Badge variant={statusMap[action][1]}>{statusMap[action][0]}</Badge>;
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    []
+  );
+
+  const doGetListData = useCallback(
+    async (page: number, limit: number, sorting: any, filter: any) => {
+      const auth = getAuth();
+      let all_user = false;
+      if (auth) {
+        all_user = auth.role_name === 'Super Admin';
+      }
+
+      const user = localStorage.getItem('brillian-bri-tl-auth-v1=9.1.1');
+      const parsedUser = user ? JSON.parse(user) : null;
+      const desc = sorting.length > 0 ? sorting[0].desc : false;
+
+      sorting = [{ id: 'user_activity.created_at', desc }];
+
+      let dataFilter: any = {};
+
+      if (filter && filter.length > 0) {
+        filter.forEach((f: any) => {
+          if (f.id === 'username') {
+            dataFilter['username'] = { like: f.value };
+          } else if (f.id === 'user_activity.created_at') {
+            dataFilter['user_activity.created_at'] = f.value;
+          }
+        });
+      }
+
+      if (!dataFilter['user_activity.created_at']) {
+        const defaultFrom = date?.from || new Date(new Date().setMonth(new Date().getMonth() - 1));
+        const defaultTo = date?.to || new Date();
+
+        dataFilter['user_activity.created_at'] = {
+          from: `${format(defaultFrom, 'yyyy-MM-dd')} 00:00:00`,
+          to: `${format(defaultTo, 'yyyy-MM-dd')} 23:59:59`
+        };
+      }
+
+      const response = await GetData(`${API_URL}/user_activity/list`, {
+        limit: limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc === false ? 'ASC' : 'DESC',
+        filter: JSON.stringify(dataFilter),
+        all_user: all_user
+      });
+
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    },
+    []
+  );
+
+  const doExportData = async (sorting: any, filter: any) => {
+    const user = localStorage.getItem('brillian-bri-tl-auth-v1=9.1.1');
+    const parsedUser = user ? JSON.parse(user) : null;
+    sorting = sorting.length === 0 ? [{ id: 'user_activity.created_at', desc: false }] : sorting;
+    filter = filter && filter.length > 0 ? filter : [];
+    const auth = getAuth();
+    let all_user = false;
+    if (auth) {
+      all_user = auth.role_name === 'Super Admin';
+    }
+    let dataFilter: any = {};
+
+    if (filter && filter.length > 0) {
+      filter.forEach((f: any) => {
+        if (f.id === 'username') {
+          dataFilter['username'] = { like: f.value };
+        } else if (f.id === 'user_activity.created_at') {
+          dataFilter['user_activity.created_at'] = f.value;
+        }
+      });
+    }
+
+    if (!dataFilter['user_activity.created_at']) {
+      const defaultFrom = new Date(new Date().setMonth(new Date().getMonth() - 1));
+      const defaultTo = new Date();
+
+      dataFilter['user_activity.created_at'] = {
+        from: `${format(defaultFrom, 'yyyy-MM-dd')} 00:00:00`,
+        to: `${format(defaultTo, 'yyyy-MM-dd')} 23:59:59`
+      };
+    }
+    let order = 'user_activity.created_at';
+    let param = {
+      all_user: false,
+      // order_field: sorting[0].id,
+      order_field: order,
+      order_direction: sorting[0].desc === false ? 'ASC' : 'DESC',
+      filter: JSON.stringify(dataFilter),
+      token: parsedUser?.access_token
+    };
+    console.log('param:', param);
+
+    let url = `${API_URL}/user_activity/export`;
+
+    GetExportData(url, param, 'user_activity_export_');
+
+    const createActivity = {
+      module: 'Update Pengajuan Kredit',
+      description: `Export Pengajuan Kredit => Log Activity`,
+      action: 'E'
+    };
+    doSaveLogActivity(createActivity);
+  };
+
+  return (
+    <LogActivityContext.Provider
+      value={{
+        date,
+        setDate,
+        doExportData
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolBar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'UserActivity.created_at', desc: true }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          doGetListData(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </LogActivityContext.Provider>
+  );
+};
+
+export { LogActivityContextProvider, LogActivityContext };

src/pages/settings/user/log-activity/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './LogActivityContext';
+export * from './useLogActivityContext';

src/pages/settings/user/log-activity/hooks/useLogActivityContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { LogActivityContext } from './LogActivityContext';
+
+const useLogActivityContext = () => {
+  const context = useContext(LogActivityContext);
+
+  if (!context) throw new Error('useLogActivityContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useLogActivityContext };

src/pages/settings/user/log-activity/index.ts

@@ -0,0 +1 @@
+export * from './LogActivityPage';