### Development Workflow Commands

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Provides essential npm commands for managing the development workflow, including installing dependencies, starting the development server, building for production, and previewing the production build.

```bash
# Install dependencies
npm install

# Start development server on port 2121
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type check without building
npm run typecheck

```

--------------------------------

### Launch Astro Local Development Server

Source: https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.md

Starts the Astro local development server, typically on port 2121. This command allows for live previewing of changes during development. Requires Node.js and installed project dependencies.

```shell
pnpm run dev
```

--------------------------------

### Preview Production Build

Source: https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.md

Starts a local web server to preview the production build of the Astro project. This helps in testing the deployed version before actual deployment. Requires the project to be built first.

```shell
pnpm run preview
```

--------------------------------

### Install Project Dependencies with Package Managers

Source: https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.md

Installs project dependencies using common Node.js package managers. Ensure Node.js is installed before running these commands. This step is crucial for setting up the project environment.

```shell
pnpm install
# or
npm install
# or
yarn
```

--------------------------------

### Build Project for Production

Source: https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.md

Builds the Astro project, generating static distribution files in the `dist/` folder. This command is used to prepare the project for deployment. Requires Node.js and installed dependencies.

```shell
pnpm run build
```

--------------------------------

### Define Application Constants

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Defines application-wide constants such as API URLs, site titles, and feature flags for consistent configuration. Usage examples in components demonstrate how to import and utilize these constants.

```typescript
// src/app/constants.ts
export const API_URL = `${import.meta.env.SITE}${import.meta.env.BASE_URL}api/`;
export const REMOTE_ASSETS_BASE_URL = 'https://flowbite-admin-dashboard.vercel.app';
export const SITE_TITLE = 'Flowbite Astro Admin Dashboard';
export const RANDOMIZE = Boolean(import.meta.env.RANDOMIZE) || true;

// Usage in components:
import { API_URL, SITE_TITLE } from './app/constants.js';

const endpoint = `${API_URL}products`;
console.log(`Fetching from: ${endpoint}`);
// Output: Fetching from: http://localhost:2121/api/products

document.title = SITE_TITLE;
// Sets page title to: Flowbite Astro Admin Dashboard

```

--------------------------------

### Get Products Data Service (TypeScript)

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

A server-side TypeScript function to retrieve product data. It can optionally use Faker.js to generate randomized product details like prices and descriptions while maintaining the original data structure. This is useful for development and testing.

```typescript
import { getProducts } from './services/products.js';

// Get products with randomization (default behavior)
const productsRandom = getProducts(true);
console.log(productsRandom);
// Output: Array of products with randomly generated prices, technologies, and descriptions

// Get static products without randomization
const productsStatic = getProducts(false);
console.log(productsStatic);
// Output: Array of products with original data from products.json

// Example product object:
// {
//   id: 1,
//   name: "Education Dashboard",
//   category: "Html templates",
//   technology: "Refined Cotton Keyboard",  // Faker-generated
//   price: "234.00",                        // Faker-generated
//   description: "Ergonomic executive...",  // Faker-generated
//   discount: "10%"
// }
```

--------------------------------

### Get Users Data Service (TypeScript)

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

A server-side TypeScript function for retrieving user data. It supports optional randomization using Faker.js to generate fake names, emails, and job titles while preserving the user object structure. This facilitates development and testing scenarios.

```typescript
import { getUsers } from './services/users.js';

// Get users with randomization (default behavior)
const usersRandom = getUsers(true);
console.log(usersRandom);
// Output: Array of users with randomly generated names, emails, positions, and countries

// Get static users without randomization
const usersStatic = getUsers(false);
console.log(usersStatic);
// Output: Array of users with original data from users.json

// Example user object:
// {
//   id: 1,
//   name: "John Doe",                      // Faker-generated
//   email: "john.doe@example.com",         // Faker-generated
//   avatar: "/images/users/neil-sims.png",
//   position: "Software Engineer",          // Faker-generated
//   country: "United States",               // Faker-generated
//   status: "active",
//   biography: "Experienced developer..."
// }
```

--------------------------------

### Configure Astro for Server-Side Rendering

Source: https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.md

Demonstrates how to enable Server-Side Rendering (SSR) for an Astro project by uncommenting the 'output: "server"' option in the configuration file. This changes the output from static to server-rendered. This requires modifying the `./astro.config.mjs` file.

```javascript
// uncomment output: "server" in the ./astro.config.mjs file to enable SSR
```

--------------------------------

### Fetch Products API

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Retrieves all product data from the API. Returns an array of product objects.

