Renamed (app) folder to (main).

src/app/(main)/dashboard/Dashboard.js

@@ -0,0 +1,70 @@
+'use client';
+import { Button, Icon, Icons, Loading, Text } from 'react-basics';
+import Link from 'next/link';
+import PageHeader from 'components/layout/PageHeader';
+import Pager from 'components/common/Pager';
+import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
+import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
+import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useApi from 'components/hooks/useApi';
+import useDashboard from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+import useLocale from 'components/hooks/useLocale';
+import useApiFilter from 'components/hooks/useApiFilter';
+
+export function Dashboard() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showCharts, editing } = useDashboard();
+  const { dir } = useLocale();
+  const { get, useQuery } = useApi();
+  const { page, handlePageChange } = useApiFilter();
+  const pageSize = 10;
+  const { data: result, isLoading } = useQuery(['websites', page, pageSize], () =>
+    get('/websites', { includeTeams: 1, page, pageSize }),
+  );
+  const { data, count } = result || {};
+  const hasData = data && data?.length !== 0;
+
+  if (isLoading) {
+    return <Loading size="lg" />;
+  }
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.dashboard)}>
+        {!editing && hasData && <DashboardSettingsButton />}
+      </PageHeader>
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
+          <Link href="/settings/websites">
+            <Button>
+              <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                <Icons.ArrowRight />
+              </Icon>
+              <Text>{formatMessage(messages.goToSettings)}</Text>
+            </Button>
+          </Link>
+        </EmptyPlaceholder>
+      )}
+      {hasData && (
+        <>
+          {editing && <DashboardEdit />}
+          {!editing && (
+            <>
+              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <Pager
+                page={page}
+                pageSize={pageSize}
+                count={count}
+                onPageChange={handlePageChange}
+              />
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+export default Dashboard;

src/app/(main)/dashboard/DashboardEdit.js

@@ -0,0 +1,108 @@
+'use client';
+import { useState, useMemo } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import { Button } from 'react-basics';
+import { firstBy } from 'thenby';
+import useDashboard, { saveDashboard } from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+import useApi from 'components/hooks/useApi';
+import styles from './DashboardEdit.module.css';
+
+const dragId = 'dashboard-website-ordering';
+
+export function DashboardEdit() {
+  const settings = useDashboard();
+  const { websiteOrder } = settings;
+  const { formatMessage, labels } = useMessages();
+  const [order, setOrder] = useState(websiteOrder || []);
+  const { get, useQuery } = useApi();
+  const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
+  const { data: websites } = result || {};
+
+  const ordered = useMemo(() => {
+    if (websites) {
+      return websites
+        .map(website => ({ ...website, order: order.indexOf(website.id) }))
+        .sort(firstBy('order'));
+    }
+    return [];
+  }, [websites, order]);
+
+  function handleWebsiteDrag({ destination, source }) {
+    if (!destination || destination.index === source.index) return;
+
+    const orderedWebsites = [...ordered];
+    const [removed] = orderedWebsites.splice(source.index, 1);
+    orderedWebsites.splice(destination.index, 0, removed);
+
+    setOrder(orderedWebsites.map(website => website?.id || 0));
+  }
+
+  function handleSave() {
+    saveDashboard({
+      editing: false,
+      websiteOrder: order,
+    });
+  }
+
+  function handleCancel() {
+    saveDashboard({ editing: false, websiteOrder });
+  }
+
+  function handleReset() {
+    setOrder([]);
+  }
+
+  return (
+    <>
+      <div className={styles.buttons}>
+        <Button onClick={handleSave} variant="action" size="small">
+          {formatMessage(labels.save)}
+        </Button>
+        <Button onClick={handleCancel} size="small">
+          {formatMessage(labels.cancel)}
+        </Button>
+        <Button onClick={handleReset} size="small">
+          {formatMessage(labels.reset)}
+        </Button>
+      </div>
+      <div className={styles.dragActive}>
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
+                {ordered.map(({ id, name, domain }, index) => (
+                  <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
+                    {(provided, snapshot) => (
+                      <div
+                        ref={provided.innerRef}
+                        className={classNames(styles.item, {
+                          [styles.active]: snapshot.isDragging,
+                        })}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        <div className={styles.text}>
+                          <h1>{name}</h1>
+                          <h2>{domain}</h2>
+                        </div>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </>
+  );
+}
+
+export default DashboardEdit;

src/app/(main)/dashboard/DashboardEdit.module.css

@@ -0,0 +1,40 @@
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.item {
+  padding: 5px 0;
+}
+
+.item h1 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.item h2 {
+  font-size: 14px;
+  color: var(--base700);
+}
+
+.text {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid var(--base400);
+  background: var(--base50);
+}
+
+.active .text {
+  border-color: var(--base600);
+  box-shadow: 4px 4px 4px var(--base100);
+}
+
+.dragActive {
+  cursor: grab;
+}
+
+.dragActive:active {
+  cursor: grabbing;
+}

src/app/(main)/dashboard/DashboardSettingsButton.js

@@ -0,0 +1,36 @@
+import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
+import Icons from 'components/icons';
+import { saveDashboard } from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+
+export function DashboardSettingsButton() {
+  const { formatMessage, labels } = useMessages();
+
+  const handleToggleCharts = () => {
+    saveDashboard(state => ({ showCharts: !state.showCharts }));
+  };
+
+  const handleEdit = () => {
+    saveDashboard({ editing: true });
+  };
+
+  return (
+    <Flexbox gap={10}>
+      <TooltipPopup label={formatMessage(labels.toggleCharts)} position="bottom">
+        <Button onClick={handleToggleCharts}>
+          <Icon>
+            <Icons.BarChart />
+          </Icon>
+        </Button>
+      </TooltipPopup>
+      <Button onClick={handleEdit}>
+        <Icon>
+          <Icons.Edit />
+        </Icon>
+        <Text>{formatMessage(labels.edit)}</Text>
+      </Button>
+    </Flexbox>
+  );
+}
+
+export default DashboardSettingsButton;

src/app/(main)/dashboard/DashboardSettingsButton.module.css

@@ -0,0 +1,5 @@
+.buttonGroup {
+  display: flex;
+  place-items: center;
+  gap: 10px;
+}

src/app/(main)/dashboard/page.tsx

@@ -0,0 +1,10 @@
+import Dashboard from 'app/(main)/dashboard/Dashboard';
+import { Metadata } from 'next';
+
+export default function DashboardPage() {
+  return <Dashboard />;
+}
+
+export const metadata: Metadata = {
+  title: 'Dashboard | umami',
+};