Add basic activity log view

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { useActivityLogs } from '@/api/account/activity';
+import { useFlashKey } from '@/plugins/useFlash';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { format, formatDistanceToNowStrict } from 'date-fns';
+import { Link } from 'react-router-dom';
+import PaginationFooter from '@/components/elements/table/PaginationFooter';
+import { UserIcon } from '@heroicons/react/outline';
+import Tooltip from '@/components/elements/tooltip/Tooltip';
+import { DesktopComputerIcon } from '@heroicons/react/solid';
+
+export default () => {
+    const { clearAndAddHttpError } = useFlashKey('account');
+    const [ page, setPage ] = useState(1);
+    const { data, isValidating: _, error } = useActivityLogs(page, {
+        revalidateOnMount: true,
+        revalidateOnFocus: false,
+    });
+
+    useEffect(() => {
+        clearAndAddHttpError(error);
+    }, [ error ]);
+
+    return (
+        <PageContentBlock title={'Account Activity Log'}>
+            <FlashMessageRender byKey={'account'}/>
+            <div className={'bg-gray-700'}>
+                {data?.items.map((activity) => (
+                    <div
+                        key={`${activity.event}|${activity.timestamp.toString()}`}
+                        className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0'}
+                    >
+                        <div className={'col-span-1 flex items-center justify-center select-none'}>
+                            <div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
+                                {activity.relationships.actor ?
+                                    <img src={activity.relationships.actor.image} alt={'User avatar'}/>
+                                    :
+                                    <UserIcon className={'w-5 h-5 mx-auto'}/>
+                                }
+                            </div>
+                        </div>
+                        <div className={'col-span-9'}>
+                            <div className={'flex items-center text-gray-50'}>
+                                {activity.relationships.actor?.username || 'system'}
+                                <span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
+                                <Link to={`#event=${activity.event}`}>
+                                    {activity.event}
+                                </Link>
+                                {typeof activity.properties.useragent === 'string' &&
+                                    <Tooltip content={activity.properties.useragent} placement={'top'}>
+                                        <DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/>
+                                    </Tooltip>
+                                }
+                            </div>
+                            {/* <p className={'mt-1'}>{activity.description || JSON.stringify(activity.properties)}</p> */}
+                            <div className={'mt-1 flex items-center text-sm'}>
+                                <Link to={`#ip=${activity.ip}`}>{activity.ip}</Link>
+                                <span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
+                                <Tooltip placement={'right'} content={format(activity.timestamp, 'MMM do, yyyy h:mma')}>
+                                    <span>
+                                        {formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
+                                    </span>
+                                </Tooltip>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            {data && <PaginationFooter pagination={data.pagination} onPageSelect={setPage}/>}
+        </PageContentBlock>
+    );
+};