SaaS Kit

https://docs.saaskit.us/docs
Admin
SaaS Kit is a development kit providing tools and features, including API and authentication, for...
Tokens:89,433
Snippets:625
Trust Score:4.5
Update:8 months ago
Show doc for...
Tokens:
Raw
### Start SaaS Kit Application

Source: https://docs.saaskit.us/docs/documents

Starts the SaaS Kit application, which generates metadata files and seeds the database. This is the primary command for initial setup and updates.

```bash
npm start  

```

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

### Develop SaaS Kit Application (Fast Start)

Source: https://docs.saaskit.us/docs/documents

Starts the SaaS Kit application in development mode, skipping metadata generation and database seeding for faster iteration. Use 'npm start' for full setup.

```bash
npm run dev  

```

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

### Install Dependencies and Create Resource File

Source: https://docs.saaskit.us/docs/documents

Installs project dependencies using npm and creates a directory structure for a new resource file named student.resource.ts.

```bash
npm install  
# Create tutorial folder  
mkdir -p src/app/tutorial  
# Create file  
touch src/app/tutorial/student.resource.ts  

```

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

### Create SaaS Kit App with CLI

Source: https://docs.saaskit.us/docs/documents

This command initializes a new SaaS Kit application using the command-line interface. Ensure you have Node.js and npm installed.

```bash
npx @fernir2/saas-kit-cli create-saas-kit-app  

```

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

### Fetch List of Resources on Frontend

Source: https://docs.saaskit.us/docs/documents

Illustrates how to fetch a list of resources of a specific type (e.g., Student) on the frontend using the `fetchResources` function.

```javascript
const students = await fetchResources<Student>("Student");  

```

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

### Fetch Single Resource on Frontend

Source: https://docs.saaskit.us/docs/documents

Demonstrates how to fetch a single resource of a specific type (e.g., Student) using its ID on the frontend with the `fetchResource` function.

```javascript
const student = await fetchResource<Student>("Student", studentId);  

```

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

### Establish One-to-Many Resource Relation

Source: https://docs.saaskit.us/docs/documents

Sets up a one-to-many relationship between 'Student' and 'Teacher' resources by adding a `teacherId` field to 'Student' and a `studentList` field to 'Teacher'.

```typescript
export class Student extends WorkspaceResource {  
    name!: string;  
  
    teacherId?: string;  
  
    teacher?: Teacher;  
}  
  
export class Teacher extends WorkspaceResource {  
    name!: string;  
  
    studentList?: Student[];  
}  

```

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

### Configure PostgreSQL Database Connection

Source: https://docs.saaskit.us/docs/documents

Set up your PostgreSQL database connection by defining the DATABASE_CONNECTION_STRING in your .env file. Default values for user, password, host, and port are provided.

```env
DATABASE_CONNECTION_STRING = "postgresql://postgres:root@localhost:5432/saas-kit";  

```

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

### Add Student Resource to Sidebar Navigation

Source: https://docs.saaskit.us/docs/documents

Integrates the 'Student' resource into the application's sidebar navigation by adding it to the `sideBarResources` prop of the `ClientRoot` component in `layout.tsx`.

```typescript
<ClientRoot sideBarResources={["Student"]}>{children}</ClientRoot>  

```

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

### Get Single Resource by Configuration (TypeScript)

Source: https://docs.saaskit.us/docs/documents

Fetches a single resource based on a provided configuration object, which includes the resource name and its ID. The function is generic and can be typed to return a specific resource type. It will throw an error if the specified resource is not found.

```typescript
const students = await getResource<Student>({
    resourceName: "Student",
    id: studentId,
});
```

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

### Define Teacher Resource

Source: https://docs.saaskit.us/docs/documents

Defines a 'Teacher' resource, similar to the 'Student' resource, with a 'name' property and a @resourceMetaId decorator.

```typescript
@resourceMetaId("783cbb56-0ee2-4d78-b7f1-2e139c8738d3")  
export class Teacher extends WorkspaceResource {  
    name!: string;  
}  

```

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

### Get Resources by Name (TypeScript)

Source: https://docs.saaskit.us/docs/documents

Retrieves an array of resources of a specified type by their name from the database. This function is generic and expects a type parameter for the resource, such as `Student`. It's useful for fetching collections of data.

```typescript
const students = await getResourcesByName<Student>("Student");
```

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

### Define a Student Resource

Source: https://docs.saaskit.us/docs/documents

Defines a 'Student' resource by extending WorkspaceResource and adding a 'name' property. This resource is decorated with @resourceMetaId for identification.

```typescript
@resourceMetaId("d4507481-8b33-46e7-9c2e-606daab170cc")  
export class Student extends WorkspaceResource {  
    name!: string;  
}  

```

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

### Tooltip Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Tooltip

Demonstrates how to use the Tooltip component in a React application. The example shows setting a delay duration for the tooltip.

```jsx
<Tooltip delayDuration={100}>
    ...
</Tooltip>
```

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

### Badge Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Badge

This example demonstrates how to use the Badge component in a React application. It shows a basic implementation with an onClick handler and a label.

```jsx
<Badge onClick={...}>
    Label
</Badge>
```

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

### LoginForm Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/LoginForm

This example demonstrates how to use the LoginForm component in a React application. It shows how to configure OAuth login options by passing an array of OAuth configurations and how to hide the sign-up link.