```APIDOC
## GET /api/products

### Description
Retrieves a list of all products available in the system. Each product object contains details such as name, category, technology, description, price, and discount.

### Method
GET

### Endpoint
/api/products

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
curl http://localhost:2121/api/products \
  -H "Accept: application/json"
```

### Response
#### Success Response (200)
- **products** (array) - An array of product objects.
  - **id** (integer) - The unique identifier for the product.
  - **name** (string) - The name of the product.
  - **category** (string) - The category the product belongs to.
  - **technology** (string) - The primary technology associated with the product.
  - **description** (string) - A brief description of the product.
  - **price** (string) - The price of the product.
  - **discount** (string) - The discount applied to the product.

#### Response Example
```json
[
  {
    "id": 1,
    "name": "Education Dashboard",
    "category": "Html templates",
    "technology": "Angular",
    "description": "Comprehensive educational admin interface",
    "price": "49.00",
    "discount": "10%"
  },
  {
    "id": 2,
    "name": "React Admin Pro",
    "category": "React templates",
    "technology": "React",
    "description": "Professional admin dashboard for React applications",
    "price": "79.00",
    "discount": "20%"
  }
]
```
```

--------------------------------

### Astro Configuration with JavaScript

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Configuration file for an Astro project, defining site settings, output mode, and integrations like sitemap and Tailwind CSS. Supports environment-based configuration for development and CI/CD. Dependencies include '@astrojs/sitemap' and '@astrojs/tailwind'.

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  site: process.env.CI
    ? 'https://themesberg.github.io'
    : 'http://localhost:2121',
  base: process.env.CI ? '/flowbite-astro-admin-dashboard' : undefined,

  // Uncomment for server-side rendering
  // output: 'server',

  server: {
    port: 2121
  },

  integrations: [
    sitemap(),
    tailwind()
  ]
});
```

--------------------------------

### Fetch All Products REST API Endpoint

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

This endpoint retrieves all product data from the API. It returns a JSON array of product objects, each containing details like name, category, technology, description, price, and discount. This is typically used to display a list of products.

```bash
curl http://localhost:2121/api/products \
  -H "Accept: application/json"
```

```json
[
  {
    "id": 1,
    "name": "Education Dashboard",
    "category": "Html templates",
    "technology": "Angular",
    "description": "Comprehensive educational admin interface",
    "price": "49.00",
    "discount": "10%"
  },
  {
    "id": 2,
    "name": "React Admin Pro",
    "category": "React templates",
    "technology": "React",
    "description": "Professional admin dashboard for React applications",
    "price": "79.00",
    "discount": "20%"
  }
]
```

--------------------------------

### Dashboard Main Revenue Chart with TypeScript

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Integration with ApexCharts to render an interactive main revenue chart. Supports dark mode and includes toolbar configuration. Dependencies include the ApexCharts library.

```typescript
import ApexCharts from 'apexcharts';

// Main revenue chart with area visualization
const mainChartOptions = {
  chart: {
    height: 420,
    type: 'area',
    fontFamily: 'Inter, sans-serif',
    toolbar: { show: false }
  },
  series: [
    {
      name: 'Revenue',
      data: [6356, 6218, 6156, 6526, 6356, 6256, 6056],
      color: '#1A56DB'
    },
    {
      name: 'Revenue (previous period)',
      data: [6556, 6725, 6424, 6356, 6586, 6756, 6616],
      color: '#FDBA8C'
    }
  ],
  xaxis: {
    categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb']
  }
};

const chart = new ApexCharts(document.getElementById('main-chart'), mainChartOptions);
chart.render();

// Listen for dark mode changes and update chart colors
document.addEventListener('dark-mode', () => {
  chart.updateOptions(mainChartOptions);
});
```

--------------------------------

### Dashboard Traffic Donut Chart with TypeScript

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Configuration for a donut chart to display traffic breakdown by device using ApexCharts. Includes options for series, labels, colors, and chart type. Dependencies include the ApexCharts library.

```typescript
// Traffic donut chart with device breakdown
const trafficChartOptions = {
  series: [70, 5, 25],
  labels: ['Desktop', 'Tablet', 'Phone'],
  colors: ['#16BDCA', '#FDBA8C', '#1A56DB'],
  chart: {
    type: 'donut',
    height: 400,
    fontFamily: 'Inter, sans-serif'
  }
};

const trafficChart = new ApexCharts(
  document.getElementById('traffic-by-device'),
  trafficChartOptions
);
trafficChart.render();
```

--------------------------------

### Configure Tailwind CSS with Flowbite Plugin

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

