v1.4 - Login fixes, etc
This commit is contained in:
Generated
+350
-3
@@ -12,7 +12,8 @@
|
||||
"@sveltejs/kit": "^2.7.1",
|
||||
"svelte": "^5.0.0",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^8.0.0"
|
||||
"vite": "^8.0.0",
|
||||
"vitest": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
@@ -503,6 +504,17 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/chai": {
|
||||
"version": "5.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
|
||||
"integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/deep-eql": "*",
|
||||
"assertion-error": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
@@ -510,6 +522,13 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/deep-eql": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
|
||||
"integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -524,6 +543,119 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitest/expect": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.5.tgz",
|
||||
"integrity": "sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.1.0",
|
||||
"@types/chai": "^5.2.2",
|
||||
"@vitest/spy": "4.1.5",
|
||||
"@vitest/utils": "4.1.5",
|
||||
"chai": "^6.2.2",
|
||||
"tinyrainbow": "^3.1.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/mocker": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.5.tgz",
|
||||
"integrity": "sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vitest/spy": "4.1.5",
|
||||
"estree-walker": "^3.0.3",
|
||||
"magic-string": "^0.30.21"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"msw": "^2.4.9",
|
||||
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"msw": {
|
||||
"optional": true
|
||||
},
|
||||
"vite": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/pretty-format": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.5.tgz",
|
||||
"integrity": "sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tinyrainbow": "^3.1.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/runner": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.5.tgz",
|
||||
"integrity": "sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vitest/utils": "4.1.5",
|
||||
"pathe": "^2.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/snapshot": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.5.tgz",
|
||||
"integrity": "sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vitest/pretty-format": "4.1.5",
|
||||
"@vitest/utils": "4.1.5",
|
||||
"magic-string": "^0.30.21",
|
||||
"pathe": "^2.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/spy": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.5.tgz",
|
||||
"integrity": "sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/utils": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.5.tgz",
|
||||
"integrity": "sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vitest/pretty-format": "4.1.5",
|
||||
"convert-source-map": "^2.0.0",
|
||||
"tinyrainbow": "^3.1.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.16.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
|
||||
@@ -547,6 +679,16 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/assertion-error": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
|
||||
"integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
@@ -557,6 +699,16 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/chai": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
|
||||
"integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
@@ -567,6 +719,13 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/convert-source-map": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
|
||||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
|
||||
@@ -605,6 +764,13 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/es-module-lexer": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
|
||||
"integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esm-env": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
|
||||
@@ -630,6 +796,26 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
|
||||
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/expect-type": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
|
||||
"integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
|
||||
@@ -1010,8 +1196,14 @@
|
||||
"https://github.com/sponsors/sxzz",
|
||||
"https://opencollective.com/debug"
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pathe": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
|
||||
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
@@ -1103,6 +1295,13 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/siginfo": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
|
||||
"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
|
||||
@@ -1128,6 +1327,20 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/stackback": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
|
||||
"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/std-env": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
|
||||
"integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/svelte": {
|
||||
"version": "5.55.5",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.5.tgz",
|
||||
@@ -1156,6 +1369,23 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/tinybench": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
|
||||
"integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
|
||||
"integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.16",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
|
||||
@@ -1173,6 +1403,16 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyrainbow": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
|
||||
"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/totalist": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
|
||||
@@ -1304,6 +1544,113 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vitest": {
|
||||
"version": "4.1.5",
|
||||
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.5.tgz",
|
||||
"integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vitest/expect": "4.1.5",
|
||||
"@vitest/mocker": "4.1.5",
|
||||
"@vitest/pretty-format": "4.1.5",
|
||||
"@vitest/runner": "4.1.5",
|
||||
"@vitest/snapshot": "4.1.5",
|
||||
"@vitest/spy": "4.1.5",
|
||||
"@vitest/utils": "4.1.5",
|
||||
"es-module-lexer": "^2.0.0",
|
||||
"expect-type": "^1.3.0",
|
||||
"magic-string": "^0.30.21",
|
||||
"obug": "^2.1.1",
|
||||
"pathe": "^2.0.3",
|
||||
"picomatch": "^4.0.3",
|
||||
"std-env": "^4.0.0-rc.1",
|
||||
"tinybench": "^2.9.0",
|
||||
"tinyexec": "^1.0.2",
|
||||
"tinyglobby": "^0.2.15",
|
||||
"tinyrainbow": "^3.1.0",
|
||||
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
|
||||
"why-is-node-running": "^2.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"vitest": "vitest.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.0.0 || ^22.0.0 || >=24.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@edge-runtime/vm": "*",
|
||||
"@opentelemetry/api": "^1.9.0",
|
||||
"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
|
||||
"@vitest/browser-playwright": "4.1.5",
|
||||
"@vitest/browser-preview": "4.1.5",
|
||||
"@vitest/browser-webdriverio": "4.1.5",
|
||||
"@vitest/coverage-istanbul": "4.1.5",
|
||||
"@vitest/coverage-v8": "4.1.5",
|
||||
"@vitest/ui": "4.1.5",
|
||||
"happy-dom": "*",
|
||||
"jsdom": "*",
|
||||
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@edge-runtime/vm": {
|
||||
"optional": true
|
||||
},
|
||||
"@opentelemetry/api": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/browser-playwright": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/browser-preview": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/browser-webdriverio": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/coverage-istanbul": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/coverage-v8": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitest/ui": {
|
||||
"optional": true
|
||||
},
|
||||
"happy-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"jsdom": {
|
||||
"optional": true
|
||||
},
|
||||
"vite": {
|
||||
"optional": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/why-is-node-running": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
|
||||
"integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"siginfo": "^2.0.0",
|
||||
"stackback": "0.0.2"
|
||||
},
|
||||
"bin": {
|
||||
"why-is-node-running": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/zimmerframe": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
|
||||
|
||||
@@ -6,13 +6,15 @@
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.2.0",
|
||||
"@sveltejs/kit": "^2.7.1",
|
||||
"svelte": "^5.0.0",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^8.0.0"
|
||||
"vite": "^8.0.0",
|
||||
"vitest": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { api } from './api';
|
||||
|
||||
type JsonRecord = Record<string, unknown>;
|
||||
|
||||
function jsonResponse(body: JsonRecord[] | JsonRecord) {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
describe('api fetch injection', () => {
|
||||
const originalFetch = globalThis.fetch;
|
||||
|
||||
afterEach(() => {
|
||||
globalThis.fetch = originalFetch;
|
||||
});
|
||||
|
||||
it.each([
|
||||
{
|
||||
label: 'raw materials',
|
||||
call: (fetcher: typeof fetch) => api.rawMaterials(fetcher),
|
||||
path: '/api/raw-materials',
|
||||
body: [{ id: 1, name: 'Lime' }]
|
||||
},
|
||||
{
|
||||
label: 'mixes',
|
||||
call: (fetcher: typeof fetch) => api.mixes(fetcher),
|
||||
path: '/api/mixes',
|
||||
body: [{ id: 12, name: 'Orchard Blend' }]
|
||||
},
|
||||
{
|
||||
label: 'products',
|
||||
call: (fetcher: typeof fetch) => api.products(fetcher),
|
||||
path: '/api/products',
|
||||
body: [{ id: 8, name: 'Packhouse Bag' }]
|
||||
},
|
||||
{
|
||||
label: 'product costs',
|
||||
call: (fetcher: typeof fetch) => api.productCosts(fetcher),
|
||||
path: '/api/powerbi/product-costs',
|
||||
body: [{ product_id: 8, finished_product_delivered: 14.2 }]
|
||||
}
|
||||
])('uses the injected fetch for $label reads', async ({ call, path, body }) => {
|
||||
const globalFetch = vi.fn(() => {
|
||||
throw new Error('global fetch should not be used');
|
||||
}) as typeof fetch;
|
||||
const injectedFetch = vi.fn(async () => jsonResponse(body)) as typeof fetch;
|
||||
|
||||
globalThis.fetch = globalFetch;
|
||||
|
||||
await expect(call(injectedFetch)).resolves.toEqual(body);
|
||||
expect(injectedFetch).toHaveBeenCalledTimes(1);
|
||||
expect(injectedFetch.mock.calls[0]?.[0]).toBe(`http://127.0.0.1:8000${path}`);
|
||||
expect(globalFetch).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
+39
-14
@@ -28,9 +28,27 @@ import type {
|
||||
} from '$lib/types';
|
||||
import { getStoredAdminSession, getStoredClientSession } from '$lib/session';
|
||||
|
||||
const API_BASE_URL = env.PUBLIC_API_BASE_URL || 'http://localhost:8000';
|
||||
const DEFAULT_API_PORT = env.PUBLIC_API_PORT || '8000';
|
||||
|
||||
type AuthMode = 'none' | 'client' | 'admin';
|
||||
type ApiFetch = typeof fetch;
|
||||
|
||||
function getApiBaseUrl() {
|
||||
const configuredBaseUrl = env.PUBLIC_API_BASE_URL?.trim();
|
||||
if (configuredBaseUrl) {
|
||||
return configuredBaseUrl.replace(/\/+$/, '');
|
||||
}
|
||||
|
||||
if (browser) {
|
||||
return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_API_PORT}`;
|
||||
}
|
||||
|
||||
return `http://127.0.0.1:${DEFAULT_API_PORT}`;
|
||||
}
|
||||
|
||||
function buildApiUrl(path: string) {
|
||||
return `${getApiBaseUrl()}${path}`;
|
||||
}
|
||||
|
||||
function getToken(auth: AuthMode) {
|
||||
if (!browser) {
|
||||
@@ -48,10 +66,10 @@ function getToken(auth: AuthMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
async function fetchJson<T>(path: string, fallback: T, auth: AuthMode = 'none'): Promise<T> {
|
||||
async function fetchJson<T>(path: string, fallback: T, auth: AuthMode = 'none', fetcher: ApiFetch = fetch): Promise<T> {
|
||||
try {
|
||||
const token = getToken(auth);
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, {
|
||||
const response = await fetcher(buildApiUrl(path), {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : undefined
|
||||
});
|
||||
if (!response.ok) {
|
||||
@@ -69,9 +87,14 @@ async function fetchJson<T>(path: string, fallback: T, auth: AuthMode = 'none'):
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(path: string, options: RequestInit, auth: AuthMode = 'none'): Promise<T> {
|
||||
async function request<T>(
|
||||
path: string,
|
||||
options: RequestInit,
|
||||
auth: AuthMode = 'none',
|
||||
fetcher: ApiFetch = fetch
|
||||
): Promise<T> {
|
||||
const token = getToken(auth);
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, {
|
||||
const response = await fetcher(buildApiUrl(path), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
@@ -97,15 +120,17 @@ async function request<T>(path: string, options: RequestInit, auth: AuthMode = '
|
||||
}
|
||||
|
||||
export const api = {
|
||||
rawMaterials: () => fetchJson<RawMaterial[]>('/api/raw-materials', mockRawMaterials, 'client'),
|
||||
mixes: () => fetchJson('/api/mixes', mockMixes, 'client'),
|
||||
mix: (mixId: number) => request<Mix>(`/api/mixes/${mixId}`, { method: 'GET' }, 'client'),
|
||||
products: () => fetchJson<Product[]>('/api/products', mockProducts, 'client'),
|
||||
productCosts: () => fetchJson<ProductCostBreakdown[]>('/api/powerbi/product-costs', mockCosts, 'client'),
|
||||
scenarios: () => fetchJson<Scenario[]>('/api/scenarios', mockScenarios, 'client'),
|
||||
clientAccess: () => fetchJson<ClientAccessAccount[]>('/api/client-access', mockClientAccess, 'admin'),
|
||||
clientAccessExport: () => fetchJson<ClientAccessPowerBiExport>('/api/powerbi/client-access', mockClientAccessExport, 'admin'),
|
||||
dataQuality: () => fetchJson('/api/powerbi/data-quality-issues', [], 'client'),
|
||||
rawMaterials: (fetcher?: ApiFetch) => fetchJson<RawMaterial[]>('/api/raw-materials', mockRawMaterials, 'client', fetcher),
|
||||
mixes: (fetcher?: ApiFetch) => fetchJson('/api/mixes', mockMixes, 'client', fetcher),
|
||||
mix: (mixId: number, fetcher?: ApiFetch) => request<Mix>(`/api/mixes/${mixId}`, { method: 'GET' }, 'client', fetcher),
|
||||
products: (fetcher?: ApiFetch) => fetchJson<Product[]>('/api/products', mockProducts, 'client', fetcher),
|
||||
productCosts: (fetcher?: ApiFetch) =>
|
||||
fetchJson<ProductCostBreakdown[]>('/api/powerbi/product-costs', mockCosts, 'client', fetcher),
|
||||
scenarios: (fetcher?: ApiFetch) => fetchJson<Scenario[]>('/api/scenarios', mockScenarios, 'client', fetcher),
|
||||
clientAccess: (fetcher?: ApiFetch) => fetchJson<ClientAccessAccount[]>('/api/client-access', mockClientAccess, 'admin', fetcher),
|
||||
clientAccessExport: (fetcher?: ApiFetch) =>
|
||||
fetchJson<ClientAccessPowerBiExport>('/api/powerbi/client-access', mockClientAccessExport, 'admin', fetcher),
|
||||
dataQuality: (fetcher?: ApiFetch) => fetchJson('/api/powerbi/data-quality-issues', [], 'client', fetcher),
|
||||
clientLogin: (email: string, password: string) =>
|
||||
request<LoginResponse>('/api/auth/client/login', {
|
||||
method: 'POST',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { adminSession } from '$lib/session';
|
||||
import { adminSession, sessionHydrated } from '$lib/session';
|
||||
|
||||
const navigation = [
|
||||
{ href: '/admin', label: 'Overview', shortLabel: 'OV' },
|
||||
@@ -8,6 +9,8 @@
|
||||
];
|
||||
|
||||
let { children } = $props();
|
||||
let isRestoringSession = $state(false);
|
||||
let restoredToken = $state<string | null>(null);
|
||||
|
||||
function matchesRoute(href: string, pathname: string) {
|
||||
return href === '/admin' ? pathname === '/admin' : pathname.startsWith(href);
|
||||
@@ -27,6 +30,34 @@
|
||||
}
|
||||
|
||||
const isProtectedRoute = $derived(page.url.pathname !== '/admin');
|
||||
|
||||
$effect(() => {
|
||||
const hydrated = $sessionHydrated;
|
||||
const token = $adminSession?.token ?? null;
|
||||
|
||||
if (!hydrated) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
isRestoringSession = false;
|
||||
restoredToken = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (restoredToken === token) {
|
||||
return;
|
||||
}
|
||||
|
||||
restoredToken = token;
|
||||
isRestoringSession = true;
|
||||
|
||||
invalidateAll().finally(() => {
|
||||
if (restoredToken === token) {
|
||||
isRestoringSession = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -68,7 +99,15 @@
|
||||
<h1>{pageTitle(page.url.pathname)}</h1>
|
||||
</div>
|
||||
|
||||
{#if $adminSession}
|
||||
{#if !$sessionHydrated}
|
||||
<div class="profile-card guest">
|
||||
<span class="profile-avatar">A</span>
|
||||
<div>
|
||||
<strong>Checking saved session</strong>
|
||||
<span>Restoring admin access</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else if $adminSession}
|
||||
<div class="profile-card">
|
||||
<span class="profile-avatar">{initials($adminSession.name)}</span>
|
||||
<div>
|
||||
@@ -88,7 +127,13 @@
|
||||
</header>
|
||||
|
||||
<main class="admin-content">
|
||||
{#if isProtectedRoute && !$adminSession}
|
||||
{#if isProtectedRoute && (!$sessionHydrated || isRestoringSession)}
|
||||
<section class="locked-card loading-card">
|
||||
<p class="eyebrow">Checking Session</p>
|
||||
<h2>Restoring the Lean 101 admin workspace.</h2>
|
||||
<p>Refreshing the current route with the saved operator session before prompting for sign-in.</p>
|
||||
</section>
|
||||
{:else if isProtectedRoute && !$adminSession}
|
||||
<section class="locked-card">
|
||||
<p class="eyebrow">Restricted</p>
|
||||
<h2>Sign in through the Lean 101 Admin Panel to continue.</h2>
|
||||
@@ -284,6 +329,10 @@
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 17, 0.08);
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.locked-card h2,
|
||||
.locked-card p {
|
||||
margin: 0;
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { clientSession } from '$lib/session';
|
||||
import { clientSession, sessionHydrated } from '$lib/session';
|
||||
import { onMount, tick } from 'svelte';
|
||||
import packageInfo from '../../../package.json';
|
||||
|
||||
type SearchItem = {
|
||||
href: string;
|
||||
@@ -23,6 +25,7 @@
|
||||
{ href: '/products', label: 'Delivered Pricing', shortLabel: 'DP' },
|
||||
{ href: '/scenarios', label: 'Planning View', shortLabel: 'PV' }
|
||||
];
|
||||
const primaryBottomNavigation = navigation.slice(0, 4);
|
||||
|
||||
const searchItems: SearchItem[] = [
|
||||
{
|
||||
@@ -55,6 +58,12 @@
|
||||
description: 'Review delivered product pricing and margins.',
|
||||
keywords: 'products pricing margins delivered outputs'
|
||||
},
|
||||
{
|
||||
href: '/settings',
|
||||
label: 'Open Workspace Settings',
|
||||
description: 'Review account details and workspace preferences.',
|
||||
keywords: 'settings account preferences profile workspace'
|
||||
},
|
||||
{
|
||||
href: '/scenarios',
|
||||
label: 'Open Scenarios',
|
||||
@@ -69,7 +78,14 @@
|
||||
let paletteOpen = $state(false);
|
||||
let paletteQuery = $state('');
|
||||
let quickMenuOpen = $state(false);
|
||||
let userMenuOpen = $state(false);
|
||||
let navOpen = $state(false);
|
||||
let showBottomNav = $state(false);
|
||||
let isRestoringSession = $state(false);
|
||||
let restoredToken = $state<string | null>(null);
|
||||
let paletteInput: HTMLInputElement | null = $state(null);
|
||||
const appVersion = `v${packageInfo.version}`;
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
function matchesRoute(href: string, pathname: string) {
|
||||
return href === '/' ? pathname === '/' : pathname.startsWith(href);
|
||||
@@ -86,6 +102,7 @@
|
||||
'/mixes': 'Browse saved mix worksheets and costing outputs',
|
||||
'/mixes/new': 'Create a new mix worksheet for Hunter Premium Produce',
|
||||
'/products': 'Track delivered product pricing and margin views',
|
||||
'/settings': 'Review your workspace profile and application settings',
|
||||
'/scenarios': 'Compare alternate pricing and production assumptions'
|
||||
};
|
||||
|
||||
@@ -96,6 +113,16 @@
|
||||
paletteQuery = query;
|
||||
paletteOpen = true;
|
||||
quickMenuOpen = false;
|
||||
userMenuOpen = false;
|
||||
navOpen = false;
|
||||
}
|
||||
|
||||
function syncViewport() {
|
||||
showBottomNav = window.innerWidth <= 1180;
|
||||
|
||||
if (!showBottomNav) {
|
||||
navOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function runSearchItem(item: SearchItem) {
|
||||
@@ -104,6 +131,13 @@
|
||||
await goto(item.href);
|
||||
}
|
||||
|
||||
async function openSettings() {
|
||||
quickMenuOpen = false;
|
||||
userMenuOpen = false;
|
||||
navOpen = false;
|
||||
await goto('/settings');
|
||||
}
|
||||
|
||||
const filteredSearchItems = $derived(
|
||||
searchItems.filter((item) => {
|
||||
const haystack = `${item.label} ${item.description} ${item.keywords}`.toLowerCase();
|
||||
@@ -114,8 +148,10 @@
|
||||
$effect(() => {
|
||||
page.url.pathname;
|
||||
quickMenuOpen = false;
|
||||
userMenuOpen = false;
|
||||
paletteOpen = false;
|
||||
paletteQuery = '';
|
||||
navOpen = false;
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
@@ -124,7 +160,37 @@
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const hydrated = $sessionHydrated;
|
||||
const token = $clientSession?.token ?? null;
|
||||
|
||||
if (!hydrated) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
isRestoringSession = false;
|
||||
restoredToken = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (restoredToken === token) {
|
||||
return;
|
||||
}
|
||||
|
||||
restoredToken = token;
|
||||
isRestoringSession = true;
|
||||
|
||||
invalidateAll().finally(() => {
|
||||
if (restoredToken === token) {
|
||||
isRestoringSession = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
syncViewport();
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
const target = event.target as HTMLElement | null;
|
||||
const isTypingField =
|
||||
@@ -141,11 +207,18 @@
|
||||
if (event.key === 'Escape') {
|
||||
paletteOpen = false;
|
||||
quickMenuOpen = false;
|
||||
userMenuOpen = false;
|
||||
navOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
return () => window.removeEventListener('keydown', handleKeydown);
|
||||
window.addEventListener('resize', syncViewport);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
window.removeEventListener('resize', syncViewport);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -154,65 +227,79 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="app-shell">
|
||||
<aside class="sidebar">
|
||||
<div class="brand-row">
|
||||
<a class="brand" href="/">
|
||||
<span class="brand-mark">HP</span>
|
||||
<span>Hunter Premium Produce</span>
|
||||
</a>
|
||||
{#if showBottomNav && navOpen}
|
||||
<button aria-label="Close navigation" class="nav-backdrop" type="button" onclick={() => (navOpen = false)}></button>
|
||||
{/if}
|
||||
|
||||
<button class="nav-toggle" type="button" aria-label="Navigation options">
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="search-box" type="button" aria-label="Search the workspace" onclick={() => openPalette()}>
|
||||
<span class="search-icon"></span>
|
||||
<span class="search-placeholder">Search the workspace...</span>
|
||||
<kbd>/</kbd>
|
||||
</button>
|
||||
|
||||
<nav class="nav-list" aria-label="Client navigation">
|
||||
{#each navigation as item}
|
||||
<a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
|
||||
<span class="nav-icon">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
{#if !showBottomNav}
|
||||
<aside class="sidebar">
|
||||
<div class="brand-row">
|
||||
<a class="brand" href="/">
|
||||
<span class="brand-mark">HP</span>
|
||||
<span>Hunter Premium Produce</span>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
{#each footerLinks as item}
|
||||
<a href={item.href}>
|
||||
<span class="nav-icon muted">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</aside>
|
||||
<div class="sidebar-body">
|
||||
<button class="search-box" type="button" aria-label="Search the workspace" onclick={() => openPalette()}>
|
||||
<span class="search-icon"></span>
|
||||
<span class="search-placeholder">Search the workspace...</span>
|
||||
<kbd>/</kbd>
|
||||
</button>
|
||||
|
||||
<div class="main-shell">
|
||||
<nav class="nav-list" aria-label="Client navigation">
|
||||
{#each navigation as item}
|
||||
<a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
|
||||
<span class="nav-icon">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
{#each footerLinks as item}
|
||||
<a href={item.href}>
|
||||
<span class="nav-icon muted">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="sidebar-meta">
|
||||
<span>{appVersion}</span>
|
||||
<small>© {currentYear} Hunter Premium Produce</small>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<div class:bottom-nav-layout={showBottomNav} class="main-shell">
|
||||
<header class="topbar">
|
||||
<div class="topbar-copy">
|
||||
<h1>{pageTitle(page.url.pathname)}</h1>
|
||||
<p>{pageDescription(page.url.pathname)}</p>
|
||||
<div class="topbar-start">
|
||||
<div class="topbar-copy">
|
||||
<h1>{pageTitle(page.url.pathname)}</h1>
|
||||
<p>{pageDescription(page.url.pathname)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-middle">
|
||||
<button class="search-box topbar-search" type="button" aria-label="Search the workspace" onclick={() => openPalette()}>
|
||||
<span class="search-icon"></span>
|
||||
<span class="search-placeholder">Search pages, mixes, products, and settings...</span>
|
||||
<kbd>/</kbd>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="topbar-actions">
|
||||
{#if $clientSession}
|
||||
<button class="workspace-chip session-chip" type="button" onclick={() => clientSession.clear()}>
|
||||
<span class="workspace-label">Signed in</span>
|
||||
<strong>{$clientSession.email}</strong>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="workspace-chip">
|
||||
<span class="workspace-label">Client</span>
|
||||
<strong>Sign in required</strong>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="menu-wrap">
|
||||
<button class="action-button" type="button" onclick={() => (quickMenuOpen = !quickMenuOpen)}>
|
||||
<button
|
||||
class="action-button"
|
||||
type="button"
|
||||
onclick={() => {
|
||||
quickMenuOpen = !quickMenuOpen;
|
||||
userMenuOpen = false;
|
||||
}}
|
||||
>
|
||||
Quick Actions
|
||||
<span class:open={quickMenuOpen} class="chevron"></span>
|
||||
</button>
|
||||
@@ -226,11 +313,65 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="menu-wrap user-menu-wrap">
|
||||
<button
|
||||
aria-expanded={userMenuOpen}
|
||||
class="user-trigger"
|
||||
type="button"
|
||||
onclick={() => {
|
||||
userMenuOpen = !userMenuOpen;
|
||||
quickMenuOpen = false;
|
||||
}}
|
||||
>
|
||||
<span class={`user-status-dot ${$clientSession ? 'live' : 'idle'}`}></span>
|
||||
<span class="user-trigger-copy">
|
||||
<span class="workspace-label">{$sessionHydrated ? ($clientSession ? 'Signed in' : 'Signed out') : 'Checking session'}</span>
|
||||
<strong>{$sessionHydrated ? ($clientSession ? $clientSession.email : 'Sign in required') : 'Restoring workspace access'}</strong>
|
||||
</span>
|
||||
<span class:open={userMenuOpen} class="chevron"></span>
|
||||
</button>
|
||||
|
||||
{#if userMenuOpen}
|
||||
<div class="menu-panel user-menu-panel">
|
||||
<div class="user-menu-summary">
|
||||
<strong>
|
||||
{$sessionHydrated
|
||||
? $clientSession
|
||||
? $clientSession.name || 'Client account'
|
||||
: 'Client session inactive'
|
||||
: 'Checking saved client session'}
|
||||
</strong>
|
||||
<span>
|
||||
{$sessionHydrated
|
||||
? $clientSession
|
||||
? $clientSession.email
|
||||
: 'Return to the overview page to sign in.'
|
||||
: 'Waiting for the browser session check to complete.'}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" onclick={openSettings}>Change settings</button>
|
||||
{#if $clientSession}
|
||||
<button type="button" onclick={() => clientSession.clear()}>Log out</button>
|
||||
{:else if !$sessionHydrated}
|
||||
<button type="button" disabled>Checking session...</button>
|
||||
{:else}
|
||||
<a href="/">Go to sign-in</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
{#if !isRootRoute && !$clientSession}
|
||||
{#if !isRootRoute && (!$sessionHydrated || isRestoringSession)}
|
||||
<section class="locked-card loading-card">
|
||||
<p class="workspace-label">Checking Session</p>
|
||||
<h2>Restoring your client workspace.</h2>
|
||||
<p>Refreshing the current page with the saved browser session before deciding whether sign-in is required.</p>
|
||||
</section>
|
||||
{:else if !isRootRoute && !$clientSession}
|
||||
<section class="locked-card">
|
||||
<p class="workspace-label">Client Sign-In Required</p>
|
||||
<h2>Sign in on the Hunter Premium Produce home page to unlock workspace data.</h2>
|
||||
@@ -244,6 +385,95 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showBottomNav}
|
||||
<nav class="bottom-nav" aria-label="Tablet navigation">
|
||||
{#each primaryBottomNavigation as item}
|
||||
<a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href}>
|
||||
<span class="bottom-nav-icon">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
<button aria-expanded={navOpen} class:active={navOpen} type="button" onclick={() => (navOpen = !navOpen)}>
|
||||
<span class="bottom-nav-icon muted">+</span>
|
||||
<span>More</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{#if navOpen}
|
||||
<section
|
||||
aria-label="Tablet navigation drawer"
|
||||
class="bottom-drawer"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
onclick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div class="drawer-handle"></div>
|
||||
|
||||
<div class="drawer-header">
|
||||
<div>
|
||||
<p class="workspace-label">Workspace Drawer</p>
|
||||
<strong>Hunter Premium Produce</strong>
|
||||
</div>
|
||||
<button aria-label="Close drawer" class="nav-toggle" type="button" onclick={() => (navOpen = false)}>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="search-box drawer-search" type="button" aria-label="Search the workspace" onclick={() => openPalette()}>
|
||||
<span class="search-icon"></span>
|
||||
<span class="search-placeholder">Search the workspace...</span>
|
||||
<kbd>/</kbd>
|
||||
</button>
|
||||
|
||||
<div class="drawer-grid">
|
||||
<nav class="drawer-section" aria-label="All workspace pages">
|
||||
{#each navigation as item}
|
||||
<a class:active={matchesRoute(item.href, page.url.pathname)} href={item.href} onclick={() => (navOpen = false)}>
|
||||
<span class="nav-icon">{item.shortLabel}</span>
|
||||
<span>{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="drawer-section drawer-actions">
|
||||
<a href="/mixes/new" onclick={() => (navOpen = false)}>
|
||||
<span class="nav-icon">NW</span>
|
||||
<span>Create mix worksheet</span>
|
||||
</a>
|
||||
<button type="button" onclick={openSettings}>
|
||||
<span class="nav-icon muted">ST</span>
|
||||
<span>Change settings</span>
|
||||
</button>
|
||||
<a href="/products" onclick={() => (navOpen = false)}>
|
||||
<span class="nav-icon muted">DP</span>
|
||||
<span>Review delivered pricing</span>
|
||||
</a>
|
||||
<button type="button" onclick={() => openPalette('')}>
|
||||
<span class="nav-icon muted">SR</span>
|
||||
<span>Search the workspace</span>
|
||||
</button>
|
||||
{#if $clientSession}
|
||||
<button type="button" onclick={() => clientSession.clear()}>
|
||||
<span class="nav-icon muted">SO</span>
|
||||
<span>Sign out</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-footer">
|
||||
{#each footerLinks as item}
|
||||
<a href={item.href} onclick={() => (navOpen = false)}>
|
||||
<span>{item.label}</span>
|
||||
<small>{item.shortLabel}</small>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if paletteOpen}
|
||||
<div class="palette-overlay" role="presentation" onclick={() => (paletteOpen = false)}>
|
||||
<div
|
||||
@@ -340,6 +570,10 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -349,6 +583,14 @@
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -401,6 +643,10 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.topbar-nav-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-toggle span,
|
||||
.search-icon,
|
||||
.chevron {
|
||||
@@ -521,6 +767,18 @@
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
.sidebar-meta {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
padding: 0.85rem 0.3rem 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.sidebar-meta small {
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.main-shell {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -528,15 +786,22 @@
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.1fr) auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.9rem;
|
||||
padding: 0.86rem 1.34rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.topbar-start {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.82rem;
|
||||
}
|
||||
|
||||
.topbar-copy h1,
|
||||
.topbar-copy p {
|
||||
margin: 0;
|
||||
@@ -553,6 +818,15 @@
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.topbar-middle {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-search {
|
||||
min-height: 3rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -600,6 +874,73 @@
|
||||
color: #304038;
|
||||
}
|
||||
|
||||
.user-trigger {
|
||||
min-width: 14rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.64rem 0.84rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.96rem;
|
||||
background: var(--panel-soft);
|
||||
color: #304038;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-status-dot {
|
||||
width: 0.72rem;
|
||||
height: 0.72rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
background: #b4c0ba;
|
||||
box-shadow: 0 0 0 0.24rem rgba(180, 192, 186, 0.2);
|
||||
}
|
||||
|
||||
.user-status-dot.live {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 0.24rem rgba(34, 169, 94, 0.14);
|
||||
}
|
||||
|
||||
.user-status-dot.idle {
|
||||
background: #c08b3d;
|
||||
box-shadow: 0 0 0 0.24rem rgba(192, 139, 61, 0.14);
|
||||
}
|
||||
|
||||
.user-trigger-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-trigger-copy strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.user-menu-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-menu-panel {
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
.user-menu-summary {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
padding: 0.72rem 0.78rem;
|
||||
border-radius: 0.82rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.user-menu-summary span {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
width: 0.54rem;
|
||||
height: 0.54rem;
|
||||
@@ -658,6 +999,10 @@
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.locked-card h2,
|
||||
.locked-card p {
|
||||
margin: 0;
|
||||
@@ -775,29 +1120,294 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.bottom-nav,
|
||||
.bottom-drawer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-shell.bottom-nav-layout .content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
.nav-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 48;
|
||||
display: block;
|
||||
border: none;
|
||||
background: rgba(11, 18, 14, 0.28);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: 0;
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
left: max(0.8rem, env(safe-area-inset-left));
|
||||
right: max(0.8rem, env(safe-area-inset-right));
|
||||
bottom: max(0.8rem, env(safe-area-inset-bottom));
|
||||
z-index: 45;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid rgba(217, 228, 221, 0.92);
|
||||
border-radius: 1.35rem;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 20px 40px rgba(15, 23, 17, 0.16);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.bottom-nav a,
|
||||
.bottom-nav button {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.34rem;
|
||||
padding: 0.62rem 0.38rem;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
background: transparent;
|
||||
color: #51635a;
|
||||
text-align: center;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-nav a.active,
|
||||
.bottom-nav button.active {
|
||||
color: var(--green-deep);
|
||||
background: linear-gradient(180deg, #f4fbf7 0%, #e8f6ee 100%);
|
||||
}
|
||||
|
||||
.bottom-nav-icon {
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.78rem;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.bottom-nav-icon.muted {
|
||||
background: linear-gradient(135deg, #96a49c 0%, #718077 100%);
|
||||
}
|
||||
|
||||
.bottom-drawer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem calc(6.6rem + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 1.6rem 1.6rem 0 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(248, 251, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
|
||||
box-shadow: 0 -20px 45px rgba(15, 23, 17, 0.16);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.drawer-handle {
|
||||
width: 3.5rem;
|
||||
height: 0.34rem;
|
||||
margin: 0 auto;
|
||||
border-radius: 999px;
|
||||
background: #c8d4ce;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.drawer-header strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.drawer-search {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.drawer-grid {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
}
|
||||
|
||||
.drawer-section {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.drawer-section a,
|
||||
.drawer-section button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.72rem;
|
||||
padding: 0.82rem 0.86rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.96rem;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #304038;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drawer-section a.active {
|
||||
color: var(--green-deep);
|
||||
background: var(--green-soft);
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.drawer-footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.82rem 0.9rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.96rem;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #304038;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.drawer-footer small {
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
padding: 0.95rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.topbar-middle {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1181px) {
|
||||
.bottom-nav-layout .content {
|
||||
padding-bottom: 1.34rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1181px) {
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.drawer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.topbar,
|
||||
.topbar-actions,
|
||||
.action-button {
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.topbar-start {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-copy h1 {
|
||||
font-size: 1.34rem;
|
||||
}
|
||||
|
||||
.topbar-middle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
left: max(0.55rem, env(safe-area-inset-left));
|
||||
right: max(0.55rem, env(safe-area-inset-right));
|
||||
bottom: max(0.55rem, env(safe-area-inset-bottom));
|
||||
gap: 0.32rem;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.bottom-nav a,
|
||||
.bottom-nav button {
|
||||
padding: 0.55rem 0.2rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.bottom-nav-icon {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.bottom-drawer {
|
||||
padding: 0.75rem 0.8rem calc(6.3rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.topbar-actions,
|
||||
.workspace-chip,
|
||||
.menu-wrap,
|
||||
.action-button,
|
||||
.user-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.92rem;
|
||||
}
|
||||
|
||||
@@ -415,7 +415,7 @@
|
||||
<tbody>
|
||||
{#each draftRows as row, index}
|
||||
<tr>
|
||||
<td>
|
||||
<td data-label="Raw Material">
|
||||
<select
|
||||
value={row.raw_material_id ?? ''}
|
||||
onchange={(event) =>
|
||||
@@ -431,10 +431,10 @@
|
||||
{/each}
|
||||
</select>
|
||||
</td>
|
||||
<td>{currency(row.marketValue)}</td>
|
||||
<td>{row.wastePercentage !== null ? `${(row.wastePercentage * 100).toFixed(1)}%` : 'N/A'}</td>
|
||||
<td>{currency(row.costPerKg, 4)}</td>
|
||||
<td>
|
||||
<td data-label="Market Value">{currency(row.marketValue)}</td>
|
||||
<td data-label="Waste %">{row.wastePercentage !== null ? `${(row.wastePercentage * 100).toFixed(1)}%` : 'N/A'}</td>
|
||||
<td data-label="Cost / Kg">{currency(row.costPerKg, 4)}</td>
|
||||
<td data-label="Qty Kg">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
@@ -445,8 +445,8 @@
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td>{currency(row.lineCost)}</td>
|
||||
<td>
|
||||
<td data-label="Line Cost">{currency(row.lineCost)}</td>
|
||||
<td data-label="Notes">
|
||||
<input
|
||||
type="text"
|
||||
value={row.notes}
|
||||
@@ -454,7 +454,7 @@
|
||||
placeholder="Optional row note"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Row Action">
|
||||
<button class="icon-delete" type="button" onclick={() => removeIngredientRow(index)}>Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -756,6 +756,7 @@
|
||||
|
||||
.sheet-table {
|
||||
width: 100%;
|
||||
min-width: 58rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0.54rem;
|
||||
}
|
||||
@@ -860,12 +861,24 @@
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.editor-grid,
|
||||
.metric-row,
|
||||
.meta-grid {
|
||||
@media (max-width: 1240px) {
|
||||
.editor-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar-stack {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.metric-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
@@ -877,8 +890,88 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.intro-actions,
|
||||
.editor-actions,
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.meta-grid,
|
||||
.sidebar-stack {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.sheet-table,
|
||||
.sheet-table thead,
|
||||
.sheet-table tbody,
|
||||
.sheet-table tr,
|
||||
.sheet-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sheet-table {
|
||||
min-width: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.sheet-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sheet-table tbody {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.sheet-table tbody tr {
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.sheet-table tbody td {
|
||||
padding: 0.78rem 0.8rem;
|
||||
white-space: normal;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sheet-table tbody td:first-child,
|
||||
.sheet-table tbody td:last-child {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.sheet-table tbody td + td {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sheet-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sheet-table input,
|
||||
.sheet-table select,
|
||||
.icon-delete {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -86,6 +86,8 @@ export const mockCosts: ProductCostBreakdown[] = [
|
||||
{
|
||||
product_id: 1,
|
||||
product_name: 'Hunter Orchard Blend 20kg',
|
||||
client_name: 'Hunter Premium Produce',
|
||||
mix_name: 'Hunter Orchard Blend',
|
||||
finished_product_delivered: 14.208,
|
||||
distributor_price: 18.3329,
|
||||
wholesale_price: 17.3268,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { writable } from 'svelte/store';
|
||||
import { readable, writable } from 'svelte/store';
|
||||
|
||||
export type AppSession = {
|
||||
name: string;
|
||||
@@ -74,5 +74,19 @@ export function hasStoredAdminSession() {
|
||||
return getStoredAdminSession() !== null;
|
||||
}
|
||||
|
||||
export const sessionHydrated = readable(false, (set) => {
|
||||
if (!browser) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const frame = window.requestAnimationFrame(() => {
|
||||
set(true);
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.cancelAnimationFrame(frame);
|
||||
};
|
||||
});
|
||||
|
||||
export const clientSession = createSessionStore(CLIENT_STORAGE_KEY);
|
||||
export const adminSession = createSessionStore(ADMIN_STORAGE_KEY);
|
||||
|
||||
@@ -97,6 +97,8 @@ export type Product = {
|
||||
export type ProductCostBreakdown = {
|
||||
product_id: number;
|
||||
product_name: string;
|
||||
client_name: string;
|
||||
mix_name: string;
|
||||
cleaned_product_cost?: number;
|
||||
grading_cost?: number;
|
||||
bagging_cost?: number;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import { clientSession } from '$lib/session';
|
||||
import { clientSession, sessionHydrated } from '$lib/session';
|
||||
import type { Mix, ProductCostBreakdown, RawMaterial } from '$lib/types';
|
||||
|
||||
type Segment = {
|
||||
@@ -42,7 +41,6 @@
|
||||
try {
|
||||
const session = await api.clientLogin(email, password);
|
||||
clientSession.set(session);
|
||||
await invalidateAll();
|
||||
} catch (error) {
|
||||
loginError = error instanceof Error ? error.message : 'Unable to sign in';
|
||||
} finally {
|
||||
@@ -253,7 +251,23 @@
|
||||
const focusCards = $derived(buildFocusCards());
|
||||
</script>
|
||||
|
||||
{#if !$clientSession}
|
||||
{#if !$sessionHydrated}
|
||||
<section class="dashboard-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Client Workspace</p>
|
||||
<h2>Restoring your workspace.</h2>
|
||||
<p>Checking the saved client session before deciding whether sign-in is required.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="workspace-banner login-banner loading-banner">
|
||||
<div>
|
||||
<p class="eyebrow">Checking Session</p>
|
||||
<h3>Hold while the app restores your client access state.</h3>
|
||||
<p>The sign-in form only appears if no valid local session is available.</p>
|
||||
</div>
|
||||
</section>
|
||||
{:else if !$clientSession}
|
||||
<section class="dashboard-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Client Workspace</p>
|
||||
@@ -515,7 +529,7 @@
|
||||
<tbody>
|
||||
{#each focusCards as card}
|
||||
<tr>
|
||||
<td class="task-cell">
|
||||
<td class="task-cell" data-label="Focus">
|
||||
<div class="table-item">
|
||||
<span class={`task-icon ${card.tone}`}>{card.code}</span>
|
||||
<div>
|
||||
@@ -524,19 +538,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Owner">
|
||||
<div class="owner-chip">
|
||||
<span>HP</span>
|
||||
<strong>Hunter Premium Produce</strong>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Reference Date">
|
||||
<div class="due-block">
|
||||
<strong>{card.detail}</strong>
|
||||
<span>Current checkpoint</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class={`status-chip ${card.tone}`}>{card.tone === 'warning' ? 'Watch' : 'On track'}</span></td>
|
||||
<td data-label="Status">
|
||||
<span class={`status-chip ${card.tone}`}>{card.tone === 'warning' ? 'Watch' : 'On track'}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -681,6 +697,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-banner {
|
||||
min-height: 11rem;
|
||||
}
|
||||
|
||||
.signin-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -759,8 +779,10 @@
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) 0.72fr;
|
||||
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.02fr) minmax(16rem, 0.76fr);
|
||||
grid-template-areas: 'market gauge metrics';
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.analysis-grid {
|
||||
@@ -775,6 +797,14 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.market-card {
|
||||
grid-area: market;
|
||||
}
|
||||
|
||||
.gauge-card {
|
||||
grid-area: gauge;
|
||||
}
|
||||
|
||||
.card-toolbar {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
@@ -948,6 +978,7 @@
|
||||
}
|
||||
|
||||
.metric-stack {
|
||||
grid-area: metrics;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
@@ -1130,6 +1161,7 @@
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 46rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0.7rem;
|
||||
}
|
||||
@@ -1293,11 +1325,29 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.workspace-banner,
|
||||
.dashboard-grid,
|
||||
.analysis-grid,
|
||||
.detail-grid,
|
||||
.workspace-banner {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.focus-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
'market gauge'
|
||||
'metrics metrics';
|
||||
}
|
||||
|
||||
.metric-stack {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.analysis-grid,
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -1306,6 +1356,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
'market'
|
||||
'gauge'
|
||||
'metrics';
|
||||
}
|
||||
|
||||
.metric-stack {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.focus-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.dashboard-intro,
|
||||
.intro-actions,
|
||||
@@ -1320,7 +1388,6 @@
|
||||
}
|
||||
|
||||
.preview-facts,
|
||||
.metric-stack,
|
||||
.signin-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -1339,4 +1406,80 @@
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.workspace-banner,
|
||||
.panel-card,
|
||||
.preview-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
padding: 0.3rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.78rem 0.8rem;
|
||||
white-space: normal;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tbody td:first-child,
|
||||
tbody td:last-child {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
tbody td + td {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
tbody td::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.task-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-item,
|
||||
.owner-chip {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
rawMaterials: [],
|
||||
@@ -14,11 +14,11 @@ export async function load() {
|
||||
|
||||
try {
|
||||
const [rawMaterials, mixes, productCosts, scenarios, dataQuality] = await Promise.all([
|
||||
api.rawMaterials(),
|
||||
api.mixes(),
|
||||
api.productCosts(),
|
||||
api.scenarios(),
|
||||
api.dataQuality()
|
||||
api.rawMaterials(fetch),
|
||||
api.mixes(fetch),
|
||||
api.productCosts(fetch),
|
||||
api.scenarios(fetch),
|
||||
api.dataQuality(fetch)
|
||||
]);
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import { adminSession } from '$lib/session';
|
||||
import { adminSession, sessionHydrated } from '$lib/session';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -65,7 +65,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if !$adminSession}
|
||||
{#if !$sessionHydrated}
|
||||
<section class="signin-card loading-card">
|
||||
<div class="signin-copy">
|
||||
<p class="eyebrow">Checking Session</p>
|
||||
<h3>Restoring the Lean 101 admin session before deciding whether sign-in is needed.</h3>
|
||||
<p>The admin sign-in form only appears when no saved operator session is available.</p>
|
||||
</div>
|
||||
</section>
|
||||
{:else if !$adminSession}
|
||||
<section class="signin-card">
|
||||
<div class="signin-copy">
|
||||
<p class="eyebrow">Admin Sign-In</p>
|
||||
@@ -253,6 +261,11 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.signin-copy h3,
|
||||
.live-banner h3,
|
||||
.card-toolbar h3 {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredAdminSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredAdminSession()) {
|
||||
return {
|
||||
clients: [],
|
||||
@@ -16,7 +16,7 @@ export async function load() {
|
||||
}
|
||||
|
||||
try {
|
||||
const [clients, exportPreview] = await Promise.all([api.clientAccess(), api.clientAccessExport()]);
|
||||
const [clients, exportPreview] = await Promise.all([api.clientAccess(fetch), api.clientAccessExport(fetch)]);
|
||||
|
||||
return {
|
||||
clients,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredAdminSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredAdminSession()) {
|
||||
return {
|
||||
clients: [],
|
||||
@@ -16,7 +16,7 @@ export async function load() {
|
||||
}
|
||||
|
||||
try {
|
||||
const [clients, exportPreview] = await Promise.all([api.clientAccess(), api.clientAccessExport()]);
|
||||
const [clients, exportPreview] = await Promise.all([api.clientAccess(fetch), api.clientAccessExport(fetch)]);
|
||||
|
||||
return {
|
||||
clients,
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
const apiMocks = vi.hoisted(() => ({
|
||||
rawMaterials: vi.fn(),
|
||||
mixes: vi.fn(),
|
||||
mix: vi.fn(),
|
||||
products: vi.fn(),
|
||||
productCosts: vi.fn(),
|
||||
scenarios: vi.fn(),
|
||||
dataQuality: vi.fn(),
|
||||
clientAccess: vi.fn(),
|
||||
clientAccessExport: vi.fn()
|
||||
}));
|
||||
|
||||
const sessionMocks = vi.hoisted(() => ({
|
||||
hasStoredClientSession: vi.fn(),
|
||||
hasStoredAdminSession: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$lib/api', () => ({
|
||||
api: apiMocks
|
||||
}));
|
||||
|
||||
vi.mock('$lib/session', () => sessionMocks);
|
||||
|
||||
import { load as homeLoad } from './+page';
|
||||
import { load as adminLoad } from './admin/+page';
|
||||
import { load as mixesLoad } from './mixes/+page';
|
||||
import { load as mixNewLoad } from './mixes/new/+page';
|
||||
import { load as mixDetailLoad } from './mixes/[id]/+page';
|
||||
import { load as productsLoad } from './products/+page';
|
||||
import { load as rawMaterialsLoad } from './raw-materials/+page';
|
||||
import { load as scenariosLoad } from './scenarios/+page';
|
||||
|
||||
describe('route loaders use the SvelteKit fetch argument', () => {
|
||||
const fetcher = vi.fn() as typeof fetch;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
sessionMocks.hasStoredClientSession.mockReturnValue(true);
|
||||
sessionMocks.hasStoredAdminSession.mockReturnValue(true);
|
||||
|
||||
apiMocks.rawMaterials.mockResolvedValue([{ id: 1 }]);
|
||||
apiMocks.mixes.mockResolvedValue([{ id: 2 }]);
|
||||
apiMocks.mix.mockResolvedValue({ id: 42 });
|
||||
apiMocks.products.mockResolvedValue([{ id: 3 }]);
|
||||
apiMocks.productCosts.mockResolvedValue([{ id: 4 }]);
|
||||
apiMocks.scenarios.mockResolvedValue([{ id: 5 }]);
|
||||
apiMocks.dataQuality.mockResolvedValue([{ id: 6 }]);
|
||||
apiMocks.clientAccess.mockResolvedValue([{ id: 7 }]);
|
||||
apiMocks.clientAccessExport.mockResolvedValue({ generated_at: '', clients: [] });
|
||||
});
|
||||
|
||||
it('passes fetch through the home page loader', async () => {
|
||||
await homeLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.rawMaterials).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.mixes).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.productCosts).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.scenarios).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.dataQuality).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the raw materials loader', async () => {
|
||||
await rawMaterialsLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.rawMaterials).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.mixes).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.products).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.productCosts).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the mixes loader', async () => {
|
||||
await mixesLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.mixes).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the new mix loader', async () => {
|
||||
await mixNewLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.rawMaterials).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the mix detail loader', async () => {
|
||||
await mixDetailLoad({ params: { id: '42' }, fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.mix).toHaveBeenCalledWith(42, fetcher);
|
||||
expect(apiMocks.rawMaterials).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the products loader', async () => {
|
||||
await productsLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.products).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.productCosts).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the scenarios loader', async () => {
|
||||
await scenariosLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.scenarios).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
|
||||
it('passes fetch through the admin loader', async () => {
|
||||
await adminLoad({ fetch: fetcher } as never);
|
||||
|
||||
expect(apiMocks.clientAccess).toHaveBeenCalledWith(fetcher);
|
||||
expect(apiMocks.clientAccessExport).toHaveBeenCalledWith(fetcher);
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let activeMenuId = $state<number | null>(null);
|
||||
let activeMenuTrigger = $state<HTMLButtonElement | null>(null);
|
||||
let menuElement = $state<HTMLDivElement | null>(null);
|
||||
let menuStyle = $state('');
|
||||
|
||||
function currency(value: number | null | undefined, digits = 2) {
|
||||
if (value === null || value === undefined) {
|
||||
@@ -17,6 +22,86 @@
|
||||
? data.mixes.reduce((sum, mix) => sum + (mix.mix_cost_per_kg ?? 0), 0) / data.mixes.length
|
||||
: 0
|
||||
);
|
||||
const activeMix = $derived(data.mixes.find((mix) => mix.id === activeMenuId) ?? null);
|
||||
|
||||
function closeMenu() {
|
||||
activeMenuId = null;
|
||||
activeMenuTrigger = null;
|
||||
menuStyle = '';
|
||||
}
|
||||
|
||||
function positionMenu() {
|
||||
if (!activeMenuTrigger || !menuElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const triggerRect = activeMenuTrigger.getBoundingClientRect();
|
||||
const menuRect = menuElement.getBoundingClientRect();
|
||||
const viewportPadding = 12;
|
||||
const menuGap = 8;
|
||||
|
||||
let top = triggerRect.top - menuRect.height - menuGap;
|
||||
|
||||
if (top < viewportPadding) {
|
||||
top = Math.min(window.innerHeight - viewportPadding - menuRect.height, triggerRect.bottom + menuGap);
|
||||
}
|
||||
|
||||
let left = triggerRect.right - menuRect.width;
|
||||
left = Math.max(viewportPadding, Math.min(left, window.innerWidth - viewportPadding - menuRect.width));
|
||||
|
||||
menuStyle = `top: ${Math.max(viewportPadding, top)}px; left: ${left}px;`;
|
||||
}
|
||||
|
||||
async function toggleMenu(id: number, event: MouseEvent) {
|
||||
if (activeMenuId === id) {
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
activeMenuId = id;
|
||||
activeMenuTrigger = event.currentTarget instanceof HTMLButtonElement ? event.currentTarget : null;
|
||||
|
||||
await tick();
|
||||
positionMenu();
|
||||
}
|
||||
|
||||
function handlePointerDown(event: MouseEvent) {
|
||||
if (activeMenuId === null || !(event.target instanceof Node)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (menuElement?.contains(event.target) || activeMenuTrigger?.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function handleViewportChange() {
|
||||
if (activeMenuId !== null) {
|
||||
positionMenu();
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('scroll', handleViewportChange, true);
|
||||
window.addEventListener('resize', handleViewportChange);
|
||||
document.addEventListener('mousedown', handlePointerDown);
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleViewportChange, true);
|
||||
window.removeEventListener('resize', handleViewportChange);
|
||||
document.removeEventListener('mousedown', handlePointerDown);
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="page-intro">
|
||||
@@ -77,7 +162,7 @@
|
||||
<tbody>
|
||||
{#each data.mixes as mix}
|
||||
<tr>
|
||||
<td>
|
||||
<td data-label="Mix">
|
||||
<div class="table-item">
|
||||
<span class="row-badge">MX</span>
|
||||
<div>
|
||||
@@ -86,26 +171,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{mix.client_name}</td>
|
||||
<td>{mix.ingredients.length}</td>
|
||||
<td>{mix.total_mix_kg}</td>
|
||||
<td>{currency(mix.total_mix_cost)}</td>
|
||||
<td>{currency(mix.mix_cost_per_kg, 4)}</td>
|
||||
<td>
|
||||
<td data-label="Client">{mix.client_name}</td>
|
||||
<td data-label="Ingredients">{mix.ingredients.length}</td>
|
||||
<td data-label="Total Kg">{mix.total_mix_kg}</td>
|
||||
<td data-label="Total Cost">{currency(mix.total_mix_cost)}</td>
|
||||
<td data-label="Cost / Kg">{currency(mix.mix_cost_per_kg, 4)}</td>
|
||||
<td data-label="Status">
|
||||
<span class={`status-pill ${mix.warnings.length ? 'warning' : 'positive'}`}>{mix.status}</span>
|
||||
</td>
|
||||
<td class="menu-cell">
|
||||
<td class="menu-cell" data-label="Actions">
|
||||
<div class="menu-wrap">
|
||||
<button class="menu-trigger" type="button" onclick={() => (activeMenuId = activeMenuId === mix.id ? null : mix.id)}>
|
||||
<button
|
||||
aria-expanded={activeMenuId === mix.id}
|
||||
aria-haspopup="menu"
|
||||
class="menu-trigger"
|
||||
type="button"
|
||||
onclick={(event) => toggleMenu(mix.id, event)}
|
||||
>
|
||||
Actions
|
||||
</button>
|
||||
|
||||
{#if activeMenuId === mix.id}
|
||||
<div class="menu-panel">
|
||||
<a href={`/mixes/${mix.id}`}>Edit worksheet</a>
|
||||
<a href={`/mixes/${mix.id}`}>Open live cost view</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -113,6 +197,13 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if activeMix}
|
||||
<div bind:this={menuElement} class="menu-panel" role="menu" style={menuStyle}>
|
||||
<a href={`/mixes/${activeMix.id}`} onclick={closeMenu}>Edit worksheet</a>
|
||||
<a href={`/mixes/${activeMix.id}`} onclick={closeMenu}>Open live cost view</a>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@@ -235,6 +326,7 @@
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 48rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0.54rem;
|
||||
}
|
||||
@@ -328,10 +420,14 @@
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.menu-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.76rem;
|
||||
padding: 0.6rem 0.74rem;
|
||||
@@ -342,11 +438,10 @@
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.35rem);
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
min-width: 10rem;
|
||||
width: min(14rem, calc(100vw - 1.5rem));
|
||||
display: grid;
|
||||
gap: 0.18rem;
|
||||
padding: 0.32rem;
|
||||
@@ -377,5 +472,77 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
padding: 0.3rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.78rem 0.8rem;
|
||||
white-space: normal;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tbody td:first-child,
|
||||
tbody td:last-child {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
tbody td + td {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
tbody td::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-wrap,
|
||||
.menu-trigger {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-trigger {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
mixes: []
|
||||
@@ -10,7 +10,7 @@ export async function load() {
|
||||
|
||||
try {
|
||||
return {
|
||||
mixes: await api.mixes()
|
||||
mixes: await api.mixes(fetch)
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
|
||||
import { api } from '$lib/api';
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
|
||||
export async function load({ params }) {
|
||||
export async function load({ params, fetch }) {
|
||||
const mixId = Number(params.id);
|
||||
|
||||
if (!Number.isFinite(mixId)) {
|
||||
@@ -17,7 +17,7 @@ export async function load({ params }) {
|
||||
}
|
||||
|
||||
try {
|
||||
const [mix, rawMaterials] = await Promise.all([api.mix(mixId), api.rawMaterials()]);
|
||||
const [mix, rawMaterials] = await Promise.all([api.mix(mixId, fetch), api.rawMaterials(fetch)]);
|
||||
|
||||
return {
|
||||
mix,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
rawMaterials: []
|
||||
@@ -10,7 +10,7 @@ export async function load() {
|
||||
|
||||
try {
|
||||
return {
|
||||
rawMaterials: await api.rawMaterials()
|
||||
rawMaterials: await api.rawMaterials(fetch)
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<section class="page-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Output Pricing</p>
|
||||
<h2>Products1</h2>
|
||||
<h2>Delivered product pricing</h2>
|
||||
<p>Each row carries the product, mix source, price outputs, and a quick health state in one compact layout.</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -99,7 +99,7 @@
|
||||
<tbody>
|
||||
{#each rows as row}
|
||||
<tr>
|
||||
<td class="product-cell">
|
||||
<td class="product-cell" data-label="Product">
|
||||
<div class="product-item">
|
||||
<span class="product-badge">{initials(row.name)}</span>
|
||||
<div>
|
||||
@@ -108,28 +108,28 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Mix">
|
||||
<div class="mix-block">
|
||||
<strong>{row.mix_name}</strong>
|
||||
<span>{row.unit_of_measure}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Sale Type">
|
||||
<span class="sale-pill">{row.sale_type}</span>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Delivered">
|
||||
<div class="number-block">
|
||||
<strong>{currency(row.cost?.finished_product_delivered)}</strong>
|
||||
<span>Delivered cost</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Margins">
|
||||
<div class="number-block">
|
||||
<strong>{currency(row.cost?.distributor_price)} / {currency(row.cost?.wholesale_price)}</strong>
|
||||
<span>Distributor / wholesale</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td data-label="Health">
|
||||
<span class={`status-pill ${row.healthTone}`}>{row.health}</span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -240,6 +240,7 @@
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 48rem;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0.75rem;
|
||||
}
|
||||
@@ -359,4 +360,73 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.table-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
tr,
|
||||
td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
padding: 0.3rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.78rem 0.8rem;
|
||||
white-space: normal;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tbody td:first-child,
|
||||
tbody td:last-child {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
tbody td + td {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
tbody td::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-cell {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
products: [],
|
||||
@@ -10,7 +10,7 @@ export async function load() {
|
||||
}
|
||||
|
||||
try {
|
||||
const [products, productCosts] = await Promise.all([api.products(), api.productCosts()]);
|
||||
const [products, productCosts] = await Promise.all([api.products(fetch), api.productCosts(fetch)]);
|
||||
return {
|
||||
products,
|
||||
productCosts
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
rawMaterials: [],
|
||||
@@ -13,10 +13,10 @@ export async function load() {
|
||||
|
||||
try {
|
||||
const [rawMaterials, mixes, products, productCosts] = await Promise.all([
|
||||
api.rawMaterials(),
|
||||
api.mixes(),
|
||||
api.products(),
|
||||
api.productCosts()
|
||||
api.rawMaterials(fetch),
|
||||
api.mixes(fetch),
|
||||
api.products(fetch),
|
||||
api.productCosts(fetch)
|
||||
]);
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { hasStoredClientSession } from '$lib/session';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
export async function load({ fetch }) {
|
||||
if (!hasStoredClientSession()) {
|
||||
return {
|
||||
scenarios: []
|
||||
@@ -10,7 +10,7 @@ export async function load() {
|
||||
|
||||
try {
|
||||
return {
|
||||
scenarios: await api.scenarios()
|
||||
scenarios: await api.scenarios(fetch)
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<script lang="ts">
|
||||
import { clientSession } from '$lib/session';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<section class="page-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Workspace Settings</p>
|
||||
<h2>Account and workspace preferences.</h2>
|
||||
<p>Review your current session, navigation setup, and the client workspace details shown across the app.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-grid">
|
||||
<article class="surface-card">
|
||||
<p class="eyebrow">Session</p>
|
||||
<h3>Signed-in account</h3>
|
||||
<div class="details-list">
|
||||
<div>
|
||||
<span>Name</span>
|
||||
<strong>{$clientSession?.name ?? 'No active session'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Email</span>
|
||||
<strong>{$clientSession?.email ?? 'Sign in required'}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Role</span>
|
||||
<strong>{$clientSession?.role ?? 'Client'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="surface-card">
|
||||
<p class="eyebrow">Display</p>
|
||||
<h3>Navigation behaviour</h3>
|
||||
<div class="details-list">
|
||||
<div>
|
||||
<span>Desktop</span>
|
||||
<strong>Left rail navigation</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>iPad / Tablet</span>
|
||||
<strong>Bottom navigation drawer</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Copyright</span>
|
||||
<strong>© {currentYear} Hunter Premium Produce</strong>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #7f8e85;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-intro,
|
||||
.settings-grid {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.page-intro h2 {
|
||||
margin: 0.35rem 0 0.45rem;
|
||||
font-size: clamp(1.7rem, 3vw, 2.2rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-intro p:last-child,
|
||||
.details-list span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.25rem;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.surface-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.details-list {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.details-list div {
|
||||
padding: 0.9rem 0.95rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.95rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.details-list span {
|
||||
display: block;
|
||||
margin-bottom: 0.28rem;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.details-list strong {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+13
-3
@@ -1,7 +1,17 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
plugins: [sveltekit()],
|
||||
server: {
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
preview: {
|
||||
host: '0.0.0.0'
|
||||
},
|
||||
test: {
|
||||
environment: 'node',
|
||||
include: ['src/**/*.test.ts'],
|
||||
clearMocks: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user