```jsx
<LoginForm  
  oAuthLoginConfigs={[
    getGoogleOAuthConfig(),
    getMicrosoftOAuthConfig(),
    getFacebookOAuthConfig(),
  ]}
  hideSignUpLink={true}
/>
```

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

### React FormProvider Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Form

Demonstrates the usage of the FormProvider component to wrap a form and provide form methods to nested components using useFormContext. This setup allows for managing form state and submission within a React application.

```javascript
function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}
```

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

### ListItem Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/ListItem

This example demonstrates how to use the ListItem component in a React application. It shows how to pass props like 'showTooltip', 'active', and 'onNavigate' to customize the list item's behavior and display content within it.

```jsx
<ListItem showTooltip={true} active={...} onNavigate={...}>
    itemName
</ListItem>
```

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

### DropdownMenuItem Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/DropdownMenuItem

This example demonstrates how to use the DropdownMenuItem component within a React application. It shows basic usage with event handlers like 'onSelect' and 'onClick'.

```jsx
<DropdownMenuItem onSelect={...} onClick={...}>
 ...
<DropdownMenuItem/>
```

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

### Client-Side API Request Functions (TypeScript)

Source: https://docs.saaskit.us/docs/Documentation/features/api

Provides examples of how to make various HTTP requests (GET, POST, PUT, DELETE) to API endpoints from client-side components using provided utility functions.

```typescript
// GET request
const data = await apiGet<ResponseType>("endpoint", id);

// POST request
const result = await apiPost<ResponseType, RequestType>("endpoint", requestData);

// PUT request
const updated = await apiPut<ResponseType, RequestType>("endpoint", updateData);

// DELETE request
await apiDelete("endpoint", id);
```

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

### BackButton Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/BackButton

This example demonstrates how to use the BackButton component in a React application. It shows the basic structure for rendering the button and passing necessary props like an onClick handler and a navigation href.

```jsx
<BackButton onClick={...} href="/students"/>;
```

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

### Expand Resource Relation in UI

Source: https://docs.saaskit.us/docs/documents

Uses the @expandDescription() decorator on the `teacherId` field within the `Student` resource to include the 'Teacher' relation as a column in the Student ResourceList view.

```typescript
export class Student extends WorkspaceResource {  
    name!: string;  
  
    @expandDescription()  
    teacherId?: string;  
    teacher?: Teacher;  
}  

```

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

### Render MultiselectItem Component

Source: https://docs.saaskit.us/docs/References/Frontend/Components/MultiselectItem

This example demonstrates how to render a MultiselectItem component, specifically for a 'select all' option. It takes a 'value' and a 'selectAll' prop.

```html
<MultiselectItem value="selectAll" selectAll>
  All
</MultiselectItem>
```

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

### ViewResource Component Usage (React)

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/ViewResource

This example demonstrates how to use the ViewResource component in a React application. It shows the necessary props for displaying a resource, handling delete and save operations, and configuring the view.

```jsx
<ViewResource  
    resourceId="d4507481-8b33-46e7-9c2e-606daab170cc"  
    hasId={true}  
    resourceName="student"  
    onDeleteComplete={onDeleteComplete}  
    onCancelClick={onCancelClick}  
    onSaveComplete={onSaveComplete}  
    viewConfigProp={viewConfigProp}  
    defaultTab={defaultTab}  
/>  

```

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

### SlideToggle Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/SlideToggle

This example demonstrates how to use the SlideToggle component in a React application. It shows the basic structure for rendering the component with essential props like text, color, and an onClick handler.

```jsx
<SlideToggle text="Enable feature" primary={false} color="bg-blue-500" onClick={...}/>
```

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

### FormField Usage Example with useForm

Source: https://docs.saaskit.us/docs/References/Frontend/Components/FormField

This example demonstrates how to use the FormField component within a React component. It initializes useForm and passes the control object, field name, and a render prop to FormField.

```typescript
function MyComponent() {
    const form = useForm({...});

    return (
        <FormField control={form.control} name="email" render={...}/>
    );
}
```

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

### DropdownMenuContent Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/DropdownMenuContent

This example demonstrates how to use the DropdownMenuContent component in a React application. It shows common props like 'align', 'side', 'sideOffset', and event handlers like 'onMouseLeave'.

```jsx
<DropdownMenuContent align="start" side="right" sideOffset={17} onMouseLeave={...}>
 ...
<DropdownMenuContent/>
```

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

### List Component Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/List

This example demonstrates how to use the List component. It takes an 'itemCount' prop to specify the number of items within the list, which can trigger the automatic scrolling feature if itemCount exceeds 8.

```jsx
<List itemCount={10}>
 ...
</List>
```

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

### Get Resources with OData (Backend)

Source: https://docs.saaskit.us/docs/Documentation/features/Odata

Illustrates how to use an OData configuration object with the `getResourcesWithOData` function on the backend to retrieve data. Assumes a generic `Student` type.

```javascript
const students = await getResourcesWithOData<Student>("Student", oDataConfig);  
```

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

### MultiselectInput Component

Source: https://docs.saaskit.us/docs/References/Frontend/Components/MultiselectInput

This section details the MultiselectInput component, its parameters, return type, and provides an example of its usage.

