mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-13 15:35:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

test new layout

Browse source
This commit is contained in:
miloschwartz 2025-04-12 15:04:32 -04:00
parent f14379a1c8
commit 1a750e8279
No known key found for this signature in database
38 changed files with 992 additions and 1622 deletions
Download patch file Download diff file Expand all files Collapse all files

219
package-lock.json generated
View file

@ -90,8 +90,8 @@
"@types/js-yaml": "4.0.9", "@types/js-yaml": "4.0.9",
"@types/node": "^22", "@types/node": "^22",
"@types/nodemailer": "6.4.17", "@types/nodemailer": "6.4.17",
"@types/react": "19.0.2", "@types/react": "19.1.1",
"@types/react-dom": "19.0.2", "@types/react-dom": "19.1.2",
"@types/semver": "7.5.8", "@types/semver": "7.5.8",
"@types/swagger-ui-express": "^4.1.8", "@types/swagger-ui-express": "^4.1.8",
"@types/ws": "8.5.13", "@types/ws": "8.5.13",
@ -372,9 +372,9 @@
} }
}, },
"node_modules/@emnapi/core": { "node_modules/@emnapi/core": {
"version": "1.4.0", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.1.tgz",
"integrity": "sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==", "integrity": "sha512-4JFstCTaToCFrPqrGzgkF8N2NHjtsaY4uRh6brZQ5L9e4wbMieX8oDT8N7qfVFTQecHFEtkj4ve49VIZ3mKVqw==",
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"dependencies": { "dependencies": {
@ -383,9 +383,9 @@
} }
}, },
"node_modules/@emnapi/runtime": { "node_modules/@emnapi/runtime": {
"version": "1.4.0", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.1.tgz",
"integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==", "integrity": "sha512-LMshMVP0ZhACNjQNYXiU1iZJ6QCcv0lUdPDPugqGvCGXt5xtRVBPdtA0qU12pEXZzpWAhWlZYptfdAFq10DOVQ==",
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"dependencies": { "dependencies": {
@ -1280,9 +1280,9 @@
} }
}, },
"node_modules/@eslint-community/eslint-utils": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.5.1", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.6.0.tgz",
"integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==", "integrity": "sha512-WhCn7Z7TauhBtmzhvKpoQs0Wwb/kBcy4CwpuI0/eEIr2Lx2auxmulAzLr91wVZJaz47iUZdkXOK7WlAfxGKCnA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"eslint-visitor-keys": "^3.4.3" "eslint-visitor-keys": "^3.4.3"
@ -4061,16 +4061,6 @@
"tailwindcss": "4.1.3" "tailwindcss": "4.1.3"
} }
}, },
"node_modules/@tailwindcss/node/node_modules/jiti": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
"integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/@tailwindcss/oxide": { "node_modules/@tailwindcss/oxide": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz",
@ -4455,9 +4445,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.14.0", "version": "22.14.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
"integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==", "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -4489,9 +4479,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "19.0.2", "version": "19.1.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.1.tgz",
"integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==", "integrity": "sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -4499,9 +4489,9 @@
} }
}, },
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "19.0.2", "version": "19.1.2",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
"integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==", "integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
@ -4807,9 +4797,9 @@
} }
}, },
"node_modules/@unrs/resolver-binding-darwin-arm64": { "node_modules/@unrs/resolver-binding-darwin-arm64": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.5.0.tgz",
"integrity": "sha512-8Tv+Bsd0BjGwfEedIyor4inw8atppRxM5BdUnIt+3mAm/QXUm7Dw74CHnXpfZKXkp07EXJGiA8hStqCINAWhdw==", "integrity": "sha512-YmocNlEcX/AgJv8gI41bhjMOTcKcea4D2nRIbZj+MhRtSH5+vEU8r/pFuTuoF+JjVplLsBueU+CILfBPVISyGQ==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -4820,9 +4810,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-darwin-x64": { "node_modules/@unrs/resolver-binding-darwin-x64": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.5.0.tgz",
"integrity": "sha512-X8c3PhWziEMKAzZz+YAYWfwawi5AEgzy/hmfizAB4C70gMHLKmInJcp1270yYAOs7z07YVFI220pp50z24Jk3A==", "integrity": "sha512-qpUrXgH4e/0xu1LOhPEdfgSY3vIXOxDQv370NEL8npN8h40HcQDA+Pl2r4HBW6tTXezWIjxUFcP7tj529RZtDw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -4833,9 +4823,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-freebsd-x64": { "node_modules/@unrs/resolver-binding-freebsd-x64": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.5.0.tgz",
"integrity": "sha512-UUr/nREy1UdtxXQnmLaaTXFGOcGxPwNIzeJdb3KXai3TKtC1UgNOB9s8KOA4TaxOUBR/qVgL5BvBwmUjD5yuVA==", "integrity": "sha512-3tX8r8vgjvZzaJZB4jvxUaaFCDCb3aWDCpZN3EjhGnnwhztslI05KSG5NY/jNjlcZ5QWZ7dEZZ/rNBFsmTaSPw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -4846,9 +4836,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": { "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.5.0.tgz",
"integrity": "sha512-e3pII53dEeS8inkX6A1ad2UXE0nuoWCqik4kOxaDnls0uJUq0ntdj5d9IYd+bv5TDwf9DSge/xPOvCmRYH+Tsw==", "integrity": "sha512-FH+ixzBKaUU9fWOj3TYO+Yn/eO6kYvMLV9eNJlJlkU7OgrxkCmiMS6wUbyT0KA3FOZGxnEQ2z3/BHgYm2jqeLA==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -4859,9 +4849,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-arm-musleabihf": { "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.5.0.tgz",
"integrity": "sha512-e/AKKd9gR+HNmVyDEPI/PIz2t0DrA3cyonHNhHVjrkxe8pMCiYiqhtn1+h+yIpHUtUlM6Y1FNIdivFa+r7wrEQ==", "integrity": "sha512-pxCgXMgwB/4PfqFQg73lMhmWwcC0j5L+dNXhZoz/0ek0iS/oAWl65fxZeT/OnU7fVs52MgdP2q02EipqJJXHSg==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -4872,9 +4862,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-arm64-gnu": { "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.5.0.tgz",
"integrity": "sha512-vtIu34luF1jRktlHtiwm2mjuE8oJCsFiFr8hT5+tFQdqFKjPhbJXn83LswKsOhy0GxAEevpXDI4xxEwkjuXIPA==", "integrity": "sha512-FX2FV7vpLE/+Z0NZX9/1pwWud5Wocm/2PgpUXbT5aSV3QEB10kBPJAzssOQylvdj8mOHoKl5pVkXpbCwww/T2g==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -4885,9 +4875,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-arm64-musl": { "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.5.0.tgz",
"integrity": "sha512-H3PaOuGyhFXiyJd+09uPhGl4gocmhyi1BRzvsP8Lv5AQO3p3/ZY7WjV4t2NkBksm9tMjf3YbOVHyPWi2eWsNYw==", "integrity": "sha512-+gF97xst1BZb28T3nwwzEtq2ewCoMDGKsenYsZuvpmNrW0019G1iUAunZN+FG55L21y+uP7zsGX06OXDQ/viKw==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -4898,9 +4888,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-ppc64-gnu": { "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.5.0.tgz",
"integrity": "sha512-4+GmJcaaFntCi1S01YByqp8wLMjV/FyQyHVGm0vedIhL1Vfx7uHkz/sZmKsidRwokBGuxi92GFmSzqT2O8KcNA==", "integrity": "sha512-5bEmVcQw9js8JYM2LkUBw5SeELSIxX+qKf9bFrfFINKAp4noZ//hUxLpbF7u/3gTBN1GsER6xOzIZlw/VTdXtA==",
"cpu": [ "cpu": [
"ppc64" "ppc64"
], ],
@ -4910,10 +4900,23 @@
"linux" "linux"
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.5.0.tgz",
"integrity": "sha512-GGk/8TPUsf1Q99F+lzMdjE6sGL26uJCwQ9TlvBs8zR3cLQNw/MIumPN7zrs3GFGySjnwXc8gA6J3HKbejywmqA==",
"cpu": [
"riscv64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@unrs/resolver-binding-linux-s390x-gnu": { "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.5.0.tgz",
"integrity": "sha512-6RDQVCmtFYTlhy89D5ixTqo9bTQqFhvNN0Ey1wJs5r+01Dq15gPHRXv2jF2bQATtMrOfYwv+R2ZR9ew1N1N3YQ==", "integrity": "sha512-5uRkFYYVNAeVaA4W/CwugjFN3iDOHCPqsBLCCOoJiMfFMMz4evBRsg+498OFa9w6VcTn2bD5aI+RRayaIgk2Sw==",
"cpu": [ "cpu": [
"s390x" "s390x"
], ],
@ -4924,9 +4927,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-x64-gnu": { "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.5.0.tgz",
"integrity": "sha512-XpU9uzIkD86+19NjCXxlVPISMUrVXsXo5htxtuG+uJ59p5JauSRZsIxQxzzfKzkxEjdvANPM/lS1HFoX6A6QeA==", "integrity": "sha512-j905CZH3nehYy6NimNqC2B14pxn4Ltd7guKMyPTzKehbFXTUgihQS/ZfHQTdojkMzbSwBOSgq1dOrY+IpgxDsA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -4937,9 +4940,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-linux-x64-musl": { "node_modules/@unrs/resolver-binding-linux-x64-musl": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.5.0.tgz",
"integrity": "sha512-3CDjG/spbTKCSHl66QP2ekHSD+H34i7utuDIM5gzoNBcZ1gTO0Op09Wx5cikXnhORRf9+HyDWzm37vU1PLSM1A==", "integrity": "sha512-dmLevQTuzQRwu5A+mvj54R5aye5I4PVKiWqGxg8tTaYP2k2oTs/3Mo8mgnhPk28VoYCi0fdFYpgzCd4AJndQvQ==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -4950,9 +4953,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-wasm32-wasi": { "node_modules/@unrs/resolver-binding-wasm32-wasi": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.5.0.tgz",
"integrity": "sha512-50tYhvbCTnuzMn7vmP8IV2UKF7ITo1oihygEYq9wW2DUb/Y+QMqBHJUSCABRngATjZ4shOK6f2+s0gQX6ElENQ==", "integrity": "sha512-LtJMhwu7avhoi+kKfAZOKN773RtzLBVVF90YJbB0wyMpUj9yQPeA+mteVUI9P70OG/opH47FeV5AWeaNWWgqJg==",
"cpu": [ "cpu": [
"wasm32" "wasm32"
], ],
@ -4966,9 +4969,9 @@
} }
}, },
"node_modules/@unrs/resolver-binding-win32-arm64-msvc": { "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.5.0.tgz",
"integrity": "sha512-KyJiIne/AqV4IW0wyQO34wSMuJwy3VxVQOfIXIPyQ/Up6y/zi2P/WwXb78gHsLiGRUqCA9LOoCX+6dQZde0g1g==", "integrity": "sha512-FTZBxLL4SO1mgIM86KykzJmPeTPisBDHQV6xtfDXbTMrentuZ6SdQKJUV5BWaoUK3p8kIULlrCcucqdCnk8Npg==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -4979,9 +4982,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-win32-ia32-msvc": { "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.5.0.tgz",
"integrity": "sha512-y2NUD7pygrBolN2NoXUrwVqBpKPhF8DiSNE5oB5/iFO49r2DpoYqdj5HPb3F42fPBH5qNqj6Zg63+xCEzAD2hw==", "integrity": "sha512-i5bB7vJ1waUsFciU/FKLd4Zw0VnAkvhiJ4//jYQXyDUuiLKodmtQZVTcOPU7pp97RrNgCFtXfC1gnvj/DHPJTw==",
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
@ -4992,9 +4995,9 @@
] ]
}, },
"node_modules/@unrs/resolver-binding-win32-x64-msvc": { "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.4.1.tgz", "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.5.0.tgz",
"integrity": "sha512-hVXaObGI2lGFmrtT77KSbPQ3I+zk9IU500wobjk0+oX59vg/0VqAzABNtt3YSQYgXTC2a/LYxekLfND/wlt0yQ==", "integrity": "sha512-wAvXp4k7jhioi4SebXW/yfzzYwsUCr9kIX4gCsUFKpCTUf8Mi7vScJXI3S+kupSUf0LbVHudR8qBbe2wFMSNUw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -5633,9 +5636,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001712", "version": "1.0.30001713",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001712.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
"integrity": "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==", "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -6381,9 +6384,9 @@
} }
}, },
"node_modules/dotenv": { "node_modules/dotenv": {
"version": "16.4.7", "version": "16.5.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==", "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
"dev": true, "dev": true,
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
"engines": { "engines": {
@ -9349,14 +9352,13 @@
} }
}, },
"node_modules/jiti": { "node_modules/jiti": {
"version": "1.21.7", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
"devOptional": true,
"license": "MIT", "license": "MIT",
"optional": true,
"peer": true,
"bin": { "bin": {
"jiti": "bin/jiti.js" "jiti": "lib/jiti-cli.mjs"
} }
}, },
"node_modules/js-tokens": { "node_modules/js-tokens": {
@ -15579,9 +15581,9 @@
} }
}, },
"node_modules/swagger-ui-dist": { "node_modules/swagger-ui-dist": {
"version": "5.20.7", "version": "5.20.8",
"resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.20.7.tgz", "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.20.8.tgz",
"integrity": "sha512-gLpb1wrWinUwMFKfSvDYsIlCyGQSryftzi6uWc9Qo98zO3mFT6oHOqmDUu5OoahvepuS6HGTe/3MsGUCVtpLig==", "integrity": "sha512-VXVhdRh5vuKVpkegw0n0wCXuFFG+pxNmXa0vDcf76r1yP2cYKqcpOE5g8l5crbtLGx+j2EiDnG4/EU5T0jyN1w==",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@scarf/scarf": "=1.4.0" "@scarf/scarf": "=1.4.0"
@ -16018,29 +16020,30 @@
} }
}, },
"node_modules/unrs-resolver": { "node_modules/unrs-resolver": {
"version": "1.4.1", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.4.1.tgz", "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.5.0.tgz",
"integrity": "sha512-MhPB3wBI5BR8TGieTb08XuYlE8oFVEXdSAgat3psdlRyejl8ojQ8iqPcjh094qCZ1r+TnkxzP6BeCd/umfHckQ==", "integrity": "sha512-6aia3Oy7SEe0MuUGQm2nsyob0L2+g57w178K5SE/3pvSGAIp28BB2O921fKx424Ahc/gQ6v0DXFbhcpyhGZdOA==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"url": "https://github.com/sponsors/JounQin" "url": "https://github.com/sponsors/JounQin"
}, },
"optionalDependencies": { "optionalDependencies": {
"@unrs/resolver-binding-darwin-arm64": "1.4.1", "@unrs/resolver-binding-darwin-arm64": "1.5.0",
"@unrs/resolver-binding-darwin-x64": "1.4.1", "@unrs/resolver-binding-darwin-x64": "1.5.0",
"@unrs/resolver-binding-freebsd-x64": "1.4.1", "@unrs/resolver-binding-freebsd-x64": "1.5.0",
"@unrs/resolver-binding-linux-arm-gnueabihf": "1.4.1", "@unrs/resolver-binding-linux-arm-gnueabihf": "1.5.0",
"@unrs/resolver-binding-linux-arm-musleabihf": "1.4.1", "@unrs/resolver-binding-linux-arm-musleabihf": "1.5.0",
"@unrs/resolver-binding-linux-arm64-gnu": "1.4.1", "@unrs/resolver-binding-linux-arm64-gnu": "1.5.0",
"@unrs/resolver-binding-linux-arm64-musl": "1.4.1", "@unrs/resolver-binding-linux-arm64-musl": "1.5.0",
"@unrs/resolver-binding-linux-ppc64-gnu": "1.4.1", "@unrs/resolver-binding-linux-ppc64-gnu": "1.5.0",
"@unrs/resolver-binding-linux-s390x-gnu": "1.4.1", "@unrs/resolver-binding-linux-riscv64-gnu": "1.5.0",
"@unrs/resolver-binding-linux-x64-gnu": "1.4.1", "@unrs/resolver-binding-linux-s390x-gnu": "1.5.0",
"@unrs/resolver-binding-linux-x64-musl": "1.4.1", "@unrs/resolver-binding-linux-x64-gnu": "1.5.0",
"@unrs/resolver-binding-wasm32-wasi": "1.4.1", "@unrs/resolver-binding-linux-x64-musl": "1.5.0",
"@unrs/resolver-binding-win32-arm64-msvc": "1.4.1", "@unrs/resolver-binding-wasm32-wasi": "1.5.0",
"@unrs/resolver-binding-win32-ia32-msvc": "1.4.1", "@unrs/resolver-binding-win32-arm64-msvc": "1.5.0",
"@unrs/resolver-binding-win32-x64-msvc": "1.4.1" "@unrs/resolver-binding-win32-ia32-msvc": "1.5.0",
"@unrs/resolver-binding-win32-x64-msvc": "1.5.0"
} }
}, },
"node_modules/uri-js": { "node_modules/uri-js": {

4
package.json
View file

@ -101,8 +101,8 @@
"@types/js-yaml": "4.0.9", "@types/js-yaml": "4.0.9",
"@types/node": "^22", "@types/node": "^22",
"@types/nodemailer": "6.4.17", "@types/nodemailer": "6.4.17",
"@types/react": "19.0.2", "@types/react": "19.1.1",
"@types/react-dom": "19.0.2", "@types/react-dom": "19.1.2",
"@types/semver": "7.5.8", "@types/semver": "7.5.8",
"@types/swagger-ui-express": "^4.1.8", "@types/swagger-ui-express": "^4.1.8",
"@types/ws": "8.5.13", "@types/ws": "8.5.13",

29
src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx
View file

@ -1,29 +1,21 @@
"use client"; "use client";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { SidebarSettings } from "@app/components/SidebarSettings";
type AccessPageHeaderAndNavProps = { interface AccessPageHeaderAndNavProps {
children: React.ReactNode; children: React.ReactNode;
hasInvitations: boolean; hasInvitations: boolean;
}; }
export default function AccessPageHeaderAndNav({ export default function AccessPageHeaderAndNav({
children, children,
hasInvitations hasInvitations
}: AccessPageHeaderAndNavProps) { }: AccessPageHeaderAndNavProps) {
const sidebarNavItems = [ const navItems = [
{ {
title: "Users", title: "Users",
href: `/{orgId}/settings/access/users`, href: `/{orgId}/settings/access/users`
children: hasInvitations
? [
{
title: "Invitations",
href: `/{orgId}/settings/access/invitations`
}
]
: []
}, },
{ {
title: "Roles", title: "Roles",
@ -31,6 +23,13 @@ export default function AccessPageHeaderAndNav({
} }
]; ];
if (hasInvitations) {
navItems.push({
title: "Invitations",
href: `/{orgId}/settings/access/invitations`
});
}
return ( return (
<> <>
<SettingsSectionTitle <SettingsSectionTitle
@ -38,9 +37,9 @@ export default function AccessPageHeaderAndNav({
description="Invite users and add them to roles to manage access to your organization" description="Invite users and add them to roles to manage access to your organization"
/> />
<SidebarSettings sidebarNavItems={sidebarNavItems}> <HorizontalTabs items={navItems}>
{children} {children}
</SidebarSettings> </HorizontalTabs>
</> </>
); );
} }

86
src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
View file

@ -2,21 +2,8 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { import { DataTable } from "@app/components/ui/data-table";
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -27,70 +14,13 @@ export function InvitationsDataTable<TData, TValue>({
columns, columns,
data data
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
}
});
return ( return (
<div> <DataTable
<TableContainer> columns={columns}
<Table> data={data}
<TableHeader> title="Invitations"
{table.getHeaderGroups().map((headerGroup) => ( searchPlaceholder="Search invitations..."
<TableRow key={headerGroup.id}> searchColumn="email"
{headerGroup.headers.map((header) => ( />
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No invitations found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

146
src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
View file

@ -2,149 +2,29 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { import { DataTable } from "@app/components/ui/data-table";
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
data: TData[]; data: TData[];
addRole?: () => void; createRole?: () => void;
} }
export function RolesDataTable<TData, TValue>({ export function RolesDataTable<TData, TValue>({
addRole,
columns, columns,
data data,
createRole
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Roles"
placeholder="Search roles" searchPlaceholder="Search roles..."
value={globalFilter ?? ""} searchColumn="name"
onChange={(e) => onAdd={createRole}
table.setGlobalFilter(String(e.target.value)) addButtonText="Add Role"
} />
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addRole) {
addRole();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Role
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No roles. Create a role, then add users to
the it.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

2
src/app/[orgId]/settings/access/roles/RolesTable.tsx
View file

@ -131,7 +131,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
<RolesDataTable <RolesDataTable
columns={columns} columns={columns}
data={roles} data={roles}
addRole={() => { createRole={() => {
setIsCreateModalOpen(true); setIsCreateModalOpen(true);
}} }}
/> />

13
src/app/[orgId]/settings/access/roles/page.tsx
View file

@ -8,6 +8,7 @@ import { ListRolesResponse } from "@server/routers/role";
import RolesTable, { RoleRow } from "./RolesTable"; import RolesTable, { RoleRow } from "./RolesTable";
import { SidebarSettings } from "@app/components/SidebarSettings"; import { SidebarSettings } from "@app/components/SidebarSettings";
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav"; import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
type RolesPageProps = { type RolesPageProps = {
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
@ -64,11 +65,13 @@ export default async function RolesPage(props: RolesPageProps) {
return ( return (
<> <>
<AccessPageHeaderAndNav hasInvitations={hasInvitations}> <SettingsSectionTitle
<OrgProvider org={org}> title="Manage Roles"
<RolesTable roles={roleRows} /> description="Configure roles to manage access to your organization"
</OrgProvider> />
</AccessPageHeaderAndNav> <OrgProvider org={org}>
<RolesTable roles={roleRows} />
</OrgProvider>
</> </>
); );
} }

144
src/app/[orgId]/settings/access/users/UsersDataTable.tsx
View file

@ -2,29 +2,8 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { import { DataTable } from "@app/components/ui/data-table";
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -33,118 +12,19 @@ interface DataTableProps<TData, TValue> {
} }
export function UsersDataTable<TData, TValue>({ export function UsersDataTable<TData, TValue>({
inviteUser,
columns, columns,
data data,
inviteUser
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Users"
placeholder="Search users" searchPlaceholder="Search users..."
value={globalFilter ?? ""} searchColumn="email"
onChange={(e) => onAdd={inviteUser}
table.setGlobalFilter(String(e.target.value)) addButtonText="Invite User"
} />
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (inviteUser) {
inviteUser();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Invite User
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No Users. Invite one to share access to
resources.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

13
src/app/[orgId]/settings/access/users/[userId]/layout.tsx
View file

@ -2,17 +2,16 @@ import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies"; import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings";
import { GetOrgUserResponse } from "@server/routers/user"; import { GetOrgUserResponse } from "@server/routers/user";
import OrgUserProvider from "@app/providers/OrgUserProvider"; import OrgUserProvider from "@app/providers/OrgUserProvider";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList, BreadcrumbList,
BreadcrumbPage, BreadcrumbPage,
BreadcrumbSeparator BreadcrumbSeparator
} from "@/components/ui/breadcrumb"; } from "@app/components/ui/breadcrumb";
import Link from "next/link"; import Link from "next/link";
import { cache } from "react"; import { cache } from "react";
@ -40,7 +39,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
redirect(`/${params.orgId}/settings/sites`); redirect(`/${params.orgId}/settings/sites`);
} }
const sidebarNavItems = [ const navItems = [
{ {
title: "Access Controls", title: "Access Controls",
href: "/{orgId}/settings/access/users/{userId}/access-controls" href: "/{orgId}/settings/access/users/{userId}/access-controls"
@ -71,11 +70,9 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
<p className="text-muted-foreground">Manage user</p> <p className="text-muted-foreground">Manage user</p>
</div> </div>
<SidebarSettings <HorizontalTabs items={navItems}>
sidebarNavItems={sidebarNavItems}
>
{children} {children}
</SidebarSettings> </HorizontalTabs>
</OrgUserProvider> </OrgUserProvider>
</> </>
); );

17
src/app/[orgId]/settings/access/users/page.tsx
View file

@ -9,6 +9,7 @@ import OrgProvider from "@app/providers/OrgProvider";
import UserProvider from "@app/providers/UserProvider"; import UserProvider from "@app/providers/UserProvider";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav"; import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
type UsersPageProps = { type UsersPageProps = {
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
@ -78,13 +79,15 @@ export default async function UsersPage(props: UsersPageProps) {
return ( return (
<> <>
<AccessPageHeaderAndNav hasInvitations={hasInvitations}> <SettingsSectionTitle
<UserProvider user={user!}> title="Manage Users"
<OrgProvider org={org}> description="Invite users and add them to roles to manage access to your organization"
<UsersTable users={userRows} /> />
</OrgProvider> <UserProvider user={user!}>
</UserProvider> <OrgProvider org={org}>
</AccessPageHeaderAndNav> <UsersTable users={userRows} />
</OrgProvider>
</UserProvider>
</> </>
); );
} }

8
src/app/[orgId]/settings/general/layout.tsx
View file

@ -1,7 +1,7 @@
import { internal } from "@app/lib/api"; import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies"; import { authCookieHeader } from "@app/lib/api/cookies";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { SidebarSettings } from "@app/components/SidebarSettings"; import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import OrgProvider from "@app/providers/OrgProvider"; import OrgProvider from "@app/providers/OrgProvider";
import OrgUserProvider from "@app/providers/OrgUserProvider"; import OrgUserProvider from "@app/providers/OrgUserProvider";
@ -57,7 +57,7 @@ export default async function GeneralSettingsPage({
redirect(`/${orgId}`); redirect(`/${orgId}`);
} }
const sidebarNavItems = [ const navItems = [
{ {
title: "General", title: "General",
href: `/{orgId}/settings/general`, href: `/{orgId}/settings/general`,
@ -73,9 +73,9 @@ export default async function GeneralSettingsPage({
description="Configure your organization's general settings" description="Configure your organization's general settings"
/> />
<SidebarSettings sidebarNavItems={sidebarNavItems}> <HorizontalTabs items={navItems}>
{children} {children}
</SidebarSettings> </HorizontalTabs>
</OrgUserProvider> </OrgUserProvider>
</OrgProvider> </OrgProvider>
</> </>

46
src/app/[orgId]/settings/layout.tsx
View file

@ -1,5 +1,4 @@
import { Metadata } from "next"; import { Metadata } from "next";
import { TopbarNav } from "@app/components/TopbarNav";
import { import {
Cog, Cog,
Combine, Combine,
@ -8,7 +7,6 @@ import {
Users, Users,
Waypoints Waypoints
} from "lucide-react"; } from "lucide-react";
import { Header } from "@app/components/Header";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { internal } from "@app/lib/api"; import { internal } from "@app/lib/api";
@ -18,14 +16,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
import { cache } from "react"; import { cache } from "react";
import { GetOrgUserResponse } from "@server/routers/user"; import { GetOrgUserResponse } from "@server/routers/user";
import UserProvider from "@app/providers/UserProvider"; import UserProvider from "@app/providers/UserProvider";
import { import { Layout } from "@app/components/Layout";
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator
} from "@app/components/ui/breadcrumb";
import Link from "next/link";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
@ -34,7 +25,7 @@ export const metadata: Metadata = {
description: "" description: ""
}; };
const topNavItems = [ const navItems = [
{ {
title: "Sites", title: "Sites",
href: "/{orgId}/settings/sites", href: "/{orgId}/settings/sites",
@ -46,9 +37,19 @@ const topNavItems = [
icon: <Waypoints className="h-4 w-4" /> icon: <Waypoints className="h-4 w-4" />
}, },
{ {
title: "Users & Roles", title: "Access Control",
href: "/{orgId}/settings/access", href: "/{orgId}/settings/access",
icon: <Users className="h-4 w-4" /> icon: <Users className="h-4 w-4" />,
children: [
{
title: "Users",
href: "/{orgId}/settings/access/users"
},
{
title: "Roles",
href: "/{orgId}/settings/access/roles"
}
]
}, },
{ {
title: "Shareable Links", title: "Shareable Links",
@ -109,21 +110,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
} catch (e) {} } catch (e) {}
return ( return (
<> <UserProvider user={user}>
<div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b"> <Layout orgId={params.orgId} orgs={orgs} navItems={navItems}>
<div className="container mx-auto flex flex-col content-between">
<div className="my-4 px-3 md:px-0">
<UserProvider user={user}>
<Header orgId={params.orgId} orgs={orgs} />
</UserProvider>
</div>
<TopbarNav items={topNavItems} orgId={params.orgId} />
</div>
</div>
<div className="container mx-auto sm:px-0 px-3 pt-[155px]">
{children} {children}
</div> </Layout>
</> </UserProvider>
); );
} }

150
src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
View file

@ -2,149 +2,29 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import { interface DataTableProps<TData, TValue> {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface ResourcesDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
data: TData[]; data: TData[];
addResource?: () => void; createResource?: () => void;
} }
export function ResourcesDataTable<TData, TValue>({ export function ResourcesDataTable<TData, TValue>({
addResource,
columns, columns,
data data,
}: ResourcesDataTableProps<TData, TValue>) { createResource
const [sorting, setSorting] = useState<SortingState>([]); }: DataTableProps<TData, TValue>) {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Resources"
placeholder="Search resources" searchPlaceholder="Search resources..."
value={globalFilter ?? ""} searchColumn="name"
onChange={(e) => onAdd={createResource}
table.setGlobalFilter(String(e.target.value)) addButtonText="Add Resource"
} />
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addResource) {
addResource();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Resource
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No resources. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

2
src/app/[orgId]/settings/resources/ResourcesTable.tsx
View file

@ -327,7 +327,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
<ResourcesDataTable <ResourcesDataTable
columns={columns} columns={columns}
data={resources} data={resources}
addResource={() => { createResource={() => {
setIsCreateModalOpen(true); setIsCreateModalOpen(true);
}} }}
/> />

20
src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
View file

@ -7,7 +7,7 @@ import {
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies"; import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings"; import { HorizontalTabs } from "@app/components/HorizontalTabs";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { GetOrgResponse } from "@server/routers/org"; import { GetOrgResponse } from "@server/routers/org";
import OrgProvider from "@app/providers/OrgProvider"; import OrgProvider from "@app/providers/OrgProvider";
@ -80,29 +80,25 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
redirect(`/${params.orgId}/settings/resources`); redirect(`/${params.orgId}/settings/resources`);
} }
const sidebarNavItems = [ const navItems = [
{ {
title: "General", title: "General",
href: `/{orgId}/settings/resources/{resourceId}/general` href: `/{orgId}/settings/resources/{resourceId}/general`
// icon: <Settings className="w-4 h-4" />,
}, },
{ {
title: "Connectivity", title: "Connectivity",
href: `/{orgId}/settings/resources/{resourceId}/connectivity` href: `/{orgId}/settings/resources/{resourceId}/connectivity`
// icon: <Cloud className="w-4 h-4" />,
} }
]; ];
if (resource.http) { if (resource.http) {
sidebarNavItems.push({ navItems.push({
title: "Authentication", title: "Authentication",
href: `/{orgId}/settings/resources/{resourceId}/authentication` href: `/{orgId}/settings/resources/{resourceId}/authentication`
// icon: <Shield className="w-4 h-4" />,
}); });
sidebarNavItems.push({ navItems.push({
title: "Rules", title: "Rules",
href: `/{orgId}/settings/resources/{resourceId}/rules` href: `/{orgId}/settings/resources/{resourceId}/rules`
// icon: <Shield className="w-4 h-4" />,
}); });
} }
@ -129,10 +125,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
<OrgProvider org={org}> <OrgProvider org={org}>
<ResourceProvider resource={resource} authInfo={authInfo}> <ResourceProvider resource={resource} authInfo={authInfo}>
<SidebarSettings sidebarNavItems={sidebarNavItems}> <div className="space-y-6">
<ResourceInfoBox /> <ResourceInfoBox />
{children} <HorizontalTabs items={navItems}>
</SidebarSettings> {children}
</HorizontalTabs>
</div>
</ResourceProvider> </ResourceProvider>
</OrgProvider> </OrgProvider>
</> </>

2
src/app/[orgId]/settings/resources/page.tsx
View file

@ -70,7 +70,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
return ( return (
<> <>
<ResourcesSplashCard /> {/* <ResourcesSplashCard /> */}
<SettingsSectionTitle <SettingsSectionTitle
title="Manage Resources" title="Manage Resources"

150
src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
View file

@ -2,149 +2,29 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import { interface DataTableProps<TData, TValue> {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface ShareLinksDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
data: TData[]; data: TData[];
addShareLink?: () => void; createShareLink?: () => void;
} }
export function ShareLinksDataTable<TData, TValue>({ export function ShareLinksDataTable<TData, TValue>({
addShareLink,
columns, columns,
data data,
}: ShareLinksDataTableProps<TData, TValue>) { createShareLink
const [sorting, setSorting] = useState<SortingState>([]); }: DataTableProps<TData, TValue>) {
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Share Links"
placeholder="Search links" searchPlaceholder="Search share links..."
value={globalFilter ?? ""} searchColumn="name"
onChange={(e) => onAdd={createShareLink}
table.setGlobalFilter(String(e.target.value)) addButtonText="Create Share Link"
} />
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addShareLink) {
addShareLink();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Create Share Link
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No links. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

2
src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
View file

@ -306,7 +306,7 @@ export default function ShareLinksTable({
<ShareLinksDataTable <ShareLinksDataTable
columns={columns} columns={columns}
data={rows} data={rows}
addShareLink={() => { createShareLink={() => {
setIsCreateModalOpen(true); setIsCreateModalOpen(true);
}} }}
/> />

2
src/app/[orgId]/settings/share-links/page.tsx
View file

@ -53,7 +53,7 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
return ( return (
<> <>
<ShareableLinksSplash /> {/* <ShareableLinksSplash /> */}
<SettingsSectionTitle <SettingsSectionTitle
title="Manage Share Links" title="Manage Share Links"

146
src/app/[orgId]/settings/sites/SitesDataTable.tsx
View file

@ -2,149 +2,29 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
data: TData[]; data: TData[];
addSite?: () => void; createSite?: () => void;
} }
export function SitesDataTable<TData, TValue>({ export function SitesDataTable<TData, TValue>({
addSite,
columns, columns,
data data,
createSite
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Sites"
placeholder="Search sites" searchPlaceholder="Search sites..."
value={globalFilter ?? ""} searchColumn="name"
onChange={(e) => onAdd={createSite}
table.setGlobalFilter(String(e.target.value)) addButtonText="Add Site"
} />
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addSite) {
addSite();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Site
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No sites. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

47
src/app/[orgId]/settings/sites/SitesTable.tsx
View file

@ -47,7 +47,6 @@ type SitesTableProps = {
export default function SitesTable({ sites, orgId }: SitesTableProps) { export default function SitesTable({ sites, orgId }: SitesTableProps) {
const router = useRouter(); const router = useRouter();
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null); const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
const [rows, setRows] = useState<SiteRow[]>(sites); const [rows, setRows] = useState<SiteRow[]>(sites);
@ -281,58 +280,20 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
return ( return (
<> <>
<CreateSiteFormModal
open={isCreateModalOpen}
setOpen={setIsCreateModalOpen}
onCreate={(val) => {
setRows([val, ...rows]);
}}
orgId={orgId}
/>
{selectedSite && ( {selectedSite && (
<ConfirmDeleteDialog <ConfirmDeleteDialog
open={isDeleteModalOpen} open={isDeleteModalOpen}
setOpen={(val) => { setOpen={setIsDeleteModalOpen}
setIsDeleteModalOpen(val); onConfirm={() => deleteSite(selectedSite.id)}
setSelectedSite(null);
}}
dialog={
<div className="space-y-4">
<p>
Are you sure you want to remove the site{" "}
<b>{selectedSite?.name || selectedSite?.id}</b>{" "}
from the organization?
</p>
<p>
Once removed, the site will no longer be
accessible.{" "}
<b>
All resources and targets associated with
the site will also be removed.
</b>
</p>
<p>
To confirm, please type the name of the site
below.
</p>
</div>
}
buttonText="Confirm Delete Site"
onConfirm={async () => deleteSite(selectedSite!.id)}
string={selectedSite.name}
title="Delete Site" title="Delete Site"
description="Are you sure you want to delete this site? This action cannot be undone."
/> />
)} )}
<SitesDataTable <SitesDataTable
columns={columns} columns={columns}
data={rows} data={rows}
addSite={() => { createSite={() => router.push(`/${orgId}/settings/sites/create`)}
router.push(`/${orgId}/settings/sites/create`);
}}
/> />
</> </>
); );

37
src/app/[orgId]/settings/sites/[niceId]/layout.tsx
View file

@ -4,7 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies"; import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings"; import { HorizontalTabs } from "@app/components/HorizontalTabs";
import Link from "next/link"; import Link from "next/link";
import { ArrowLeft } from "lucide-react"; import { ArrowLeft } from "lucide-react";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
@ -38,7 +38,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
redirect(`/${params.orgId}/settings/sites`); redirect(`/${params.orgId}/settings/sites`);
} }
const sidebarNavItems = [ const navItems = [
{ {
title: "General", title: "General",
href: "/{orgId}/settings/sites/{niceId}/general" href: "/{orgId}/settings/sites/{niceId}/general"
@ -46,32 +46,13 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
]; ];
return ( return (
<> <SiteProvider site={site}>
<div className="mb-4 flex-row"> <div className="space-y-6">
<Breadcrumb> <SiteInfoCard />
<BreadcrumbList> <HorizontalTabs items={navItems}>
<BreadcrumbItem>
<Link href="../">Sites</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{site.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<SettingsSectionTitle
title={`${site?.name} Settings`}
description="Configure the settings on your site"
/>
<SiteProvider site={site}>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<SiteInfoCard />
{children} {children}
</SidebarSettings> </HorizontalTabs>
</SiteProvider> </div>
</> </SiteProvider>
); );
} }

2
src/app/[orgId]/settings/sites/page.tsx
View file

@ -51,7 +51,7 @@ export default async function SitesPage(props: SitesPageProps) {
return ( return (
<> <>
<SitesSplashCard /> {/* <SitesSplashCard /> */}
<SettingsSectionTitle <SettingsSectionTitle
title="Manage Sites" title="Manage Sites"

26
src/app/admin/layout.tsx
View file

@ -1,7 +1,5 @@
import { Metadata } from "next"; import { Metadata } from "next";
import { TopbarNav } from "@app/components/TopbarNav";
import { Users } from "lucide-react"; import { Users } from "lucide-react";
import { Header } from "@app/components/Header";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { cache } from "react"; import { cache } from "react";
@ -10,6 +8,7 @@ import { ListOrgsResponse } from "@server/routers/org";
import { internal } from "@app/lib/api"; import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/lib/api/cookies"; import { authCookieHeader } from "@app/lib/api/cookies";
import { Layout } from "@app/components/Layout";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
@ -18,7 +17,7 @@ export const metadata: Metadata = {
description: "" description: ""
}; };
const topNavItems = [ const navItems = [
{ {
title: "All Users", title: "All Users",
href: "/admin/users", href: "/admin/users",
@ -30,7 +29,7 @@ interface LayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default async function SettingsLayout(props: LayoutProps) { export default async function AdminLayout(props: LayoutProps) {
const getUser = cache(verifySession); const getUser = cache(verifySession);
const user = await getUser(); const user = await getUser();
@ -51,21 +50,10 @@ export default async function SettingsLayout(props: LayoutProps) {
} catch (e) {} } catch (e) {}
return ( return (
<> <UserProvider user={user}>
<div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b"> <Layout orgs={orgs} navItems={navItems}>
<div className="container mx-auto flex flex-col content-between">
<div className="my-4 px-3 md:px-0">
<UserProvider user={user}>
<Header orgId={""} orgs={orgs} />
</UserProvider>
</div>
<TopbarNav items={topNavItems} />
</div>
</div>
<div className="container mx-auto sm:px-0 px-3 pt-[155px]">
{props.children} {props.children}
</div> </Layout>
</> </UserProvider>
); );
} }

131
src/app/admin/users/AdminUsersDataTable.tsx
View file

@ -2,29 +2,8 @@
import { import {
ColumnDef, ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Search } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -35,107 +14,13 @@ export function UsersDataTable<TData, TValue>({
columns, columns,
data data
}: DataTableProps<TData, TValue>) { }: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters
}
});
return ( return (
<div> <DataTable
<div className="flex items-center justify-between pb-4"> columns={columns}
<div className="flex items-center max-w-sm mr-2 w-full relative"> data={data}
<Input title="Server Users"
placeholder="Search server users" searchPlaceholder="Search server users..."
value={ searchColumn="email"
(table />
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
This server has no users.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
); );
} }

71
src/app/layout.tsx
View file

@ -41,8 +41,6 @@ export default async function RootLayout({
supporterData.visible = res.data.data.visible; supporterData.visible = res.data.data.visible;
supporterData.tier = res.data.data.tier; supporterData.tier = res.data.data.tier;
const version = env.app.version;
return ( return (
<html suppressHydrationWarning> <html suppressHydrationWarning>
<body className={`${font.className} min-h-screen flex flex-col`}> <body className={`${font.className} min-h-screen flex flex-col`}>
@ -55,72 +53,11 @@ export default async function RootLayout({
<EnvProvider env={pullEnv()}> <EnvProvider env={pullEnv()}>
<SupportStatusProvider supporterStatus={supporterData}> <SupportStatusProvider supporterStatus={supporterData}>
{/* Main content */} {/* Main content */}
<div className="grow pb-3 md:pb-0"> <div className="flex flex-col min-h-screen">
{children} <div className="flex-1">
</div> {children}
{/* Footer */}
<footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
<div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600">
{supporterData?.tier ? (
<SupporterMessage
tier={supporterData.tier}
/>
) : (
<div className="flex items-center space-x-2 whitespace-nowrap">
<span>Pangolin</span>
</div>
)}
<Separator orientation="vertical" />
<a
href="https://fossorial.io/"
target="_blank"
rel="noopener noreferrer"
aria-label="Built by Fossorial"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Fossorial</span>
<ExternalLink className="w-3 h-3" />
</a>
<Separator orientation="vertical" />
<a
href="https://github.com/fosrl/pangolin"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Open Source</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-3 h-3"
>
<path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
</svg>
</a>
<Separator orientation="vertical" />
<a
href="https://docs.fossorial.io/Pangolin/overview"
target="_blank"
rel="noopener noreferrer"
aria-label="Documentation"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Documentation</span>
<BookOpenText className="w-3 h-3" />
</a>
{version && (
<>
<Separator orientation="vertical" />
<div className="whitespace-nowrap">
v{version}
</div>
</>
)}
</div> </div>
</footer> </div>
</SupportStatusProvider> </SupportStatusProvider>
</EnvProvider> </EnvProvider>
<Toaster /> <Toaster />

72
src/components/Breadcrumbs.tsx Normal file
View file

@ -0,0 +1,72 @@
"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { cn } from "@app/lib/cn";
interface BreadcrumbItem {
label: string;
href: string;
}
export function Breadcrumbs() {
const pathname = usePathname();
const segments = pathname.split("/").filter(Boolean);
const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
const href = `/${segments.slice(0, index + 1).join("/")}`;
let label = segment;
// Format labels
if (segment === "settings") {
label = "Settings";
} else if (segment === "sites") {
label = "Sites";
} else if (segment === "resources") {
label = "Resources";
} else if (segment === "access") {
label = "Users & Roles";
} else if (segment === "general") {
label = "General";
} else if (segment === "share-links") {
label = "Shareable Links";
} else if (segment === "users") {
label = "Users";
} else if (segment === "roles") {
label = "Roles";
} else if (segment === "invitations") {
label = "Invitations";
} else if (segment === "connectivity") {
label = "Connectivity";
} else if (segment === "authentication") {
label = "Authentication";
}
return { label, href };
});
return (
<div className="border-b px-4 py-2">
<nav className="flex items-center space-x-1 text-sm text-muted-foreground">
<Link href="/" className="hover:text-foreground">
Home
</Link>
{breadcrumbs.map((crumb, index) => (
<div key={crumb.href} className="flex items-center">
<ChevronRight className="h-4 w-4" />
<Link
href={crumb.href}
className={cn(
"ml-1 hover:text-foreground",
index === breadcrumbs.length - 1 && "text-foreground font-medium"
)}
>
{crumb.label}
</Link>
</div>
))}
</nav>
</div>
);
}

156
src/components/Header.tsx
View file

@ -1,160 +1,22 @@
"use client"; "use client";
import { Button } from "@app/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator
} from "@app/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger
} from "@app/components/ui/popover";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { cn } from "@app/lib/cn";
import { ListOrgsResponse } from "@server/routers/org";
import { Check, ChevronsUpDown, Plus } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext";
import ProfileIcon from "./ProfileIcon";
import SupporterStatus from "./SupporterStatus";
type HeaderProps = { interface HeaderProps {
orgId?: string; orgId?: string;
orgs?: ListOrgsResponse["orgs"]; orgs?: any;
}; }
export function Header({ orgId, orgs }: HeaderProps) { export function Header({ orgId, orgs }: HeaderProps) {
const { user, updateUser } = useUserContext();
const [open, setOpen] = useState(false);
const router = useRouter();
const { env } = useEnvContext(); const { env } = useEnvContext();
return ( return (
<> <div className="flex items-center justify-between w-full">
<div className="flex items-center justify-between"> <Link href="/" className="flex items-center space-x-2">
<ProfileIcon /> <span className="font-bold">Pangolin</span>
</Link>
<div className="flex items-center"> </div>
<div className="hidden md:block">
<div className="flex items-center gap-4 mr-4">
<Link
href="https://docs.fossorial.io/Pangolin/overview"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground"
>
Documentation
</Link>
<a
href="mailto:support@fossorial.io"
className="text-muted-foreground hover:text-foreground"
>
Support
</a>
</div>
</div>
{orgs && (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
size="lg"
role="combobox"
aria-expanded={open}
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-neutral"
>
<div className="flex items-center justify-between w-full">
<div className="flex flex-col items-start">
<span className="font-bold text-sm">
Organization
</span>
<span className="text-sm text-muted-foreground">
{orgId
? orgs?.find(
(org) =>
org.orgId ===
orgId
)?.name
: "None selected"}
</span>
</div>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
</div>
</Button>
</PopoverTrigger>
<PopoverContent className="[100px] md:w-[180px] p-0">
<Command>
<CommandInput placeholder="Search..." />
<CommandEmpty>
No organizations found.
</CommandEmpty>
{(!env.flags.disableUserCreateOrg ||
user.serverAdmin) && (
<>
<CommandGroup heading="Create">
<CommandList>
<CommandItem
onSelect={(
currentValue
) => {
router.push(
"/setup"
);
}}
>
<Plus className="mr-2 h-4 w-4" />
New Organization
</CommandItem>
</CommandList>
</CommandGroup>
<CommandSeparator />
</>
)}
<CommandGroup heading="Organizations">
<CommandList>
{orgs.map((org) => (
<CommandItem
key={org.orgId}
onSelect={(
currentValue
) => {
router.push(
`/${org.orgId}/settings`
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
orgId === org.orgId
? "opacity-100"
: "opacity-0"
)}
/>
{org.name}
</CommandItem>
))}
</CommandList>
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
)}
</div>
</div>
</>
); );
} }

74
src/components/HorizontalTabs.tsx Normal file
View file

@ -0,0 +1,74 @@
"use client";
import React from "react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { cn } from "@app/lib/cn";
import { buttonVariants } from "@/components/ui/button";
interface HorizontalTabsProps {
children: React.ReactNode;
items: Array<{
title: string;
href: string;
icon?: React.ReactNode;
}>;
disabled?: boolean;
}
export function HorizontalTabs({
children,
items,
disabled = false
}: HorizontalTabsProps) {
const pathname = usePathname();
const params = useParams();
function hydrateHref(href: string) {
return href.replace("{orgId}", params.orgId as string);
}
return (
<div className="space-y-6">
<div className="relative">
<div className="overflow-x-auto scrollbar-hide">
<div className="flex space-x-4 border-b min-w-max">
{items.map((item) => {
const hydratedHref = hydrateHref(item.href);
const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
return (
<Link
key={hydratedHref}
href={hydratedHref}
className={cn(
"px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
isActive
? "border-b-2 border-primary text-primary"
: "text-muted-foreground hover:text-foreground",
disabled && "cursor-not-allowed"
)}
onClick={disabled ? (e) => e.preventDefault() : undefined}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>
{item.icon ? (
<div className="flex items-center space-x-2">
{item.icon}
<span>{item.title}</span>
</div>
) : (
item.title
)}
</Link>
);
})}
</div>
</div>
</div>
<div className="space-y-6">
{children}
</div>
</div>
);
}

107
src/components/Layout.tsx Normal file
View file

@ -0,0 +1,107 @@
"use client";
import React, { useState } from "react";
import { Header } from "@app/components/Header";
import { SidebarNav } from "@app/components/SidebarNav";
import { TopBar } from "@app/components/TopBar";
import { OrgSelector } from "@app/components/OrgSelector";
import { cn } from "@app/lib/cn";
import { ListOrgsResponse } from "@server/routers/org";
import SupporterStatus from "@app/components/SupporterStatus";
import { Separator } from "@app/components/ui/separator";
import { Button } from "@app/components/ui/button";
import { Menu, X } from "lucide-react";
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from "@app/components/ui/sheet";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { Breadcrumbs } from "@app/components/Breadcrumbs";
interface LayoutProps {
children: React.ReactNode;
orgId?: string;
orgs?: ListOrgsResponse["orgs"];
navItems: Array<{
title: string;
href: string;
icon?: React.ReactNode;
children?: Array<{
title: string;
href: string;
icon?: React.ReactNode;
}>;
}>;
}
export function Layout({ children, orgId, orgs, navItems }: LayoutProps) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const { env } = useEnvContext();
return (
<div className="flex h-screen overflow-hidden">
{/* Mobile Menu Button */}
<div className="md:hidden fixed top-4 left-4 z-50">
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon">
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-64 p-0">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<SheetDescription className="sr-only">
Main navigation menu for the application
</SheetDescription>
<div className="flex h-16 items-center border-b px-4">
<Header orgId={orgId} orgs={orgs} />
</div>
<div className="flex-1 overflow-y-auto p-4">
<SidebarNav items={navItems} />
</div>
<div className="p-4 space-y-4 border-t">
<SupporterStatus />
<OrgSelector orgId={orgId} orgs={orgs} />
{env?.app?.version && (
<div className="text-xs text-muted-foreground text-center">
v{env.app.version}
</div>
)}
</div>
</SheetContent>
</Sheet>
</div>
{/* Desktop Sidebar */}
<div className="hidden md:flex w-64 border-r bg-card flex-col h-full shrink-0">
<div className="flex h-16 items-center border-b px-4 shrink-0">
<Header orgId={orgId} orgs={orgs} />
</div>
<div className="flex-1 overflow-y-auto p-4">
<SidebarNav items={navItems} />
</div>
<div className="p-4 space-y-4 border-t shrink-0">
<SupporterStatus />
<OrgSelector orgId={orgId} orgs={orgs} />
{env?.app?.version && (
<div className="text-xs text-muted-foreground text-center">
v{env.app.version}
</div>
)}
</div>
</div>
{/* Main content */}
<div className="flex-1 flex flex-col h-full min-w-0">
<div className="h-16 border-b shrink-0">
<div className="flex h-full items-center justify-end px-4">
<TopBar orgId={orgId} orgs={orgs} />
</div>
</div>
<Breadcrumbs />
<main className="flex-1 overflow-y-auto p-4 w-full">
<div className="container mx-auto max-w-12xl">
{children}
</div>
</main>
</div>
</div>
);
}

124
src/components/OrgSelector.tsx Normal file
View file

@ -0,0 +1,124 @@
"use client";
import { Button } from "@app/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator
} from "@app/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger
} from "@app/components/ui/popover";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { cn } from "@app/lib/cn";
import { ListOrgsResponse } from "@server/routers/org";
import { Check, ChevronsUpDown, Plus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext";
interface OrgSelectorProps {
orgId?: string;
orgs?: ListOrgsResponse["orgs"];
}
export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
const { user } = useUserContext();
const [open, setOpen] = useState(false);
const router = useRouter();
const { env } = useEnvContext();
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
size="lg"
role="combobox"
aria-expanded={open}
className="w-full h-12 px-3 py-4 bg-neutral hover:bg-neutral"
>
<div className="flex items-center justify-between w-full">
<div className="flex flex-col items-start">
<span className="font-bold text-sm">
Organization
</span>
<span className="text-sm text-muted-foreground">
{orgId
? orgs?.find(
(org) =>
org.orgId ===
orgId
)?.name
: "None selected"}
</span>
</div>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
</div>
</Button>
</PopoverTrigger>
<PopoverContent className="w-[180px] p-0">
<Command>
<CommandInput placeholder="Search..." />
<CommandEmpty>
No organizations found.
</CommandEmpty>
{(!env.flags.disableUserCreateOrg ||
user.serverAdmin) && (
<>
<CommandGroup heading="Create">
<CommandList>
<CommandItem
onSelect={(
currentValue
) => {
router.push(
"/setup"
);
}}
>
<Plus className="mr-2 h-4 w-4" />
New Organization
</CommandItem>
</CommandList>
</CommandGroup>
<CommandSeparator />
</>
)}
<CommandGroup heading="Organizations">
<CommandList>
{orgs?.map((org) => (
<CommandItem
key={org.orgId}
onSelect={(
currentValue
) => {
router.push(
`/${org.orgId}/settings`
);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
orgId === org.orgId
? "opacity-100"
: "opacity-0"
)}
/>
{org.name}
</CommandItem>
))}
</CommandList>
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
);
}

11
src/components/ProfileIcon.tsx
View file

@ -66,7 +66,10 @@ export default function ProfileIcon() {
<Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} /> <Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} />
<Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} /> <Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} />
<div className="flex items-center md:gap-4 gap-2 grow min-w-0"> <div className="flex items-center md:gap-4 grow min-w-0">
<span className="truncate max-w-full font-medium min-w-0">
{user.email}
</span>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
@ -150,12 +153,6 @@ export default function ProfileIcon() {
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<span className="truncate max-w-full font-medium min-w-0 mr-1">
{user.email}
</span>
<div className="hidden md:block">
<SupporterStatus />
</div>
</div> </div>
</> </>
); );

243
src/components/SidebarNav.tsx
View file

@ -1,17 +1,9 @@
"use client"; "use client";
import React, { useEffect } from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname } from "next/navigation";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { buttonVariants } from "@/components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@/components/ui/select";
import { CornerDownRight } from "lucide-react"; import { CornerDownRight } from "lucide-react";
interface SidebarNavItem { interface SidebarNavItem {
@ -39,43 +31,6 @@ export function SidebarNav({
const resourceId = params.resourceId as string; const resourceId = params.resourceId as string;
const userId = params.userId as string; const userId = params.userId as string;
const [selectedValue, setSelectedValue] =
React.useState<string>(getSelectedValue());
useEffect(() => {
setSelectedValue(getSelectedValue());
}, [usePathname()]);
const router = useRouter();
const handleSelectChange = (value: string) => {
if (!disabled) {
router.push(value);
}
};
function getSelectedValue() {
let foundHref = "";
for (const item of items) {
const hydratedHref = hydrateHref(item.href);
if (hydratedHref === pathname) {
foundHref = hydratedHref;
break;
}
if (item.children) {
for (const child of item.children) {
const hydratedChildHref = hydrateHref(child.href);
if (hydratedChildHref === pathname) {
foundHref = hydratedChildHref;
break;
}
}
}
if (foundHref) break;
}
return foundHref;
}
function hydrateHref(val: string): string { function hydrateHref(val: string): string {
return val return val
.replace("{orgId}", orgId) .replace("{orgId}", orgId)
@ -85,142 +40,72 @@ export function SidebarNav({
} }
function renderItems(items: SidebarNavItem[]) { function renderItems(items: SidebarNavItem[]) {
return items.map((item) => ( return items.map((item) => {
<div key={hydrateHref(item.href)}> const hydratedHref = hydrateHref(item.href);
<Link const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
href={hydrateHref(item.href)}
className={cn( return (
"w-full", <div key={hydratedHref}>
buttonVariants({ variant: "ghost" }), <Link
pathname === hydrateHref(item.href) && href={hydratedHref}
!pathname.includes("create") className={cn(
? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border" "flex items-center py-2 px-3 w-full transition-colors",
: "hover:bg-transparent hover:underline", isActive
"justify-start", ? "text-primary font-medium"
disabled && "cursor-not-allowed" : "text-muted-foreground hover:text-foreground",
)} disabled && "cursor-not-allowed opacity-60"
onClick={disabled ? (e) => e.preventDefault() : undefined} )}
tabIndex={disabled ? -1 : undefined} onClick={disabled ? (e) => e.preventDefault() : undefined}
aria-disabled={disabled} tabIndex={disabled ? -1 : undefined}
> aria-disabled={disabled}
{item.icon ? ( >
<div className="flex items-center space-x-2"> {item.icon && <span className="mr-2">{item.icon}</span>}
{item.icon} {item.title}
<span>{item.title}</span> </Link>
{item.children && (
<div className="ml-4 space-y-1 mt-1">
{item.children.map((child) => {
const hydratedChildHref = hydrateHref(child.href);
const isChildActive = pathname.startsWith(hydratedChildHref) && !pathname.includes("create");
return (
<Link
key={hydratedChildHref}
href={hydratedChildHref}
className={cn(
"flex items-center text-sm py-2 px-3 w-full transition-colors",
isChildActive
? "text-primary font-medium"
: "text-muted-foreground hover:text-foreground",
disabled && "cursor-not-allowed opacity-60"
)}
onClick={disabled ? (e) => e.preventDefault() : undefined}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>
<CornerDownRight className="h-4 w-4 text-muted-foreground/70 mr-2" />
{child.icon && <span className="mr-2">{child.icon}</span>}
{child.title}
</Link>
);
})}
</div> </div>
) : (
item.title
)} )}
</Link> </div>
{item.children && ( );
<div className="ml-4 space-y-2"> });
{item.children.map((child) => (
<div
key={hydrateHref(child.href)}
className="flex items-center space-x-2"
>
<Link
href={hydrateHref(child.href)}
className={cn(
"w-full",
buttonVariants({ variant: "ghost" }),
pathname === hydrateHref(child.href) &&
!pathname.includes("create")
? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
: "hover:bg-transparent hover:underline",
"justify-start",
disabled && "cursor-not-allowed"
)}
onClick={
disabled
? (e) => e.preventDefault()
: undefined
}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>
<CornerDownRight className="h-4 w-4 text-gray-500 mr-2" />
{child.icon ? (
<div className="flex items-center space-x-2">
{child.icon}
<span>{child.title}</span>
</div>
) : (
child.title
)}
</Link>
</div>
))}
</div>
)}
</div>
));
} }
return ( return (
<div> <nav
<div className="block lg:hidden"> className={cn(
<Select "flex flex-col space-y-1",
defaultValue={selectedValue} disabled && "pointer-events-none opacity-60",
value={selectedValue} className
onValueChange={handleSelectChange} )}
disabled={disabled} {...props}
> >
<SelectTrigger> {renderItems(items)}
<SelectValue placeholder="Select an option" /> </nav>
</SelectTrigger>
<SelectContent>
{items.flatMap((item) => {
const topLevelItem = (
<SelectItem
key={hydrateHref(item.href)}
value={hydrateHref(item.href)}
>
{item.icon ? (
<div className="flex items-center space-x-2">
{item.icon}
<span>{item.title}</span>
</div>
) : (
item.title
)}
</SelectItem>
);
const childItems =
item.children?.map((child) => (
<SelectItem
key={hydrateHref(child.href)}
value={hydrateHref(child.href)}
className="pl-8"
>
<div className="flex items-center space-x-2">
<CornerDownRight className="h-4 w-4 text-gray-500" />
{child.icon ? (
<>
{child.icon}
<span>{child.title}</span>
</>
) : (
<span>{child.title}</span>
)}
</div>
</SelectItem>
)) || [];
return [topLevelItem, ...childItems];
})}
</SelectContent>
</Select>
</div>
<nav
className={cn(
"hidden lg:flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-3 pr-8",
disabled && "opacity-50 pointer-events-none",
className
)}
{...props}
>
{renderItems(items)}
</nav>
</div>
); );
} }

2
src/components/SupporterStatus.tsx
View file

@ -419,7 +419,7 @@ export default function SupporterStatus() {
<Button <Button
variant="outlinePrimary" variant="outlinePrimary"
size="sm" size="sm"
className="gap-2" className="gap-2 w-full"
onClick={() => { onClick={() => {
setPurchaseOptionsOpen(true); setPurchaseOptionsOpen(true);
}} }}

37
src/components/TopBar.tsx Normal file
View file

@ -0,0 +1,37 @@
"use client";
import ProfileIcon from "@app/components/ProfileIcon";
import Link from "next/link";
interface TopBarProps {
orgId?: string;
orgs?: any;
}
export function TopBar({ orgId, orgs }: TopBarProps) {
return (
<div className="flex items-center justify-between w-full h-full">
<div className="flex items-center space-x-4">
<Link
href="https://docs.fossorial.io"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground transition-colors"
>
Documentation
</Link>
<Link
href="https://fossorial.io/support"
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-foreground transition-colors"
>
Support
</Link>
</div>
<div>
<ProfileIcon />
</div>
</div>
);
}

148
src/components/ui/data-table.tsx Normal file
View file

@ -0,0 +1,148 @@
"use client";
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
title?: string;
addButtonText?: string;
onAdd?: () => void;
searchPlaceholder?: string;
searchColumn?: string;
}
export function DataTable<TData, TValue>({
columns,
data,
title,
addButtonText,
onAdd,
searchPlaceholder = "Search...",
searchColumn = "name"
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters
}
});
return (
<div className="container mx-auto max-w-12xl">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<div className="flex items-center max-w-sm w-full relative">
<Input
placeholder={searchPlaceholder}
value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
onChange={(event) =>
table.getColumn(searchColumn)?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
</div>
{onAdd && addButtonText && (
<Button onClick={onAdd}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
)}
</CardHeader>
<CardContent>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</CardContent>
</Card>
</div>
);
}

122
src/components/ui/table.tsx
View file

@ -23,30 +23,24 @@ const Table = (
</div>) </div>)
Table.displayName = "Table" Table.displayName = "Table"
const TableHeader = ( const TableHeader = React.forwardRef<
{ HTMLTableSectionElement,
ref, React.HTMLAttributes<HTMLTableSectionElement>
className, >(({ className, ...props }, ref) => (
...props <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
}: React.HTMLAttributes<HTMLTableSectionElement> & { ))
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
TableHeader.displayName = "TableHeader" TableHeader.displayName = "TableHeader"
const TableBody = ( const TableBody = React.forwardRef<
{ HTMLTableSectionElement,
ref, React.HTMLAttributes<HTMLTableSectionElement>
className, >(({ className, ...props }, ref) => (
...props <tbody
}: React.HTMLAttributes<HTMLTableSectionElement> & { ref={ref}
ref: React.RefObject<HTMLTableSectionElement>; className={cn("[&_tr:last-child]:border-0", className)}
} {...props}
) => (<tbody />
ref={ref} ))
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>)
TableBody.displayName = "TableBody" TableBody.displayName = "TableBody"
const TableFooter = ( const TableFooter = (
@ -67,55 +61,49 @@ const TableFooter = (
/>) />)
TableFooter.displayName = "TableFooter" TableFooter.displayName = "TableFooter"
const TableRow = ( const TableRow = React.forwardRef<
{ HTMLTableRowElement,
ref, React.HTMLAttributes<HTMLTableRowElement>
className, >(({ className, ...props }, ref) => (
...props <tr
}: React.HTMLAttributes<HTMLTableRowElement> & { ref={ref}
ref: React.RefObject<HTMLTableRowElement>; className={cn(
} "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
) => (<tr className
ref={ref} )}
className={cn( {...props}
"border-b transition-colors data-[state=selected]:bg-muted", />
className ))
)}
{...props}
/>)
TableRow.displayName = "TableRow" TableRow.displayName = "TableRow"
const TableHead = ( const TableHead = React.forwardRef<
{ HTMLTableCellElement,
ref, React.ThHTMLAttributes<HTMLTableCellElement>
className, >(({ className, ...props }, ref) => (
...props <th
}: React.ThHTMLAttributes<HTMLTableCellElement> & { ref={ref}
ref: React.RefObject<HTMLTableCellElement>; className={cn(
} "h-8 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
) => (<th className
ref={ref} )}
className={cn( {...props}
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", />
className ))
)}
{...props}
/>)
TableHead.displayName = "TableHead" TableHead.displayName = "TableHead"
const TableCell = ( const TableCell = React.forwardRef<
{ HTMLTableCellElement,
ref, React.TdHTMLAttributes<HTMLTableCellElement>
className, >(({ className, ...props }, ref) => (
...props <td
}: React.TdHTMLAttributes<HTMLTableCellElement> & { ref={ref}
ref: React.RefObject<HTMLTableCellElement>; className={cn(
} "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
) => (<td className
ref={ref} )}
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props}
{...props} />
/>) ))
TableCell.displayName = "TableCell" TableCell.displayName = "TableCell"
const TableCaption = ( const TableCaption = (

3
tsconfig.json
View file

@ -17,7 +17,8 @@
"@server/*": ["../server/*"], "@server/*": ["../server/*"],
"@test/*": ["../test/*"], "@test/*": ["../test/*"],
"@app/*": ["*"], "@app/*": ["*"],
"@/*": ["./*"] "@/*": ["./*"],
"react": [ "./node_modules/@types/react" ]
}, },
"plugins": [ "plugins": [
{ {