src/renderer/src/
├── components/         # Tekrar kullanılabilir bileşenler
│   ├── layout/         #   AppHeader, AppLayout, AppSidebar
│   └── common/         #   Ortak bileşenler (ConfirmModal, DataTable, vb.)
├── context/            # Global state (Context + useReducer)
│   ├── index.ts        #   Barrel: AuthProvider, AuthContext, AuthContextValue (tek giriş)
│   ├── AuthContext.tsx #   AuthProvider bileşeni (Fast Refresh uyumu için sadece provider)
│   └── auth-context-def.ts # Context tanımı (createContext, reducer, tipler)
├── hooks/              # Custom hook'lar (useAuth, useDocument, vb.)
├── lib/                # API katmanı ve yardımcılar
│   ├── api.ts          #   Tüm IPC çağrıları (modül bazlı)
│   └── notifications.ts #  Bildirim yardımcıları
├── pages/              # Sayfa bileşenleri (lazy loaded)
│   └── {sayfa-adi}/    #   Her sayfa kendi klasöründe
├── router/             # Route tanımları ve guard'lar
└── theme/              # Mantine tema yapılandırması

// src/renderer/src/lib/api.ts
import type { ServiceResponse, YourEntity, CreateYourRequest } from '@shared/types'

export const yourModuleApi = {
  // Standart CRUD — kanal adları BaseService pattern ile eşleşir
  getAll: (): Promise<ServiceResponse<YourEntity[]>> =>
    invoke<YourEntity[]>('your-module:get-all'),

  getById: (id: number): Promise<ServiceResponse<YourEntity>> =>
    invoke<YourEntity>('your-module:get-by-id', { id }),

  create: (data: CreateYourRequest): Promise<ServiceResponse<YourEntity>> =>
    invoke<YourEntity>('your-module:create', data),

  update: (data: UpdateYourRequest): Promise<ServiceResponse<YourEntity>> =>
    invoke<YourEntity>('your-module:update', data),

  delete: (id: number): Promise<ServiceResponse<boolean>> =>
    invoke<boolean>('your-module:delete', { id }),

  // Özel endpointler
  search: (query: string): Promise<ServiceResponse<YourEntity[]>> =>
    invoke<YourEntity[]>('your-module:search', { query }),
}

// src/renderer/src/pages/{sayfa-adi}/{SayfaAdi}Page.tsx
export default function YourPage(): React.JSX.Element {
  // 1. State tanımları
  const [items, setItems] = useState<YourEntity[]>([])
  const [loading, setLoading] = useState(true)

  // 2. Veri çekme fonksiyonu (useCallback ile memoize)
  const fetchItems = useCallback(async (): Promise<void> => {
    setLoading(true)
    const response = await yourModuleApi.getAll()
    if (response.success) {
      setItems(response.data)
    } else {
      showError(response.message)
    }
    setLoading(false)
  }, [])

  // 3. İlk yüklemede veri çek
  useEffect(() => { fetchItems() }, [fetchItems])

  // 4. Loading state kontrolü
  if (loading) return <LoadingSpinner />

  // 5. Sayfa render
  return (/* ... */)
}

// src/renderer/src/router/routes.ts
const YourPage = lazy(() => import('@renderer/pages/{sayfa-adi}/{SayfaAdi}Page'))

// routes dizisine ekle:
{
  path: '/{sayfa-adi}',
  component: YourPage,
  pageKey: '{sayfa-adi}',         // PAGE_KEYS ile eşleşmeli
  showInSidebar: true,
  label: 'Sayfa Etiketi',
  minimumRole: 'user',            // Opsiyonel: minimum rol
  requiresPermission: true         // İzin kontrolü yapılsın mı
}

// src/renderer/src/components/layout/AppSidebar.tsx — PAGE_ICONS'a ekle
const PAGE_ICONS: Record<string, React.ReactNode> = {
  // ... mevcut ikonlar ...
  '{sayfa-adi}': <IconYourIcon size={20} stroke={1.5} />,
}

