bugfix: invitation link copy option disapearing fixed. route problem for unauthorizrd users opening invitation link fixed.

2026-05-17 00:02:13 +03:30
parent 627219df58
commit 2d43254af2
14 changed files with 561 additions and 205 deletions
--- a/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { Building2, Beaker, Mail } from 'lucide-react';
+import { Input } from '@/components/ui/common/Input';
+import { Button } from '@/components/ui/common/Button';
+
+export function OrganizationSelectorContent() {
+  const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [organizationName, setOrganizationName] = useState('');
+  const [organizationEmail, setOrganizationEmail] = useState('');
+  const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
+
+  const getIcon = (type: string) =>
+    type === 'CLINIC' ? <Building2 className="h-8 w-8 icon-flat" /> : <Beaker className="h-8 w-8 icon-flat" />;
+
+  const handleCreateOrganization = async () => {
+    try {
+      clearError();
+      const createdId = await createOrganization(
+        organizationName.trim(),
+        organizationEmail.trim(),
+        organizationType,
+      );
+      setOrganizationName('');
+      setOrganizationEmail('');
+      setOrganizationType('CLINIC');
+      setIsCreateOpen(false);
+      await selectOrganization(createdId);
+    } catch {
+      // handled by auth context
+    }
+  };
+
+  if (isLoading) {
+    return <p className="text-text-secondary">Loading...</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
+          <p className="text-text-secondary mt-2">
+            Select an organization to continue, or create a new one.
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant={isCreateOpen ? 'outline' : 'primary'}
+          onClick={() => {
+            clearError();
+            setIsCreateOpen((prev) => !prev);
+          }}
+        >
+          {isCreateOpen ? 'Cancel' : 'Create Organization'}
+        </Button>
+      </div>
+
+      {isCreateOpen && (
+        <div className="surface-card p-6 space-y-4">
+          <Input
+            label="Organization name"
+            value={organizationName}
+            onChange={(event) => setOrganizationName(event.target.value)}
+            placeholder="Sunshine Dental Clinic"
+            icon={<Building2 className="h-5 w-5 icon-flat" />}
+          />
+          <Input
+            label="Organization email"
+            value={organizationEmail}
+            onChange={(event) => setOrganizationEmail(event.target.value)}
+            placeholder="contact@sunshineclinic.com"
+            type="email"
+            icon={<Mail className="h-5 w-5 icon-flat" />}
+          />
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              Organization type
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => setOrganizationType('CLINIC')}
+                className={`p-3 border rounded-[var(--radius-md)] text-sm ${
+                  organizationType === 'CLINIC'
+                    ? 'border-primary/60 bg-primary-soft text-text-primary'
+                    : 'border-border text-text-secondary hover:border-border-strong'
+                }`}
+              >
+                Dental Clinic
+              </button>
+              <button
+                type="button"
+                onClick={() => setOrganizationType('LAB')}
+                className={`p-3 border rounded-[var(--radius-md)] text-sm ${
+                  organizationType === 'LAB'
+                    ? 'border-primary/60 bg-primary-soft text-text-primary'
+                    : 'border-border text-text-secondary hover:border-border-strong'
+                }`}
+              >
+                Dental Lab
+              </button>
+            </div>
+          </div>
+          {error && (
+            <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
+              <p className="text-sm text-red-600">{error}</p>
+            </div>
+          )}
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="primary"
+              onClick={handleCreateOrganization}
+              isLoading={isLoading}
+              disabled={!organizationName.trim() || !organizationEmail.trim()}
+            >
+              Create and Continue
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {!organizations.length ? (
+        <div className="surface-card p-8 text-center">
+          <p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {organizations.map((org) => (
+            <button
+              key={org.id}
+              onClick={() => selectOrganization(org.id)}
+              className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
+            >
+              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
+                {getIcon(org.type)}
+              </div>
+
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-text-primary">
+                  {org.name}
+                </h3>
+                <p className="text-sm text-text-secondary">
+                  {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
+                </p>
+              </div>
+
+              <div className="text-primary text-sm">
+                Continue →
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}