```APIDOC
## MultiselectInput Component

### Description
Input component that displays selected values and handles user text input for filtering options. Based on Command.Input.

### Method
N/A (Component Documentation)

### Endpoint
N/A (Component Documentation)

### Parameters
#### Named Parameters
- **__namedParameters** (object & Omit<Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<HTMLInputElement>> & object & object, "key" | "asChild" | keyof InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & object & RefAttributes<HTMLInputElement>, "ref"> & object** - Required - This parameter accepts an object containing various HTML input attributes and component-specific props, excluding certain keys like 'key', 'asChild', 'type', 'value', 'onChange', and 'ref'.

### Returns
`Element` - The MultiselectInput component itself.

### Request Example
```jsx
<MultiselectInput placeholder="Select options" animatedPlaceholder="Status"  
/>  
```

### Response
#### Success Response (200)
N/A (Component Documentation)

#### Response Example
N/A (Component Documentation)
```

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

### DropdownMenuRadioItem Usage Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/DropdownMenuRadioItem

This example demonstrates how to use the DropdownMenuRadioItem component within a React application. It shows a basic implementation of a radio button item within a dropdown menu.

```jsx
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
```

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

### GET /resource

Source: https://docs.saaskit.us/docs/References/Server/getResource

Retrieves a resource by its ID and resourceName from the database. This is the primary method for fetching a single resource.

```APIDOC
## GET /resource

### Description
Retrieves a resource by its ID and resourceName from the database.

### Method
GET

### Endpoint
/resource

### Parameters
#### Query Parameters
- **getResourceConfig** (object) - Required - Configuration object containing resource identifier and name.
  - **id** (string) - Required - The unique identifier of the resource.
  - **resourceName** (string) - Required - The name of the resource type.
- **throwIfNotFound** (boolean) - Optional - If true, an error will be thrown if the resource is not found. Defaults to true.

### Request Example
```json
{
  "getResourceConfig": {
    "id": "resource_id_123",
    "resourceName": "users"
  },
  "throwIfNotFound": true
}
```

### Response
#### Success Response (200)
- **resource** (object) - The retrieved resource object, conforming to the `WithId` type.

#### Response Example
```json
{
  "resource": {
    "id": "resource_id_123",
    "name": "Example Resource",
    "createdAt": "2023-10-27T10:00:00Z"
  }
}
```

#### Error Response (404)
- **error** (string) - Description of the error, e.g., "Resource not found."

### Throws
- Throws an error if `throwIfNotFound` is true and the resource is not found.
```

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

### MultiSelect Component Usage Example (React)

Source: https://docs.saaskit.us/docs/References/Frontend/Components/MultiSelect

Demonstrates how to use the MultiSelect component in a React application. It shows state management for selected values and passing necessary props like `values`, `onValuesChange`, and `displayValues`.

```javascript
function MyComponent() {
    const [selectedValues, setSelectedValues] = useState<string[]>([]);

    return (
        <Multiselect
            values={selectedValues}
            onValuesChange={setSelectedValues}
            displayValues={new Map([["option1", "Option 1"], ["option2", "Option 2"]])}
            disabled={false}
            showSelectAll
            variant="float"
        >
            ...
        </Multiselect>
    );
}

```

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

### FadeOutText Component Usage Example (React)

Source: https://docs.saaskit.us/docs/References/Frontend/Components/FadeOutText

This example demonstrates how to use the FadeOutText component in a React application. It shows how to pass props like `bgColor`, `rightAlign`, `tooltipContent`, and `onTooltipClick` to customize the text truncation and tooltip behavior. The component is designed to handle long text that needs to be visually truncated with a fade effect.

```javascript
function MyComponent() {
  return (
    <FadeOutText
      bgColor="bg-transparent"
      rightAlign={true}
      tooltipContent="This is the full content that appears in the tooltip"
      onTooltipClick={...}
    >
      This is a very long text that will be truncated with fade effect when it reaches the container width
    </FadeOutText>
  );
}
```

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

### Register Resource List Configurations (TypeScript)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Demonstrates how to register custom configurations for the ResourceList component at application startup. It involves importing and calling setResourceListConfigs, typically in a layout file.

```typescript
import { setResourceListConfigs } from "your-app/config/resource-list-configs";

setResourceListConfigs();
```

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

### Tooltip Content Alignment Example

Source: https://docs.saaskit.us/docs/References/Frontend/Components/tooltipContentSides

Demonstrates how to use the TooltipContent component with 'align' and 'side' props to position the tooltip. The 'sideOffset' prop controls the distance between the trigger and the tooltip.

```html
<TooltipContent align="start" side="right" sideOffset={17}>
    ...
</TooltipContent>
```

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

### Display Resource Items with SearchSearchableResourceResult (React)

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/SearchSearchableResourceResult

This example demonstrates how to use the SearchSearchableResourceResult component in a React application. It initializes state with items and passes them along with the resource name to the component.

```javascript
function MyComponent() {
    const [items, setItems] = useState([...]);

    return (
        <SearchSearchableResourceResult resourceName="Contact" items={items}
    );
}
```

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

### Register Edit Resource Configurations (TypeScript)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Illustrates the process of registering custom configurations for the EditResource component during application initialization. This includes importing and executing setEditResourceConfigs.

