# ezykl/bookstore-admin architecture

> Architecture diagram of the GitHub repository ezykl/bookstore-admin, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ezykl/bookstore-admin
- Repository: https://github.com/ezykl/bookstore-admin

## Overview

Bookstore Admin is a small authenticated book-management UI. The user signs in, browses a paginated book list, may view cost prices when permitted, and can open a book to edit it. Authentication is restored from a persisted token; protected routes gate the book workflows. The sampled source confirms auth state, storage, and list/detail fetching. The README documents cost-price viewing and editing, but those page/component implementations were not sampled, so their internal wiring is shown only where the tree supports it.

Main entry points: [`src/api/books.ts`](https://github.com/ezykl/bookstore-admin/blob/main/src/api/books.ts) (Books API), [`src/App.tsx`](https://github.com/ezykl/bookstore-admin/blob/main/src/App.tsx) (App composition), [`src/layouts/ProtectedLayout.tsx`](https://github.com/ezykl/bookstore-admin/blob/main/src/layouts/ProtectedLayout.tsx) (Protected layout), [`src/context/AuthContext.tsx`](https://github.com/ezykl/bookstore-admin/blob/main/src/context/AuthContext.tsx) (Auth provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_app["App composition<br/>[App.tsx]"]
  node_router["Route table<br/>[index.tsx]"]
  node_gate["Session gate<br/>[AuthGate.tsx]"]
  node_protected["Protected layout"]
end

subgraph group_auth["Authentication"]
  node_login["Login screen<br/>[Login.tsx]"]
  node_authstate["Auth provider<br/>[AuthContext.tsx]"]
  node_authhook["Auth hook<br/>[useAuth.ts]"]
  node_tokenstore["Token storage<br/>[storage.ts]"]
  node_permissions["Permission checks<br/>[permissions.ts]"]
end

subgraph group_books["Book management"]
  node_books["Books screen<br/>[Books.tsx]"]
  node_booktable["Books table<br/>[BookTable.tsx]"]
  node_bookrow["Book row<br/>[BookRow.tsx]"]
  node_pagination["Pagination<br/>[Pagination.tsx]"]
  node_costmodal["Cost price view<br/>[CostPriceModal.tsx]"]
  node_edit["Edit book screen<br/>[EditBook.tsx]"]
  node_editform["Book edit form<br/>[EditBookForm.tsx]"]
end

subgraph group_api["API and state"]
  node_authapi["Auth API<br/>[auth.ts]"]
  node_booklist["Book list state<br/>[useBooks.ts]"]
  node_bookdetail["Book detail state<br/>[useBook.ts]"]
  node_booksapi["Books API<br/>[books.ts]"]
  node_http["HTTP client<br/>[axios.ts]"]
end

node_admin(("Admin user"))
node_backend{{"Bookstore API"}}

node_admin -->|"uses"| node_app
node_app -->|"provides auth"| node_authstate
node_app -->|"renders"| node_gate
node_gate -->|"reads state"| node_authhook
node_app -->|"mounts routes"| node_router
node_router -->|"routes login"| node_login
node_router -->|"routes protected"| node_protected
node_protected -->|"routes list"| node_books
node_protected -->|"routes edit"| node_edit
node_login -->|"uses auth"| node_authhook
node_authstate -->|"requests auth"| node_authapi
node_authstate -->|"reads/writes token"| node_tokenstore
node_authstate -->|"restores or changes session"| node_backend
node_authapi -->|"sends requests"| node_http
node_http -->|"calls API"| node_backend
node_books -->|"loads page"| node_booklist
node_booklist -->|"fetches books"| node_booksapi
node_books -->|"renders results"| node_booktable
node_booktable -->|"renders rows"| node_bookrow
node_booktable -->|"offers paging"| node_pagination
node_booklist -->|"requests pages"| node_booksapi
node_booksapi -->|"sends requests"| node_http
node_edit -->|"loads book"| node_bookdetail
node_bookdetail -->|"fetches record"| node_booksapi
node_edit -->|"renders form"| node_editform
node_editform -->|"updates book"| node_booksapi
node_booksapi -->|"reads/writes books"| node_backend
node_bookrow -->|"opens cost view"| node_costmodal
node_costmodal -.->|"checks access"| node_permissions
node_protected -->|"checks session"| node_authhook

click node_app "https://github.com/ezykl/bookstore-admin/blob/main/src/App.tsx"
click node_router "https://github.com/ezykl/bookstore-admin/blob/main/src/router/index.tsx"
click node_gate "https://github.com/ezykl/bookstore-admin/blob/main/src/components/common/AuthGate.tsx"
click node_protected "https://github.com/ezykl/bookstore-admin/blob/main/src/layouts/ProtectedLayout.tsx"
click node_login "https://github.com/ezykl/bookstore-admin/blob/main/src/pages/Login.tsx"
click node_authstate "https://github.com/ezykl/bookstore-admin/blob/main/src/context/AuthContext.tsx"
click node_authhook "https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useAuth.ts"
click node_tokenstore "https://github.com/ezykl/bookstore-admin/blob/main/src/services/storage.ts"
click node_authapi "https://github.com/ezykl/bookstore-admin/blob/main/src/api/auth.ts"
click node_books "https://github.com/ezykl/bookstore-admin/blob/main/src/pages/Books.tsx"
click node_booklist "https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useBooks.ts"
click node_bookdetail "https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useBook.ts"
click node_booksapi "https://github.com/ezykl/bookstore-admin/blob/main/src/api/books.ts"
click node_booktable "https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/BookTable.tsx"
click node_bookrow "https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/BookRow.tsx"
click node_pagination "https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/Pagination.tsx"
click node_costmodal "https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/CostPriceModal.tsx"
click node_edit "https://github.com/ezykl/bookstore-admin/blob/main/src/pages/EditBook.tsx"
click node_editform "https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/EditBookForm.tsx"
click node_permissions "https://github.com/ezykl/bookstore-admin/blob/main/src/utils/permissions.ts"
click node_http "https://github.com/ezykl/bookstore-admin/blob/main/src/api/axios.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_router,node_gate,node_protected,node_admin toneBlue
class node_login,node_authstate,node_authhook,node_tokenstore,node_permissions toneAmber
class node_books,node_booktable,node_bookrow,node_pagination,node_costmodal,node_edit,node_editform,node_backend toneMint
class node_authapi,node_booklist,node_bookdetail,node_booksapi,node_http toneRose
```

## Components

### Application flow

- [App composition](https://github.com/ezykl/bookstore-admin/blob/main/src/App.tsx): `src/App.tsx`
- [Route table](https://github.com/ezykl/bookstore-admin/blob/main/src/router/index.tsx): `src/router/index.tsx`
- [Session gate](https://github.com/ezykl/bookstore-admin/blob/main/src/components/common/AuthGate.tsx): `src/components/common/AuthGate.tsx`
- [Protected layout](https://github.com/ezykl/bookstore-admin/blob/main/src/layouts/ProtectedLayout.tsx): `src/layouts/ProtectedLayout.tsx`

### Authentication

- [Login screen](https://github.com/ezykl/bookstore-admin/blob/main/src/pages/Login.tsx): `src/pages/Login.tsx`
- [Auth provider](https://github.com/ezykl/bookstore-admin/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Auth hook](https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Token storage](https://github.com/ezykl/bookstore-admin/blob/main/src/services/storage.ts): `src/services/storage.ts`
- [Permission checks](https://github.com/ezykl/bookstore-admin/blob/main/src/utils/permissions.ts): `src/utils/permissions.ts`

### Book management

- [Books screen](https://github.com/ezykl/bookstore-admin/blob/main/src/pages/Books.tsx): `src/pages/Books.tsx`
- [Books table](https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/BookTable.tsx): `src/components/books/BookTable.tsx`
- [Book row](https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/BookRow.tsx): `src/components/books/BookRow.tsx`
- [Pagination](https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/Pagination.tsx): `src/components/books/Pagination.tsx`
- [Cost price view](https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/CostPriceModal.tsx): `src/components/books/CostPriceModal.tsx`
- [Edit book screen](https://github.com/ezykl/bookstore-admin/blob/main/src/pages/EditBook.tsx): `src/pages/EditBook.tsx`
- [Book edit form](https://github.com/ezykl/bookstore-admin/blob/main/src/components/books/EditBookForm.tsx): `src/components/books/EditBookForm.tsx`

### API and state

- [Auth API](https://github.com/ezykl/bookstore-admin/blob/main/src/api/auth.ts): `src/api/auth.ts`
- [Book list state](https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useBooks.ts): `src/hooks/useBooks.ts`
- [Book detail state](https://github.com/ezykl/bookstore-admin/blob/main/src/hooks/useBook.ts): `src/hooks/useBook.ts`
- [Books API](https://github.com/ezykl/bookstore-admin/blob/main/src/api/books.ts): `src/api/books.ts`
- [HTTP client](https://github.com/ezykl/bookstore-admin/blob/main/src/api/axios.ts): `src/api/axios.ts`

### Other components

- **Admin user**
- **Bookstore API**

## Connections

- Admin user → App composition: uses
- App composition → Auth provider: provides auth
- App composition → Session gate: renders
- Session gate → Auth hook: reads state
- App composition → Route table: mounts routes
- Route table → Login screen: routes login
- Route table → Protected layout: routes protected
- Protected layout → Books screen: routes list
- Protected layout → Edit book screen: routes edit
- Login screen → Auth hook: uses auth
- Auth provider → Auth API: requests auth
- Auth provider → Token storage: reads/writes token
- Auth provider → Bookstore API: restores or changes session
- Auth API → HTTP client: sends requests
- HTTP client → Bookstore API: calls API
- Books screen → Book list state: loads page
- Book list state → Books API: fetches books
- Books screen → Books table: renders results
- Books table → Book row: renders rows
- Books table → Pagination: offers paging
- Book list state → Books API: requests pages
- Books API → HTTP client: sends requests
- Edit book screen → Book detail state: loads book
- Book detail state → Books API: fetches record
- Edit book screen → Book edit form: renders form
- Book edit form → Books API: updates book
- Books API → Bookstore API: reads/writes books
- Book row → Cost price view: opens cost view
- Cost price view → Permission checks: checks access
- Protected layout → Auth hook: checks session