This configuration file sets up Tailwind CSS for the project, integrating the Flowbite plugin, custom color schemes, and dark mode support. It extends the default theme with custom colors and includes Flowbite components.

```javascript
// tailwind.config.cjs
module.exports = {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
    './node_modules/flowbite/**/*.js'
  ],

  darkMode: 'class',

  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui']
      }
    }
  },

  plugins: [
    require('flowbite/plugin'),
    require('flowbite-typography'),
    require('tailwind-scrollbar')({ nocompatible: true })
  ]
};

```

--------------------------------

### Fetch Users API

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

Retrieves all user data from the API. Returns an array of user objects.

```APIDOC
## GET /api/users

### Description
Retrieves a list of all users registered in the system. Each user object includes profile information such as name, email, avatar, position, country, status, and biography.

### Method
GET

### Endpoint
/api/users

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
curl http://localhost:2121/api/users \
  -H "Accept: application/json"
```

### Response
#### Success Response (200)
- **users** (array) - An array of user objects.
  - **id** (integer) - The unique identifier for the user.
  - **name** (string) - The full name of the user.
  - **email** (string) - The email address of the user.
  - **avatar** (string) - The URL path to the user's avatar image.
  - **position** (string) - The job title or position of the user.
  - **country** (string) - The country where the user is located.
  - **status** (string) - The current status of the user (e.g., 'active').
  - **biography** (string) - A short biography or description of the user.

#### Response Example
```json
[
  {
    "id": 1,
    "name": "Neil Sims",
    "email": "neil.sims@flowbite.com",
    "avatar": "/images/users/neil-sims.png",
    "position": "Front-end developer",
    "country": "United States",
    "status": "active",
    "biography": "Experienced developer specializing in modern web technologies"
  },
  {
    "id": 2,
    "name": "Roberta Casas",
    "email": "roberta.casas@flowbite.com",
    "avatar": "/images/users/roberta-casas.png",
    "position": "Designer",
    "country": "Spain",
    "status": "active",
    "biography": "Creative designer with focus on user experience"
  }
]
```
```

--------------------------------

### Fetch Data Utility with TypeScript

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

A client-side utility function for fetching data from API endpoints with type safety. It constructs the full API URL, handles the fetch request, and returns typed data. Dependencies include custom types for entities.

```typescript
import { fetchData } from './lib/data.js';
import type { Products, Users } from './types/entities.js';

// Fetch products from API
try {
  const products: Products = await fetchData('products');
  console.log(`Fetched ${products.length} products`);
  products.forEach(product => {
    console.log(`${product.name}: $${product.price}`);
  });
} catch (error) {
  console.error('Failed to fetch products:', error);
}

// Fetch users from API
try {
  const users: Users = await fetchData('users');
  console.log(`Fetched ${users.length} users`);
  users.forEach(user => {
    console.log(`${user.name} - ${user.position}`);
  });
} catch (error) {
  console.error('Failed to fetch users:', error);
}
```

--------------------------------

### Fetch All Users REST API Endpoint

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

This endpoint retrieves all user data from the API. It returns a JSON array of user objects, each containing profile information such as name, email, avatar, position, country, and status. This is useful for managing user lists.

```bash
curl http://localhost:2121/api/users \
  -H "Accept: application/json"
```

```json
[
  {
    "id": 1,
    "name": "Neil Sims",
    "email": "neil.sims@flowbite.com",
    "avatar": "/images/users/neil-sims.png",
    "position": "Front-end developer",
    "country": "United States",
    "status": "active",
    "biography": "Experienced developer specializing in modern web technologies"
  },
  {
    "id": 2,
    "name": "Roberta Casas",
    "email": "roberta.casas@flowbite.com",
    "avatar": "/images/users/roberta-casas.png",
    "position": "Designer",
    "country": "Spain",
    "status": "active",
    "biography": "Creative designer with focus on user experience"
  }
]
```

--------------------------------

### CRUD Entities Web Component HTML

Source: https://context7.com/themesberg/flowbite-astro-admin-dashboard/llms.txt

A custom web component for managing CRUD table data with dynamic refresh capabilities. It binds table rows to API data and updates the DOM without a full page reload. This HTML snippet shows the basic structure and attributes.

```html
<!-- In your Astro page -->
<entities-crud type="products">
  <div>
    <button data-refresh>Refresh Data</button>
    <table>
      <tbody>
        <tr>
          <td><data value="name">Product Name</data></td>
          <td><data value="price">49.99</data></td>
          <td><data value="technology">React</data></td>
        </tr>
      </tbody>
    </table>
  </div>
</entities-crud>

<script>
  import './modules/CrudEntities.client.js';
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.