```typescript
import { setEditResourceConfigs } from "your-app/config/edit-resource-configs";

setEditResourceConfigs();
```

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

### Configure OData with ODataBuilder

Source: https://docs.saaskit.us/docs/Documentation/features/Odata

Demonstrates how to build an OData configuration object using ODataBuilder to specify query parameters like top, select, filter, and orderBy.

```javascript
const oDataConfig = getODataBuilder()  
    .top(10) // Get first 10 items  
    .select("name") // Select only name property  
    .filter("name", "Adam") // Filter student only with name Adam  
    .orderBy("name", "asc") // Order students by name property in ascending direction  
    .build();  
```

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

### Using Form Component with useForm

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Form

Illustrates how to initialize useForm and pass its methods to the Form component. This is a common pattern for setting up a form context that can be accessed by child components.

```javascript
function MyComponent() {
  const form = useForm({...});

  return (
    <Form {...form}>
      ...
    </Form>
  );
}
```

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

### Use EditResource Component (React JSX)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Provides an example of using the EditResource component within a React page. The component is rendered by specifying the resourceName, allowing it to load its associated configurations.

```jsx
export function StudentEditPage() {
    return <EditResource resourceName="Student" />;
}
```

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

### Fetch Single ResourceMeta (Frontend JavaScript)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Retrieves metadata for a single resource using the fetchResourceMeta function. It takes the resource name as input and returns a ResourceMeta object. Example outputs show accessing resourceName, id, and property configurations.

```javascript
const resourceMeta = await fetchResourceMeta("Student");
console.log(resourceMeta.resourceName); // Student
console.log(resourceMeta.id); // d4507481-8b33-46e7-9c2e-606daab170cc
console.log(resourceMeta.properties["name"].isDisplayable); // true
console.log(resourceMeta.properties["name"].required); // false
console.log(resourceMeta.display.pluralName); // Students
```

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

### Using the View Component

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/View

Demonstrates how to use the View component with specific resource names and IDs. This component is configurable and can render different views based on its props.

```jsx
<View  
    resourceName="student"  
    resourceId="d4507481-8b33-46e7-9c2e-606daab170cc"  
/>  

```

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

### Fetch Multiple ResourceMetas (Frontend JavaScript)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Fetches metadata for multiple resources concurrently using the fetchResourceMetas function. It accepts an array of resource names and returns an array of ResourceMeta objects. The example demonstrates accessing properties of the first and second resources.

```javascript
const resourceMetas = await fetchResourceMetas(["Student", "Teacher"]);
console.log(resourceMetas[0].resourceName); // Student
console.log(resourceMetas[0].id); // d4507481-8b33-46e7-9c2e-606daab170cc
console.log(resourceMetas[0].properties["name"].isDisplayable); // true
console.log(resourceMetas[0].properties["name"].required); // false
console.log(resourceMetas[0].display.pluralName); // Students

console.log(resourceMetas[1].resourceName); // Teacher
console.log(resourceMetas[1].id); // 783cbb56-0ee2-4d78-b7f1-2e139c8738d3
console.log(resourceMetas[1].properties["name"].isDisplayable); // true
console.log(resourceMetas[1].properties["name"].required); // false
console.log(resourceMetas[1].display.pluralName); // Teachers
```

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

### Using the Icon Component

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Icon-1

Demonstrates how to use the Icon component with various props like name, size, and color. It also shows how to attach an onClick event handler. This component relies on Radix UI icons.

```jsx
<Icon name="chevronDown" size="size-5" color="text-primary" onClick={...}/>
```

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

### ODataConfig Selects Example (TypeScript)

Source: https://docs.saaskit.us/docs/References/Frontend/Interfaces/ODataConfig

Example of how to configure the 'selects' property in an ODataConfig object. This limits the returned fields to specific properties, including those of related resources.

```typescript
selects: ["id", "name", "person/id", "person/name"]
```

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

### Sign Up API

Source: https://docs.saaskit.us/docs/References/Server/signUpApi

Handles user registration through the signUpApi endpoint. It accepts a request object and named parameters, returning a Promise that resolves to a Response.

```APIDOC
## POST /signup

### Description
Handles user registration.

### Method
POST

### Endpoint
/signup

### Parameters
#### Request Body
- **req** (object) - Required - The request object containing user details.
- **__namedParameters** (object) - Optional - Named parameters, including 'params' which is a Promise resolving to QueryParams.
  - **params** (Promise<Partial<QueryParams>>) - Optional - Query parameters for the sign-up process.

### Response
#### Success Response (200)
- **message** (string) - A success message indicating user registration.

#### Response Example
```json
{
  "message": "User registered successfully"
}
```

#### Error Response (400)
- **error** (string) - An error message if registration fails.

#### Error Response Example
```json
{
  "error": "Invalid input data"
}
```
```

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

### GET /api

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/apiGet

Sends a GET request to the specified API endpoint. This function is designed to retrieve data from a given endpoint, with options for specifying an ID, query parameters, and custom headers.

