atahango/belgeler/yapilan2.md

GAuth-Central Admin Panel - Walkthrough

Tamamlanan Özellikler

1. Proje Altyapısı

• Teknolojiler: React, Vite, TypeScript, Tailwind CSS, Shadcn UI.
• Klasör Yapısı: src/features, src/components, src/layouts şeklinde modüler yapı.
• API İstemcisi: Axios ile merkezi yapı, interceptor'lar ile otomatik token yönetimi.
• Tema: Shadcn UI ve Tailwind CSS ile modern, responsive tasarım.

2. Kimlik Doğrulama (Auth)

• Giriş Sayfası: E-posta ve şifre ile giriş.
• Auth Context: Kullanıcı oturum yönetimi, localStorage üzerinde token saklama.
• Korumalı Route: /login harici sayfalar için oturum kontrolü.

3. Kullanıcı Arayüzü (UI)

• Dashboard Layout: Sidebar ve Header içeren ana yerleşim.
• Dashboard Sayfası: Özet kartları (mock veri).
• Kullanıcılar Sayfası: Backend'den veri çeken, sayfalamalı ve aramalı kullanıcı listesi.
• Bileşenler: Button, Input, Table, Card, Form, Dropdown Menu (shadcn/ui).

Nasıl Çalıştırılır?

1. Bağımlılıkları Yükle:

   cd admin-panel
   npm install
   

2. Geliştirme Sunucusunu Başlat:

   npm run dev
   

3. Backend Bağlantısı:

   • Varsayılan olarak http://localhost:8080 adresine bağlanır.
   • Değiştirmek için .env dosyası oluşturun: VITE_API_BASE_URL=http://localhost:8080

Ekran Görüntüleri & Kod Örnekleri

Kullanıcı Listesi (UserList.tsx)

export function UserList() {
  const { data } = useUsers(page, 10, search)
  // ...
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Email</TableHead>
          <TableHead>Roller</TableHead>
           {/* ... */}
        </TableRow>
      </TableHeader>
      <TableBody>
        {data?.users?.map(user => (
          <TableRow key={user.id}>
             {/* ... */}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

API İstemcisi (api.ts)

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    // 401 hatasında otomatik token yenileme
    if (error.response?.status === 401) {
       // ... refresh token logic
    }
  }
)