Add basic activity log view

resources/scripts/components/elements/button/style.module.css

@@ -19,10 +19,18 @@
             @apply p-1;
         }
     }
+
+    &:disabled {
+        @apply cursor-not-allowed;
+    }
 }
 
 .text {
-    @apply bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
+    @apply text-gray-50 bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
+
+    &:disabled {
+        @apply hover:bg-transparent text-gray-300;
+    }
 }
 
 .danger {

resources/scripts/components/elements/table/PaginationFooter.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { PaginationDataSet } from '@/api/http';
+import classNames from 'classnames';
+import { Button } from '@/components/elements/button/index';
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/solid';
+
+interface Props {
+    className?: string;
+    pagination: PaginationDataSet;
+    onPageSelect: (page: number) => void;
+}
+
+const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
+    const start = (pagination.currentPage - 1) * pagination.perPage;
+    const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
+
+    const { currentPage: current, totalPages: total } = pagination;
+
+    const pages = { previous: [] as number[], next: [] as number[] };
+    for (let i = 1; i <= 2; i++) {
+        if (current - i >= 1) {
+            pages.previous.push(current - i);
+        }
+        if (current + i <= total) {
+            pages.next.push(current + i);
+        }
+    }
+
+    return (
+        <div className={classNames('flex items-center justify-between my-2', className)}>
+            <p className={'text-sm text-neutral-500'}>
+                Showing&nbsp;
+                <span className={'font-semibold text-neutral-400'}>
+                    {Math.max(start, Math.min(pagination.total, 1))}
+                </span>&nbsp;to&nbsp;
+                <span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
+                <span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
+            </p>
+            {pagination.totalPages > 1 &&
+                <div className={'flex space-x-1'}>
+                    <Button.Text small disabled={pages.previous.length !== 2} onClick={() => onPageSelect(1)}>
+                        <ChevronDoubleLeftIcon className={'w-3 h-3'}/>
+                    </Button.Text>
+                    {pages.previous.reverse().map((value) => (
+                        <Button.Text small key={`previous-${value}`} onClick={() => onPageSelect(value)}>
+                            {value}
+                        </Button.Text>
+                    ))}
+                    <Button small disabled>{current}</Button>
+                    {pages.next.map((value) => (
+                        <Button.Text small key={`next-${value}`} onClick={() => onPageSelect(value)}>
+                            {value}
+                        </Button.Text>
+                    ))}
+                    <Button.Text small disabled={pages.next.length !== 2} onClick={() => onPageSelect(total)}>
+                        <ChevronDoubleRightIcon className={'w-3 h-3'}/>
+                    </Button.Text>
+                </div>
+            }
+        </div>
+    );
+};
+
+export default PaginationFooter;

resources/scripts/components/elements/tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 
 interface Props {
     content: string | React.ReactChild;
+    disabled?: boolean;
     arrow?: boolean;
     placement?: Placement;
     strategy?: Strategy;
@@ -33,8 +34,8 @@ const arrowSides: Record<Side, Side> = {
     right: 'left',
 };
 
-export default ({ content, children, ...props }: Props) => {
-    const arrowEl = useRef<HTMLSpanElement>(null);
+export default ({ content, children, disabled = false, ...props }: Props) => {
+    const arrowEl = useRef<HTMLDivElement>(null);
     const [ open, setOpen ] = useState(false);
 
     const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({
@@ -56,12 +57,16 @@ export default ({ content, children, ...props }: Props) => {
     const side = arrowSides[(props.placement || 'top').split('-')[0] as Side];
     const { x: ax, y: ay } = middlewareData.arrow || {};
 
+    if (disabled) {
+        return children;
+    }
+
     return (
         <>
             {cloneElement(children, getReferenceProps({ ref: reference, ...children.props }))}
             <AnimatePresence>
                 {open &&
-                    <motion.span
+                    <motion.div
                         initial={{ opacity: 0, scale: 0.85 }}
                         animate={{ opacity: 1, scale: 1 }}
                         exit={{ opacity: 0 }}
@@ -78,7 +83,7 @@ export default ({ content, children, ...props }: Props) => {
                     >
                         {content}
                         {props.arrow &&
-                            <span
+                            <div
                                 ref={arrowEl}
                                 style={{
                                     transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px)`,
@@ -87,7 +92,7 @@ export default ({ content, children, ...props }: Props) => {
                                 className={'absolute top-0 left-0 bg-gray-900 w-3 h-3 rotate-45'}
                             />
                         }
-                    </motion.span>
+                    </motion.div>
                 }
             </AnimatePresence>
         </>