```APIDOC
## GET /api

### Description
Sends a GET request to the specified API endpoint. This function is designed to retrieve data from a given endpoint, with options for specifying an ID, query parameters, and custom headers.

### Method
GET

### Endpoint
`/api/{endpoint}`

### Parameters
#### Path Parameters
- **endpoint** (string) - Required - API endpoint path.

#### Query Parameters
- **id** (string) - Optional - Optional resource identifier.
- **queryParams** (NameValue[]) - Optional - Array of query parameters.

#### Headers
- **headers** (Headers) - Optional - Optional custom headers.

### Response
#### Success Response (200)
- **T** (Promise<T>) - A promise that resolves with the data of type T.

### Request Example
```javascript
// Example usage of apiGet
const responseData = await apiGet<MyDataType>('/users', '123', [{ name: 'status', value: 'active' }], { 'X-API-Key': 'your-key' });
```

### Response Example
```json
{
  "example": "response data based on T"
}
```
```

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

### Fetch Resources with OData (Frontend)

Source: https://docs.saaskit.us/docs/Documentation/features/Odata

Shows how to use a configured OData object with the `fetchResources` function on the frontend to retrieve data. Assumes a generic `Student` type.

```javascript
const students = await fetchResources<Student>("Student", oDataConfig);  
```

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

### ODataConfig Expands Example (TypeScript)

Source: https://docs.saaskit.us/docs/References/Frontend/Interfaces/ODataConfig

Example of how to configure the 'expands' property in an ODataConfig object. This allows you to include related resources in your API response, supporting both direct and nested relationships.

```typescript
expands: ["person", "job", "comments", "report/reportChartSeriesList"]
```

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

### GET /api/blob

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/apiGetBlob

Retrieves blob data from a specified API endpoint. This function sends a GET request and can include an optional ID, query parameters, and custom headers.

```APIDOC
## GET /api/blob

### Description
Sends a GET request to retrieve blob from the specified API endpoint.

### Method
GET

### Endpoint
`/api/blob`

### Parameters
#### Query Parameters
- **endpoint** (string) - Required - API endpoint path for the blob resource.
- **id** (string) - Optional - Resource identifier to append to the endpoint.
- **queryParams** (NameValue[]) - Optional - Array of query parameters to include in the request.
- **headers** (Headers) - Optional - Custom headers to include in the request.

### Request Example
```json
{
  "endpoint": "/path/to/blob",
  "id": "unique-blob-id",
  "queryParams": [
    { "name": "param1", "value": "value1" }
  ],
  "headers": {
    "Authorization": "Bearer YOUR_TOKEN"
  }
}
```

### Response
#### Success Response (200)
- **Blob** - The retrieved blob data.
- **null** - If the blob is not found or an error occurs before receiving data.

#### Error Response (e.g., 400, 404, 500)
- **ProblemDetails** - Details about the error encountered during the request.

#### Response Example
```json
// Example for a successful Blob response (actual content will be binary data)
// This is a placeholder representation
{
  "contentType": "application/octet-stream",
  "content": "...binary data..."
}

// Example for ProblemDetails
{
  "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
  "title": "Bad Request",
  "status": 400,
  "detail": "Invalid request parameters."
}
```
```

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

### Get ResourceMeta (Backend JavaScript)

Source: https://docs.saaskit.us/docs/Documentation/features/meta

Retrieves runtime resource metadata on the backend using the getResourceMeta function. This function takes a resource name as an argument and returns its metadata.

```javascript
const resourceMeta = await getResourceMeta("Student");

```

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

### Basic Select Component Usage with React State

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Select

Demonstrates how to use the Select component in a React application. It shows how to manage the selected value using the useState hook and pass it to the Select component via the 'value' and 'onValueChange' props. This example assumes the Select component is imported and available.

```jsx
function MyComponent() {
    const [value, setValue] = useState("");

    return (
        <Select value={value} onValueChange={setValue}>
            ...
        </Select>
    );
}
```

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

### Keyboard Event Handlers (onKeyUp, onKeyDown)

Source: https://docs.saaskit.us/docs/References/Frontend/Components/AvatarFallbackProps

Information regarding the `onKeyUp` and `onKeyDown` event handlers, which are recommended alternatives to the deprecated `onKeyPress` event.

```APIDOC
## onKeyUp / onKeyDown

### Description
Event handlers for key release (`onKeyUp`) and key press (`onKeyDown`) events. These are recommended replacements for the deprecated `onKeyPress` event.

### Method
N/A (Event Handler)

### Endpoint
N/A (Event Handler)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
<span onKeyUp={handleKeyUp} onKeyDown={handleKeyDown}>...</span>
```

### Response
#### Success Response (200)
N/A (Event Handler)

#### Response Example
```json
{
  "event": "KeyboardEvent object"
}
```

#### Inherited from
`React.ComponentPropsWithoutRef.onKeyUp`
`React.ComponentPropsWithoutRef.onKeyDown`
```

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

### AfterCreateCrudHandler Function

Source: https://docs.saaskit.us/docs/References/Server/AfterCreateCrudHandler

Handles actions after a resource is created. It accepts a configuration object and returns a promise.

```APIDOC
## AfterCreateCrudHandler

### Description
Function to handle actions after a resource is created.

### Method
Not Applicable (Function Signature)

### Endpoint
Not Applicable (Function Signature)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### afterCreateCrudHandlerConfig
- **afterCreateCrudHandlerConfig** (AfterCreateCrudHandlerConfig) - Required - Configuration object for the handler.

### Returns
`Promise<void>`

### Request Example
```javascript
// Example usage (conceptual)
afterCreateCrudHandler({
  // configuration details...
});
```

