feat: add basic admin dashboard

inertia/app/app.tsx

@@ -1,11 +1,13 @@
 import { resolvePageComponent } from '@adonisjs/inertia/helpers';
 import { createInertiaApp } from '@inertiajs/react';
 import { hydrateRoot } from 'react-dom/client';
-import { primaryColor } from '~/styles/theme';
 import 'react-toggle/style.css';
-
+import { primaryColor } from '~/styles/theme';
 import '../i18n/index';
 
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
 
 createInertiaApp({

inertia/components/dashboard/link/link_list.tsx

@@ -2,6 +2,7 @@ import type Link from '#models/link';
 import styled from '@emotion/styled';
 import LinkItem from '~/components/dashboard/link/link_item';
 import { NoLink } from '~/components/dashboard/link/no_item';
+import { sortByCreationDate } from '~/lib/array';
 
 const LinkListStyle = styled.ul({
   height: '100%',
@@ -23,11 +24,9 @@ export default function LinkList({ links }: { links: Link[] }) {
 
   return (
     <LinkListStyle>
-      {links
-        .sort((a, b) => (a.created_at > b.created_at ? 1 : -1))
-        .map((link) => (
-          <LinkItem link={link} key={link.id} showUserControls />
-        ))}
+      {sortByCreationDate(links).map((link) => (
+        <LinkItem link={link} key={link.id} showUserControls />
+      ))}
     </LinkListStyle>
   );
 }

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -9,6 +9,7 @@ import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
 import UserCard from '~/components/dashboard/side_nav/user_card';
 import ModalSettings from '~/components/settings/modal';
 import useActiveCollection from '~/hooks/use_active_collection';
+import useUser from '~/hooks/use_user';
 import { rgba } from '~/lib/color';
 import { appendCollectionId } from '~/lib/navigation';
 
@@ -19,7 +20,7 @@ const SideMenu = styled.nav({
   flexDirection: 'column',
 });
 
-const AdminButton = styled(Item)(({ theme }) => ({
+const AdminButton = styled(ItemLink)(({ theme }) => ({
   color: theme.colors.lightRed,
   '&:hover': {
     backgroundColor: `${rgba(theme.colors.lightRed, 0.1)}!important`,
@@ -43,15 +44,18 @@ const AddButton = styled(ItemLink)(({ theme }) => ({
 const SearchButton = AddButton.withComponent(Item);
 
 export default function SideNavigation() {
+  const { user } = useUser();
   const { t } = useTranslation('common');
   const { activeCollection } = useActiveCollection();
   return (
     <SideMenu>
       <div css={{ paddingInline: '10px' }}>
         <UserCard />
-        <AdminButton>
-          <IoShieldHalfSharp /> {t('admin')}
-        </AdminButton>
+        {user!.isAdmin && (
+          <AdminButton href={route('admin.dashboard').url}>
+            <IoShieldHalfSharp /> {t('admin')}
+          </AdminButton>
+        )}
         <ModalSettings openItem={SettingsButton} />
         <SearchModal openItem={SearchButton} />
         <AddButton

inertia/components/lang_selector.tsx

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LS_LANG_KEY } from '~/constants';
@@ -9,6 +10,7 @@ export default function LangSelector() {
   const onToggleLanguageClick = ({
     target,
   }: ChangeEvent<HTMLSelectElement>) => {
+    dayjs.locale(target.value);
     i18n.changeLanguage(target.value);
     localStorage.setItem(LS_LANG_KEY, target.value);
   };

inertia/components/layouts/_base_layout.tsx

@@ -1,11 +1,15 @@
+import dayjs from 'dayjs';
 import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import ContextThemeProvider from '~/components/layouts/_theme_layout';
 import DarkThemeContextProvider from '~/contexts/dark_theme_context';
 
-const BaseLayout = ({ children }: { children: ReactNode }) => (
-  <DarkThemeContextProvider>
-    <ContextThemeProvider>{children}</ContextThemeProvider>
-  </DarkThemeContextProvider>
-);
-
-export default BaseLayout;
+export default function BaseLayout({ children }: { children: ReactNode }) {
+  const { i18n } = useTranslation();
+  dayjs.locale(i18n.language);
+  return (
+    <DarkThemeContextProvider>
+      <ContextThemeProvider>{children}</ContextThemeProvider>
+    </DarkThemeContextProvider>
+  );
+}

inertia/components/layouts/_theme_layout.tsx

@@ -109,5 +109,35 @@ function GlobalStyles() {
     },
   });
 
-  return <Global styles={[cssReset, documentStyle, scrollbarStyle]} />;
+  const tableStyle = css({
+    table: {
+      height: 'auto',
+      width: '100%',
+      borderCollapse: 'collapse',
+      borderRadius: localTheme.border.radius,
+      overflow: 'hidden',
+    },
+
+    th: {
+      textAlign: 'center',
+      fontWeight: 400,
+      backgroundColor: localTheme.colors.secondary,
+    },
+
+    'td, th': {
+      padding: '0.45em',
+    },
+
+    'th, td': {
+      whiteSpace: 'nowrap',
+    },
+
+    'tr:nth-of-type(even)': {
+      backgroundColor: localTheme.colors.secondary,
+    },
+  });
+
+  return (
+    <Global styles={[cssReset, documentStyle, scrollbarStyle, tableStyle]} />
+  );
 }

inertia/components/navbar/navbar.tsx

@@ -41,6 +41,10 @@ const NavList = styled(UnstyledList)<NavbarListDirection>(
   })
 );
 
+const AdminLink = styled(Link)(({ theme }) => ({
+  color: theme.colors.lightRed,
+}));
+
 const UserCard = styled.div({
   padding: '0.25em 0.5em',
   display: 'flex',
@@ -68,6 +72,13 @@ export default function Navbar() {
         </li>
         {isAuthenticated && !!user ? (
           <>
+            {user.isAdmin && (
+              <li>
+                <AdminLink href={route('admin.dashboard').url}>
+                  {t('admin')}
+                </AdminLink>
+              </li>
+            )}
             <li>
               <Link href={route('dashboard').url}>Dashboard</Link>
             </li>

inertia/constants/index.ts

@@ -1,2 +1,3 @@
 export const LS_LANG_KEY = 'language';
 export const GOOGLE_SEARCH_URL = 'https://google.com/search?q=';
+export const DATE_FORMAT = 'DD MMM YYYY (HH:mm)';

inertia/lib/array.ts

@@ -37,3 +37,6 @@ export function arrayMove<T>(
   arrayCopy.splice(nextIndex, 0, removedElement);
   return arrayCopy;
 }
+
+export const sortByCreationDate = <T extends { createdAt: any }>(arr: T[]) =>
+  arr.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));

inertia/pages/admin/dashboard.tsx

@@ -0,0 +1,137 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import RoundedImage from '~/components/common/rounded_image';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import ContentLayout from '~/components/layouts/content_layout';
+import { DATE_FORMAT } from '~/constants';
+import { sortByCreationDate } from '~/lib/array';
+import { UserWithRelationCount } from '~/types/app';
+
+dayjs.extend(relativeTime);
+
+interface AdminDashboardProps {
+  users: UserWithRelationCount[];
+  totalCollections: number;
+  totalLinks: number;
+}
+
+const Cell = styled.div<{ column?: boolean; fixed?: boolean }>(
+  ({ column, fixed }) => ({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: fixed ? 'unset' : 'center',
+    gap: column ? 0 : '0.35em',
+    flexDirection: column ? 'column' : 'row',
+  })
+);
+
+const ThemeProvider = (props: AdminDashboardProps) => (
+  <ContentLayout>
+    <AdminDashboard {...props} />
+  </ContentLayout>
+);
+export default ThemeProvider;
+
+function AdminDashboard({
+  users,
+  totalCollections,
+  totalLinks,
+}: AdminDashboardProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  return (
+    <div style={{ overflow: 'auto', marginTop: '1em' }}>
+      <table>
+        <thead>
+          <tr>
+            <TableCell type="th">#</TableCell>
+            <TableCell type="th">{t('common:name')}</TableCell>
+            <TableCell type="th">{t('common:email')}</TableCell>
+            <TableCell type="th">
+              {t('common:collection.collections', { count: totalCollections })}{' '}
+              <span css={{ color: theme.colors.grey }}>
+                ({totalCollections})
+              </span>
+            </TableCell>
+            <TableCell type="th">
+              {t('common:link.links', { count: totalLinks })}{' '}
+              <span css={{ color: theme.colors.grey }}>({totalLinks})</span>
+            </TableCell>
+            <TableCell type="th">{t('admin:role')}</TableCell>
+            <TableCell type="th">{t('admin:created_at')}</TableCell>
+            <TableCell type="th">{t('admin:updated_at')}</TableCell>
+          </tr>
+        </thead>
+        <tbody>
+          {users.length !== 0 &&
+            sortByCreationDate(users).map((user) => (
+              <TableUserRow user={user} key={user.id} />
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function TableUserRow({ user }: { user: UserWithRelationCount }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { id, fullname, avatarUrl, email, isAdmin, createdAt, updatedAt } =
+    user;
+  return (
+    <tr>
+      <TableCell type="td">{id}</TableCell>
+      <TableCell type="td" fixed>
+        {avatarUrl && (
+          <RoundedImage
+            src={avatarUrl}
+            width={24}
+            height={24}
+            alt={fullname}
+            title={fullname}
+          />
+        )}
+        <TextEllipsis>{fullname ?? '-'}</TextEllipsis>
+      </TableCell>
+      <TableCell type="td">
+        <TextEllipsis>{email}</TextEllipsis>
+      </TableCell>
+      <TableCell type="td">{user.count.collection}</TableCell>
+      <TableCell type="td">{user.count.link}</TableCell>
+      <TableCell type="td">
+        {isAdmin ? (
+          <span style={{ color: theme.colors.lightRed }}>
+            {t('admin:admin')}
+          </span>
+        ) : (
+          <span style={{ color: theme.colors.green }}>{t('admin:user')}</span>
+        )}
+      </TableCell>
+      <TableCell type="td" column>
+        <span>{dayjs(createdAt.toString()).fromNow()}</span>
+        <span>{dayjs(createdAt.toString()).format(DATE_FORMAT)}</span>
+      </TableCell>
+      <TableCell type="td" column>
+        <span>{dayjs(updatedAt.toString()).fromNow()}</span>
+        <span>{dayjs(updatedAt.toString()).format(DATE_FORMAT)}</span>
+      </TableCell>
+    </tr>
+  );
+}
+
+type TableItem = {
+  children: ReactNode;
+  type: 'td' | 'th';
+  fixed?: boolean;
+  column?: boolean;
+};
+
+function TableCell({ children, type, ...props }: TableItem) {
+  const child = <Cell {...props}>{children}</Cell>;
+  return type === 'td' ? <td>{child}</td> : <th>{child}</th>;
+}

inertia/styles/theme.ts

@@ -47,6 +47,8 @@ export const lightTheme: Theme = {
     darkBlue,
     darkestBlue,
 
+    green: 'green',
+
     lightRed,
 
     yellow: '#FF8A08',
@@ -78,6 +80,8 @@ export const darkTheme: Theme = {
     darkBlue,
     darkestBlue,
 
+    green: '#09b909',
+
     lightRed,
 
     yellow: '#ffc107',

inertia/types/app.d.ts

@@ -10,3 +10,17 @@ type User = {
   isAdmin: boolean;
   collections: Collection[];
 };
+
+type UserWithRelationCount = {
+  id: number;
+  email: string;
+  fullname: string;
+  avatarUrl: string;
+  isAdmin: string;
+  createdAt: string;
+  updatedAt: string;
+  count: {
+    link: number;
+    collection: number;
+  };
+};

inertia/types/emotion.d.ts

@@ -20,6 +20,8 @@ declare module '@emotion/react' {
       darkBlue: string;
       darkestBlue: string;
 
+      green: string;
+
       lightRed: string;
 
       yellow: string;