update notification

2025-05-14 20:04:30 +07:00
parent a0bc7d13a1
commit 1d461863a9
3 changed files with 171 additions and 31 deletions
--- a/src/pages/notification/blocks/ListToolbar.tsx
+++ b/src/pages/notification/blocks/ListToolbar.tsx
@ -22,8 +22,8 @@ const ListToolBar = () => {

  useEffect(() => {
    const today = new Date();
-    const threeMonthsAgo = getOneMonthsAgo();
-    setDateRange({ from: formatDate(threeMonthsAgo), to: formatDate(today) });
+    const formatted = formatDate(today);
+    setDateRange({ from: formatted, to: formatted });
  }, []);

  useEffect(() => {
@ -34,26 +34,25 @@ const ListToolBar = () => {
    return () => clearTimeout(timer);
  }, [searchValue, table]);

-  const handleFilterByDate = useCallback(() => {
-    try {
-      table.getColumn('created_at')?.setFilterValue(dateRange);
-    } catch (error) {
-      toast.error('Error applying date filter');
-      console.error('Error applying date filter:', error);
-    }
-  }, [dateRange, table]);
-
  useEffect(() => {
-    if (dateRange.from && dateRange.to) {
-      handleFilterByDate();
+    const today = new Date();
+    const formatted = formatDate(today);
+    const initialDateRange = { from: formatted, to: formatted };
+
+    setDateRange(initialDateRange);
+
+    try {
+      table.getColumn('created_at')?.setFilterValue(initialDateRange);
+    } catch (error) {
+      toast.error('Error applying initial date filter');
+      console.error('Initial date filter error:', error);
    }
-  }, [dateRange, handleFilterByDate]);
+  }, []);

  const handleClearAllFilters = () => {
    const today = new Date();
-    const oneMonthAgo = getOneMonthsAgo();
    const resetDateRange = {
-      from: formatDate(oneMonthAgo),
+      from: formatDate(today),
      to: formatDate(today)
    };

@ -69,21 +68,18 @@ const ListToolBar = () => {
    }, 0);
  };