### Response
#### Success Response (void)
This function returns a Promise that resolves with no value upon successful execution.

#### Response Example
```json
// No specific JSON response, as it returns void.
```
```

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

### CommandInput Component

Source: https://docs.saaskit.us/docs/References/Frontend/Components/CommandInput

This section details the CommandInput component, including its parameters and how to use it in your application.

```APIDOC
## CommandInput Component

### Description
A search input field with a magnifying glass icon, based on the Command component.

### Method
N/A (Component Definition)

### Endpoint
N/A (Component Definition)

### Parameters
#### __namedParameters
This parameter accepts a subset of properties from `InputHTMLAttributes` for an HTML input element, along with specific overrides and additions for the CommandInput component. It is based on `Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<HTMLInputElement>> & object & object, "key" | "asChild" | keyof InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & object & RefAttributes<HTMLInputElement>`.

### Returns
`Element` - The rendered CommandInput React element.

### Request Example
```jsx
<CommandInput placeholder="Type a command or search..." />
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Render MultiselectInput Component (HTML)

Source: https://docs.saaskit.us/docs/References/Frontend/Components/MultiselectInput

This snippet demonstrates how to render the MultiselectInput component in HTML. It accepts attributes like 'placeholder' and 'animatedPlaceholder' to configure its behavior and appearance. No specific JavaScript dependencies are explicitly shown in this basic rendering example.

```html
<MultiselectInput placeholder="Select options" animatedPlaceholder="Status"  
/>  

```

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

### Define otheruserIdGetRoute GET Route Handler (TypeScript)

Source: https://docs.saaskit.us/docs/References/Server/otheruserIdGetRoute

Defines the `otheruserIdGetRoute` function, a route handler for GET requests. It accepts Express request and named parameters, returning a Promise that resolves to an Express Response. This function is intended to fetch user data based on provided parameters.

```typescript
const otheruserIdGetRoute: (req: Request, __namedParameters: { params: Promise<Partial<QueryParams>> }) => Promise<Response>
```

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

### Render Customizable Input Component with Floating Label

Source: https://docs.saaskit.us/docs/References/Frontend/Components/Input

This example demonstrates how to render a customizable Input component using Saaskit UI's FormField. It shows how to pass field props and configure the input with a label, placeholder, and a clear icon.

```jsx
<FormField render={({ field }) => (
         ...
         <Input {...field} type="text" label="Label" placeholder="Placeholder" showClearIcon={true}/>
         ...
     )}
/>
```

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

### GET /websites/saaskit_us/getPermissionCheckConfig

Source: https://docs.saaskit.us/docs/References/Server/getPermissionCheckConfig

Retrieves a configuration object for permission checking.

```APIDOC
## GET /websites/saaskit_us/getPermissionCheckConfig

### Description
Retrieves a configuration object for permission checking.

### Method
GET

### Endpoint
/websites/saaskit_us/getPermissionCheckConfig

### Parameters
#### Query Parameters
- **userId** (string) - Required - The id of the user for whom the permission check is performed.
- **resourceMeta** (ResourceMeta) - Required - Metadata of the resource.
- **resource** (WithId) - Optional - The resource object for which permission checker is performed.
- **action** (CrudAction) - Optional - The CRUD action to check. Defaults to `crudActions.view`.
- **throwIfNoPermission** (boolean) - Optional - Whether to throw an exception when permission is denied. Defaults to `false`.

### Response
#### Success Response (200)
- **PermissionCheckConfig** - The configuration object for permission checking.
```

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

### GET /api/getPersonSamBrown

Source: https://docs.saaskit.us/docs/References/Server/getPersonSamBrown

Retrieves detailed information about a specific person, identified by their ID and workspace.

```APIDOC
## GET /api/getPersonSamBrown

### Description
Retrieves detailed information about a specific person, identified by their ID and workspace. This endpoint is intended for internal use.

### Method
GET

### Endpoint
`/api/getPersonSamBrown`

### Parameters
#### Query Parameters
- **id** (string) - Required - The unique identifier for the person. Defaults to `personIds.samBrownCrud`.
- **workspaceId** (string) - Required - The identifier for the workspace. Defaults to `workspaceConstants.defaultWorkspaceId`.
- **lastNameSuffix** (string) - Optional - A suffix to be used with the last name.

### Response
#### Success Response (200)
- **age** (number) - The age of the person. Defaults to `21`.
- **areKidsVaccinated** (boolean) - Indicates if the person's children are vaccinated. Defaults to `true`.
- **createdByUserId** (string) - The ID of the user who created the record. Defaults to `userIds.timWId`.
- **createdDate** (Date) - The date and time the record was created.
- **description** (string) - A description of the person. Defaults to `"Good **guy**"`.
- **favoriteNumber** (number) - The person's favorite number. Defaults to `7`.
- **firstbornName** (string) - The name of the person's firstborn child. Defaults to `"Eddie"`.
- **hasKids** (boolean) - Indicates if the person has children. Defaults to `true`.
- **id** (string) - The unique identifier for the person.
- **isMarried** (boolean) - Indicates if the person is married. Defaults to `true`.
- **lastName** (string) - The last name of the person.
- **maritalStatus** (number) - The marital status of the person. Defaults to `maritalStatuses.widowed`.
- **middleName** (string) - The middle name of the person. Defaults to `"Scott"`.
- **modifiedByUserId** (string) - The ID of the user who last modified the record. Defaults to `userIds.timWId`.
- **modifiedDate** (Date) - The date and time the record was last modified.
- **name** (string) - The first name of the person. Defaults to `"Sam"`.
- **numberOfFamilyMembers** (number) - The total number of family members. Defaults to `2019`.
- **phoneBrandId** (string) - The ID of the person's phone brand. Defaults to `phoneBrandIds.samsung`.
- **userId** (string) - The user ID associated with the person. Defaults to `userConstants.timWId`.
- **workspaceId** (string) - The workspace ID associated with the person.

