Upgrade frontend dependencies and tooling
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
32 files changed
+5718
-16951
No files matched your search
@@ -19,6 +19,7 @@ module.exports = {
|
||||
rules: {
|
||||
"no-console": "off",
|
||||
"prefer-destructuring": "off",
|
||||
"import/no-unresolved": ["error", { ignore: ["\\?react$"] }],
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
|
||||
+18
-2
@@ -3,6 +3,22 @@ documents: ./src/**/*.graphql
|
||||
generates:
|
||||
./src/types.ts:
|
||||
plugins:
|
||||
- typescript
|
||||
- typescript-operations
|
||||
- typescript:
|
||||
typesPrefix: Schema
|
||||
scalars:
|
||||
DateTime:
|
||||
input: string
|
||||
output: string
|
||||
JSONScalar:
|
||||
input: unknown
|
||||
output: "Array<{ name: string; count: number }>"
|
||||
- typescript-operations:
|
||||
nonOptionalTypename: true
|
||||
scalars:
|
||||
DateTime:
|
||||
input: string
|
||||
output: string
|
||||
JSONScalar:
|
||||
input: unknown
|
||||
output: "Array<{ name: string; count: number }>"
|
||||
- typed-document-node
|
||||
Generated
+5241
-16627
File diff suppressed because it is too large.
Load diff
+30
-35
@@ -7,59 +7,54 @@
|
||||
"check-types": "tsc",
|
||||
"dev": "vite",
|
||||
"format:js": "eslint --fix src",
|
||||
"format:styles": "stylelint --fix src",
|
||||
"generate": "graphql-codegen",
|
||||
"format:styles": "prettier --write \"src/**/*.css\"",
|
||||
"generate": "node scripts/generate-types.mjs",
|
||||
"lint:js": "eslint src",
|
||||
"lint:styles": "stylelint src",
|
||||
"lint:styles": "prettier --check \"src/**/*.css\"",
|
||||
"preview": "vite preview",
|
||||
"start": "vite",
|
||||
"test": "jest"
|
||||
"test": "node --test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.5.10",
|
||||
"@nivo/bar": "^0.79.1",
|
||||
"@nivo/line": "^0.79.1",
|
||||
"@nivo/pie": "^0.79.1",
|
||||
"@apollo/client": "^3.14.1",
|
||||
"@nivo/bar": "^0.99.0",
|
||||
"@nivo/line": "^0.99.0",
|
||||
"@nivo/pie": "^0.99.0",
|
||||
"clsx": "^1.1.1",
|
||||
"date-fns": "^2.28.0",
|
||||
"graphql": "^16.3.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.30.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-router-dom": "^7.18.4",
|
||||
"use-url-search-params": "^2.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^2.6.2",
|
||||
"@graphql-codegen/typed-document-node": "^2.2.8",
|
||||
"@graphql-codegen/typescript-operations": "^2.3.5",
|
||||
"@graphql-codegen/core": "^6.2.2",
|
||||
"@graphql-codegen/typescript": "^6.1.2",
|
||||
"@graphql-codegen/typed-document-node": "^7.2.0",
|
||||
"@graphql-codegen/typescript-operations": "^6.1.10",
|
||||
"@graphql-typed-document-node/core": "^3.1.1",
|
||||
"@types/react": "^17.0.44",
|
||||
"@types/react-dom": "^17.0.15",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.19.0",
|
||||
"@typescript-eslint/parser": "^5.19.0",
|
||||
"@vitejs/plugin-react": "^1.3.1",
|
||||
"@vitejs/plugin-react-refresh": "^1.3.6",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"@types/react": "^18.3.28",
|
||||
"@types/react-dom": "^18.3.7",
|
||||
"@typescript-eslint/eslint-plugin": "^8.72.0",
|
||||
"@typescript-eslint/parser": "^8.72.0",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-prettier": "^5.5.7",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslint-plugin-react-hooks": "^4.4.0",
|
||||
"jest": "^27.5.1",
|
||||
"prettier": "^2.6.2",
|
||||
"stylelint": "^14.7.0",
|
||||
"stylelint-config-idiomatic-order": "^8.1.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-recommended": "^7.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"stylelint-prettier": "^2.0.0",
|
||||
"typescript": "^4.6.3",
|
||||
"vite": "^2.9.5",
|
||||
"vite-plugin-svgr": "^1.1.0"
|
||||
"prettier": "^3.6.2",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^6.4.5",
|
||||
"vite-plugin-svgr": "^5.2.0",
|
||||
"yaml": "^2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "20"
|
||||
},
|
||||
"overrides": {
|
||||
"@whatwg-node/promise-helpers": "^1.3.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { readdir, readFile, writeFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
import { codegen } from "@graphql-codegen/core";
|
||||
import { plugin as typedDocumentNodePlugin } from "@graphql-codegen/typed-document-node";
|
||||
import { plugin as typescriptOperationsPlugin } from "@graphql-codegen/typescript-operations";
|
||||
import { plugin as typescriptPlugin } from "@graphql-codegen/typescript";
|
||||
import { buildASTSchema, parse } from "graphql";
|
||||
import { parse as parseYaml } from "yaml";
|
||||
|
||||
const frontendRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
|
||||
const configPath = path.join(frontendRoot, "codegen.yml");
|
||||
const config = parseYaml(await readFile(configPath, "utf8"));
|
||||
const schemaDocument = parse(await readFile(path.resolve(frontendRoot, config.schema), "utf8"));
|
||||
const outputEntries = Object.entries(config.generates ?? {});
|
||||
|
||||
if (outputEntries.length !== 1) {
|
||||
throw new Error(`Expected one GraphQL Codegen output in ${configPath}`);
|
||||
}
|
||||
|
||||
const [outputName, outputConfig] = outputEntries[0];
|
||||
const outputPath = path.resolve(frontendRoot, outputName);
|
||||
const sourceRoot = path.join(frontendRoot, "src");
|
||||
const plugins = outputConfig.plugins.map((plugin) =>
|
||||
typeof plugin === "string" ? { [plugin]: {} } : plugin,
|
||||
);
|
||||
|
||||
async function findGraphqlFiles(directory) {
|
||||
const entries = await readdir(directory, { withFileTypes: true });
|
||||
const nestedFiles = await Promise.all(
|
||||
entries.map((entry) => {
|
||||
const entryPath = path.join(directory, entry.name);
|
||||
if (entry.isDirectory()) return findGraphqlFiles(entryPath);
|
||||
return entry.isFile() && entry.name.endsWith(".graphql") ? [entryPath] : [];
|
||||
}),
|
||||
);
|
||||
return nestedFiles.flat();
|
||||
}
|
||||
|
||||
const documents = await Promise.all(
|
||||
(await findGraphqlFiles(sourceRoot))
|
||||
.sort()
|
||||
.map(async (location) => ({
|
||||
location,
|
||||
document: parse(await readFile(location, "utf8")),
|
||||
})),
|
||||
);
|
||||
|
||||
const pluginMap = {
|
||||
typescript: { plugin: typescriptPlugin },
|
||||
"typescript-operations": { plugin: typescriptOperationsPlugin },
|
||||
"typed-document-node": { plugin: typedDocumentNodePlugin },
|
||||
};
|
||||
|
||||
const generated = await codegen({
|
||||
filename: outputPath,
|
||||
schema: schemaDocument,
|
||||
schemaAst: buildASTSchema(schemaDocument),
|
||||
documents,
|
||||
config: {},
|
||||
plugins,
|
||||
pluginMap,
|
||||
});
|
||||
|
||||
await writeFile(outputPath, generated);
|
||||
@@ -1,4 +1,4 @@
|
||||
.app {
|
||||
margin: 1rem auto;
|
||||
max-width: 1220px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
import { ReactComponent as Brick } from "../assets/brick.svg";
|
||||
import Brick from "../assets/brick.svg?react";
|
||||
import styles from "./Footer.module.css";
|
||||
|
||||
export const Footer = (): JSX.Element => {
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
.errorMessage {
|
||||
font-family: Rocket Rinder, monospace;
|
||||
font-size: 3rem;
|
||||
font-style: italic;
|
||||
color: var(--brand);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 30vh;
|
||||
color: var(--brand);
|
||||
font-family:
|
||||
Rocket Rinder,
|
||||
monospace;
|
||||
font-size: 3rem;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.header {
|
||||
margin: 1rem auto;
|
||||
max-width: 1220px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -17,14 +17,21 @@
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: rgba(243, 33, 61, 0.4);
|
||||
box-shadow: 0 0 4px rgba(243, 33, 61, 0.4), 0 0 11px rgba(243, 33, 61, 0.4), 0 0 19px rgba(243, 33, 61, 0.4);
|
||||
box-shadow:
|
||||
0 0 4px rgba(243, 33, 61, 0.4),
|
||||
0 0 11px rgba(243, 33, 61, 0.4),
|
||||
0 0 19px rgba(243, 33, 61, 0.4);
|
||||
content: "";
|
||||
transform: rotate(-2.5deg);
|
||||
}
|
||||
|
||||
.navLink:hover:after {
|
||||
background-color: var(--brand);
|
||||
box-shadow: 0 0 4px var(--brand), 0 0 11px var(--brand), 0 0 19px var(--brand), 0 0 30px var(--brand);
|
||||
box-shadow:
|
||||
0 0 4px var(--brand),
|
||||
0 0 11px var(--brand),
|
||||
0 0 19px var(--brand),
|
||||
0 0 30px var(--brand);
|
||||
}
|
||||
|
||||
.logoNav {
|
||||
@@ -55,12 +62,17 @@
|
||||
.brand {
|
||||
padding-left: 1rem;
|
||||
color: var(--brand);
|
||||
font-family: Rocket Rinder, monospace;
|
||||
font-family:
|
||||
Rocket Rinder,
|
||||
monospace;
|
||||
font-size: 3rem;
|
||||
font-style: italic;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 4px rgba(243, 33, 61, 0.8), 0 0 11px rgba(243, 33, 61, 0.8), 0 0 19px rgba(243, 33, 61, 0.8);
|
||||
text-shadow:
|
||||
0 0 4px rgba(243, 33, 61, 0.8),
|
||||
0 0 11px rgba(243, 33, 61, 0.8),
|
||||
0 0 19px rgba(243, 33, 61, 0.8);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -68,7 +80,9 @@
|
||||
left: -8px;
|
||||
animation: flicker 1.5s infinite alternate;
|
||||
color: var(--interlace);
|
||||
font-family: Rocket Clouds DEMO, serif;
|
||||
font-family:
|
||||
Rocket Clouds DEMO,
|
||||
serif;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
@@ -83,7 +97,10 @@
|
||||
53%,
|
||||
57%,
|
||||
100% {
|
||||
text-shadow: 0 0 4px rgba(121, 152, 238, 0.8), 0 0 11px rgba(121, 152, 238, 0.8), 0 0 19px rgba(121, 152, 238, 0.8);
|
||||
text-shadow:
|
||||
0 0 4px rgba(121, 152, 238, 0.8),
|
||||
0 0 11px rgba(121, 152, 238, 0.8),
|
||||
0 0 19px rgba(121, 152, 238, 0.8);
|
||||
}
|
||||
|
||||
20%,
|
||||
|
||||
@@ -18,22 +18,31 @@
|
||||
.sun {
|
||||
width: clamp(100px, 65vw, 600px);
|
||||
height: clamp(100px, 65vw, 600px);
|
||||
border-radius: 50% 50%;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(var(--sun) 50%, var(--sun-end) 90%);
|
||||
border-radius: 50% 50%;
|
||||
box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun), 0 0 30px var(--sun);
|
||||
box-shadow:
|
||||
0 0 4px var(--sun),
|
||||
0 0 11px var(--sun),
|
||||
0 0 19px var(--sun),
|
||||
0 0 30px var(--sun);
|
||||
}
|
||||
.brand {
|
||||
position: relative;
|
||||
left: -0.6rem;
|
||||
padding-top: 3rem;
|
||||
color: var(--brand);
|
||||
font-family: Rocket Rinder, monospace;
|
||||
font-family:
|
||||
Rocket Rinder,
|
||||
monospace;
|
||||
font-size: clamp(20px, 20vw, 200px);
|
||||
font-style: italic;
|
||||
letter-spacing: 1rem;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 4px rgba(243, 33, 61, 0.8), 0 0 11px rgba(243, 33, 61, 0.8), 0 0 19px rgba(243, 33, 61, 0.8);
|
||||
text-shadow:
|
||||
0 0 4px rgba(243, 33, 61, 0.8),
|
||||
0 0 11px rgba(243, 33, 61, 0.8),
|
||||
0 0 19px rgba(243, 33, 61, 0.8);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@@ -42,7 +51,9 @@
|
||||
left: 0rem;
|
||||
animation: flicker 1.5s infinite alternate;
|
||||
color: var(--interlace);
|
||||
font-family: Rocket Clouds DEMO, serif;
|
||||
font-family:
|
||||
Rocket Clouds DEMO,
|
||||
serif;
|
||||
font-size: clamp(20px, 5vw, 50px);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
@@ -57,7 +68,10 @@
|
||||
53%,
|
||||
57%,
|
||||
100% {
|
||||
text-shadow: 0 0 4px rgba(121, 152, 238, 0.8), 0 0 11px rgba(121, 152, 238, 0.8), 0 0 19px rgba(121, 152, 238, 0.8);
|
||||
text-shadow:
|
||||
0 0 4px rgba(121, 152, 238, 0.8),
|
||||
0 0 11px rgba(121, 152, 238, 0.8),
|
||||
0 0 19px rgba(121, 152, 238, 0.8);
|
||||
}
|
||||
|
||||
20%,
|
||||
|
||||
@@ -16,11 +16,17 @@
|
||||
|
||||
.primary {
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
|
||||
box-shadow:
|
||||
0 0 4px var(--sun),
|
||||
0 0 11px var(--sun),
|
||||
0 0 19px var(--sun);
|
||||
}
|
||||
.danger {
|
||||
background: var(--brand);
|
||||
box-shadow: 0 0 4px rgba(243, 33, 61, 0.8), 0 0 11px rgba(243, 33, 61, 0.8), 0 0 19px rgba(243, 33, 61, 0.8);
|
||||
box-shadow:
|
||||
0 0 4px rgba(243, 33, 61, 0.8),
|
||||
0 0 11px rgba(243, 33, 61, 0.8),
|
||||
0 0 19px rgba(243, 33, 61, 0.8);
|
||||
}
|
||||
|
||||
.close {
|
||||
|
||||
@@ -1,30 +1,29 @@
|
||||
.wireframe {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: calc(22% - 512px);
|
||||
left: calc(50% - 512px);
|
||||
display: grid;
|
||||
width: 1024px;
|
||||
height: 1024px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 128px);
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: isometric-rotate;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
grid-template-columns: repeat(8, 128px);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cell {
|
||||
border-bottom: 2px solid var(--sun);
|
||||
border-right: 2px solid var(--sun);
|
||||
|
||||
border-bottom: 2px solid var(--sun);
|
||||
}
|
||||
|
||||
.cell:nth-child(8n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cell:nth-child(n+57) {
|
||||
.cell:nth-child(n + 57) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
display: grid;
|
||||
height: 800px;
|
||||
padding-top: 2rem;
|
||||
column-gap: 16px;
|
||||
grid-template-columns: repeat(5, 220px);
|
||||
overflow-y: auto;
|
||||
column-gap: 16px;
|
||||
row-gap: 24px;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ export const useDeposit = () => {
|
||||
const [amount, setAmount] = useState("");
|
||||
const [userQuery, setUserQuery] = useState("");
|
||||
const filteredUsers = (data?.allUsers || []).filter((user) =>
|
||||
`${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase())
|
||||
`${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()),
|
||||
);
|
||||
const { showToast } = useToast();
|
||||
|
||||
@@ -30,7 +30,7 @@ export const useDeposit = () => {
|
||||
if (res.data?.createDeposit?.__typename === "CreateDepositSuccess") {
|
||||
const { transaction } = res.data?.createDeposit;
|
||||
showToast(
|
||||
`${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`
|
||||
`${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`,
|
||||
);
|
||||
reset();
|
||||
return;
|
||||
@@ -42,7 +42,7 @@ export const useDeposit = () => {
|
||||
if (res.data?.createDeposit?.__typename === "AboveMaxSaldo") {
|
||||
showToast(
|
||||
`${res.data.createDeposit.message}. Ny saldo ville vært ${res.data.createDeposit.above} mer enn maksimalt ${res.data.createDeposit.maxSaldo}.`,
|
||||
"danger"
|
||||
"danger",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
.pagination a {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: 1px solid var(--border);
|
||||
margin-top: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.pagination a:hover {
|
||||
color: white;
|
||||
|
||||
@@ -1,51 +1,56 @@
|
||||
.product {
|
||||
display: flex;
|
||||
border: none;
|
||||
background: rgb(35, 15, 41);
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s ease-out, border 0.1s ease-out;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: rgb(35, 15, 41);
|
||||
transition:
|
||||
background-color 0.1s ease-out,
|
||||
border 0.1s ease-out;
|
||||
}
|
||||
|
||||
.product:hover,
|
||||
.active.product {
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
|
||||
box-shadow:
|
||||
0 0 4px var(--background),
|
||||
0 0 11px var(--background),
|
||||
0 0 19px var(--background);
|
||||
}
|
||||
|
||||
.productText {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 1.2rem;
|
||||
text-shadow: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amount {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
padding: 12px 12px 8px 8px;
|
||||
border-left: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: transparent;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active .amount {
|
||||
display: block;
|
||||
color: var(--background);
|
||||
text-shadow: none;
|
||||
border-left-color: rgb(35, 15, 41);
|
||||
background-color: var(--sun-end);
|
||||
color: var(--background);
|
||||
text-shadow: none;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import clsx from "clsx";
|
||||
import React, { MouseEventHandler } from "react";
|
||||
|
||||
import { Product } from "../../types";
|
||||
import { SchemaProduct as Product } from "../../types";
|
||||
import styles from "./ProductCard.module.css";
|
||||
|
||||
type ProductCardProps = {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.userList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 220px);
|
||||
column-gap: 16px;
|
||||
grid-template-columns: repeat(5, 220px);
|
||||
row-gap: 24px;
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
|
||||
.productList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 220px);
|
||||
column-gap: 16px;
|
||||
grid-template-columns: repeat(5, 220px);
|
||||
row-gap: 24px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
import { OrderLineInput, Product } from "../../types";
|
||||
import { OrderLineInput, SchemaProduct as Product } from "../../types";
|
||||
import { UserCard } from "../users/UserCard";
|
||||
import { ProductCard } from "./ProductCard";
|
||||
import styles from "./Register.module.css";
|
||||
|
||||
@@ -2,15 +2,15 @@ import { useMutation, useQuery } from "@apollo/client";
|
||||
import { useState } from "react";
|
||||
|
||||
import { useToast } from "../../components/ToastProvider";
|
||||
import { AllProductsDocument, AllUsersDocument, CreateOrderDocument, OrderLineInput, Product } from "../../types";
|
||||
import { AllProductsDocument, AllUsersDocument, CreateOrderDocument, OrderLineInput, SchemaProduct } from "../../types";
|
||||
import { formatCurrency } from "../../utils/currency";
|
||||
import { activeUserFilter } from "../../utils/users";
|
||||
import {formatCurrency} from "../../utils/currency";
|
||||
|
||||
const USER_EXTERNAL = "external";
|
||||
|
||||
const sumTotal = (products: Omit<Product, "userCounts">[], order: OrderLineInput[], isExternal: boolean) => {
|
||||
const sumTotal = (products: Omit<SchemaProduct, "userCounts">[], order: OrderLineInput[], isExternal: boolean) => {
|
||||
const prices = order.map((orderLine: OrderLineInput) => {
|
||||
const product = products.find((product: Omit<Product, "userCounts">) => product.id === orderLine.productId);
|
||||
const product = products.find((product: Omit<SchemaProduct, "userCounts">) => product.id === orderLine.productId);
|
||||
if (!product) return 0;
|
||||
return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
|
||||
});
|
||||
@@ -60,7 +60,7 @@ export const useRegister = () => {
|
||||
let res;
|
||||
try {
|
||||
res = await createOrderMutation();
|
||||
} catch (e) {
|
||||
} catch {
|
||||
showToast("Whoops");
|
||||
console.log("woops");
|
||||
return;
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
|
||||
import { Bar, BarDatum } from "@nivo/bar";
|
||||
import React from "react";
|
||||
|
||||
import { OrderStatsDocument, OrderStatsByTime } from "../../types";
|
||||
import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
|
||||
import { StatsView } from "./StatsView";
|
||||
|
||||
const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
|
||||
@@ -42,7 +42,7 @@ const OrderStats = () => {
|
||||
<StatsView loading={loading}>
|
||||
<h3>Ordre per time</h3>
|
||||
<OrderBar
|
||||
data={(data?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
|
||||
data={(data?.orderStats?.hourly || []).map((stat: SchemaOrderStatsByTime) => ({
|
||||
id: `${stat.period.toString().padStart(2, "0")}:00`,
|
||||
label: stat.period,
|
||||
value: stat.count,
|
||||
@@ -50,7 +50,7 @@ const OrderStats = () => {
|
||||
/>
|
||||
<h3>Ordre per ukedag</h3>
|
||||
<OrderBar
|
||||
data={(data?.orderStats?.daily || []).map((stat: OrderStatsByTime) => ({
|
||||
data={(data?.orderStats?.daily || []).map((stat: SchemaOrderStatsByTime) => ({
|
||||
/* @ts-expect-error Here, stat.period can only be a key in days range. */
|
||||
id: days[stat.period],
|
||||
label: stat.period,
|
||||
@@ -59,7 +59,7 @@ const OrderStats = () => {
|
||||
/>
|
||||
<h3>Ordre per måned</h3>
|
||||
<OrderBar
|
||||
data={(data?.orderStats?.monthly || []).map((stat: OrderStatsByTime) => ({
|
||||
data={(data?.orderStats?.monthly || []).map((stat: SchemaOrderStatsByTime) => ({
|
||||
/* @ts-expect-error Here, stat.period can only be a key in months range. */
|
||||
id: months[stat.period],
|
||||
label: stat.period,
|
||||
@@ -68,7 +68,7 @@ const OrderStats = () => {
|
||||
/>
|
||||
<h3>Ordre per år</h3>
|
||||
<OrderBar
|
||||
data={(data?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
|
||||
data={(data?.orderStats?.yearly || []).map((stat: SchemaOrderStatsByTime) => ({
|
||||
id: stat.period,
|
||||
label: stat.period,
|
||||
value: stat.count,
|
||||
|
||||
@@ -8,14 +8,13 @@ import { StatsView } from "./StatsView";
|
||||
const Stats = () => {
|
||||
const { data, loading } = useQuery(ProductStatsDocument);
|
||||
|
||||
const series: any[] = [];
|
||||
(data?.productStats || [])?.forEach(({ productName: id, data }) => {
|
||||
const lineData: any[] = [];
|
||||
data.forEach((point, index) => {
|
||||
lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
|
||||
});
|
||||
series.push({ id, data: lineData });
|
||||
});
|
||||
const series = (data?.productStats || []).map(({ productName: id, data }) => ({
|
||||
id,
|
||||
data: data.map((point, index, points) => ({
|
||||
x: point.x,
|
||||
y: point.y + (points[index - 1]?.y || 0),
|
||||
})),
|
||||
}));
|
||||
|
||||
return (
|
||||
<StatsView loading={loading}>
|
||||
@@ -59,8 +58,8 @@ const Stats = () => {
|
||||
<strong>{point.data.xFormatted}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
|
||||
<strong>{point.data.yFormatted}</strong> {point.serieId}
|
||||
<span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
|
||||
<strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
.user {
|
||||
display: flex;
|
||||
max-height: 82px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid transparent;
|
||||
background: rgb(35, 15, 41);
|
||||
border-radius: 4px;
|
||||
color: var(--text);
|
||||
transition: background-color 0.1s ease-out, border 0.1s ease-out;
|
||||
max-height: 82px;
|
||||
transition:
|
||||
background-color 0.1s ease-out,
|
||||
border 0.1s ease-out;
|
||||
}
|
||||
|
||||
.user:hover {
|
||||
@@ -17,16 +19,19 @@
|
||||
.user:hover,
|
||||
.active.user {
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
|
||||
box-shadow:
|
||||
0 0 4px var(--background),
|
||||
0 0 11px var(--background),
|
||||
0 0 19px var(--background);
|
||||
}
|
||||
.active.user {
|
||||
border-left: 4px solid var(--sun)
|
||||
border-left: 4px solid var(--sun);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: 1rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 1rem;
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
.avatarWrap {
|
||||
@@ -35,10 +40,10 @@
|
||||
}
|
||||
|
||||
.noAvatar {
|
||||
margin-left: 1rem;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 1rem;
|
||||
background-color: black;
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
content: "";
|
||||
@@ -46,16 +51,16 @@
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.balance {
|
||||
color: var(--sun)
|
||||
color: var(--sun);
|
||||
}
|
||||
@@ -2,8 +2,8 @@ import clsx from "clsx";
|
||||
import React, { MouseEventHandler } from "react";
|
||||
|
||||
import { AllUsersQuery } from "../../types";
|
||||
import { formatCurrency } from "../../utils/currency";
|
||||
import styles from "./UserCard.module.css";
|
||||
import {formatCurrency} from "../../utils/currency";
|
||||
|
||||
type UserCardProps = {
|
||||
user: AllUsersQuery["allUsers"][0] | null;
|
||||
|
||||
@@ -4,7 +4,7 @@ import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { GQLError } from "../../components/GQLError";
|
||||
import { User, UserDetailDocument, UserProfile } from "../../types";
|
||||
import { SchemaUser as User, UserDetailDocument, SchemaUserProfile as UserProfile } from "../../types";
|
||||
import { formatMonth, formatTime } from "../../utils/time";
|
||||
import styles from "./UserDetail.module.css";
|
||||
|
||||
@@ -18,15 +18,13 @@ const UserDetail = () => {
|
||||
|
||||
const user = data?.user as User;
|
||||
const profile = user?.profile as UserProfile;
|
||||
// FIXME: types
|
||||
const series: any[] = [];
|
||||
(profile?.productOrderStats || [])?.forEach(({ productName: id, data }) => {
|
||||
const lineData: any[] = [];
|
||||
data.forEach((point, index) => {
|
||||
lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
|
||||
});
|
||||
series.push({ id, data: lineData });
|
||||
});
|
||||
const series = (profile?.productOrderStats || []).map(({ productName: id, data }) => ({
|
||||
id,
|
||||
data: data.map((point, index, points) => ({
|
||||
x: point.x,
|
||||
y: point.y + (points[index - 1]?.y || 0),
|
||||
})),
|
||||
}));
|
||||
return (
|
||||
<div className={styles.userDetail}>
|
||||
<div>
|
||||
@@ -101,8 +99,8 @@ const UserDetail = () => {
|
||||
<strong>{point.data.xFormatted}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
|
||||
<strong>{point.data.yFormatted}</strong> {point.serieId}
|
||||
<span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
|
||||
<strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
+28
-10
@@ -33,7 +33,10 @@ body {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
font-family: var(--font-family);
|
||||
text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
|
||||
text-shadow:
|
||||
0 0 4px currentColor,
|
||||
0 0 11px currentColor,
|
||||
0 0 19px currentColor;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
@@ -63,9 +66,12 @@ h5 {
|
||||
a.btn-primary {
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
box-shadow:
|
||||
0 0 4px var(--sun),
|
||||
0 0 11px var(--sun),
|
||||
0 0 19px var(--sun);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -73,11 +79,14 @@ a.btn-primary {
|
||||
button {
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--border);
|
||||
font-family: var(--font-family);
|
||||
text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
|
||||
text-shadow:
|
||||
0 0 4px currentColor,
|
||||
0 0 11px currentColor,
|
||||
0 0 19px currentColor;
|
||||
}
|
||||
button:hover {
|
||||
color: var(--text);
|
||||
@@ -86,7 +95,10 @@ button:hover {
|
||||
button.primary {
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
|
||||
box-shadow:
|
||||
0 0 4px var(--sun),
|
||||
0 0 11px var(--sun),
|
||||
0 0 19px var(--sun);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -94,12 +106,15 @@ button.primary {
|
||||
input {
|
||||
padding: 0.4rem 0.4rem;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.5rem;
|
||||
text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
|
||||
text-shadow:
|
||||
0 0 4px currentColor,
|
||||
0 0 11px currentColor,
|
||||
0 0 19px currentColor;
|
||||
}
|
||||
input:focus {
|
||||
background: rgba(85, 109, 200, 0.1);
|
||||
@@ -108,9 +123,12 @@ input:focus {
|
||||
input.btn-primary {
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
|
||||
background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
|
||||
box-shadow:
|
||||
0 0 4px var(--sun),
|
||||
0 0 11px var(--sun),
|
||||
0 0 19px var(--sun);
|
||||
color: var(--text);
|
||||
}
|
||||
::placeholder {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
|
||||
export function usePrevious(value: any) {
|
||||
export function usePrevious<T>(value: T) {
|
||||
// The ref object is a generic container whose current property is mutable ...
|
||||
// ... and can hold any value, similar to an instance property on a class
|
||||
const ref = useRef();
|
||||
const ref = useRef<T | undefined>(undefined);
|
||||
|
||||
// Store current value in ref
|
||||
useEffect(() => {
|
||||
|
||||
@@ -9,5 +9,5 @@ ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
document.getElementById("root"),
|
||||
);
|
||||
+181
-167
@@ -1,329 +1,343 @@
|
||||
/** Internal type. DO NOT USE DIRECTLY. */
|
||||
type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
|
||||
/** Internal type. DO NOT USE DIRECTLY. */
|
||||
export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
|
||||
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
|
||||
export type Maybe<T> = T | null;
|
||||
export type InputMaybe<T> = Maybe<T>;
|
||||
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
|
||||
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
|
||||
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
|
||||
/** All built-in and custom scalars, mapped to their actual values */
|
||||
export type Scalars = {
|
||||
ID: string;
|
||||
String: string;
|
||||
Boolean: boolean;
|
||||
Int: number;
|
||||
Float: number;
|
||||
ID: { input: string; output: string; }
|
||||
String: { input: string; output: string; }
|
||||
Boolean: { input: boolean; output: boolean; }
|
||||
Int: { input: number; output: number; }
|
||||
Float: { input: number; output: number; }
|
||||
/** Date with time (isoformat) */
|
||||
DateTime: any;
|
||||
DateTime: { input: string; output: string; }
|
||||
/** The GenericScalar scalar type represents a generic GraphQL scalar value that could be: List or Object. */
|
||||
JSONScalar: any;
|
||||
JSONScalar: { input: unknown; output: Array<{ name: string; count: number }>; }
|
||||
};
|
||||
|
||||
export type AboveMaxSaldo = Error & {
|
||||
export type SchemaAboveMaxSaldo = SchemaError & {
|
||||
__typename?: 'AboveMaxSaldo';
|
||||
above: Scalars['Float'];
|
||||
error: Scalars['Boolean'];
|
||||
maxSaldo: Scalars['Float'];
|
||||
message: Scalars['String'];
|
||||
message: Scalars['String']['output'];
|
||||
error: Scalars['Boolean']['output'];
|
||||
maxSaldo: Scalars['Float']['output'];
|
||||
above: Scalars['Float']['output'];
|
||||
};
|
||||
|
||||
export type CreateDepositResponse = AboveMaxSaldo | CreateDepositSuccess | FormErrors;
|
||||
export type SchemaCreateDepositResponse = SchemaCreateDepositSuccess | SchemaAboveMaxSaldo | SchemaFormErrors;
|
||||
|
||||
export type CreateDepositSuccess = {
|
||||
export type SchemaCreateDepositSuccess = {
|
||||
__typename?: 'CreateDepositSuccess';
|
||||
transaction: Transaction;
|
||||
transaction: SchemaTransaction;
|
||||
};
|
||||
|
||||
export type CreateOrderResponse = CreateOrderSuccess | FormErrors | InsufficientFunds;
|
||||
export type SchemaCreateOrderResponse = SchemaCreateOrderSuccess | SchemaInsufficientFunds | SchemaFormErrors;
|
||||
|
||||
export type CreateOrderSuccess = {
|
||||
export type SchemaCreateOrderSuccess = {
|
||||
__typename?: 'CreateOrderSuccess';
|
||||
order: Order;
|
||||
order: SchemaOrder;
|
||||
};
|
||||
|
||||
export type Error = {
|
||||
error: Scalars['Boolean'];
|
||||
message: Scalars['String'];
|
||||
export type SchemaError = {
|
||||
message: Scalars['String']['output'];
|
||||
error: Scalars['Boolean']['output'];
|
||||
};
|
||||
|
||||
export type FieldError = Error & {
|
||||
export type SchemaFieldError = SchemaError & {
|
||||
__typename?: 'FieldError';
|
||||
error: Scalars['Boolean'];
|
||||
field: Scalars['String'];
|
||||
message: Scalars['String'];
|
||||
message: Scalars['String']['output'];
|
||||
error: Scalars['Boolean']['output'];
|
||||
field: Scalars['String']['output'];
|
||||
};
|
||||
|
||||
export type FormErrors = {
|
||||
export type SchemaFormErrors = {
|
||||
__typename?: 'FormErrors';
|
||||
error: Scalars['Boolean'];
|
||||
fields: Array<FieldError>;
|
||||
message: Scalars['String'];
|
||||
fields: Array<SchemaFieldError>;
|
||||
message: Scalars['String']['output'];
|
||||
error: Scalars['Boolean']['output'];
|
||||
};
|
||||
|
||||
export type InsufficientFunds = Error & {
|
||||
export type SchemaInsufficientFunds = SchemaError & {
|
||||
__typename?: 'InsufficientFunds';
|
||||
amountLacking: Scalars['Float'];
|
||||
error: Scalars['Boolean'];
|
||||
message: Scalars['String'];
|
||||
message: Scalars['String']['output'];
|
||||
error: Scalars['Boolean']['output'];
|
||||
amountLacking: Scalars['Float']['output'];
|
||||
};
|
||||
|
||||
export type Mutation = {
|
||||
export type SchemaMutation = {
|
||||
__typename?: 'Mutation';
|
||||
createDeposit: CreateDepositResponse;
|
||||
createOrder: CreateOrderResponse;
|
||||
createUser: User;
|
||||
createOrder: SchemaCreateOrderResponse;
|
||||
createDeposit: SchemaCreateDepositResponse;
|
||||
createUser: SchemaUser;
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateDepositArgs = {
|
||||
amount: Scalars['Int'];
|
||||
userId: Scalars['ID'];
|
||||
export type SchemaMutationCreateOrderArgs = {
|
||||
customerId: Scalars['ID']['input'];
|
||||
orderLines: Array<SchemaOrderLineInput>;
|
||||
isExternal?: Scalars['Boolean']['input'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateOrderArgs = {
|
||||
customerId: Scalars['ID'];
|
||||
isExternal?: Scalars['Boolean'];
|
||||
orderLines: Array<OrderLineInput>;
|
||||
export type SchemaMutationCreateDepositArgs = {
|
||||
userId: Scalars['ID']['input'];
|
||||
amount: Scalars['Int']['input'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateUserArgs = {
|
||||
input: UserInput;
|
||||
export type SchemaMutationCreateUserArgs = {
|
||||
input: SchemaUserInput;
|
||||
};
|
||||
|
||||
export type OffsetPaginationInput = {
|
||||
limit?: Scalars['Int'];
|
||||
offset?: Scalars['Int'];
|
||||
export type SchemaOffsetPaginationInput = {
|
||||
offset?: Scalars['Int']['input'];
|
||||
limit?: Scalars['Int']['input'];
|
||||
};
|
||||
|
||||
export type Order = {
|
||||
export type SchemaOrder = {
|
||||
__typename?: 'Order';
|
||||
created: Scalars['DateTime'];
|
||||
customer?: Maybe<User>;
|
||||
id: Scalars['ID'];
|
||||
isExternal: Scalars['Boolean'];
|
||||
orderSum: Scalars['Float'];
|
||||
orderlines?: Maybe<Array<OrderLine>>;
|
||||
id: Scalars['ID']['output'];
|
||||
customer?: Maybe<SchemaUser>;
|
||||
orderSum: Scalars['Float']['output'];
|
||||
created: Scalars['DateTime']['output'];
|
||||
orderlines?: Maybe<Array<SchemaOrderLine>>;
|
||||
isExternal: Scalars['Boolean']['output'];
|
||||
};
|
||||
|
||||
export type OrderLine = {
|
||||
export type SchemaOrderLine = {
|
||||
__typename?: 'OrderLine';
|
||||
amount: Scalars['Int'];
|
||||
id: Scalars['ID'];
|
||||
order: Order;
|
||||
product: Product;
|
||||
unitPrice: Scalars['Float'];
|
||||
id: Scalars['ID']['output'];
|
||||
order: SchemaOrder;
|
||||
product: SchemaProduct;
|
||||
amount: Scalars['Int']['output'];
|
||||
unitPrice: Scalars['Float']['output'];
|
||||
};
|
||||
|
||||
export type OrderLineInput = {
|
||||
amount: Scalars['Int'];
|
||||
productId: Scalars['ID'];
|
||||
export type SchemaOrderLineInput = {
|
||||
productId: Scalars['ID']['input'];
|
||||
amount: Scalars['Int']['input'];
|
||||
};
|
||||
|
||||
export type OrderOrdering = {
|
||||
created?: InputMaybe<Ordering>;
|
||||
export type SchemaOrderOrdering = {
|
||||
created?: InputMaybe<SchemaOrdering>;
|
||||
};
|
||||
|
||||
export type OrderStats = {
|
||||
export type SchemaOrderStats = {
|
||||
__typename?: 'OrderStats';
|
||||
daily: Array<OrderStatsByTime>;
|
||||
hourly: Array<OrderStatsByTime>;
|
||||
monthly: Array<OrderStatsByTime>;
|
||||
yearly: Array<OrderStatsByTime>;
|
||||
yearly: Array<SchemaOrderStatsByTime>;
|
||||
monthly: Array<SchemaOrderStatsByTime>;
|
||||
daily: Array<SchemaOrderStatsByTime>;
|
||||
hourly: Array<SchemaOrderStatsByTime>;
|
||||
};
|
||||
|
||||
export type OrderStatsByTime = {
|
||||
export type SchemaOrderStatsByTime = {
|
||||
__typename?: 'OrderStatsByTime';
|
||||
count: Scalars['String'];
|
||||
period: Scalars['Int'];
|
||||
period: Scalars['Int']['output'];
|
||||
count: Scalars['String']['output'];
|
||||
};
|
||||
|
||||
export enum Ordering {
|
||||
export enum SchemaOrdering {
|
||||
Asc = 'ASC',
|
||||
Desc = 'DESC'
|
||||
}
|
||||
|
||||
export type Point = {
|
||||
export type SchemaPoint = {
|
||||
__typename?: 'Point';
|
||||
x: Scalars['String'];
|
||||
y: Scalars['Int'];
|
||||
x: Scalars['String']['output'];
|
||||
y: Scalars['Int']['output'];
|
||||
};
|
||||
|
||||
export type Product = {
|
||||
export type SchemaProduct = {
|
||||
__typename?: 'Product';
|
||||
id: Scalars['ID'];
|
||||
imageUrl: Scalars['String'];
|
||||
name: Scalars['String'];
|
||||
salePriceExt: Scalars['Float'];
|
||||
salePriceInt: Scalars['Float'];
|
||||
userCounts: Scalars['JSONScalar'];
|
||||
id: Scalars['ID']['output'];
|
||||
name: Scalars['String']['output'];
|
||||
imageUrl: Scalars['String']['output'];
|
||||
salePriceInt: Scalars['Float']['output'];
|
||||
salePriceExt: Scalars['Float']['output'];
|
||||
userCounts: Scalars['JSONScalar']['output'];
|
||||
};
|
||||
|
||||
export type ProductFilter = {
|
||||
active?: InputMaybe<Scalars['Boolean']>;
|
||||
id?: InputMaybe<Scalars['ID']>;
|
||||
export type SchemaProductFilter = {
|
||||
id?: InputMaybe<Scalars['ID']['input']>;
|
||||
active?: InputMaybe<Scalars['Boolean']['input']>;
|
||||
};
|
||||
|
||||
export type ProductOrderStat = {
|
||||
export type SchemaProductOrderStat = {
|
||||
__typename?: 'ProductOrderStat';
|
||||
data: Array<Point>;
|
||||
productName: Scalars['String'];
|
||||
productName: Scalars['String']['output'];
|
||||
data: Array<SchemaPoint>;
|
||||
};
|
||||
|
||||
export type Query = {
|
||||
export type SchemaQuery = {
|
||||
__typename?: 'Query';
|
||||
allOrders: Array<Order>;
|
||||
allProducts: Array<Product>;
|
||||
allUsers: Array<User>;
|
||||
orderList: Array<Order>;
|
||||
orderStats: OrderStats;
|
||||
productStats: Array<ProductOrderStat>;
|
||||
transactionList: Array<Transaction>;
|
||||
user: User;
|
||||
transactionList: Array<SchemaTransaction>;
|
||||
allProducts: Array<SchemaProduct>;
|
||||
allOrders: Array<SchemaOrder>;
|
||||
orderList: Array<SchemaOrder>;
|
||||
orderStats: SchemaOrderStats;
|
||||
productStats: Array<SchemaProductOrderStat>;
|
||||
allUsers: Array<SchemaUser>;
|
||||
user: SchemaUser;
|
||||
};
|
||||
|
||||
|
||||
export type QueryAllProductsArgs = {
|
||||
filters?: InputMaybe<ProductFilter>;
|
||||
export type SchemaQueryTransactionListArgs = {
|
||||
pagination?: InputMaybe<SchemaOffsetPaginationInput>;
|
||||
order?: InputMaybe<SchemaTransactionOrdering>;
|
||||
};
|
||||
|
||||
|
||||
export type QueryOrderListArgs = {
|
||||
order?: InputMaybe<OrderOrdering>;
|
||||
pagination?: InputMaybe<OffsetPaginationInput>;
|
||||
export type SchemaQueryAllProductsArgs = {
|
||||
filters?: InputMaybe<SchemaProductFilter>;
|
||||
};
|
||||
|
||||
|
||||
export type QueryTransactionListArgs = {
|
||||
order?: InputMaybe<TransactionOrdering>;
|
||||
pagination?: InputMaybe<OffsetPaginationInput>;
|
||||
export type SchemaQueryOrderListArgs = {
|
||||
pagination?: InputMaybe<SchemaOffsetPaginationInput>;
|
||||
order?: InputMaybe<SchemaOrderOrdering>;
|
||||
};
|
||||
|
||||
|
||||
export type QueryUserArgs = {
|
||||
userId: Scalars['ID'];
|
||||
export type SchemaQueryUserArgs = {
|
||||
userId: Scalars['ID']['input'];
|
||||
};
|
||||
|
||||
export type TopMonth = {
|
||||
export type SchemaTopMonth = {
|
||||
__typename?: 'TopMonth';
|
||||
count: Scalars['Int'];
|
||||
period: Scalars['String'];
|
||||
sum: Scalars['Int'];
|
||||
period: Scalars['String']['output'];
|
||||
count: Scalars['Int']['output'];
|
||||
sum: Scalars['Int']['output'];
|
||||
};
|
||||
|
||||
export type Transaction = {
|
||||
export type SchemaTransaction = {
|
||||
__typename?: 'Transaction';
|
||||
amount: Scalars['Float'];
|
||||
created: Scalars['DateTime'];
|
||||
id: Scalars['ID'];
|
||||
user: User;
|
||||
id: Scalars['ID']['output'];
|
||||
user: SchemaUser;
|
||||
amount: Scalars['Float']['output'];
|
||||
created: Scalars['DateTime']['output'];
|
||||
};
|
||||
|
||||
export type TransactionOrdering = {
|
||||
created?: InputMaybe<Ordering>;
|
||||
export type SchemaTransactionOrdering = {
|
||||
created?: InputMaybe<SchemaOrdering>;
|
||||
};
|
||||
|
||||
export type User = {
|
||||
export type SchemaUser = {
|
||||
__typename?: 'User';
|
||||
firstName: Scalars['String'];
|
||||
id: Scalars['ID'];
|
||||
lastName: Scalars['String'];
|
||||
profile?: Maybe<UserProfile>;
|
||||
id: Scalars['ID']['output'];
|
||||
firstName: Scalars['String']['output'];
|
||||
lastName: Scalars['String']['output'];
|
||||
profile?: Maybe<SchemaUserProfile>;
|
||||
};
|
||||
|
||||
export type UserInput = {
|
||||
email?: InputMaybe<Scalars['String']>;
|
||||
firstName?: InputMaybe<Scalars['String']>;
|
||||
lastName?: InputMaybe<Scalars['String']>;
|
||||
export type SchemaUserInput = {
|
||||
email?: InputMaybe<Scalars['String']['input']>;
|
||||
firstName?: InputMaybe<Scalars['String']['input']>;
|
||||
lastName?: InputMaybe<Scalars['String']['input']>;
|
||||
};
|
||||
|
||||
export type UserProfile = {
|
||||
export type SchemaUserProfile = {
|
||||
__typename?: 'UserProfile';
|
||||
balance: Scalars['Float'];
|
||||
id: Scalars['ID'];
|
||||
image: Scalars['String'];
|
||||
lastPurchaseDate: Scalars['DateTime'];
|
||||
orderSumTotal: Scalars['Float'];
|
||||
productOrderStats: Array<ProductOrderStat>;
|
||||
topMonths: Array<TopMonth>;
|
||||
id: Scalars['ID']['output'];
|
||||
balance: Scalars['Float']['output'];
|
||||
image: Scalars['String']['output'];
|
||||
lastPurchaseDate: Scalars['DateTime']['output'];
|
||||
orderSumTotal: Scalars['Float']['output'];
|
||||
productOrderStats: Array<SchemaProductOrderStat>;
|
||||
topMonths: Array<SchemaTopMonth>;
|
||||
};
|
||||
|
||||
export type OrderLineInput = {
|
||||
productId: string | number;
|
||||
amount: number;
|
||||
};
|
||||
|
||||
export type CreateUserMutationVariables = Exact<{
|
||||
firstName: Scalars['String'];
|
||||
lastName: Scalars['String'];
|
||||
email: Scalars['String'];
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
}>;
|
||||
|
||||
|
||||
export type CreateUserMutation = { __typename?: 'Mutation', createUser: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string } | null } };
|
||||
export type CreateUserMutation = { __typename: 'Mutation', createUser: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string } | null } };
|
||||
|
||||
export type CreateDepositMutationVariables = Exact<{
|
||||
userId: Scalars['ID'];
|
||||
amount: Scalars['Int'];
|
||||
userId: string | number;
|
||||
amount: number;
|
||||
}>;
|
||||
|
||||
|
||||
export type CreateDepositMutation = { __typename?: 'Mutation', createDeposit: { __typename?: 'AboveMaxSaldo', error: boolean, message: string, maxSaldo: number, above: number } | { __typename?: 'CreateDepositSuccess', transaction: { __typename?: 'Transaction', id: string, amount: number, user: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number } | null } } } | { __typename?: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename?: 'FieldError', field: string, message: string }> } };
|
||||
export type CreateDepositMutation = { __typename: 'Mutation', createDeposit:
|
||||
| { __typename: 'CreateDepositSuccess', transaction: { __typename: 'Transaction', id: string, amount: number, user: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number } | null } } }
|
||||
| { __typename: 'AboveMaxSaldo', error: boolean, message: string, maxSaldo: number, above: number }
|
||||
| { __typename: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename: 'FieldError', field: string, message: string }> }
|
||||
};
|
||||
|
||||
export type OrderListQueryVariables = Exact<{
|
||||
limit?: InputMaybe<Scalars['Int']>;
|
||||
offset?: InputMaybe<Scalars['Int']>;
|
||||
limit?: number | null | undefined;
|
||||
offset?: number | null | undefined;
|
||||
}>;
|
||||
|
||||
|
||||
export type OrderListQuery = { __typename?: 'Query', orderList: Array<{ __typename?: 'Order', id: string, isExternal: boolean, created: any, orderSum: number, customer?: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number } | null } | null, orderlines?: Array<{ __typename?: 'OrderLine', id: string, amount: number, unitPrice: number, product: { __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number } }> | null }> };
|
||||
export type OrderListQuery = { __typename: 'Query', orderList: Array<{ __typename: 'Order', id: string, isExternal: boolean, created: string, orderSum: number, customer: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number } | null } | null, orderlines: Array<{ __typename: 'OrderLine', id: string, amount: number, unitPrice: number, product: { __typename: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number } }> | null }> };
|
||||
|
||||
export type TransactionListQueryVariables = Exact<{
|
||||
limit?: InputMaybe<Scalars['Int']>;
|
||||
offset?: InputMaybe<Scalars['Int']>;
|
||||
limit?: number | null | undefined;
|
||||
offset?: number | null | undefined;
|
||||
}>;
|
||||
|
||||
|
||||
export type TransactionListQuery = { __typename?: 'Query', transactionList: Array<{ __typename?: 'Transaction', id: string, created: any, amount: number, user: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number } | null } }> };
|
||||
export type TransactionListQuery = { __typename: 'Query', transactionList: Array<{ __typename: 'Transaction', id: string, created: string, amount: number, user: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number } | null } }> };
|
||||
|
||||
export type AllProductsQueryVariables = Exact<{
|
||||
active: Scalars['Boolean'];
|
||||
active: boolean;
|
||||
}>;
|
||||
|
||||
|
||||
export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, imageUrl: string, salePriceExt: number, salePriceInt: number }> };
|
||||
export type AllProductsQuery = { __typename: 'Query', allProducts: Array<{ __typename: 'Product', id: string, name: string, imageUrl: string, salePriceExt: number, salePriceInt: number }> };
|
||||
|
||||
export type AllUsersQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type AllUsersQuery = { __typename?: 'Query', allUsers: Array<{ __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number, image: string, lastPurchaseDate: any } | null }> };
|
||||
export type AllUsersQuery = { __typename: 'Query', allUsers: Array<{ __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number, image: string, lastPurchaseDate: string } | null }> };
|
||||
|
||||
export type CreateOrderMutationVariables = Exact<{
|
||||
customerId: Scalars['ID'];
|
||||
customerId: string | number;
|
||||
orderLines: Array<OrderLineInput> | OrderLineInput;
|
||||
isExternal: Scalars['Boolean'];
|
||||
isExternal: boolean;
|
||||
}>;
|
||||
|
||||
|
||||
export type CreateOrderMutation = { __typename?: 'Mutation', createOrder: { __typename?: 'CreateOrderSuccess', order: { __typename?: 'Order', id: string, isExternal: boolean, orderSum: number, customer?: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number } | null } | null, orderlines?: Array<{ __typename?: 'OrderLine', id: string, amount: number, unitPrice: number, product: { __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number } }> | null } } | { __typename?: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename?: 'FieldError', field: string, message: string }> } | { __typename?: 'InsufficientFunds', error: boolean, message: string, amountLacking: number } };
|
||||
export type CreateOrderMutation = { __typename: 'Mutation', createOrder:
|
||||
| { __typename: 'CreateOrderSuccess', order: { __typename: 'Order', id: string, isExternal: boolean, orderSum: number, customer: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number } | null } | null, orderlines: Array<{ __typename: 'OrderLine', id: string, amount: number, unitPrice: number, product: { __typename: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number } }> | null } }
|
||||
| { __typename: 'InsufficientFunds', error: boolean, message: string, amountLacking: number }
|
||||
| { __typename: 'FormErrors', error: boolean, message: string, fields: Array<{ __typename: 'FieldError', field: string, message: string }> }
|
||||
};
|
||||
|
||||
export type AllProductStatsQueryVariables = Exact<{
|
||||
active?: InputMaybe<Scalars['Boolean']>;
|
||||
active?: boolean | null | undefined;
|
||||
}>;
|
||||
|
||||
|
||||
export type AllProductStatsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, userCounts: any }> };
|
||||
export type AllProductStatsQuery = { __typename: 'Query', allProducts: Array<{ __typename: 'Product', id: string, name: string, userCounts: Array<{ name: string; count: number }> }> };
|
||||
|
||||
export type OrderStatsQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type OrderStatsQuery = { __typename?: 'Query', orderStats: { __typename?: 'OrderStats', yearly: Array<{ __typename?: 'OrderStatsByTime', period: number, count: string }>, monthly: Array<{ __typename?: 'OrderStatsByTime', period: number, count: string }>, daily: Array<{ __typename?: 'OrderStatsByTime', period: number, count: string }>, hourly: Array<{ __typename?: 'OrderStatsByTime', period: number, count: string }> } };
|
||||
export type OrderStatsQuery = { __typename: 'Query', orderStats: { __typename: 'OrderStats', yearly: Array<{ __typename: 'OrderStatsByTime', period: number, count: string }>, monthly: Array<{ __typename: 'OrderStatsByTime', period: number, count: string }>, daily: Array<{ __typename: 'OrderStatsByTime', period: number, count: string }>, hourly: Array<{ __typename: 'OrderStatsByTime', period: number, count: string }> } };
|
||||
|
||||
export type ProductStatsQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type ProductStatsQuery = { __typename?: 'Query', productStats: Array<{ __typename?: 'ProductOrderStat', productName: string, data: Array<{ __typename?: 'Point', x: string, y: number }> }> };
|
||||
export type ProductStatsQuery = { __typename: 'Query', productStats: Array<{ __typename: 'ProductOrderStat', productName: string, data: Array<{ __typename: 'Point', x: string, y: number }> }> };
|
||||
|
||||
export type UserDetailQueryVariables = Exact<{
|
||||
userId: Scalars['ID'];
|
||||
userId: string | number;
|
||||
}>;
|
||||
|
||||
|
||||
export type UserDetailQuery = { __typename?: 'Query', user: { __typename?: 'User', id: string, firstName: string, lastName: string, profile?: { __typename?: 'UserProfile', id: string, balance: number, image: string, lastPurchaseDate: any, orderSumTotal: number, topMonths: Array<{ __typename?: 'TopMonth', period: string, sum: number, count: number }>, productOrderStats: Array<{ __typename?: 'ProductOrderStat', productName: string, data: Array<{ __typename?: 'Point', x: string, y: number }> }> } | null } };
|
||||
export type UserDetailQuery = { __typename: 'Query', user: { __typename: 'User', id: string, firstName: string, lastName: string, profile: { __typename: 'UserProfile', id: string, balance: number, image: string, lastPurchaseDate: string, orderSumTotal: number, topMonths: Array<{ __typename: 'TopMonth', period: string, sum: number, count: number }>, productOrderStats: Array<{ __typename: 'ProductOrderStat', productName: string, data: Array<{ __typename: 'Point', x: string, y: number }> }> } | null } };
|
||||
|
||||
|
||||
export const CreateUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"firstName"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastName"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"firstName"},"value":{"kind":"Variable","name":{"kind":"Name","value":"firstName"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"lastName"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastName"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"profile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<CreateUserMutation, CreateUserMutationVariables>;
|
||||
|
||||
Vendored
+2
-5
@@ -1,8 +1,5 @@
|
||||
/* svgs */
|
||||
declare module "*.svg" {
|
||||
import { ReactElement, SVGProps } from "react";
|
||||
export const ReactComponent: (props: SVGProps<SVGElement>) => ReactElement;
|
||||
}
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
|
||||
/* CSS modules */
|
||||
declare module "*.module.css";
|
||||
|
||||
|
||||
@@ -2,6 +2,6 @@ export function formatCurrency(value: number) {
|
||||
if (isNaN(value)) {
|
||||
return "";
|
||||
} else {
|
||||
return value.toFixed(2).replace(/\.00$/, '');
|
||||
return value.toFixed(2).replace(/\.00$/, "");
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@ type FilterableUser = AllUsersQuery["allUsers"][0];
|
||||
|
||||
export const activeUserFilter = (user: FilterableUser) => {
|
||||
const balance = user.profile?.balance || 0;
|
||||
const active = parseISO(user.profile?.lastPurchaseDate) >= subDays(new Date(), activeLimitDays);
|
||||
const active =
|
||||
!!user.profile?.lastPurchaseDate && parseISO(user.profile.lastPurchaseDate) >= subDays(new Date(), activeLimitDays);
|
||||
return balance >= 15 && active;
|
||||
};
|
||||
Reference in new issue
Block a user