// src/renderer/src/context/{Modul}Context.tsx
import { createContext, useReducer, useCallback, type ReactNode } from 'react'

// 1. State tipi
interface YourState {
  items: YourEntity[]
  isLoading: boolean
}

// 2. Action tipleri (discriminated union)
type YourAction =
  | { type: 'SET_ITEMS'; payload: YourEntity[] }
  | { type: 'SET_LOADING'; payload: boolean }

// 3. Reducer (saf fonksiyon)
function yourReducer(state: YourState, action: YourAction): YourState {
  switch (action.type) {
    case 'SET_ITEMS':
      return { ...state, items: action.payload }
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload }
    default:
      return state
  }
}

// 4. Context değer tipi (dışa aktarılır)
export interface YourContextValue {
  state: YourState
  fetchItems: () => Promise<void>
}

// 5. Context oluştur (null başlangıç)
export const YourContext = createContext<YourContextValue | null>(null)

// 6. Provider bileşeni
export function YourProvider({ children }: { children: ReactNode }): React.JSX.Element {
  const [state, dispatch] = useReducer(yourReducer, { items: [], isLoading: false })

  const fetchItems = useCallback(async (): Promise<void> => {
    dispatch({ type: 'SET_LOADING', payload: true })
    const response = await yourModuleApi.getAll()
    if (response.success) {
      dispatch({ type: 'SET_ITEMS', payload: response.data })
    }
    dispatch({ type: 'SET_LOADING', payload: false })
  }, [])

  return (
    <YourContext.Provider value={{ state, fetchItems }}>
      {children}
    </YourContext.Provider>
  )
}

// src/renderer/src/hooks/useYour.ts
import { useContext } from 'react'
import { YourContext, type YourContextValue } from '@renderer/context'  // ← Barrel import

export function useYour(): YourContextValue {
  const context = useContext(YourContext)
  if (!context) {
    throw new Error('useYour hook, YourProvider içinde kullanılmalıdır')
  }
  return context
}

Bileşen → lib/api.ts (tipli fonksiyon) → window.api.invoke (preload) → IPC → Backend

// ✅ DOĞRU — api.ts üzerinden, hata kontrolü var
const response = await yourModuleApi.getAll()
if (!response.success) {
  showError(response.message)
  return
}
const items = response.data

// ❌ YASAK — doğrudan IPC, hata kontrolü yok
const data = await window.api.invoke('your-module:get-all')
setItems(data.data)

// Kısa yol: Hata → otomatik bildirim, başarı → opsiyonel bildirim
const response = await yourModuleApi.create(data)
handleApiResponse(response, { showSuccess: true, successMessage: 'Kayıt oluşturuldu' })
if (response.success) {
  // başarılı işlem sonrası aksiyon
  form.reset()
  onClose()
  fetchItems()  // listeyi yenile
}

// 1. Form tipi tanımla
interface FormValues {
  title: string
  category: string
}

// 2. useForm ile form oluştur
const form = useForm<FormValues>({
  initialValues: { title: '', category: '' },
  validate: {
    title: (v) => (v.trim().length === 0 ? 'Başlık zorunludur' : null),
    category: (v) => (!v ? 'Kategori seçiniz' : null),
  },
})

// 3. Submit handler — API çağrısı + bildirim + temizlik
const handleSubmit = async (values: FormValues): Promise<void> => {
  setLoading(true)
  const response = await yourModuleApi.create(values)
  handleApiResponse(response, { showSuccess: true, successMessage: 'Kayıt oluşturuldu' })
  if (response.success) {
    form.reset()
    onClose()
    onSuccess()  // üst bileşene bildir (liste yenileme vb.)
  }
  setLoading(false)
}

// 4. Form JSX'te: form.onSubmit(handleSubmit) ve form.getInputProps('fieldName')