diff --git a/frontend/src/Routes.tsx b/frontend/src/Routes.tsx
index 7d0a58b..65c97d5 100644
--- a/frontend/src/Routes.tsx
+++ b/frontend/src/Routes.tsx
@@ -5,12 +5,16 @@ import { Deposit } from "./features/deposit/Deposit";
import { Log } from "./features/log/Log";
import { Register } from "./features/register/Register";
import { Stats } from "./features/stats/Stats";
+import { UserDetail } from "./features/users/UserDetail";
+import { UserList } from "./features/users/UserList";
export const Routes: React.FC = () => (
} />
} />
} />
+ } />
+ } />
} />
);
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 39a9322..d491393 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,6 +1,7 @@
import { ReactComponent as BarChart } from "bootstrap-icons/icons/bar-chart.svg";
import { ReactComponent as CardList } from "bootstrap-icons/icons/card-list.svg";
import { ReactComponent as House } from "bootstrap-icons/icons/house.svg";
+import { ReactComponent as PeopleIcon } from "bootstrap-icons/icons/people.svg";
import React from "react";
import { NavLink } from "react-router-dom";
@@ -64,6 +65,15 @@ export const Header: React.FC = () => {
Statistikk
+
+
+
+
+
+ {" "}
+ Folk
+
+
diff --git a/frontend/src/features/log/Log.tsx b/frontend/src/features/log/Log.tsx
index 721f63f..7331ddf 100644
--- a/frontend/src/features/log/Log.tsx
+++ b/frontend/src/features/log/Log.tsx
@@ -1,14 +1,12 @@
import { useQuery } from "@apollo/client";
import clsx from "clsx";
-import { parseISO, format } from "date-fns";
import React from "react";
import { useUrlSearchParams } from "use-url-search-params";
import { Order, OrderLine, OrderListDocument, Transaction, TransactionListDocument } from "../../types";
+import { formatTime } from "../../utils/time";
import styles from "./Log.module.css";
-const formatTime = (isoDateTime: string): string => format(parseISO(isoDateTime), "yyyy-MM-dd HH:mm");
-
const PAGE_SIZE = 10;
export const Log = () => {
diff --git a/frontend/src/features/register/useRegister.ts b/frontend/src/features/register/useRegister.ts
index 349eeb0..5437840 100644
--- a/frontend/src/features/register/useRegister.ts
+++ b/frontend/src/features/register/useRegister.ts
@@ -1,10 +1,8 @@
import { useQuery } from "@apollo/client";
-import { parseISO, subDays } from "date-fns";
import { useState } from "react";
import { User, Product, AllProductsDocument, AllUsersDocument } from "../../types";
-
-const activeLimitDays = 365 / 2;
+import { activeUserFilter } from "../../utils/users";
type useRegisterType = {
users: User[];
@@ -20,13 +18,7 @@ export const useRegister = (): useRegisterType => {
const { data: usersData, loading: usersLoading } = useQuery(AllUsersDocument);
const allUsers = usersData?.allUsers || [];
- const users = showAll
- ? allUsers
- : allUsers.filter((user: User) => {
- const balance = user.profile?.balance || 0;
- const active = parseISO(user.profile?.lastPurchaseDate) >= subDays(new Date(), activeLimitDays);
- return balance >= 15 && active;
- });
+ const users = showAll ? allUsers : allUsers.filter(activeUserFilter);
return { loading: loading || usersLoading, users, products: data?.allProducts || [], showAll, setShowAll };
};
diff --git a/frontend/src/features/users/UserDetail.module.css b/frontend/src/features/users/UserDetail.module.css
new file mode 100644
index 0000000..e21b4f8
--- /dev/null
+++ b/frontend/src/features/users/UserDetail.module.css
@@ -0,0 +1,5 @@
+.userDetail {
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: repeat(2, 1fr);
+}
diff --git a/frontend/src/features/users/UserDetail.tsx b/frontend/src/features/users/UserDetail.tsx
new file mode 100644
index 0000000..c2cc9cf
--- /dev/null
+++ b/frontend/src/features/users/UserDetail.tsx
@@ -0,0 +1,47 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import { User, UserDetailDocument, UserProfile } from "../../types";
+import { formatMonth, formatTime } from "../../utils/time";
+import styles from "./UserDetail.module.css";
+
+export const UserDetail = () => {
+ const { userId } = useParams();
+ const { data, loading } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
+
+ if (loading) return Loading...
;
+
+ const user = data?.user as User;
+ const profile = user?.profile as UserProfile;
+ return (
+
+
+
+ {profile.image && 
} {user.firstName}
+
+
+
Stats
+
+ - Saldo: {profile.balance}
+ - Siste kjøp: {formatTime(profile.lastPurchaseDate)}
+ - Kjøp totalt: {profile.orderSumTotal.toLocaleString()}
+
+
+
+
+
Top 5 måneder
+
+ {profile.topMonths.map((topMonth) => (
+ -
+ {formatMonth(topMonth.period)}: {topMonth.count} kjøp på totalt{" "}
+ {topMonth.sum} kr
+
+ ))}
+
+
+
+
TODO: produktgraf
+
Loading...
;
+
+ const allUsers = data?.allUsers || [];
+ const users = showAll ? allUsers : allUsers.filter(activeUserFilter);
+ return (
+
+
+
+ {(users || []).map((user) => (
+ -
+
+ {user.firstName} {user.lastName}
+
+
+ ))}
+
+
{% if not user.is_authenticated %}