feature: button and badge components updated.

frontend/src/app/(dashboard)/organizations/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
-import { Check, Copy, Search, Send } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import {
   organizationApi,
@@ -9,6 +8,7 @@ import {
   type CounterpartSearchResultDto,
 } from '@/lib/api/organization';
 import { Button } from '@/components/ui/common/Button';
+import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
 import { Input } from '@/components/ui/common/Input';
 import type { ApiError } from '@/types/api';
 
@@ -39,6 +39,13 @@ function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInvit
   window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
 }
 
+/** First letter uppercase, rest lowercase (e.g. ACTIVE → Active). */
+function formatOrganizationStatusLabel(status: string): string {
+  if (!status) return status;
+  const lower = status.toLowerCase();
+  return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
+
 function formatApiMessage(err: unknown): string {
   if (!err || typeof err !== 'object') return 'Something went wrong';
   const m = (err as ApiError).message;
@@ -202,7 +209,6 @@ export default function OrganizationsPage() {
             placeholder={`Search by ${counterpartLabel.toLowerCase()} name, email, or phone`}
           />
           <Button type="button" isLoading={searchLoading} onClick={() => void runSearch()}>
-            <Search className="w-4 h-4 mr-2" />
             Search
           </Button>
         </div>
@@ -238,7 +244,6 @@ export default function OrganizationsPage() {
             disabled={!selectedResult}
             onClick={() => void createLink()}
           >
-            <Send className="w-4 h-4 mr-2" />
             Request link
           </Button>
         </div>
@@ -303,9 +308,12 @@ export default function OrganizationsPage() {
                     <td className="p-3 text-text-primary">{item.organizationName}</td>
                     <td className="p-3 text-text-secondary">{item.ownerEmail}</td>
                     <td className="p-3">
-                      <span className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-text-primary">
-                        {item.status}
-                      </span>
+                      <Badge
+                        variant={organizationLinkStatusVariant(item.status)}
+                        fixedWidth
+                      >
+                        {formatOrganizationStatusLabel(item.status)}
+                      </Badge>
                     </td>
                     <td className="p-3">
                       {item.kind === 'INVITATION' &&
@@ -327,14 +335,7 @@ export default function OrganizationsPage() {
                               }
                             }}
                           >
-                            {copiedId === item.id ? (
-                              <Check className="w-4 h-4" />
-                            ) : (
-                              <Copy className="w-4 h-4" />
-                            )}
-                            <span className="ml-1">
-                              {copiedId === item.id ? 'Copied' : 'Copy link'}
-                            </span>
+                            {copiedId === item.id ? 'Copied' : 'Copy link'}
                           </Button>
                         )}
                     </td>