#### Response Example
```json
{
  "age": 21,
  "areKidsVaccinated": true,
  "createdByUserId": "166c5e4a-696f-4bf5-ab48-dbbb5e90d526",
  "createdDate": "2023-10-27T10:00:00Z",
  "description": "Good **guy**",
  "favoriteNumber": 7,
  "firstbornName": "Eddie",
  "hasKids": true,
  "id": "some-person-id",
  "isMarried": true,
  "lastName": "Brown",
  "maritalStatus": 3,
  "middleName": "Scott",
  "modifiedByUserId": "166c5e4a-696f-4bf5-ab48-dbbb5e90d526",
  "modifiedDate": "2023-10-27T10:00:00Z",
  "name": "Sam",
  "numberOfFamilyMembers": 2019,
  "phoneBrandId": "7f4e2804-0664-45b7-a89a-f5f1ef50d15a",
  "userId": "166c5e4a-696f-4bf5-ab48-dbbb5e90d526",
  "workspaceId": "default-workspace-id"
}
```
```

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

### Subscription Plan Configuration

Source: https://docs.saaskit.us/docs/References/Frontend/Interfaces/SubscriptionPlanConfig

Configure the behavior of subscription plans, including redirection and pricing exclusions.

```APIDOC
## Subscription Plan Configuration

### Description
Configuration for subscription plan behavior.

### Method
Not Applicable (Configuration Object)

### Endpoint
Not Applicable (Configuration Object)

### Parameters
#### Properties
- **doNotStartSubscriptionAndRedirect** (`boolean`) - Required - If true, blocks immediate subscription creation and redirects the user to redirectUrl, so that the subscription can be started later.
- **excludePricingIds** (`string[]`) - Optional - List of pricing Ids that should be excluded from available subscription options.
- **redirectUrl** (`string`) - Optional - URL to redirect the user to when subscription creation is blocked.

### Request Example
```json
{
  "doNotStartSubscriptionAndRedirect": true,
  "excludePricingIds": ["price_123", "price_456"],
  "redirectUrl": "https://example.com/redirect"
}
```

### Response
#### Success Response (200)
- **Configuration Object** (`object`) - The subscription plan configuration.

#### Response Example
```json
{
  "doNotStartSubscriptionAndRedirect": true,
  "excludePricingIds": ["price_123", "price_456"],
  "redirectUrl": "https://example.com/redirect"
}
```
```

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

### Check Permissions on Backend using Configuration

Source: https://docs.saaskit.us/docs/Documentation/features/rolesAndPermissions

This backend approach involves creating a permission configuration object for a user and resource, then checking permissions against this configuration. It requires user ID, resource metadata, and resource data.

```typescript
const permissionConfig = getPermissionCheckConfig(userId, resourceMeta, student);
const hasPermission = await hasPermissionByPermissionCheckConfig(permissionConfig);
console.log(hasPermission); //false
```

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

### GET /websites/saaskit_us/getAllPhoneBrands

Source: https://docs.saaskit.us/docs/References/Server/getAllPhoneBrands

Retrieves a list of all available phone brands. This endpoint is marked as internal.

```APIDOC
## GET /websites/saaskit_us/getAllPhoneBrands

### Description
Retrieves a list of all available phone brands. This endpoint is marked as internal.

### Method
GET

### Endpoint
/websites/saaskit_us/getAllPhoneBrands

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **`PhoneBrand`** (array) - An array of phone brand objects.

#### Response Example
```json
[
  {
    "id": "1",
    "name": "Apple"
  },
  {
    "id": "2",
    "name": "Samsung"
  }
]
```
```

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

### apiGetWithOData

Source: https://docs.saaskit.us/docs/References/Frontend/Functions/apiGetWithOData

Sends a GET request to retrieve resources from the specified API endpoint using OData configuration.

```APIDOC
## GET /api/resource

### Description
Sends a GET request to retrieve resources from the specified API endpoint using OData configuration.

### Method
GET

### Endpoint
/api/resource

### Parameters
#### Query Parameters
- **endpoint** (string) - Required - API endpoint path.
- **oDataConfig** (ODataConfig) - Required - OData configuration object.
- **id?** (string) - Optional - Optional resource identifier.

### Request Example
```json
{
  "endpoint": "/users",
  "oDataConfig": {
    "filter": "startsWith(name, 'A')",
    "select": "id,name",
    "orderBy": "name asc",
    "skip": 0,
    "top": 10
  },
  "id": "123"
}
```

### Response
#### Success Response (200)
- **T** (type) - The type of the resource being retrieved.

