feat(workspace): add WorkspaceEdit and WorkspaceCreate pages
This commit is contained in:
228
package-lock.json
generated
228
package-lock.json
generated
@@ -8,6 +8,7 @@
|
|||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^2.2.9",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@tailwindcss/vite": "^4.2.1",
|
"@tailwindcss/vite": "^4.2.1",
|
||||||
"axios": "^1.13.6",
|
"axios": "^1.13.6",
|
||||||
@@ -895,6 +896,79 @@
|
|||||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/core": {
|
||||||
|
"version": "1.7.5",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@floating-ui/core/-/core-1.7.5.tgz",
|
||||||
|
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/utils": "^0.2.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/dom": {
|
||||||
|
"version": "1.7.6",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@floating-ui/dom/-/dom-1.7.6.tgz",
|
||||||
|
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/core": "^1.7.5",
|
||||||
|
"@floating-ui/utils": "^0.2.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react": {
|
||||||
|
"version": "0.26.28",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@floating-ui/react/-/react-0.26.28.tgz",
|
||||||
|
"integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react-dom": "^2.1.2",
|
||||||
|
"@floating-ui/utils": "^0.2.8",
|
||||||
|
"tabbable": "^6.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react-dom": {
|
||||||
|
"version": "2.1.8",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
|
||||||
|
"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/dom": "^1.7.6"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/utils": {
|
||||||
|
"version": "0.2.11",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@floating-ui/utils/-/utils-0.2.11.tgz",
|
||||||
|
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@headlessui/react": {
|
||||||
|
"version": "2.2.9",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@headlessui/react/-/react-2.2.9.tgz",
|
||||||
|
"integrity": "sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react": "^0.26.16",
|
||||||
|
"@react-aria/focus": "^3.20.2",
|
||||||
|
"@react-aria/interactions": "^3.25.0",
|
||||||
|
"@tanstack/react-virtual": "^3.13.9",
|
||||||
|
"use-sync-external-store": "^1.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^18 || ^19 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^18 || ^19 || ^19.0.0-rc"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@humanfs/core": {
|
"node_modules/@humanfs/core": {
|
||||||
"version": "0.19.1",
|
"version": "0.19.1",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/@humanfs/core/-/core-0.19.1.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@humanfs/core/-/core-0.19.1.tgz",
|
||||||
@@ -1025,6 +1099,103 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-aria/focus": {
|
||||||
|
"version": "3.21.5",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-aria/focus/-/focus-3.21.5.tgz",
|
||||||
|
"integrity": "sha512-V18fwCyf8zqgJdpLQeDU5ZRNd9TeOfBbhLgmX77Zr5ae9XwaoJ1R3SFJG1wCJX60t34AW+aLZSEEK+saQElf3Q==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/interactions": "^3.27.1",
|
||||||
|
"@react-aria/utils": "^3.33.1",
|
||||||
|
"@react-types/shared": "^3.33.1",
|
||||||
|
"@swc/helpers": "^0.5.0",
|
||||||
|
"clsx": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/interactions": {
|
||||||
|
"version": "3.27.1",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-aria/interactions/-/interactions-3.27.1.tgz",
|
||||||
|
"integrity": "sha512-M3wLpTTmDflI0QGNK0PJNUaBXXfeBXue8ZxLMngfc1piHNiH4G5lUvWd9W14XVbqrSCVY8i8DfGrNYpyyZu0tw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/ssr": "^3.9.10",
|
||||||
|
"@react-aria/utils": "^3.33.1",
|
||||||
|
"@react-stately/flags": "^3.1.2",
|
||||||
|
"@react-types/shared": "^3.33.1",
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/ssr": {
|
||||||
|
"version": "3.9.10",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-aria/ssr/-/ssr-3.9.10.tgz",
|
||||||
|
"integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/utils": {
|
||||||
|
"version": "3.33.1",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-aria/utils/-/utils-3.33.1.tgz",
|
||||||
|
"integrity": "sha512-kIx1Sj6bbAT0pdqCegHuPanR9zrLn5zMRiM7LN12rgRf55S19ptd9g3ncahArifYTRkfEU9VIn+q0HjfMqS9/w==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/ssr": "^3.9.10",
|
||||||
|
"@react-stately/flags": "^3.1.2",
|
||||||
|
"@react-stately/utils": "^3.11.0",
|
||||||
|
"@react-types/shared": "^3.33.1",
|
||||||
|
"@swc/helpers": "^0.5.0",
|
||||||
|
"clsx": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-stately/flags": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-stately/flags/-/flags-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-stately/utils": {
|
||||||
|
"version": "3.11.0",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-stately/utils/-/utils-3.11.0.tgz",
|
||||||
|
"integrity": "sha512-8LZpYowJ9eZmmYLpudbo/eclIRnbhWIJZ994ncmlKlouNzKohtM8qTC6B1w1pwUbiwGdUoyzLuQbeaIor5Dvcw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-types/shared": {
|
||||||
|
"version": "3.33.1",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@react-types/shared/-/shared-3.33.1.tgz",
|
||||||
|
"integrity": "sha512-oJHtjvLG43VjwemQDadlR5g/8VepK56B/xKO2XORPHt9zlW6IZs3tZrYlvH29BMvoqC7RtE7E5UjgbnbFtDGag==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rolldown/pluginutils": {
|
"node_modules/@rolldown/pluginutils": {
|
||||||
"version": "1.0.0-rc.3",
|
"version": "1.0.0-rc.3",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
|
||||||
@@ -1357,6 +1528,15 @@
|
|||||||
"win32"
|
"win32"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"node_modules/@swc/helpers": {
|
||||||
|
"version": "0.5.19",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@swc/helpers/-/helpers-0.5.19.tgz",
|
||||||
|
"integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/node": {
|
"node_modules/@tailwindcss/node": {
|
||||||
"version": "4.2.1",
|
"version": "4.2.1",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/@tailwindcss/node/-/node-4.2.1.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@tailwindcss/node/-/node-4.2.1.tgz",
|
||||||
@@ -1614,6 +1794,33 @@
|
|||||||
"vite": "^5.2.0 || ^6 || ^7"
|
"vite": "^5.2.0 || ^6 || ^7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tanstack/react-virtual": {
|
||||||
|
"version": "3.13.21",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@tanstack/react-virtual/-/react-virtual-3.13.21.tgz",
|
||||||
|
"integrity": "sha512-SYXFrmrbPgXBvf+HsOsKhFgqSe4M6B29VHOsX9Jih9TlNkNkDWx0hWMiMLUghMEzyUz772ndzdEeCEBx+3GIZw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@tanstack/virtual-core": "3.13.21"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/tannerlinsley"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tanstack/virtual-core": {
|
||||||
|
"version": "3.13.21",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@tanstack/virtual-core/-/virtual-core-3.13.21.tgz",
|
||||||
|
"integrity": "sha512-ww+fmLHyCbPSf7JNbWZP3g7wl6SdNo3ah5Aiw+0e9FDErkVHLKprYUrwTm7dF646FtEkN/KkAKPYezxpmvOjxw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/tannerlinsley"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/babel__core": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/@types/babel__core/-/babel__core-7.20.5.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||||
@@ -4006,6 +4213,12 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tabbable": {
|
||||||
|
"version": "6.4.0",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/tabbable/-/tabbable-6.4.0.tgz",
|
||||||
|
"integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/tailwind-merge": {
|
"node_modules/tailwind-merge": {
|
||||||
"version": "3.5.0",
|
"version": "3.5.0",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
|
||||||
@@ -4064,6 +4277,12 @@
|
|||||||
"typescript": ">=4.8.4"
|
"typescript": ">=4.8.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tslib": {
|
||||||
|
"version": "2.8.1",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/tslib/-/tslib-2.8.1.tgz",
|
||||||
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
|
"license": "0BSD"
|
||||||
|
},
|
||||||
"node_modules/type-check": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/type-check/-/type-check-0.4.0.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/type-check/-/type-check-0.4.0.tgz",
|
||||||
@@ -4163,6 +4382,15 @@
|
|||||||
"punycode": "^2.1.0"
|
"punycode": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/use-sync-external-store": {
|
||||||
|
"version": "1.6.0",
|
||||||
|
"resolved": "https://package-mirror.liara.ir/repository/npm/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||||
|
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "7.3.1",
|
"version": "7.3.1",
|
||||||
"resolved": "https://package-mirror.liara.ir/repository/npm/vite/-/vite-7.3.1.tgz",
|
"resolved": "https://package-mirror.liara.ir/repository/npm/vite/-/vite-7.3.1.tgz",
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^2.2.9",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@tailwindcss/vite": "^4.2.1",
|
"@tailwindcss/vite": "^4.2.1",
|
||||||
"axios": "^1.13.6",
|
"axios": "^1.13.6",
|
||||||
|
|||||||
@@ -8,6 +8,9 @@ import Auth from "./pages/Auth"
|
|||||||
import Profile from "./pages/Profile"
|
import Profile from "./pages/Profile"
|
||||||
import Terms from "./pages/Terms"
|
import Terms from "./pages/Terms"
|
||||||
import Workspaces from "./pages/Workspaces"
|
import Workspaces from "./pages/Workspaces"
|
||||||
|
import CreateWorkspace from "./pages/WorkspaceCreate"
|
||||||
|
import WorkspaceDetail from "./pages/WorkspaceDetail"
|
||||||
|
import EditWorkspace from "./pages/WorkspaceEdit"
|
||||||
|
|
||||||
const MainLayout = () => {
|
const MainLayout = () => {
|
||||||
return (
|
return (
|
||||||
@@ -34,6 +37,9 @@ function App() {
|
|||||||
<Route element={<MainLayout />}>
|
<Route element={<MainLayout />}>
|
||||||
<Route path="/profile" element={<Profile />} />
|
<Route path="/profile" element={<Profile />} />
|
||||||
<Route path="/workspaces" element={<Workspaces />} />
|
<Route path="/workspaces" element={<Workspaces />} />
|
||||||
|
<Route path="/workspaces/create" element={<CreateWorkspace />} />
|
||||||
|
<Route path="/workspaces/:id" element={<WorkspaceDetail />} />
|
||||||
|
<Route path="/workspaces/:id/edit" element={<EditWorkspace />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</WorkspaceProvider>
|
</WorkspaceProvider>
|
||||||
|
|||||||
@@ -64,3 +64,49 @@ export const deleteWorkspace = async (id: string): Promise<void> => {
|
|||||||
throw new Error('Failed to delete workspace');
|
throw new Error('Failed to delete workspace');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const fetchWorkspaceMemberships = async (workspaceId: string) => {
|
||||||
|
const response = await authFetch(`/api/workspace-memberships/?workspace=${workspaceId}`);
|
||||||
|
if (!response.ok) throw new Error("Failed to fetch workspace memberships");
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data.results || data;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addWorkspaceMembership = async (data: { workspace: string; user: string; role: string }) => {
|
||||||
|
const response = await authFetch(`/api/workspace-memberships/`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to add workspace membership');
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const removeWorkspaceMembership = async (membershipId: string): Promise<void> => {
|
||||||
|
const response = await authFetch(`/api/workspace-memberships/${membershipId}/`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to remove workspace membership');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateWorkspaceMembership = async (membershipId: string | number, data: { role: string }) => {
|
||||||
|
const response = await authFetch(`/api/workspace-memberships/${membershipId}/`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(errorData.error || JSON.stringify(errorData) || 'Failed to update membership');
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
};
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|||||||
import { cn } from "../../lib/utils"
|
import { cn } from "../../lib/utils"
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|||||||
@@ -72,22 +72,22 @@ export const en = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
profile: {
|
profile: {
|
||||||
"title": "User Profile",
|
title: "User Profile",
|
||||||
"firstName": "First Name",
|
firstName: "First Name",
|
||||||
"lastName": "Last Name",
|
lastName: "Last Name",
|
||||||
"email": "Email",
|
email: "Email",
|
||||||
"description": "Description",
|
description: "Description",
|
||||||
"mobileNumber": "Mobile Number",
|
mobileNumber: "Mobile Number",
|
||||||
"birthDate": "Birth Date",
|
birthDate: "Birth Date",
|
||||||
"yearsOld": "Years Old",
|
yearsOld: "Years Old",
|
||||||
"dateJoined": "Date Joined",
|
dateJoined: "Date Joined",
|
||||||
"editInfo": "Edit Info",
|
editInfo: "Edit Info",
|
||||||
"changePicture": "Change Picture",
|
changePicture: "Change Picture",
|
||||||
"save": "Save",
|
save: "Save",
|
||||||
"cancel": "Cancel",
|
cancel: "Cancel",
|
||||||
"upload": "Upload",
|
upload: "Upload",
|
||||||
"remove": "Remove",
|
remove: "Remove",
|
||||||
"imageInput": "Click to select or drag & drop",
|
imageInput: "Click to select or drag & drop",
|
||||||
toasts: {
|
toasts: {
|
||||||
successEdit: "Profile updated successfully!",
|
successEdit: "Profile updated successfully!",
|
||||||
successImage: "Profile picture updated!",
|
successImage: "Profile picture updated!",
|
||||||
@@ -158,5 +158,26 @@ export const en = {
|
|||||||
deleteSuccess: "Workspace deleted successfully",
|
deleteSuccess: "Workspace deleted successfully",
|
||||||
deleteTitle: "Delete Workspace",
|
deleteTitle: "Delete Workspace",
|
||||||
deleteWarning: "To confirm deletion, please type the workspace name:",
|
deleteWarning: "To confirm deletion, please type the workspace name:",
|
||||||
},
|
members: "Members",
|
||||||
|
searchUser: "Search user by mobile number",
|
||||||
|
searching: "Searching...",
|
||||||
|
noMembers: "No members found.",
|
||||||
|
removeMemberTitle: "Remove member",
|
||||||
|
confirmDeleteTitle: "Remove Member",
|
||||||
|
confirmDeleteMessage: "Are you sure you want to remove this member from the workspace?",
|
||||||
|
successCreate: "Workspace created successfully.",
|
||||||
|
errorCreate: "Failed to create workspace.",
|
||||||
|
toast: {
|
||||||
|
successUpdate: "Workspace updated successfully.",
|
||||||
|
errorUpdate: "Failed to update workspace.",
|
||||||
|
successAdd: "Member added successfully.",
|
||||||
|
errorAdd: "Failed to add member.",
|
||||||
|
successRemove: "Member removed successfully.",
|
||||||
|
errorRemove: "Failed to remove member.",
|
||||||
|
successRole: "Role updated successfully.",
|
||||||
|
errorRole: "Failed to update role.",
|
||||||
|
errorLoad: "Failed to load workspace data.",
|
||||||
|
cannotAddSelf: "You are automatically the owner.",
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -72,23 +72,23 @@ export const fa = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
profile: {
|
profile: {
|
||||||
"title": "پروفایل کاربر",
|
title: "پروفایل کاربر",
|
||||||
"firstName": "نام",
|
firstName: "نام",
|
||||||
"lastName": "نام خانوادگی",
|
lastName: "نام خانوادگی",
|
||||||
"email": "ایمیل",
|
email: "ایمیل",
|
||||||
"description": "توضیحات",
|
description: "توضیحات",
|
||||||
"mobileNumber": "شماره موبایل",
|
mobileNumber: "شماره موبایل",
|
||||||
"birthDate": "تاریخ تولد",
|
birthDate: "تاریخ تولد",
|
||||||
"yearsOld": "سال",
|
yearsOld: "سال",
|
||||||
"dateJoined": "تاریخ عضویت",
|
dateJoined: "تاریخ عضویت",
|
||||||
"editInfo": "ویرایش اطلاعات",
|
editInfo: "ویرایش اطلاعات",
|
||||||
"changePicture": "تغییر تصویر",
|
changePicture: "تغییر تصویر",
|
||||||
"save": "ذخیره",
|
save: "ذخیره",
|
||||||
"cancel": "لغو",
|
cancel: "لغو",
|
||||||
"upload": "آپلود",
|
upload: "آپلود",
|
||||||
"remove": "حذف",
|
remove: "حذف",
|
||||||
"imageInput": "برای انتخاب کلیک کنید یا فایل را بکشید",
|
imageInput: "برای انتخاب کلیک کنید یا فایل را بکشید",
|
||||||
"noEmail": "ایمیلی ثبت نشده",
|
noEmail: "ایمیلی ثبت نشده",
|
||||||
toasts: {
|
toasts: {
|
||||||
successEdit: "پروفایل با موفقیت بروزرسانی شد!",
|
successEdit: "پروفایل با موفقیت بروزرسانی شد!",
|
||||||
successImage: "عکس پروفایل بروزرسانی شد!",
|
successImage: "عکس پروفایل بروزرسانی شد!",
|
||||||
@@ -141,7 +141,7 @@ export const fa = {
|
|||||||
roleLabel: "نقش شما",
|
roleLabel: "نقش شما",
|
||||||
roles: {
|
roles: {
|
||||||
owner: "مالک",
|
owner: "مالک",
|
||||||
admin: "مدیر",
|
admin: "ادمین",
|
||||||
member: "عضو",
|
member: "عضو",
|
||||||
guest: "مهمان",
|
guest: "مهمان",
|
||||||
},
|
},
|
||||||
@@ -159,5 +159,26 @@ export const fa = {
|
|||||||
deleteSuccess: "فضای کاری با موفقیت حذف شد",
|
deleteSuccess: "فضای کاری با موفقیت حذف شد",
|
||||||
deleteTitle: "حذف فضای کاری",
|
deleteTitle: "حذف فضای کاری",
|
||||||
deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
|
deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
|
||||||
|
members: "اعضا",
|
||||||
|
searchUser: "جستجوی کاربر با شماره موبایل",
|
||||||
|
searching: "در حال جستجو...",
|
||||||
|
noMembers: "عضوی یافت نشد.",
|
||||||
|
removeMemberTitle: "حذف عضو",
|
||||||
|
confirmDeleteTitle: "حذف عضو",
|
||||||
|
confirmDeleteMessage: "آیا مطمئن هستید که میخواهید این عضو را از فضای کاری حذف کنید؟",
|
||||||
|
toast: {
|
||||||
|
successUpdate: "فضای کاری با موفقیت بهروزرسانی شد.",
|
||||||
|
errorUpdate: "بهروزرسانی فضای کاری با خطا مواجه شد.",
|
||||||
|
successAdd: "کاربر جدید با موفقیت به فضای کاری افزوده شد.",
|
||||||
|
errorAdd: "افزودن کاربر با خطا مواجه شد.",
|
||||||
|
successRemove: "کاربر با موفقیت از فضای کاری حذف شد.",
|
||||||
|
errorRemove: "حذف کاربر با خطا مواجه شد.",
|
||||||
|
successRole: "نقش کاربر با موفقیت تغییر کرد.",
|
||||||
|
errorRole: "تغییر نقش کاربر با خطا مواجه شد.",
|
||||||
|
errorLoad: "دریافت اطلاعات فضای کاری با خطا مواجه شد.",
|
||||||
|
cannotAddSelf: "شما بهصورت خودکار مالک هستید.",
|
||||||
|
},
|
||||||
|
errorCreate: "ایجاد فضای کاری ناموفق بود.",
|
||||||
|
successCreate: "فضای کاری با موفقیت ایجاد شد.",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
383
src/pages/WorkspaceCreate.tsx
Normal file
383
src/pages/WorkspaceCreate.tsx
Normal file
@@ -0,0 +1,383 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Fragment } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from '../hooks/useTranslation';
|
||||||
|
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
|
||||||
|
import { Dialog, Transition } from '@headlessui/react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { createWorkspace } from '../api/workspaces';
|
||||||
|
import { searchUserByExactMobile, type SearchedUser } from '../api/users';
|
||||||
|
import { useAppContext } from '../context/AppContext';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
|
||||||
|
const toEnglishDigits = (str: string) => {
|
||||||
|
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
|
||||||
|
.replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d).toString());
|
||||||
|
};
|
||||||
|
|
||||||
|
interface LocalMember {
|
||||||
|
localId: string;
|
||||||
|
user: SearchedUser;
|
||||||
|
role: 'owner' | 'admin' | 'member' | 'guest';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WorkspaceCreate() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
const isFa = lang === 'fa';
|
||||||
|
|
||||||
|
const toPersianNum = (num: string | number | undefined | null) => {
|
||||||
|
if (num === null || num === undefined) return num;
|
||||||
|
if (!isFa) return num;
|
||||||
|
return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { user } = useAppContext();
|
||||||
|
const currentUserId = user?.id || '';
|
||||||
|
|
||||||
|
// Workspace Info States
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
// Members States (Local)
|
||||||
|
const [members, setMembers] = useState<LocalMember[]>([]);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
|
||||||
|
const [searchError, setSearchError] = useState(false);
|
||||||
|
const [isSearching, setIsSearching] = useState(false);
|
||||||
|
const [newMemberRole, setNewMemberRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
|
||||||
|
|
||||||
|
// Modal State
|
||||||
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||||
|
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const searchTimeoutRef = useRef<NodeJS.Timeout>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||||||
|
const cleanQuery = toEnglishDigits(searchQuery.trim());
|
||||||
|
setSearchError(false);
|
||||||
|
|
||||||
|
if (cleanQuery.length >= 10) {
|
||||||
|
searchTimeoutRef.current = setTimeout(async () => {
|
||||||
|
setIsSearching(true);
|
||||||
|
try {
|
||||||
|
const user = await searchUserByExactMobile(cleanQuery);
|
||||||
|
if (user && user.id) {
|
||||||
|
// Prevent finding self
|
||||||
|
if (user.id === currentUserId) {
|
||||||
|
setSearchResult(null);
|
||||||
|
setSearchError(true);
|
||||||
|
toast.error(t.workspace?.toast?.cannotAddSelf || "You are automatically the owner.");
|
||||||
|
} else {
|
||||||
|
setSearchResult(user);
|
||||||
|
setSearchError(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setSearchResult(null);
|
||||||
|
setSearchError(true);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setSearchResult(null);
|
||||||
|
setSearchError(true);
|
||||||
|
} finally {
|
||||||
|
setIsSearching(false);
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
setSearchResult(null);
|
||||||
|
}
|
||||||
|
return () => { if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current); };
|
||||||
|
}, [searchQuery, currentUserId, t]);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!name.trim()) return;
|
||||||
|
try {
|
||||||
|
setIsSaving(true);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
members: members.map(m => ({ user_id: m.user.id, role: m.role }))
|
||||||
|
};
|
||||||
|
|
||||||
|
await createWorkspace(payload);
|
||||||
|
toast.success(t.workspace?.toast?.successCreate || "Workspace created successfully.");
|
||||||
|
navigate('/workspaces');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorCreate || "Failed to create workspace.");
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddMember = () => {
|
||||||
|
if (!searchResult) return;
|
||||||
|
|
||||||
|
if (members.some(m => m.user.id === searchResult.id)) {
|
||||||
|
toast.error(t.workspace?.userAlreadyAdded || "User already added.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newMember: LocalMember = {
|
||||||
|
localId: Math.random().toString(36).substr(2, 9),
|
||||||
|
user: searchResult,
|
||||||
|
role: newMemberRole
|
||||||
|
};
|
||||||
|
|
||||||
|
setMembers([...members, newMember]);
|
||||||
|
setSearchQuery('');
|
||||||
|
setSearchResult(null);
|
||||||
|
setNewMemberRole('member');
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDeleteModal = (localId: string) => {
|
||||||
|
setMemberIdToDelete(localId);
|
||||||
|
setIsDeleteDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteMember = () => {
|
||||||
|
if (!memberIdToDelete) return;
|
||||||
|
setMembers(members.filter(m => m.localId !== memberIdToDelete));
|
||||||
|
setIsDeleteDialogOpen(false);
|
||||||
|
setMemberIdToDelete(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangeRole = (localId: string, newRole: string) => {
|
||||||
|
setMembers(members.map(m => m.localId === localId ? { ...m, role: newRole as any } : m));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Creator has full rights to manage members before creating
|
||||||
|
const canManageMembers = true;
|
||||||
|
const isFirstOwner = true;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto p-6 space-y-6">
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
|
||||||
|
{t.workspace?.createTitle || "Create Workspace"}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||||
|
{t.workspace?.nameLabel || "Name"}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||||
|
{t.workspace?.descriptionLabel || "Description"}
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => navigate('/workspaces')}
|
||||||
|
>
|
||||||
|
{t.workspace?.cancel || "Cancel"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSaving || !name.trim()}
|
||||||
|
>
|
||||||
|
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
|
||||||
|
|
||||||
|
{canManageMembers && (
|
||||||
|
<div className="mb-6 space-y-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||||
|
dir="auto"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||||
|
|
||||||
|
{searchError && !isSearching && (
|
||||||
|
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||||
|
<AlertCircle className="w-4 h-4" />
|
||||||
|
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{searchResult && !isSearching && (
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||||
|
<div className="flex items-center gap-3 flex-1 w-full">
|
||||||
|
{searchResult.profile_picture ? (
|
||||||
|
<img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
|
||||||
|
{searchResult.first_name?.[0] || "U"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||||
|
{searchResult.first_name} {searchResult.last_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||||
|
{toPersianNum(searchResult.mobile)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<select
|
||||||
|
value={newMemberRole}
|
||||||
|
onChange={(e) => setNewMemberRole(e.target.value as any)}
|
||||||
|
className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||||
|
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||||
|
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||||
|
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleAddMember}
|
||||||
|
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||||
|
className="gap-1.5"
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4" />
|
||||||
|
{members.some(m => m.user?.id === searchResult.id)
|
||||||
|
? (t.workspace?.userAlreadyAdded || "Added")
|
||||||
|
: (t.workspace?.addMember || "Add")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{members.map((m) => {
|
||||||
|
return (
|
||||||
|
<div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{m.user?.profile_picture ? (
|
||||||
|
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||||
|
{m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||||
|
{`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||||
|
<select
|
||||||
|
value={m.role}
|
||||||
|
onChange={(e) => handleChangeRole(m.localId, e.target.value)}
|
||||||
|
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||||
|
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||||
|
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||||
|
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => openDeleteModal(m.localId)}
|
||||||
|
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||||
|
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{members.length === 0 && (
|
||||||
|
<p className="text-sm text-center text-slate-500 py-4">
|
||||||
|
{t.workspace?.noMembers || "No members added yet."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Transition appear show={isDeleteDialogOpen} as={Fragment}>
|
||||||
|
<Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}>
|
||||||
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
|
||||||
|
</Transition.Child>
|
||||||
|
|
||||||
|
<div className="fixed inset-0 overflow-y-auto">
|
||||||
|
<div className="flex min-h-full items-center justify-center p-4">
|
||||||
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0 scale-95"
|
||||||
|
enterTo="opacity-100 scale-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100 scale-100"
|
||||||
|
leaveTo="opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 p-6 shadow-xl transition-all border border-slate-200 dark:border-slate-800">
|
||||||
|
<Dialog.Title as="h3" className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
|
||||||
|
{t.workspace?.confirmDeleteTitle || "Remove Member"}
|
||||||
|
</Dialog.Title>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.workspace?.confirmDeleteMessage || "Are you sure you want to remove this member from the workspace?"}
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 flex justify-end gap-3">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => setIsDeleteDialogOpen(false)}
|
||||||
|
>
|
||||||
|
{t.workspace?.cancel || "Cancel"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDeleteMember}
|
||||||
|
>
|
||||||
|
{t.workspace?.delete || "Delete"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Dialog.Panel>
|
||||||
|
</Transition.Child>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
99
src/pages/WorkspaceDetail.tsx
Normal file
99
src/pages/WorkspaceDetail.tsx
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
|
import { ArrowLeft, ArrowRight, Edit2, Trash2 } from 'lucide-react';
|
||||||
|
import { useTranslation } from '../hooks/useTranslation';
|
||||||
|
import { getWorkspace, deleteWorkspace, type Workspace } from '../api/workspaces';
|
||||||
|
|
||||||
|
export default function WorkspaceDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
const [workspace, setWorkspace] = useState<Workspace | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
const isRtl = lang === 'fa';
|
||||||
|
const BackIcon = isRtl ? ArrowRight : ArrowLeft;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (id) loadWorkspace();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const loadWorkspace = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getWorkspace(id!);
|
||||||
|
setWorkspace(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
navigate('/workspaces');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!window.confirm(t.workspace?.confirmDelete) || !id) return;
|
||||||
|
try {
|
||||||
|
await deleteWorkspace(id);
|
||||||
|
navigate('/workspaces');
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading || !workspace) {
|
||||||
|
return <div className="p-8 text-center">{t.workspace?.loading}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canEdit = workspace.my_role === 'owner' || workspace.my_role === 'admin';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto p-6">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/workspaces')}
|
||||||
|
className="flex items-center gap-2 text-slate-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors"
|
||||||
|
>
|
||||||
|
<BackIcon className="h-5 w-5" />
|
||||||
|
<span>{t.workspace?.back}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-slate-900 rounded-xl p-8 border border-slate-200 dark:border-slate-800 shadow-sm relative">
|
||||||
|
<div className="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">
|
||||||
|
{workspace.name}
|
||||||
|
</h1>
|
||||||
|
<span className="inline-block px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm rounded-full font-medium">
|
||||||
|
{workspace.my_role ? t.workspace?.roles[workspace.my_role] : "-"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{canEdit && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate(`/workspaces/${id}/edit`)}
|
||||||
|
className="p-2 text-slate-500 hover:text-emerald-600 bg-slate-50 dark:bg-slate-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<Edit2 className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
{workspace.my_role === 'owner' && (
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="p-2 text-slate-500 hover:text-red-600 bg-slate-50 dark:bg-slate-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="prose dark:prose-invert max-w-none">
|
||||||
|
<h3 className="text-lg font-semibold mb-2">{t.workspace?.descriptionLabel}</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 whitespace-pre-wrap">
|
||||||
|
{workspace.description || t.workspace?.noDescription}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
419
src/pages/WorkspaceEdit.tsx
Normal file
419
src/pages/WorkspaceEdit.tsx
Normal file
@@ -0,0 +1,419 @@
|
|||||||
|
import React, { useState, useEffect, useRef, Fragment } from 'react';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { useTranslation } from '../hooks/useTranslation';
|
||||||
|
import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
|
||||||
|
import { Dialog, Transition } from '@headlessui/react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import {
|
||||||
|
updateWorkspace,
|
||||||
|
addWorkspaceMembership,
|
||||||
|
removeWorkspaceMembership,
|
||||||
|
updateWorkspaceMembership,
|
||||||
|
fetchWorkspaceMemberships,
|
||||||
|
getWorkspace
|
||||||
|
} from '../api/workspaces';
|
||||||
|
import { searchUserByExactMobile, type SearchedUser } from '../api/users';
|
||||||
|
import { useAppContext } from '../context/AppContext';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
|
||||||
|
const toEnglishDigits = (str: string) => {
|
||||||
|
return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
|
||||||
|
.replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d).toString());
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function EditWorkspace() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const { t, lang } = useTranslation();
|
||||||
|
const isFa = lang === 'fa';
|
||||||
|
|
||||||
|
const toPersianNum = (num: string | number | undefined | null) => {
|
||||||
|
if (num === null || num === undefined) return num;
|
||||||
|
if (!isFa) return num;
|
||||||
|
return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { user } = useAppContext();
|
||||||
|
const currentUserId = user?.id || '';
|
||||||
|
|
||||||
|
// Workspace Info States
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [description, setDescription] = useState('');
|
||||||
|
const [myRole, setMyRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
|
||||||
|
const [workspaceOwnerId, setWorkspaceOwnerId] = useState<string>('');
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
// Members States
|
||||||
|
const [members, setMembers] = useState<any[]>([]);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
|
||||||
|
const [searchError, setSearchError] = useState(false);
|
||||||
|
const [isSearching, setIsSearching] = useState(false);
|
||||||
|
const [newMemberRole, setNewMemberRole] = useState<'owner' | 'admin' | 'member' | 'guest'>('member');
|
||||||
|
|
||||||
|
// Modal State
|
||||||
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||||
|
const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const searchTimeoutRef = useRef<NodeJS.Timeout>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (id) loadData();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const workspaceData = await getWorkspace(id!);
|
||||||
|
setName(workspaceData.name);
|
||||||
|
setDescription(workspaceData.description || '');
|
||||||
|
setMyRole(workspaceData.my_role || 'member');
|
||||||
|
setWorkspaceOwnerId(workspaceData.owner || '');
|
||||||
|
|
||||||
|
const membersData = await fetchWorkspaceMemberships(id!);
|
||||||
|
setMembers(membersData);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorLoad || "Failed to load workspace data.");
|
||||||
|
navigate('/workspaces');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
|
||||||
|
const cleanQuery = toEnglishDigits(searchQuery.trim());
|
||||||
|
setSearchError(false);
|
||||||
|
|
||||||
|
if (cleanQuery.length >= 10) {
|
||||||
|
searchTimeoutRef.current = setTimeout(async () => {
|
||||||
|
setIsSearching(true);
|
||||||
|
try {
|
||||||
|
const user = await searchUserByExactMobile(cleanQuery);
|
||||||
|
if (user && user.id) {
|
||||||
|
setSearchResult(user);
|
||||||
|
setSearchError(false);
|
||||||
|
} else {
|
||||||
|
setSearchResult(null);
|
||||||
|
setSearchError(true);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setSearchResult(null);
|
||||||
|
setSearchError(true);
|
||||||
|
} finally {
|
||||||
|
setIsSearching(false);
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
setSearchResult(null);
|
||||||
|
}
|
||||||
|
return () => { if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current); };
|
||||||
|
}, [searchQuery]);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!name.trim() || !id) return;
|
||||||
|
try {
|
||||||
|
setIsSaving(true);
|
||||||
|
await updateWorkspace(id, { name, description });
|
||||||
|
toast.success(t.workspace?.toast?.successUpdate || "Workspace updated successfully.");
|
||||||
|
navigate('/workspaces');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorUpdate || "Failed to update workspace.");
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddMember = async () => {
|
||||||
|
if (!searchResult || !id) return;
|
||||||
|
try {
|
||||||
|
const newMembership = await addWorkspaceMembership({
|
||||||
|
workspace: id,
|
||||||
|
user: searchResult.id,
|
||||||
|
role: newMemberRole
|
||||||
|
});
|
||||||
|
setMembers([...members, newMembership]);
|
||||||
|
toast.success(t.workspace?.toast?.successAdd || "Member added successfully.");
|
||||||
|
setSearchQuery('');
|
||||||
|
setSearchResult(null);
|
||||||
|
setNewMemberRole('member');
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorAdd || "Failed to add member.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDeleteModal = (membershipId: string) => {
|
||||||
|
setMemberIdToDelete(membershipId);
|
||||||
|
setIsDeleteDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteMember = async () => {
|
||||||
|
if (!memberIdToDelete) return;
|
||||||
|
try {
|
||||||
|
await removeWorkspaceMembership(memberIdToDelete);
|
||||||
|
setMembers(members.filter(m => m.id !== memberIdToDelete));
|
||||||
|
toast.success(t.workspace?.toast?.successRemove || "Member removed successfully.");
|
||||||
|
setIsDeleteDialogOpen(false);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorRemove || "Failed to remove member.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangeRole = async (membershipId: string, newRole: string) => {
|
||||||
|
try {
|
||||||
|
await updateWorkspaceMembership(membershipId, { role: newRole });
|
||||||
|
setMembers(members.map(m => m.id === membershipId ? { ...m, role: newRole } : m));
|
||||||
|
toast.success(t.workspace?.toast?.successRole || "Role updated successfully.");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(t.workspace?.toast?.errorRole || "Failed to update role.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const canManageMembers = myRole === 'owner' || myRole === 'admin';
|
||||||
|
const isFirstOwner = currentUserId === workspaceOwnerId;
|
||||||
|
|
||||||
|
if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto p-6 space-y-6">
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
|
||||||
|
{t.workspace?.editTitle || "Edit Workspace"}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||||
|
{t.workspace?.nameLabel || "Name"}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
|
||||||
|
{t.workspace?.descriptionLabel || "Description"}
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => navigate('/workspaces')}
|
||||||
|
>
|
||||||
|
{t.workspace?.cancel || "Cancel"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSaving || !name.trim()}
|
||||||
|
>
|
||||||
|
{isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.save || "Save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
|
||||||
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
|
||||||
|
|
||||||
|
{canManageMembers && (
|
||||||
|
<div className="mb-6 space-y-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
|
||||||
|
className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
|
||||||
|
dir="auto"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
|
||||||
|
|
||||||
|
{searchError && !isSearching && (
|
||||||
|
<div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
|
||||||
|
<AlertCircle className="w-4 h-4" />
|
||||||
|
{t.workspace?.userNotFound || "No user found with this exact number."}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{searchResult && !isSearching && (
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
|
||||||
|
<div className="flex items-center gap-3 flex-1 w-full">
|
||||||
|
{searchResult.profile_picture ? (
|
||||||
|
<img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
|
||||||
|
{searchResult.first_name?.[0] || "U"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||||
|
{searchResult.first_name} {searchResult.last_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||||
|
{toPersianNum(searchResult.mobile)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<select
|
||||||
|
value={newMemberRole}
|
||||||
|
onChange={(e) => setNewMemberRole(e.target.value as any)}
|
||||||
|
className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||||
|
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||||
|
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||||
|
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleAddMember}
|
||||||
|
disabled={members.some(m => m.user?.id === searchResult.id)}
|
||||||
|
className="gap-1.5"
|
||||||
|
>
|
||||||
|
<UserPlus className="w-4 h-4" />
|
||||||
|
{members.some(m => m.user?.id === searchResult.id)
|
||||||
|
? (t.workspace?.userAlreadyAdded || "Added")
|
||||||
|
: (t.workspace?.addMember || "Add")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{members.map((m) => {
|
||||||
|
const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
|
||||||
|
const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{m.user?.profile_picture ? (
|
||||||
|
<img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
|
||||||
|
{m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||||
|
{m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 self-end sm:self-auto">
|
||||||
|
{canChangeThisUserRole ? (
|
||||||
|
<select
|
||||||
|
value={m.role}
|
||||||
|
onChange={(e) => handleChangeRole(m.id, e.target.value)}
|
||||||
|
className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
|
||||||
|
>
|
||||||
|
{isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
|
||||||
|
<option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
|
||||||
|
<option value="member">{t.workspace?.roles?.member || "Member"}</option>
|
||||||
|
<option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
|
||||||
|
{m.role === 'owner' && <Shield className="w-3 h-3" />}
|
||||||
|
{m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => openDeleteModal(m.id)}
|
||||||
|
className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
|
||||||
|
title={t.workspace?.removeMemberTitle || "Remove member"}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{members.length === 0 && (
|
||||||
|
<p className="text-sm text-center text-slate-500 py-4">
|
||||||
|
{t.workspace?.noMembers || "No members found."}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Transition appear show={isDeleteDialogOpen} as={Fragment}>
|
||||||
|
<Dialog as="div" className="relative z-50" onClose={() => setIsDeleteDialogOpen(false)}>
|
||||||
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
|
||||||
|
</Transition.Child>
|
||||||
|
|
||||||
|
<div className="fixed inset-0 overflow-y-auto">
|
||||||
|
<div className="flex min-h-full items-center justify-center p-4">
|
||||||
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0 scale-95"
|
||||||
|
enterTo="opacity-100 scale-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100 scale-100"
|
||||||
|
leaveTo="opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-slate-900 p-6 shadow-xl transition-all border border-slate-200 dark:border-slate-800">
|
||||||
|
<Dialog.Title as="h3" className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
|
||||||
|
{t.workspace?.confirmDeleteTitle || "Remove Member"}
|
||||||
|
</Dialog.Title>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{t.workspace?.confirmDeleteMessage || "Are you sure you want to remove this member from the workspace?"}
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 flex justify-end gap-3">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => setIsDeleteDialogOpen(false)}
|
||||||
|
>
|
||||||
|
{t.workspace?.cancel || "Cancel"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDeleteMember}
|
||||||
|
>
|
||||||
|
{t.workspace?.delete || "Delete"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Dialog.Panel>
|
||||||
|
</Transition.Child>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -6,6 +6,7 @@ import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspa
|
|||||||
import { useAppContext } from '../context/AppContext';
|
import { useAppContext } from '../context/AppContext';
|
||||||
import { useTranslation } from '../hooks/useTranslation';
|
import { useTranslation } from '../hooks/useTranslation';
|
||||||
import FilterBar from '../components/FilterBar';
|
import FilterBar from '../components/FilterBar';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
|
||||||
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
|
type WorkspaceRole = "owner" | "admin" | "member" | "guest";
|
||||||
|
|
||||||
@@ -90,13 +91,13 @@ export default function Workspaces() {
|
|||||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
|
||||||
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
|
<p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<Button
|
||||||
onClick={() => navigate('/workspaces/create')}
|
onClick={() => navigate('/workspaces/create')}
|
||||||
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-xl transition-colors font-medium shadow-sm"
|
className="gap-2 rounded-xl shadow-sm"
|
||||||
>
|
>
|
||||||
<Plus className="h-5 w-5" />
|
<Plus className="h-5 w-5" />
|
||||||
{t.workspace?.createNew}
|
{t.workspace?.createNew}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterBar
|
<FilterBar
|
||||||
@@ -135,32 +136,38 @@ export default function Workspaces() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
|
<div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
|
||||||
<button
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="icon"
|
||||||
onClick={() => navigate(`/workspaces/${workspace.id}`)}
|
onClick={() => navigate(`/workspaces/${workspace.id}`)}
|
||||||
className="p-2.5 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
|
className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
title={t.workspace?.view}
|
title={t.workspace?.view}
|
||||||
>
|
>
|
||||||
<Eye className="h-4 w-4" />
|
<Eye className="h-4 w-4" />
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<button
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="icon"
|
||||||
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
|
onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
|
||||||
className="p-2.5 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
|
className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||||
title={t.workspace?.edit}
|
title={t.workspace?.edit}
|
||||||
>
|
>
|
||||||
<Edit2 className="h-4 w-4" />
|
<Edit2 className="h-4 w-4" />
|
||||||
</button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isOwner && (
|
{isOwner && (
|
||||||
<button
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="icon"
|
||||||
onClick={() => setDeleteModal({ isOpen: true, workspace })}
|
onClick={() => setDeleteModal({ isOpen: true, workspace })}
|
||||||
className="p-2.5 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-xl transition-colors"
|
className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
|
||||||
title={t.workspace?.delete}
|
title={t.workspace?.delete}
|
||||||
>
|
>
|
||||||
<Trash2 className="h-4 w-4" />
|
<Trash2 className="h-4 w-4" />
|
||||||
</button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -190,19 +197,21 @@ export default function Workspaces() {
|
|||||||
className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
|
className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-end gap-3">
|
<div className="flex justify-end gap-3">
|
||||||
<button
|
<Button
|
||||||
|
variant="secondary"
|
||||||
onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }}
|
onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }}
|
||||||
className="px-5 py-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl transition-colors font-semibold"
|
className="rounded-xl font-semibold"
|
||||||
>
|
>
|
||||||
{t.workspace?.cancel || 'Cancel'}
|
{t.workspace?.cancel || 'Cancel'}
|
||||||
</button>
|
</Button>
|
||||||
<button
|
<Button
|
||||||
|
variant="destructive"
|
||||||
disabled={deleteInput !== deleteModal.workspace.name}
|
disabled={deleteInput !== deleteModal.workspace.name}
|
||||||
onClick={confirmDelete}
|
onClick={confirmDelete}
|
||||||
className="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-semibold"
|
className="rounded-xl font-semibold"
|
||||||
>
|
>
|
||||||
{t.workspace?.delete || 'Delete'}
|
{t.workspace?.delete || 'Delete'}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user