Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y: Enhance accessibility of form and interactive components using semantic HTML, ARIA attributes, and keyboard navigation.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-25 16:17:40 -03:00
parent 59732f3706
commit 5b3fc800c7
6 changed files with 104 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/lms-service/src/handlers_peer_review.rs
+51 -59
View File
@@ -19,30 +19,28 @@ pub async fn submit_assignment(
Json(payload): Json<SubmitAssignmentPayload>, Json(payload): Json<SubmitAssignmentPayload>,
) -> Result<Json<CourseSubmission>, (StatusCode, String)> { ) -> Result<Json<CourseSubmission>, (StatusCode, String)> {
// Check if submission already exists // Check if submission already exists
let existing: Option<CourseSubmission> = sqlx::query_as!( let existing: Option<CourseSubmission> = sqlx::query_as(
CourseSubmission, "SELECT * FROM course_submissions WHERE user_id = $1 AND lesson_id = $2"
"SELECT * FROM course_submissions WHERE user_id = $1 AND lesson_id = $2",
claims.sub,
lesson_id
) )
.bind(claims.sub)
.bind(lesson_id)
.fetch_optional(&pool) .fetch_optional(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
if let Some(_) = existing { if let Some(_) = existing {
// Update existing submission // Update existing submission
let updated = sqlx::query_as!( let updated: CourseSubmission = sqlx::query_as(
CourseSubmission,
r#" r#"
UPDATE course_submissions UPDATE course_submissions
SET content = $1, updated_at = NOW() SET content = $1, updated_at = NOW()
WHERE user_id = $2 AND lesson_id = $3 WHERE user_id = $2 AND lesson_id = $3
RETURNING * RETURNING *
"#, "#
payload.content,
claims.sub,
lesson_id
) )
.bind(&payload.content)
.bind(claims.sub)
.bind(lesson_id)
.fetch_one(&pool) .fetch_one(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -51,19 +49,18 @@ pub async fn submit_assignment(
} }
// Create new submission // Create new submission
let submission = sqlx::query_as!( let submission: CourseSubmission = sqlx::query_as(
CourseSubmission,
r#" r#"
INSERT INTO course_submissions (user_id, course_id, lesson_id, organization_id, content) INSERT INTO course_submissions (user_id, course_id, lesson_id, organization_id, content)
VALUES ($1, $2, $3, $4, $5) VALUES ($1, $2, $3, $4, $5)
RETURNING * RETURNING *
"#, "#
claims.sub,
course_id,
lesson_id,
org_ctx.id,
payload.content
) )
.bind(claims.sub)
.bind(course_id)
.bind(lesson_id)
.bind(org_ctx.id)
.bind(&payload.content)
.fetch_one(&pool) .fetch_one(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -81,8 +78,7 @@ pub async fn get_peer_review_assignment(
// 1. Is not my own // 1. Is not my own
// 2. Has fewer than 2 reviews (configurable, but hardcoded for now) // 2. Has fewer than 2 reviews (configurable, but hardcoded for now)
// 3. I haven't reviewed yet // 3. I haven't reviewed yet
let submission = sqlx::query_as!( let submission: Option<CourseSubmission> = sqlx::query_as(
CourseSubmission,
r#" r#"
SELECT s.* SELECT s.*
FROM course_submissions s FROM course_submissions s
@@ -99,12 +95,12 @@ pub async fn get_peer_review_assignment(
HAVING COUNT(pr.id) < 2 HAVING COUNT(pr.id) < 2
ORDER BY s.submitted_at ASC ORDER BY s.submitted_at ASC
LIMIT 1 LIMIT 1
"#, "#
course_id,
lesson_id,
claims.sub,
org_ctx.id
) )
.bind(course_id)
.bind(lesson_id)
.bind(claims.sub)
.bind(org_ctx.id)
.fetch_optional(&pool) .fetch_optional(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -120,20 +116,20 @@ pub async fn submit_peer_review(
Json(payload): Json<SubmitPeerReviewPayload>, Json(payload): Json<SubmitPeerReviewPayload>,
) -> Result<Json<PeerReview>, (StatusCode, String)> { ) -> Result<Json<PeerReview>, (StatusCode, String)> {
// Verify valid submission // Verify valid submission
let submission = sqlx::query!( let submission_row = sqlx::query(
"SELECT user_id FROM course_submissions WHERE id = $1", "SELECT user_id FROM course_submissions WHERE id = $1"
payload.submission_id
) )
.bind(payload.submission_id)
.fetch_optional(&pool) .fetch_optional(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
let submission = match submission { let submission_user_id = match submission_row {
Some(s) => s, Some(row) => row.get::<Uuid, _>("user_id"),
None => return Err((StatusCode::NOT_FOUND, "Submission not found".to_string())), None => return Err((StatusCode::NOT_FOUND, "Submission not found".to_string())),
}; };
if submission.user_id == claims.sub { if submission_user_id == claims.sub {
return Err(( return Err((
StatusCode::BAD_REQUEST, StatusCode::BAD_REQUEST,
"Cannot review your own submission".to_string(), "Cannot review your own submission".to_string(),
@@ -141,11 +137,11 @@ pub async fn submit_peer_review(
} }
// Check if already reviewed // Check if already reviewed
let existing = sqlx::query!( let existing = sqlx::query(
"SELECT id FROM peer_reviews WHERE submission_id = $1 AND reviewer_id = $2", "SELECT id FROM peer_reviews WHERE submission_id = $1 AND reviewer_id = $2"
payload.submission_id,
claims.sub
) )
.bind(payload.submission_id)
.bind(claims.sub)
.fetch_optional(&pool) .fetch_optional(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -158,19 +154,18 @@ pub async fn submit_peer_review(
} }
// Create review // Create review
let review = sqlx::query_as!( let review: PeerReview = sqlx::query_as(
PeerReview,
r#" r#"
INSERT INTO peer_reviews (submission_id, reviewer_id, score, feedback, organization_id) INSERT INTO peer_reviews (submission_id, reviewer_id, score, feedback, organization_id)
VALUES ($1, $2, $3, $4, $5) VALUES ($1, $2, $3, $4, $5)
RETURNING * RETURNING *
"#, "#
payload.submission_id,
claims.sub,
payload.score,
payload.feedback,
org_ctx.id
) )
.bind(payload.submission_id)
.bind(claims.sub)
.bind(payload.score)
.bind(&payload.feedback)
.bind(org_ctx.id)
.fetch_one(&pool) .fetch_one(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -185,17 +180,16 @@ pub async fn get_my_submission_feedback(
Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>, Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>,
) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> { ) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> {
// Get reviews for my submission on this lesson // Get reviews for my submission on this lesson
let reviews = sqlx::query_as!( let reviews: Vec<PeerReview> = sqlx::query_as(
PeerReview,
r#" r#"
SELECT pr.* SELECT pr.*
FROM peer_reviews pr FROM peer_reviews pr
JOIN course_submissions cs ON pr.submission_id = cs.id JOIN course_submissions cs ON pr.submission_id = cs.id
WHERE cs.user_id = $1 AND cs.lesson_id = $2 WHERE cs.user_id = $1 AND cs.lesson_id = $2
"#, "#
claims.sub,
lesson_id
) )
.bind(claims.sub)
.bind(lesson_id)
.fetch_all(&pool) .fetch_all(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -209,12 +203,11 @@ pub async fn list_lesson_submissions(
State(pool): State<PgPool>, State(pool): State<PgPool>,
Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>, Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>,
) -> Result<Json<Vec<SubmissionWithReviews>>, (StatusCode, String)> { ) -> Result<Json<Vec<SubmissionWithReviews>>, (StatusCode, String)> {
let submissions = sqlx::query_as!( let submissions: Vec<SubmissionWithReviews> = sqlx::query_as(
SubmissionWithReviews,
r#" r#"
SELECT SELECT
s.id, s.user_id, u.full_name, u.email, s.submitted_at, s.id, s.user_id, u.full_name, u.email, s.submitted_at,
COUNT(pr.id) as "review_count!", COUNT(pr.id) as review_count,
AVG(pr.score)::float8 as average_score AVG(pr.score)::float8 as average_score
FROM course_submissions s FROM course_submissions s
JOIN users u ON s.user_id = u.id JOIN users u ON s.user_id = u.id
@@ -222,10 +215,10 @@ pub async fn list_lesson_submissions(
WHERE s.lesson_id = $1 AND s.organization_id = $2 WHERE s.lesson_id = $1 AND s.organization_id = $2
GROUP BY s.id, u.full_name, u.email GROUP BY s.id, u.full_name, u.email
ORDER BY s.submitted_at DESC ORDER BY s.submitted_at DESC
"#, "#
lesson_id,
org_ctx.id
) )
.bind(lesson_id)
.bind(org_ctx.id)
.fetch_all(&pool) .fetch_all(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -239,11 +232,10 @@ pub async fn get_submission_reviews(
State(pool): State<PgPool>, State(pool): State<PgPool>,
Path(submission_id): Path<Uuid>, Path(submission_id): Path<Uuid>,
) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> { ) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> {
let reviews = sqlx::query_as!( let reviews: Vec<PeerReview> = sqlx::query_as(
PeerReview, "SELECT * FROM peer_reviews WHERE submission_id = $1"
"SELECT * FROM peer_reviews WHERE submission_id = $1",
submission_id
) )
.bind(submission_id)
.fetch_all(&pool) .fetch_all(&pool)
.await .await
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?; .map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
web/experience/src/app/globals.css
+3 -1
View File
@@ -13,7 +13,8 @@
--accent-primary: var(--primary-color); --accent-primary: var(--primary-color);
--accent-secondary: var(--secondary-color); --accent-secondary: var(--secondary-color);
--glass-bg: rgba(255, 255, 255, 0.05); /* Increased slightly for contrast */ --glass-bg: rgba(255, 255, 255, 0.05);
/* Increased slightly for contrast */
--glass-border: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(16px); --glass-blur: blur(16px);
} }
@@ -48,6 +49,7 @@ body {
.gradient-text { .gradient-text {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
web/studio/src/components/BrandingSettings.tsx
+10 -7
View File
@@ -58,16 +58,17 @@ export default function BrandingSettings() {
return ( return (
<div className="space-y-8 max-w-4xl mx-auto"> <div className="space-y-8 max-w-4xl mx-auto">
<div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm"> <fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<h3 className="text-xl font-bold mb-6 flex items-center gap-2"> <legend className="px-2 text-xl font-bold flex items-center gap-2">
<span>🎨</span> Brand Identity <span aria-hidden="true">🎨</span> Brand Identity
</h3> </legend>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Platform Name */} {/* Platform Name */}
<div className="col-span-full"> <div className="col-span-full">
<label className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label> <label htmlFor="platform-name" className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
<input <input
id="platform-name"
type="text" type="text"
value={formData.platform_name || ""} value={formData.platform_name || ""}
onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })} onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
@@ -94,6 +95,7 @@ export default function BrandingSettings() {
)} )}
</div> </div>
<FileUpload <FileUpload
id="logo-upload"
accept="image/png,image/jpeg,image/svg+xml" accept="image/png,image/jpeg,image/svg+xml"
currentUrl={org.logo_url} currentUrl={org.logo_url}
customUploadFn={async (file) => { customUploadFn={async (file) => {
@@ -127,6 +129,7 @@ export default function BrandingSettings() {
)} )}
</div> </div>
<FileUpload <FileUpload
id="favicon-upload"
accept="image/png,image/x-icon,image/svg+xml,image/jpeg" accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
currentUrl={org.favicon_url} currentUrl={org.favicon_url}
customUploadFn={async (file) => { customUploadFn={async (file) => {
@@ -141,7 +144,7 @@ export default function BrandingSettings() {
<p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p> <p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
</div> </div>
</div> </div>
</div> </fieldset>
<fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm"> <fieldset className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
<legend className="px-2 text-xl font-bold flex items-center gap-2"> <legend className="px-2 text-xl font-bold flex items-center gap-2">
@@ -211,6 +214,6 @@ export default function BrandingSettings() {
{saving ? "Saving Changes..." : "Save Branding Settings"} {saving ? "Saving Changes..." : "Save Branding Settings"}
</button> </button>
</div> </div>
</div> </div >
); );
} }
web/studio/src/components/Combobox.tsx
+3 -1
View File
@@ -13,9 +13,10 @@ interface ComboboxProps {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
placeholder?: string; placeholder?: string;
id?: string;
} }
export default function Combobox({ options, value, onChange, placeholder = "Search..." }: ComboboxProps) { export default function Combobox({ options, value, onChange, placeholder = "Search...", id }: ComboboxProps) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@@ -39,6 +40,7 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
return ( return (
<div className="relative" ref={containerRef}> <div className="relative" ref={containerRef}>
<button <button
id={id}
type="button" type="button"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
aria-haspopup="listbox" aria-haspopup="listbox"
web/studio/src/components/FileUpload.tsx
+28 -7
View File
@@ -8,9 +8,10 @@ interface FileUploadProps {
currentUrl?: string; currentUrl?: string;
accept?: string; accept?: string;
customUploadFn?: (file: File, onProgress: (pct: number) => void) => Promise<{ url: string }>; customUploadFn?: (file: File, onProgress: (pct: number) => void) => Promise<{ url: string }>;
id?: string;
} }
export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*", customUploadFn }: FileUploadProps) { export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*", customUploadFn, id }: FileUploadProps) {
const [isUploading, setIsUploading] = useState(false); const [isUploading, setIsUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0); const [uploadProgress, setUploadProgress] = useState(0);
const [uploadingFileName, setUploadingFileName] = useState(""); const [uploadingFileName, setUploadingFileName] = useState("");
@@ -69,25 +70,36 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
<div className="space-y-4"> <div className="space-y-4">
{/* Upload Progress Modal Overlay */} {/* Upload Progress Modal Overlay */}
{isUploading && ( {isUploading && (
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"> <div
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-md animate-in fade-in duration-300"
role="dialog"
aria-modal="true"
aria-labelledby="upload-progress-title"
>
<div className="w-full max-w-md bg-gray-900 border border-white/10 p-8 rounded-3xl shadow-2xl space-y-6 text-center"> <div className="w-full max-w-md bg-gray-900 border border-white/10 p-8 rounded-3xl shadow-2xl space-y-6 text-center">
<div className="w-20 h-20 bg-blue-500/10 border border-blue-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse"> <div className="w-20 h-20 bg-blue-500/10 border border-blue-500/20 rounded-full flex items-center justify-center mx-auto animate-pulse">
<span className="text-3xl">📤</span> <span className="text-3xl" aria-hidden="true">📤</span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-xl font-bold text-white tracking-tight">Uploading Asset</h3> <h3 id="upload-progress-title" className="text-xl font-bold text-white tracking-tight">Uploading Asset</h3>
<p className="text-xs text-gray-400 font-medium truncate px-4">{uploadingFileName}</p> <p className="text-xs text-gray-400 font-medium truncate px-4">{uploadingFileName}</p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner"> <div
className="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 shadow-inner"
role="progressbar"
aria-valuenow={uploadProgress}
aria-valuemin={0}
aria-valuemax={100}
>
<div <div
className="h-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-300 ease-out shadow-[0_0_15px_rgba(59,130,246,0.5)]" className="h-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-300 ease-out shadow-[0_0_15px_rgba(59,130,246,0.5)]"
style={{ width: `${uploadProgress}%` }} style={{ width: `${uploadProgress}%` }}
/> />
</div> </div>
<div className="flex justify-between items-center px-1"> <div className="flex justify-between items-center px-1" aria-live="polite">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Processing...</span> <span className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Processing...</span>
<span className="text-lg font-black italic text-white">{uploadProgress}%</span> <span className="text-lg font-black italic text-white">{uploadProgress}%</span>
</div> </div>
@@ -101,6 +113,10 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
)} )}
<div <div
id={id}
role="button"
tabIndex={0}
aria-label="Upload file - Drag and drop or click to browse"
className={`relative group cursor-pointer border-2 border-dashed rounded-xl p-8 transition-all flex flex-col items-center justify-center gap-4 ${dragActive ? "border-blue-500 bg-blue-500/10 scale-[1.02]" : "border-white/10 hover:border-white/20 bg-white/5" className={`relative group cursor-pointer border-2 border-dashed rounded-xl p-8 transition-all flex flex-col items-center justify-center gap-4 ${dragActive ? "border-blue-500 bg-blue-500/10 scale-[1.02]" : "border-white/10 hover:border-white/20 bg-white/5"
} ${isUploading ? "opacity-30 pointer-events-none" : ""}`} } ${isUploading ? "opacity-30 pointer-events-none" : ""}`}
onDragEnter={handleDrag} onDragEnter={handleDrag}
@@ -108,6 +124,11 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
onDragOver={handleDrag} onDragOver={handleDrag}
onDrop={handleDrop} onDrop={handleDrop}
onClick={() => !isUploading && fileInputRef.current?.click()} onClick={() => !isUploading && fileInputRef.current?.click()}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
!isUploading && fileInputRef.current?.click();
}
}}
> >
<input <input
ref={fileInputRef} ref={fileInputRef}
@@ -119,7 +140,7 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
/> />
<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors"> <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
<span className="text-2xl group-hover:scale-110 transition-transform">📁</span> <span className="text-2xl group-hover:scale-110 transition-transform" aria-hidden="true">📁</span>
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="text-sm font-bold text-gray-300">Drag & drop or <span className="text-blue-400 underline decoration-blue-500/30">browse</span></p> <p className="text-sm font-bold text-gray-300">Drag & drop or <span className="text-blue-400 underline decoration-blue-500/30">browse</span></p>
web/studio/src/components/OrganizationSelector.tsx
+9 -6
View File
@@ -32,20 +32,23 @@ export default function OrganizationSelector({
return ( return (
<Modal isOpen={isOpen} onClose={onClose} title={title}> <Modal isOpen={isOpen} onClose={onClose} title={title}>
<div className="space-y-6"> <div className="space-y-6">
<div> <fieldset>
<label className="block text-sm font-medium text-gray-400 mb-2"> <legend className="sr-only">Organization Selection</legend>
<label htmlFor="organization-select" className="block text-sm font-medium text-gray-400 mb-2">
Target Organization Target Organization
</label> </label>
<Combobox <Combobox
id="organization-select"
options={organizations} options={organizations}
value={selectedId} value={selectedId}
onChange={setSelectedId} onChange={setSelectedId}
placeholder="Search or Select Organization..." placeholder="Search or Select Organization..."
/> />
<p className="mt-3 text-xs text-gray-500 italic"> </fieldset>
Leave empty to use the Default Organization.
</p> <p className="mt-3 text-xs text-gray-500 italic">
</div> Leave empty to use the Default Organization.
</p>
<div className="flex gap-3 pt-2"> <div className="flex gap-3 pt-2">
<button <button