#### Response Example
```json
{
  "id": "123",
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```
```

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

### GET /websites/saaskit_us/integration/dynamicFields

Source: https://docs.saaskit.us/docs/References/Server/integrationDynamicFieldsGetRoute

Retrieves a list of dynamic fields available for Saaskit integrations. This endpoint is intended for internal use.

```APIDOC
## GET /websites/saaskit_us/integration/dynamicFields

### Description
Retrieves a list of dynamic fields available for Saaskit integrations. This endpoint is intended for internal use.

### Method
GET

### Endpoint
/websites/saaskit_us/integration/dynamicFields

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **fields** (array) - A list of dynamic field objects.
  - **id** (string) - The unique identifier for the dynamic field.
  - **name** (string) - The name of the dynamic field.
  - **type** (string) - The data type of the dynamic field.

#### Response Example
```json
{
  "fields": [
    {
      "id": "field_123",
      "name": "Customer Name",
      "type": "string"
    },
    {
      "id": "field_456",
      "name": "Order Date",
      "type": "date"
    }
  ]
}
```
```

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

### Get Apple Phone Brand

Source: https://docs.saaskit.us/docs/References/Server/getApplePhoneBrand

Retrieves information about the Apple phone brand. This endpoint is intended for internal use.

```APIDOC
## GET /websites/saaskit_us/getApplePhoneBrand

### Description
Retrieves information about the Apple phone brand. This endpoint is intended for internal use.

### Method
GET

### Endpoint
/websites/saaskit_us/getApplePhoneBrand

### Parameters
#### Query Parameters
- **id** (string) - Optional - Defaults to `phoneBrandIds.apple`. The ID of the phone brand to retrieve.
- **workspaceId** (string) - Optional - Defaults to `workspaceConstants.defaultWorkspaceId`. The workspace ID to use for the request.

### Response
#### Success Response (200)
- **PhoneBrand** (object) - Details of the phone brand.

#### Response Example
```json
{
  "brandName": "Apple",
  "logoUrl": "https://example.com/apple_logo.png"
}
```
```

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

### Socket Initialization API

Source: https://docs.saaskit.us/docs/References/Server/initSocket

Initializes the socket connection for the Saaskit.us application. This function takes a server object as input and returns void.

```APIDOC
## initSocket

### Description
Initializes the socket connection for the Saaskit.us application.

### Method
(Implicitly called, no explicit HTTP method)

### Endpoint
(Not applicable for this function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
(Not applicable for this function)

### Response
#### Success Response
`void` - This function does not return any value.

#### Response Example
(Not applicable for this function)
```

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

### GET /websites/saaskit_us/getSamsungPhoneBrand

Source: https://docs.saaskit.us/docs/References/Server/getSamsungPhoneBrand

Retrieves information about the Samsung phone brand. This endpoint is intended for internal use and returns a PhoneBrand object.

```APIDOC
## GET /websites/saaskit_us/getSamsungPhoneBrand

### Description
Retrieves information about the Samsung phone brand. This endpoint is intended for internal use and returns a PhoneBrand object.

### Method
GET

### Endpoint
/websites/saaskit_us/getSamsungPhoneBrand

### Parameters
#### Query Parameters
- **id** (string) - Optional - The ID of the phone brand, defaults to `phoneBrandIds.samsung`.
- **workspaceId** (string) - Optional - The workspace ID, defaults to `workspaceConstants.defaultWorkspaceId`.

### Response
#### Success Response (200)
- **PhoneBrand** (object) - An object containing details about the phone brand.
```

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

### GET /getResourceMeta

Source: https://docs.saaskit.us/docs/References/Server/getResourceMeta

Retrieves the resource metadata for a given resource name. This endpoint is useful for fetching details about a specific resource.

```APIDOC
## GET /getResourceMeta

### Description
Retrieves the resource metadata for a given resource name.

### Method
GET

### Endpoint
/getResourceMeta

### Parameters
#### Query Parameters
- **resourceName** (string) - Required - The name of the resource to retrieve metadata for.

### Request Example
```json
{
  "resourceName": "exampleResource"
}
```

### Response
#### Success Response (200)
- **ResourceMeta** (object) - The metadata for the requested resource.

#### Response Example
```json
{
  "resourceName": "exampleResource",
  "creationDate": "2023-10-27T10:00:00Z",
  "lastModified": "2023-10-27T10:00:00Z",
  "size": 1024,
  "type": "file"
}
```
```

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

### Configure or Create Permission (JavaScript)

Source: https://docs.saaskit.us/docs/References/Server/configurePermission

The configurePermission function is used to set up or generate a new permission. It requires a unique identifier and a descriptive name for the permission. An optional workspace ID can be provided to associate the permission with a specific workspace. The function returns a Promise that resolves when the operation is complete.

```javascript
/**
 * Configure or create a permission.
 * @param {string} id The id of the permission to configure.
 * @param {string} name The name of the permission to configure.
 * @param {string} [workspaceId] The workspace id of the permission to configure.
 * @returns {Promise<void>}
 */
async function configurePermission(id, name, workspaceId) {
  // Implementation details for configuring or creating a permission
  console.log(`Configuring permission with ID: ${id}, Name: ${name}, WorkspaceID: ${workspaceId}`);
  // ... actual API call or logic ...
  return Promise.resolve();
}
```
Tokens:
Raw