-  const handleRefresh = () => {
-    const today = new Date();
-    const threeMonthsAgo = getOneMonthsAgo();
-    const resetDateRange = {
-      from: formatDate(threeMonthsAgo),
-      to: formatDate(today)
+  useEffect(() => {
+    const checkNewDay = () => {
+      const now = new Date();
+      const formattedNow = formatDate(now);
+      if (formattedNow !== dateRange.from || formattedNow !== dateRange.to) {
+        setDateRange({ from: formattedNow, to: formattedNow });
+      }
    };

-    setSearchValue('');
-    setDateRange(resetDateRange);
-
-    table.setColumnFilters([{ id: 'created_at', value: resetDateRange }]);
-    table.setPageIndex(0);
-    reload();
-  };
+    const interval = setInterval(checkNewDay, 60 * 1000);
+    return () => clearInterval(interval);
+  }, [dateRange]);

  return (
    <div className="card-header flex-wrap gap-2 border-b-0 px-5">
--- a/src/pages/notification/blocks/ShowDetailDialog.tsx
+++ b/src/pages/notification/blocks/ShowDetailDialog.tsx
@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import moment from 'moment';
+
+const ShowDialog = () => {
+  const { showDetailDialog, setShowDetailDialog, selectedNotification } =
+    useManageNotificationContext();
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[1000px] p-4 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Notification Details</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <div className="py-4 max-h-[70vh] overflow-y-auto">
+            {isLoading ? (
+              <div className="text-center text-gray-500">Loading details...</div>
+            ) : (
+              <div className="w-full">
+                {/* Mobile View (Card Layout) */}
+                <div className="md:hidden space-y-3">
+                  {selectedNotification ? (
+                    <div className="border rounded-lg p-4 space-y-2">
+                      <div>
+                        <p className="text-xs text-gray-500">Send</p>
+                        <p className="text-sm font-medium">
+                          {selectedNotification.all_customers === 'Y'
+                            ? 'All Customers'
+                            : selectedNotification.customer_name || '-'}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-gray-500">Content</p>
+                        <p className="text-sm break-words whitespace-normal">
+                          {selectedNotification.content}
+                        </p>
+                      </div>
+                      {/* Field lainnya... */}
+                    </div>
+                  ) : null}
+                </div>
+
+                {/* Desktop View (Table) */}
+                <div className="hidden md:block overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="bg-gray-100 text-left">
+                        <th className="p-3 text-sm min-w-[120px] max-w-[180px]">Send</th>
+                        <th className="p-3 text-sm min-w-[200px]">Content</th>
+                        <th className="p-3 text-sm min-w-[100px]">Subject</th>
+                        <th className="p-3 text-sm min-w-[80px]">Type</th>
+                        <th className="p-3 text-sm min-w-[80px]">Via</th>
+                        <th className="p-3 text-sm min-w-[150px]">Date Create</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {selectedNotification && (
+                        <tr className="border-b">
+                          <td className="p-3 text-sm max-w-[180px] overflow-hidden text-ellipsis">
+                            {selectedNotification.all_customers === 'Y'
+                              ? 'All Customers'
+                              : selectedNotification.customer_name || '-'}
+                          </td>
+                          <td className="p-3 text-sm break-words whitespace-pre-wrap max-w-[300px]">
+                            {selectedNotification.content}
+                          </td>
+                          <td className="p-3 text-sm">{selectedNotification.subject}</td>
+                          <td className="p-3 text-sm">{selectedNotification.type}</td>
+                          <td className="p-3 text-sm">{selectedNotification.via}</td>
+                          <td className="p-3 text-sm">
+                            {moment(selectedNotification.created_at).format('YYYY-MM-DD HH:mm:ss')}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ShowDialog;
--- a/src/pages/notification/hooks/ManageNotificationContext.tsx
+++ b/src/pages/notification/hooks/ManageNotificationContext.tsx
@ -6,18 +6,23 @@ import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { ListToolBar } from '../blocks/ListToolbar';
 import { useCallApi } from '@/hooks';
 import moment from 'moment';
+import ShowDetailDialog from '../blocks/ShowDetailDialog';

 interface ContextProps {
+  showDetailDialog: boolean;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
  showAddDialog: boolean;
  handleAddDialog: (show: boolean) => void;
  showEditDialog: boolean;
  handleEditDialog: (show: boolean, selected_notification: string | null) => void;
  showDeleteDialog: boolean;
  handleDeleteDialog: (show: boolean, selected_notification: string | null) => void;
-  selectedNotification: string | null;
+  selectedNotification: any | null;
 }

 const initialProps: ContextProps = {
+  showDetailDialog: false,
+  setShowDetailDialog: () => {},
  showAddDialog: false,
  handleAddDialog: (show: boolean) => {},
  showEditDialog: false,
@ -31,10 +36,11 @@ const ManageNotifContext = createContext<ContextProps>(initialProps);
 const API_URL_NOTIFICATION = apiConfig.service_notification;

 const ManageNotifContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
  const [showEditDialog, setShowEditDialog] = useState(false);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedNotification, setSelectedNotification] = useState<string | null>(null);
+  const [selectedNotification, setSelectedNotification] = useState<any | null>(null);
  const { GetData } = useCallApi();

  const handleAddDialog = useCallback((show: boolean) => {
@ -77,6 +83,20 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
        meta: {
          headerClassName: 'w-[350px]',
          searchable: true
+        },
+        cell: ({ row }) => {
+          const content = row.original.content;
+          const paragraphs = content.split(/\n+/);
+
+          const preview = paragraphs.slice(0, 2).join('\n');
+          const isTruncated = paragraphs.length > 2;
+
+          return (
+            <div className="whitespace-pre-wrap">
+              {preview}
+              {isTruncated && '...'}
+            </div>
+          );
        }
      },
      {
@ -107,6 +127,29 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
        enableSorting: true,
        enableHiding: false,
        cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        accessorKey: 'detail',
+        id: 'detail',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <div key={`actions-${row.id}`} className="flex gap-2 justify-center">
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedNotification(row);
+                  setShowDetailDialog(true);
+                }}
+              >
+                <KeenIcon icon="eye" />
+              </button>
+            </div>
+          );
+        }
      }
    ],
    [handleEditDialog, handleDeleteDialog]
@ -156,6 +199,8 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
    <div>
      <ManageNotifContext.Provider
        value={{
+          showDetailDialog,
+          setShowDetailDialog,
          handleAddDialog,
          showAddDialog,
          handleEditDialog,
@ -167,6 +212,8 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
      >
        <Toaster expand visibleToasts={9} duration={3000} />

+        <ShowDetailDialog />
+
        <DataGridProvider
          columns={columns}
          pagination={{ size: 10 }}