sudo service klipper stop
make flash FLASH_DEVICE=first
sudo service klipper start

sudo service klipper stop
make flash FLASH_DEVICE=/dev/serial/by-id/usb-1a86_USB2.0-Serial-if00-port0
sudo service klipper start

/dev/serial/by-id/usb-1a86_USB2.0-Serial-if00-port0

ls /dev/serial/by-id/*

make

cd ~/klipper/
make menuconfig

# This file contains common pin mappings for the Biqu B1 SE Plus.
# To use this config, the firmware should be compiled for the
# STM32F407 with a "32KiB bootloader".

# In newer versions of this board shipped in late 2021 the STM32F429
# is used, if this is the case compile for this with a "32KiB bootloader"
# You will need to check the chip on your board to identify which you have.
#
# The "make flash" command does not work on the SKR 2. Instead,
# after running "make", copy the generated "out/klipper.bin" file to a
# file named "firmware.bin" on an SD card and then restart the SKR 2
# with that SD card.

# See docs/Config_Reference.md for a description of parameters.

[mcu]
serial: /dev/serial/by-id/usb-Klipper_stm32f407xx_1D0039000F47393438343535-if00

########################################
# Stepper X Pins and TMC2208 configuration

@font-face {
  font-family: "Joane-SemiBold";
  src: url('{{ "Joane-SemiBold.otf" | file_url }}') format("otf");
       
}

' This example requires the Chilkat API to have been previously unlocked.
' See Global Unlock Sample for sample code.

Dim oauth2 As New ChilkatOAuth2
Dim success As Long

' This should be the port in the localhost callback URL for your app.  
' The callback URL would look like "http://localhost:3017/" if the port number is 3017.
oauth2.ListenPort = 3017

oauth2.AuthorizationEndpoint = "https://github.com/login/oauth/authorize"
oauth2.TokenEndpoint = "https://github.com/login/oauth/access_token"

' Replace these with actual values.
oauth2.ClientId = "GITHUB-CLIENT-ID"
oauth2.ClientSecret = "GITHUB-CLIENT-SECRET"

oauth2.CodeChallenge = 1
oauth2.CodeChallengeMethod = "S256"

' Begin the OAuth2 three-legged flow.  This returns a URL that should be loaded in a browser.
Dim url As String
url = oauth2.StartAuth()
If (oauth2.LastMethodSuccess <> 1) Then
    Debug.Print oauth2.LastErrorText
    Exit Sub
End If

' At this point, your application should load the URL in a browser.
' For example, 
' in C#:  System.Diagnostics.Process.Start(url);
' in Java: Desktop.getDesktop().browse(new URI(url));
' in VBScript: Set wsh=WScript.CreateObject("WScript.Shell")
'              wsh.Run url
' in Xojo: ShowURL(url)  (see http://docs.xojo.com/index.php/ShowURL)
' in Dataflex: Runprogram Background "c:\Program Files\Internet Explorer\iexplore.exe" sUrl        
' The GitHub account owner would interactively accept or deny the authorization request.

' Add the code to load the url in a web browser here...
' Add the code to load the url in a web browser here...
' Add the code to load the url in a web browser here...

' Now wait for the authorization.
' We'll wait for a max of 30 seconds.
Dim numMsWaited As Long
numMsWaited = 0
Do While (numMsWaited < 30000) And (oauth2.AuthFlowState < 3)
    oauth2.SleepMs 100
    numMsWaited = numMsWaited + 100
Loop

' If there was no response from the browser within 30 seconds, then 
' the AuthFlowState will be equal to 1 or 2.
' 1: Waiting for Redirect. The OAuth2 background thread is waiting to receive the redirect HTTP request from the browser.
' 2: Waiting for Final Response. The OAuth2 background thread is waiting for the final access token response.
' In that case, cancel the background task started in the call to StartAuth.
If (oauth2.AuthFlowState < 3) Then
    success = oauth2.Cancel()
    Debug.Print "No response from the browser!"
    Exit Sub
End If

' Check the AuthFlowState to see if authorization was granted, denied, or if some error occurred
' The possible AuthFlowState values are:
' 3: Completed with Success. The OAuth2 flow has completed, the background thread exited, and the successful JSON response is available in AccessTokenResponse property.
' 4: Completed with Access Denied. The OAuth2 flow has completed, the background thread exited, and the error JSON is available in AccessTokenResponse property.
' 5: Failed Prior to Completion. The OAuth2 flow failed to complete, the background thread exited, and the error information is available in the FailureInfo property.
If (oauth2.AuthFlowState = 5) Then
    Debug.Print "OAuth2 failed to complete."
    Debug.Print oauth2.FailureInfo
    Exit Sub
End If

If (oauth2.AuthFlowState = 4) Then
    Debug.Print "OAuth2 authorization was denied."
    Debug.Print oauth2.AccessTokenResponse
    Exit Sub
End If

If (oauth2.AuthFlowState <> 3) Then
    Debug.Print "Unexpected AuthFlowState:" & oauth2.AuthFlowState
    Exit Sub
End If

Debug.Print "OAuth2 authorization granted!"
Debug.Print "Access Token = " & oauth2.AccessToken

import sys
import chilkat2

# This example assumes the Chilkat API to have been previously unlocked.
# See Global Unlock Sample for sample code.

http = chilkat2.Http()

# Implements the following CURL command:

# curl -X GET --user wp_username:app_password https://www.yoursite.com/wp-json/wp/v2/posts?page=1

# Use the following online tool to generate HTTP code from a CURL command
# Convert a cURL Command to HTTP Source Code

# Use your WordPress login, such as "admin", not the application name.
http.Login = "wp_username"
# Use the application password, such as "Nths RwVH eDJ4 weNZ orMN jabq"
http.Password = "app_password"
http.BasicAuth = True

sbResponseBody = chilkat2.StringBuilder()
success = http.QuickGetSb("https://www.yoursite.com/wp-json/wp/v2/posts?page=1",sbResponseBody)
if (success == False):
    print(http.LastErrorText)
    sys.exit()

jarrResp = chilkat2.JsonArray()
jarrResp.LoadSb(sbResponseBody)
jarrResp.EmitCompact = False

print("Response Body:")
print(jarrResp.Emit())

respStatusCode = http.LastStatus
print("Response Status Code = " + str(respStatusCode))
if (respStatusCode >= 400):
    print("Response Header:")
    print(http.LastHeader)
    print("Failed.")
    sys.exit()

# Sample JSON response:
# (Sample code for parsing the JSON response is shown below)

# [
#   {
#     "id": 1902,
#     "date": "2020-11-16T09:54:09",
#     "date_gmt": "2020-11-16T16:54:09",
#     "guid": {
#       "rendered": "http:\/\/cknotes.com\/?p=1902"
#     },
#     "modified": "2020-11-16T09:54:09",
#     "modified_gmt": "2020-11-16T16:54:09",
#     "slug": "xero-redirect-uri-for-oauth2-and-desktop-apps",
#     "status": "publish",
#     "type": "post",
#     "link": "https:\/\/cknotes.com\/xero-redirect-uri-for-oauth2-and-desktop-apps\/",
#     "title": {
#       "rendered": "Xero Redirect URI for OAuth2 and Desktop Apps"
#     },
#     "content": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "excerpt": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "author": 1,
#     "featured_media": 0,
#     "comment_status": "closed",
#     "ping_status": "open",
#     "sticky": false,
#     "template": "",
#     "format": "standard",
#     "meta": [
#     ],
#     "categories": [
#       815
#     ],
#     "tags": [
#       594,
#       816
#     ],
#     "_links": {
#       "self": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902"
#         }
#       ],
#       "collection": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts"
#         }
#       ],
#       "about": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/types\/post"
#         }
#       ],
#       "author": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/users\/1"
#         }
#       ],
#       "replies": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/comments?post=1902"
#         }
#       ],
#       "version-history": [
#         {
#           "count": 1,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions"
#         }
#       ],
#       "predecessor-version": [
#         {
#           "id": 1904,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1904"
#         }
#       ],
#       "wp:attachment": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/media?parent=1902"
#         }
#       ],
#       "wp:term": [
#         {
#           "taxonomy": "category",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/categories?post=1902"
#         },
#         {
#           "taxonomy": "post_tag",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/tags?post=1902"
#         }
#       ],
#       "curies": [
#         {
#           "name": "wp",
#           "href": "https:\/\/api.w.org\/{rel}",
#           "templated": true
#         }
#       ]
#     }
#   },
# ...
# ]

# Sample code for parsing the JSON response...
# Use the following online tool to generate parsing code from sample JSON:
# Generate Parsing Code from JSON

date_gmt = chilkat2.DtObj()

i = 0
count_i = jarrResp.Size
while i < count_i :
    # json is a CkJsonObject
    json = jarrResp.ObjectAt(i)
    id = json.IntOf("id")
    date = json.StringOf("date")
    json.DtOf("date_gmt",False,date_gmt)
    guidRendered = json.StringOf("guid.rendered")
    modified = json.StringOf("modified")
    modified_gmt = json.StringOf("modified_gmt")
    slug = json.StringOf("slug")
    status = json.StringOf("status")
    v_type = json.StringOf("type")
    link = json.StringOf("link")
    titleRendered = json.StringOf("title.rendered")
    contentRendered = json.StringOf("content.rendered")
    contentProtected = json.BoolOf("content.protected")
    excerptRendered = json.StringOf("excerpt.rendered")
    excerptProtected = json.BoolOf("excerpt.protected")
    author = json.IntOf("author")
    featured_media = json.IntOf("featured_media")
    comment_status = json.StringOf("comment_status")
    ping_status = json.StringOf("ping_status")
    sticky = json.BoolOf("sticky")
    template = json.StringOf("template")
    format = json.StringOf("format")
    j = 0
    count_j = json.SizeOfArray("meta")
    while j < count_j :
        json.J = j
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("categories")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("categories[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("tags")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("tags[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.self")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.self[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.collection")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.collection[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.about")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.about[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.author")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.author[j].embeddable")
        href = json.StringOf("_links.author[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.replies")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.replies[j].embeddable")
        href = json.StringOf("_links.replies[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.version-history")
    while j < count_j :
        json.J = j
        count = json.IntOf("_links.version-history[j].count")
        href = json.StringOf("_links.version-history[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.predecessor-version")
    while j < count_j :
        json.J = j
        id = json.IntOf("_links.predecessor-version[j].id")
        href = json.StringOf("_links.predecessor-version[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:attachment")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.wp:attachment[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:term")
    while j < count_j :
        json.J = j
        taxonomy = json.StringOf("_links.wp:term[j].taxonomy")
        embeddable = json.BoolOf("_links.wp:term[j].embeddable")
        href = json.StringOf("_links.wp:term[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.curies")
    while j < count_j :
        json.J = j
        name = json.StringOf("_links.curies[j].name")
        href = json.StringOf("_links.curies[j].href")
        templated = json.BoolOf("_links.curies[j].templated")
        j = j + 1

    i = i + 1

import sys
import chilkat2

# This example assumes the Chilkat API to have been previously unlocked.
# See Global Unlock Sample for sample code.

http = chilkat2.Http()

# Implements the following CURL command:

# curl -X GET --user wp_username:wp_password https://www.yoursite.com/wp-json/wp/v2/posts?page=1

# Use the following online tool to generate HTTP code from a CURL command
# Convert a cURL Command to HTTP Source Code

http.Login = "wp_username"
http.Password = "wp_password"
http.BasicAuth = True

sbResponseBody = chilkat2.StringBuilder()
success = http.QuickGetSb("https://www.yoursite.com/wp-json/wp/v2/posts?page=1",sbResponseBody)
if (success == False):
    print(http.LastErrorText)
    sys.exit()

jarrResp = chilkat2.JsonArray()
jarrResp.LoadSb(sbResponseBody)
jarrResp.EmitCompact = False

print("Response Body:")
print(jarrResp.Emit())

respStatusCode = http.LastStatus
print("Response Status Code = " + str(respStatusCode))
if (respStatusCode >= 400):
    print("Response Header:")
    print(http.LastHeader)
    print("Failed.")
    sys.exit()

# Sample JSON response:
# (Sample code for parsing the JSON response is shown below)

# [
#   {
#     "id": 1902,
#     "date": "2020-11-16T09:54:09",
#     "date_gmt": "2020-11-16T16:54:09",
#     "guid": {
#       "rendered": "http:\/\/cknotes.com\/?p=1902"
#     },
#     "modified": "2020-11-16T09:54:09",
#     "modified_gmt": "2020-11-16T16:54:09",
#     "slug": "xero-redirect-uri-for-oauth2-and-desktop-apps",
#     "status": "publish",
#     "type": "post",
#     "link": "https:\/\/cknotes.com\/xero-redirect-uri-for-oauth2-and-desktop-apps\/",
#     "title": {
#       "rendered": "Xero Redirect URI for OAuth2 and Desktop Apps"
#     },
#     "content": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "excerpt": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "author": 1,
#     "featured_media": 0,
#     "comment_status": "closed",
#     "ping_status": "open",
#     "sticky": false,
#     "template": "",
#     "format": "standard",
#     "meta": [
#     ],
#     "categories": [
#       815
#     ],
#     "tags": [
#       594,
#       816
#     ],
#     "_links": {
#       "self": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902"
#         }
#       ],
#       "collection": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts"
#         }
#       ],
#       "about": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/types\/post"
#         }
#       ],
#       "author": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/users\/1"
#         }
#       ],
#       "replies": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/comments?post=1902"
#         }
#       ],
#       "version-history": [
#         {
#           "count": 1,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions"
#         }
#       ],
#       "predecessor-version": [
#         {
#           "id": 1904,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1904"
#         }
#       ],
#       "wp:attachment": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/media?parent=1902"
#         }
#       ],
#       "wp:term": [
#         {
#           "taxonomy": "category",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/categories?post=1902"
#         },
#         {
#           "taxonomy": "post_tag",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/tags?post=1902"
#         }
#       ],
#       "curies": [
#         {
#           "name": "wp",
#           "href": "https:\/\/api.w.org\/{rel}",
#           "templated": true
#         }
#       ]
#     }
#   },
# ...
# ]

# Sample code for parsing the JSON response...
# Use the following online tool to generate parsing code from sample JSON:
# Generate Parsing Code from JSON

date_gmt = chilkat2.DtObj()

i = 0
count_i = jarrResp.Size
while i < count_i :
    # json is a CkJsonObject
    json = jarrResp.ObjectAt(i)
    id = json.IntOf("id")
    date = json.StringOf("date")
    json.DtOf("date_gmt",False,date_gmt)
    guidRendered = json.StringOf("guid.rendered")
    modified = json.StringOf("modified")
    modified_gmt = json.StringOf("modified_gmt")
    slug = json.StringOf("slug")
    status = json.StringOf("status")
    v_type = json.StringOf("type")
    link = json.StringOf("link")
    titleRendered = json.StringOf("title.rendered")
    contentRendered = json.StringOf("content.rendered")
    contentProtected = json.BoolOf("content.protected")
    excerptRendered = json.StringOf("excerpt.rendered")
    excerptProtected = json.BoolOf("excerpt.protected")
    author = json.IntOf("author")
    featured_media = json.IntOf("featured_media")
    comment_status = json.StringOf("comment_status")
    ping_status = json.StringOf("ping_status")
    sticky = json.BoolOf("sticky")
    template = json.StringOf("template")
    format = json.StringOf("format")
    j = 0
    count_j = json.SizeOfArray("meta")
    while j < count_j :
        json.J = j
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("categories")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("categories[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("tags")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("tags[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.self")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.self[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.collection")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.collection[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.about")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.about[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.author")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.author[j].embeddable")
        href = json.StringOf("_links.author[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.replies")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.replies[j].embeddable")
        href = json.StringOf("_links.replies[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.version-history")
    while j < count_j :
        json.J = j
        count = json.IntOf("_links.version-history[j].count")
        href = json.StringOf("_links.version-history[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.predecessor-version")
    while j < count_j :
        json.J = j
        id = json.IntOf("_links.predecessor-version[j].id")
        href = json.StringOf("_links.predecessor-version[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:attachment")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.wp:attachment[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:term")
    while j < count_j :
        json.J = j
        taxonomy = json.StringOf("_links.wp:term[j].taxonomy")
        embeddable = json.BoolOf("_links.wp:term[j].embeddable")
        href = json.StringOf("_links.wp:term[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.curies")
    while j < count_j :
        json.J = j
        name = json.StringOf("_links.curies[j].name")
        href = json.StringOf("_links.curies[j].href")
        templated = json.BoolOf("_links.curies[j].templated")
        j = j + 1

    i = i + 1

import sys
import chilkat2

# This example assumes the Chilkat API to have been previously unlocked.
# See Global Unlock Sample for sample code.

http = chilkat2.Http()

# Use your API key here, such as TaVFjSBu8IMR0MbvZNn7A6P04GXrbtHm
# This causes the "Authorization: Bearer <api_key>" header to be added to each HTTP request.
http.AuthToken = "api_key"

sbResponseBody = chilkat2.StringBuilder()
success = http.QuickGetSb("https://www.yoursite.com/wp-json/wp/v2/posts?page=1",sbResponseBody)
if (success == False):
    print(http.LastErrorText)
    sys.exit()

jarrResp = chilkat2.JsonArray()
jarrResp.LoadSb(sbResponseBody)
jarrResp.EmitCompact = False

print("Response Body:")
print(jarrResp.Emit())

respStatusCode = http.LastStatus
print("Response Status Code = " + str(respStatusCode))
if (respStatusCode >= 400):
    print("Response Header:")
    print(http.LastHeader)
    print("Failed.")
    sys.exit()

# Sample JSON response:
# (Sample code for parsing the JSON response is shown below)

# [
#   {
#     "id": 1902,
#     "date": "2020-11-16T09:54:09",
#     "date_gmt": "2020-11-16T16:54:09",
#     "guid": {
#       "rendered": "http:\/\/cknotes.com\/?p=1902"
#     },
#     "modified": "2020-11-16T09:54:09",
#     "modified_gmt": "2020-11-16T16:54:09",
#     "slug": "xero-redirect-uri-for-oauth2-and-desktop-apps",
#     "status": "publish",
#     "type": "post",
#     "link": "https:\/\/cknotes.com\/xero-redirect-uri-for-oauth2-and-desktop-apps\/",
#     "title": {
#       "rendered": "Xero Redirect URI for OAuth2 and Desktop Apps"
#     },
#     "content": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "excerpt": {
#       "rendered": "<p>...",
#       "protected": false
#     },
#     "author": 1,
#     "featured_media": 0,
#     "comment_status": "closed",
#     "ping_status": "open",
#     "sticky": false,
#     "template": "",
#     "format": "standard",
#     "meta": [
#     ],
#     "categories": [
#       815
#     ],
#     "tags": [
#       594,
#       816
#     ],
#     "_links": {
#       "self": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902"
#         }
#       ],
#       "collection": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts"
#         }
#       ],
#       "about": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/types\/post"
#         }
#       ],
#       "author": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/users\/1"
#         }
#       ],
#       "replies": [
#         {
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/comments?post=1902"
#         }
#       ],
#       "version-history": [
#         {
#           "count": 1,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions"
#         }
#       ],
#       "predecessor-version": [
#         {
#           "id": 1904,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1904"
#         }
#       ],
#       "wp:attachment": [
#         {
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/media?parent=1902"
#         }
#       ],
#       "wp:term": [
#         {
#           "taxonomy": "category",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/categories?post=1902"
#         },
#         {
#           "taxonomy": "post_tag",
#           "embeddable": true,
#           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/tags?post=1902"
#         }
#       ],
#       "curies": [
#         {
#           "name": "wp",
#           "href": "https:\/\/api.w.org\/{rel}",
#           "templated": true
#         }
#       ]
#     }
#   },
# ...
# ]

# Sample code for parsing the JSON response...
# Use the following online tool to generate parsing code from sample JSON:
# Generate Parsing Code from JSON

date_gmt = chilkat2.DtObj()

i = 0
count_i = jarrResp.Size
while i < count_i :
    # json is a CkJsonObject
    json = jarrResp.ObjectAt(i)
    id = json.IntOf("id")
    date = json.StringOf("date")
    json.DtOf("date_gmt",False,date_gmt)
    guidRendered = json.StringOf("guid.rendered")
    modified = json.StringOf("modified")
    modified_gmt = json.StringOf("modified_gmt")
    slug = json.StringOf("slug")
    status = json.StringOf("status")
    v_type = json.StringOf("type")
    link = json.StringOf("link")
    titleRendered = json.StringOf("title.rendered")
    contentRendered = json.StringOf("content.rendered")
    contentProtected = json.BoolOf("content.protected")
    excerptRendered = json.StringOf("excerpt.rendered")
    excerptProtected = json.BoolOf("excerpt.protected")
    author = json.IntOf("author")
    featured_media = json.IntOf("featured_media")
    comment_status = json.StringOf("comment_status")
    ping_status = json.StringOf("ping_status")
    sticky = json.BoolOf("sticky")
    template = json.StringOf("template")
    format = json.StringOf("format")
    j = 0
    count_j = json.SizeOfArray("meta")
    while j < count_j :
        json.J = j
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("categories")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("categories[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("tags")
    while j < count_j :
        json.J = j
        intVal = json.IntOf("tags[j]")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.self")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.self[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.collection")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.collection[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.about")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.about[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.author")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.author[j].embeddable")
        href = json.StringOf("_links.author[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.replies")
    while j < count_j :
        json.J = j
        embeddable = json.BoolOf("_links.replies[j].embeddable")
        href = json.StringOf("_links.replies[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.version-history")
    while j < count_j :
        json.J = j
        count = json.IntOf("_links.version-history[j].count")
        href = json.StringOf("_links.version-history[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.predecessor-version")
    while j < count_j :
        json.J = j
        id = json.IntOf("_links.predecessor-version[j].id")
        href = json.StringOf("_links.predecessor-version[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:attachment")
    while j < count_j :
        json.J = j
        href = json.StringOf("_links.wp:attachment[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.wp:term")
    while j < count_j :
        json.J = j
        taxonomy = json.StringOf("_links.wp:term[j].taxonomy")
        embeddable = json.BoolOf("_links.wp:term[j].embeddable")
        href = json.StringOf("_links.wp:term[j].href")
        j = j + 1

    j = 0
    count_j = json.SizeOfArray("_links.curies")
    while j < count_j :
        json.J = j
        name = json.StringOf("_links.curies[j].name")
        href = json.StringOf("_links.curies[j].href")
        templated = json.BoolOf("_links.curies[j].templated")
        j = j + 1

    i = i + 1

<?php

// This example assumes the Chilkat API to have been previously unlocked.
// See Global Unlock Sample for sample code.

$http = new COM("Chilkat_9_5_0.Http");

// Implements the following CURL command:

// curl -X GET --user wp_username:wp_password https://www.yoursite.com/wp-json/wp/v2/posts?page=1

// Use the following online tool to generate HTTP code from a CURL command
// Convert a cURL Command to HTTP Source Code

$http->Login = 'wp_username';
$http->Password = 'wp_password';
$http->BasicAuth = 1;

$sbResponseBody = new COM("Chilkat_9_5_0.StringBuilder");
$success = $http->QuickGetSb('https://www.yoursite.com/wp-json/wp/v2/posts?page=1',$sbResponseBody);
if ($success == 0) {
    print $http->LastErrorText . "\n";
    exit;
}

$jarrResp = new COM("Chilkat_9_5_0.JsonArray");
$jarrResp->LoadSb($sbResponseBody);
$jarrResp->EmitCompact = 0;

print 'Response Body:' . "\n";
print $jarrResp->emit() . "\n";

$respStatusCode = $http->LastStatus;
print 'Response Status Code = ' . $respStatusCode . "\n";
if ($respStatusCode >= 400) {
    print 'Response Header:' . "\n";
    print $http->LastHeader . "\n";
    print 'Failed.' . "\n";
    exit;
}

// Sample JSON response:
// (Sample code for parsing the JSON response is shown below)

// [
//   {
//     "id": 1902,
//     "date": "2020-11-16T09:54:09",
//     "date_gmt": "2020-11-16T16:54:09",
//     "guid": {
//       "rendered": "http:\/\/cknotes.com\/?p=1902"
//     },
//     "modified": "2020-11-16T09:54:09",
//     "modified_gmt": "2020-11-16T16:54:09",
//     "slug": "xero-redirect-uri-for-oauth2-and-desktop-apps",
//     "status": "publish",
//     "type": "post",
//     "link": "https:\/\/cknotes.com\/xero-redirect-uri-for-oauth2-and-desktop-apps\/",
//     "title": {
//       "rendered": "Xero Redirect URI for OAuth2 and Desktop Apps"
//     },
//     "content": {
//       "rendered": "<p>...",
//       "protected": false
//     },
//     "excerpt": {
//       "rendered": "<p>...",
//       "protected": false
//     },
//     "author": 1,
//     "featured_media": 0,
//     "comment_status": "closed",
//     "ping_status": "open",
//     "sticky": false,
//     "template": "",
//     "format": "standard",
//     "meta": [
//     ],
//     "categories": [
//       815
//     ],
//     "tags": [
//       594,
//       816
//     ],
//     "_links": {
//       "self": [
//         {
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902"
//         }
//       ],
//       "collection": [
//         {
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts"
//         }
//       ],
//       "about": [
//         {
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/types\/post"
//         }
//       ],
//       "author": [
//         {
//           "embeddable": true,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/users\/1"
//         }
//       ],
//       "replies": [
//         {
//           "embeddable": true,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/comments?post=1902"
//         }
//       ],
//       "version-history": [
//         {
//           "count": 1,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions"
//         }
//       ],
//       "predecessor-version": [
//         {
//           "id": 1904,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1904"
//         }
//       ],
//       "wp:attachment": [
//         {
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/media?parent=1902"
//         }
//       ],
//       "wp:term": [
//         {
//           "taxonomy": "category",
//           "embeddable": true,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/categories?post=1902"
//         },
//         {
//           "taxonomy": "post_tag",
//           "embeddable": true,
//           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/tags?post=1902"
//         }
//       ],
//       "curies": [
//         {
//           "name": "wp",
//           "href": "https:\/\/api.w.org\/{rel}",
//           "templated": true
//         }
//       ]
//     }
//   },
// ...
// ]

// Sample code for parsing the JSON response...
// Use the following online tool to generate parsing code from sample JSON:
// Generate Parsing Code from JSON

$date_gmt = new COM("Chilkat_9_5_0.DtObj");

$i = 0;
$count_i = $jarrResp->Size;
while ($i < $count_i) {
    // json is a Chilkat_9_5_0.JsonObject
    $json = $jarrResp->ObjectAt($i);
    $id = $json->IntOf('id');
    $date = $json->stringOf('date');
    $json->DtOf('date_gmt',0,$date_gmt);
    $guidRendered = $json->stringOf('guid.rendered');
    $modified = $json->stringOf('modified');
    $modified_gmt = $json->stringOf('modified_gmt');
    $slug = $json->stringOf('slug');
    $status = $json->stringOf('status');
    $v_type = $json->stringOf('type');
    $link = $json->stringOf('link');
    $titleRendered = $json->stringOf('title.rendered');
    $contentRendered = $json->stringOf('content.rendered');
    $contentProtected = $json->BoolOf('content.protected');
    $excerptRendered = $json->stringOf('excerpt.rendered');
    $excerptProtected = $json->BoolOf('excerpt.protected');
    $author = $json->IntOf('author');
    $featured_media = $json->IntOf('featured_media');
    $comment_status = $json->stringOf('comment_status');
    $ping_status = $json->stringOf('ping_status');
    $sticky = $json->BoolOf('sticky');
    $template = $json->stringOf('template');
    $format = $json->stringOf('format');
    $j = 0;
    $count_j = $json->SizeOfArray('meta');
    while ($j < $count_j) {
        $json->J = $j;
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('categories');
    while ($j < $count_j) {
        $json->J = $j;
        $intVal = $json->IntOf('categories[j]');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('tags');
    while ($j < $count_j) {
        $json->J = $j;
        $intVal = $json->IntOf('tags[j]');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.self');
    while ($j < $count_j) {
        $json->J = $j;
        $href = $json->stringOf('_links.self[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.collection');
    while ($j < $count_j) {
        $json->J = $j;
        $href = $json->stringOf('_links.collection[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.about');
    while ($j < $count_j) {
        $json->J = $j;
        $href = $json->stringOf('_links.about[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.author');
    while ($j < $count_j) {
        $json->J = $j;
        $embeddable = $json->BoolOf('_links.author[j].embeddable');
        $href = $json->stringOf('_links.author[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.replies');
    while ($j < $count_j) {
        $json->J = $j;
        $embeddable = $json->BoolOf('_links.replies[j].embeddable');
        $href = $json->stringOf('_links.replies[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.version-history');
    while ($j < $count_j) {
        $json->J = $j;
        $count = $json->IntOf('_links.version-history[j].count');
        $href = $json->stringOf('_links.version-history[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.predecessor-version');
    while ($j < $count_j) {
        $json->J = $j;
        $id = $json->IntOf('_links.predecessor-version[j].id');
        $href = $json->stringOf('_links.predecessor-version[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.wp:attachment');
    while ($j < $count_j) {
        $json->J = $j;
        $href = $json->stringOf('_links.wp:attachment[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.wp:term');
    while ($j < $count_j) {
        $json->J = $j;
        $taxonomy = $json->stringOf('_links.wp:term[j].taxonomy');
        $embeddable = $json->BoolOf('_links.wp:term[j].embeddable');
        $href = $json->stringOf('_links.wp:term[j].href');
        $j = $j + 1;
    }

    $j = 0;
    $count_j = $json->SizeOfArray('_links.curies');
    while ($j < $count_j) {
        $json->J = $j;
        $name = $json->stringOf('_links.curies[j].name');
        $href = $json->stringOf('_links.curies[j].href');
        $templated = $json->BoolOf('_links.curies[j].templated');
        $j = $j + 1;
    }

    $i = $i + 1;
}


?>

from stripe import StripeClient

client = StripeClient("sk_test_...")

# list customers
customers = client.customers.list()

# print the first customer's email
print(customers.data[0].email)

# retrieve specific Customer
customer = client.customers.retrieve("cus_123456789")

# print that customer's email
print(customer.email)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blank template</title>
        <!-- Load external CSS styles -->
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>My awesome space</h1>
        <!-- Load external JavaScript -->
        <script src="scripts.js"></script>     
    </body>
</html>

1. Utilizar el widget TextArea con la propiedad autoSize:

use yii\widgets\ActiveForm;
use yii\widgets\TextArea;

$form = ActiveForm::begin();

echo $form->field($model, 'my_field')->widget(TextArea::class, [
    'options' => [
        'rows' => 3,
        'style' => 'resize:none;', // Deshabilita el redimensionamiento manual
    ],
    'pluginOptions' => [
        'autoSize' => [
            'enable' => true,
            'maxLines' => 5, // Número máximo de líneas
            'minLines' => 3, // Número mínimo de líneas
        ],
    ],
]);

ActiveForm::end();

2. Utilizar el widget TinyMCE con la propiedad autogrow:

use dosamigos\tinymce\TinyMce;

echo $form->field($model, 'my_field')->widget(TinyMce::class, [
    'options' => [
        'rows' => 3,
    ],
    'pluginOptions' => [
        'autogrow_onload' => true,
        'autogrow_minimum_height' => 100,
        'autogrow_maximum_height' => 400,
        'autogrow_bottom_margin' => 20,
    ],
]);

3. Utilizar JavaScript para ajustar automáticamente el tamaño del campo:

use yii\helpers\Html;

echo Html::activeTextArea($model, 'my_field', [
    'rows' => 3,
    'style' => 'resize:none;', // Deshabilita el redimensionamiento manual
    'onInput' => 'this.style.height = this.scrollHeight + "px";',
]);

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}
​
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}
​
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
​
.btn:hover {
  background-color: #ddd;
}
​
.btn.active {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>

sudo apt install kube-linter

Dim fso, outFile
Set fso = CreateObject("Scripting.FileSystemObject")
Set outFile = fso.CreateTextFile("output.txt", True)

' An Office365 OAuth2 access token must first be obtained prior
' to running this code.

' Getting the OAuth2 access token for the 1st time requires the O365 account owner's 
' interactive authorizaition via a web browser.  Afterwards, the access token
' can be repeatedly refreshed automatically.

' See the following examples for getting and refreshing an OAuth2 access token

' Get Office365 SMTP/IMAP/POP3 OAuth2 Access Token
' Refresh Office365 SMTP/IMAP/POP3 OAuth2 Access Token

' First get our previously obtained OAuth2 access token.
set jsonToken = CreateObject("Chilkat_9_5_0.JsonObject")
success = jsonToken.LoadFile("qa_data/tokens/office365.json")
If (success = 0) Then
    outFile.WriteLine("Failed to open the office365 OAuth JSON file.")
    WScript.Quit
End If

set imap = CreateObject("Chilkat_9_5_0.Imap")

imap.Ssl = 1
imap.Port = 993

' Connect to the Office365 IMAP server.
success = imap.Connect("outlook.office365.com")
If (success <> 1) Then
    outFile.WriteLine(imap.LastErrorText)
    WScript.Quit
End If

' Use OAuth2 authentication.
imap.AuthMethod = "XOAUTH2"

' Login using our username (i.e. email address) and the access token for the password.
success = imap.Login("OFFICE365_EMAIL_ADDRESS",jsonToken.StringOf("access_token"))
If (success <> 1) Then
    outFile.WriteLine(imap.LastErrorText)
    WScript.Quit
End If

outFile.WriteLine("O365 OAuth authentication is successful.")

' The ListMailboxes method returns a Mailboxes object
' that contains the collection of mailboxes.
' It accepts two arguments: a refName and a wildcardedMailbox.

refName = ""
' refName is usually set to an empty string.
' A non-empty reference name argument is the name of a mailbox or a level of
' mailbox hierarchy, and indicates the context in which the mailbox
' name is interpreted.

' Select all mailboxes matching this pattern:
wildcardedMailbox = "*"

' mboxes is a Chilkat_9_5_0.Mailboxes
Set mboxes = imap.ListMailboxes(refName,wildcardedMailbox)
If (imap.LastMethodSuccess = 0) Then
    outFile.WriteLine(imap.LastErrorText)
    WScript.Quit
End If

i = 0
Do While i < mboxes.Count
    outFile.WriteLine(mboxes.GetName(i))
    i = i + 1
Loop

' Sample output looks like this:
' Archive
' Calendar
' Calendar/Birthdays
' Calendar/United States holidays
' Contacts
' Conversation History
' Deleted Items
' Drafts
' INBOX
' INBOX/abc
' INBOX/misc
' INBOX/misc/birdeye
' INBOX/old
' INBOX/old/large
' INBOX/receipts
' Journal
' Junk Email
' Notes
' Outbox
' RSS Subscriptions
' Sent Items
' Sync Issues
' Sync Issues/Conflicts
' Sync Issues/Local Failures
' Sync Issues/Server Failures
' Tasks
' Trash

' Disconnect from the IMAP server.
success = imap.Disconnect()


outFile.Close

docker pull stackrox/kube-linter:latest

go install golang.stackrox.io/kube-linter/cmd/kube-linter@latest

' This example assumes the Chilkat API to have been previously unlocked.
' See Global Unlock Sample for sample code.

Dim http As New ChilkatHttp
Dim success As Long

' Implements the following CURL command:

' curl -X GET --user wp_username:wp_password https://www.yoursite.com/wp-json/wp/v2/posts?page=1

' Use the following online tool to generate HTTP code from a CURL command
' Convert a cURL Command to HTTP Source Code

http.Login = "wp_username"
http.Password = "wp_password"
http.BasicAuth = 1

Dim sbResponseBody As New ChilkatStringBuilder
success = http.QuickGetSb("https://www.yoursite.com/wp-json/wp/v2/posts?page=1",sbResponseBody)
If (success = 0) Then
    Debug.Print http.LastErrorText
    Exit Sub
End If

Dim jarrResp As New ChilkatJsonArray
success = jarrResp.LoadSb(sbResponseBody)
jarrResp.EmitCompact = 0

Debug.Print "Response Body:"
Debug.Print jarrResp.Emit()

Dim respStatusCode As Long
respStatusCode = http.LastStatus
Debug.Print "Response Status Code = " & respStatusCode
If (respStatusCode >= 400) Then
    Debug.Print "Response Header:"
    Debug.Print http.LastHeader
    Debug.Print "Failed."
    Exit Sub
End If

' Sample JSON response:
' (Sample code for parsing the JSON response is shown below)

' [
'   {
'     "id": 1902,
'     "date": "2020-11-16T09:54:09",
'     "date_gmt": "2020-11-16T16:54:09",
'     "guid": {
'       "rendered": "http:\/\/cknotes.com\/?p=1902"
'     },
'     "modified": "2020-11-16T09:54:09",
'     "modified_gmt": "2020-11-16T16:54:09",
'     "slug": "xero-redirect-uri-for-oauth2-and-desktop-apps",
'     "status": "publish",
'     "type": "post",
'     "link": "https:\/\/cknotes.com\/xero-redirect-uri-for-oauth2-and-desktop-apps\/",
'     "title": {
'       "rendered": "Xero Redirect URI for OAuth2 and Desktop Apps"
'     },
'     "content": {
'       "rendered": "<p>...",
'       "protected": false
'     },
'     "excerpt": {
'       "rendered": "<p>...",
'       "protected": false
'     },
'     "author": 1,
'     "featured_media": 0,
'     "comment_status": "closed",
'     "ping_status": "open",
'     "sticky": false,
'     "template": "",
'     "format": "standard",
'     "meta": [
'     ],
'     "categories": [
'       815
'     ],
'     "tags": [
'       594,
'       816
'     ],
'     "_links": {
'       "self": [
'         {
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902"
'         }
'       ],
'       "collection": [
'         {
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts"
'         }
'       ],
'       "about": [
'         {
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/types\/post"
'         }
'       ],
'       "author": [
'         {
'           "embeddable": true,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/users\/1"
'         }
'       ],
'       "replies": [
'         {
'           "embeddable": true,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/comments?post=1902"
'         }
'       ],
'       "version-history": [
'         {
'           "count": 1,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions"
'         }
'       ],
'       "predecessor-version": [
'         {
'           "id": 1904,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1904"
'         }
'       ],
'       "wp:attachment": [
'         {
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/media?parent=1902"
'         }
'       ],
'       "wp:term": [
'         {
'           "taxonomy": "category",
'           "embeddable": true,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/categories?post=1902"
'         },
'         {
'           "taxonomy": "post_tag",
'           "embeddable": true,
'           "href": "https:\/\/cknotes.com\/wp-json\/wp\/v2\/tags?post=1902"
'         }
'       ],
'       "curies": [
'         {
'           "name": "wp",
'           "href": "https:\/\/api.w.org\/{rel}",
'           "templated": true
'         }
'       ]
'     }
'   },
' ...
' ]

' Sample code for parsing the JSON response...
' Use the following online tool to generate parsing code from sample JSON:
' Generate Parsing Code from JSON

Dim date_gmt As New DtObj
Dim json As ChilkatJsonObject
Dim id As Long
Dim date As String
Dim guidRendered As String
Dim modified As String
Dim modified_gmt As String
Dim slug As String
Dim status As String
Dim v_type As String
Dim link As String
Dim titleRendered As String
Dim contentRendered As String
Dim contentProtected As Long
Dim excerptRendered As String
Dim excerptProtected As Long
Dim author As Long
Dim featured_media As Long
Dim comment_status As String
Dim ping_status As String
Dim sticky As Long
Dim template As String
Dim format As String
Dim j As Long
Dim count_j As Long
Dim intVal As Long
Dim href As String
Dim embeddable As Long
Dim count As Long
Dim taxonomy As String
Dim name As String
Dim templated As Long

Dim i As Long
i = 0
Dim count_i As Long
count_i = jarrResp.Size
Do While i < count_i
    Set json = jarrResp.ObjectAt(i)
    id = json.IntOf("id")
    date = json.StringOf("date")
    success = json.DtOf("date_gmt",0,date_gmt)
    guidRendered = json.StringOf("guid.rendered")
    modified = json.StringOf("modified")
    modified_gmt = json.StringOf("modified_gmt")
    slug = json.StringOf("slug")
    status = json.StringOf("status")
    v_type = json.StringOf("type")
    link = json.StringOf("link")
    titleRendered = json.StringOf("title.rendered")
    contentRendered = json.StringOf("content.rendered")
    contentProtected = json.BoolOf("content.protected")
    excerptRendered = json.StringOf("excerpt.rendered")
    excerptProtected = json.BoolOf("excerpt.protected")
    author = json.IntOf("author")
    featured_media = json.IntOf("featured_media")
    comment_status = json.StringOf("comment_status")
    ping_status = json.StringOf("ping_status")
    sticky = json.BoolOf("sticky")
    template = json.StringOf("template")
    format = json.StringOf("format")
    j = 0
    count_j = json.SizeOfArray("meta")
    Do While j < count_j
        json.J = j
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("categories")
    Do While j < count_j
        json.J = j
        intVal = json.IntOf("categories[j]")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("tags")
    Do While j < count_j
        json.J = j
        intVal = json.IntOf("tags[j]")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.self")
    Do While j < count_j
        json.J = j
        href = json.StringOf("_links.self[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.collection")
    Do While j < count_j
        json.J = j
        href = json.StringOf("_links.collection[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.about")
    Do While j < count_j
        json.J = j
        href = json.StringOf("_links.about[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.author")
    Do While j < count_j
        json.J = j
        embeddable = json.BoolOf("_links.author[j].embeddable")
        href = json.StringOf("_links.author[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.replies")
    Do While j < count_j
        json.J = j
        embeddable = json.BoolOf("_links.replies[j].embeddable")
        href = json.StringOf("_links.replies[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.version-history")
    Do While j < count_j
        json.J = j
        count = json.IntOf("_links.version-history[j].count")
        href = json.StringOf("_links.version-history[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.predecessor-version")
    Do While j < count_j
        json.J = j
        id = json.IntOf("_links.predecessor-version[j].id")
        href = json.StringOf("_links.predecessor-version[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.wp:attachment")
    Do While j < count_j
        json.J = j
        href = json.StringOf("_links.wp:attachment[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.wp:term")
    Do While j < count_j
        json.J = j
        taxonomy = json.StringOf("_links.wp:term[j].taxonomy")
        embeddable = json.BoolOf("_links.wp:term[j].embeddable")
        href = json.StringOf("_links.wp:term[j].href")
        j = j + 1
    Loop
    j = 0
    count_j = json.SizeOfArray("_links.curies")
    Do While j < count_j
        json.J = j
        name = json.StringOf("_links.curies[j].name")
        href = json.StringOf("_links.curies[j].href")
        templated = json.BoolOf("_links.curies[j].templated")
        j = j + 1
    Loop

    i = i + 1
Loop

' This example requires the Chilkat API to have been previously unlocked.
' See Global Unlock Sample for sample code.

Dim oauth2 As New ChilkatOAuth2
Dim success As Long

' For Google OAuth2, set the listen port equal to the port used
' in the Authorized Redirect URL for the Client ID.
' For example, in this case the Authorized Redirect URL would be http://localhost:55568/
' Your app should choose a port not likely not used by any other application.
oauth2.ListenPort = 55568

oauth2.AuthorizationEndpoint = "https://accounts.google.com/o/oauth2/v2/auth"
oauth2.TokenEndpoint = "https://www.googleapis.com/oauth2/v4/token"

' Replace these with actual values.
oauth2.ClientId = "GOOGLE-CLIENT-ID"
oauth2.ClientSecret = "GOOGLE-CLIENT-SECRET"

oauth2.CodeChallenge = 1
oauth2.CodeChallengeMethod = "S256"

' This is the scope for Google Drive.
' See https://developers.google.com/identity/protocols/googlescopes
oauth2.Scope = "https://www.googleapis.com/auth/drive"

' Begin the OAuth2 three-legged flow.  This returns a URL that should be loaded in a browser.
Dim url As String
url = oauth2.StartAuth()
If (oauth2.LastMethodSuccess <> 1) Then
    Debug.Print oauth2.LastErrorText
    Exit Sub
End If

' At this point, your application should load the URL in a browser.
' For example, 
' in C#:  System.Diagnostics.Process.Start(url);
' in Java: Desktop.getDesktop().browse(new URI(url));
' in VBScript: Set wsh=WScript.CreateObject("WScript.Shell")
'              wsh.Run url
' in Xojo: ShowURL(url)  (see http://docs.xojo.com/index.php/ShowURL)
' in Dataflex: Runprogram Background "c:\Program Files\Internet Explorer\iexplore.exe" sUrl        
' The Google account owner would interactively accept or deny the authorization request.

' Add the code to load the url in a web browser here...
' Add the code to load the url in a web browser here...
' Add the code to load the url in a web browser here...

' Now wait for the authorization.
' We'll wait for a max of 30 seconds.
Dim numMsWaited As Long
numMsWaited = 0
Do While (numMsWaited < 30000) And (oauth2.AuthFlowState < 3)
    oauth2.SleepMs 100
    numMsWaited = numMsWaited + 100
Loop

' If there was no response from the browser within 30 seconds, then 
' the AuthFlowState will be equal to 1 or 2.
' 1: Waiting for Redirect. The OAuth2 background thread is waiting to receive the redirect HTTP request from the browser.
' 2: Waiting for Final Response. The OAuth2 background thread is waiting for the final access token response.
' In that case, cancel the background task started in the call to StartAuth.
If (oauth2.AuthFlowState < 3) Then
    success = oauth2.Cancel()
    Debug.Print "No response from the browser!"
    Exit Sub
End If

' Check the AuthFlowState to see if authorization was granted, denied, or if some error occurred
' The possible AuthFlowState values are:
' 3: Completed with Success. The OAuth2 flow has completed, the background thread exited, and the successful JSON response is available in AccessTokenResponse property.
' 4: Completed with Access Denied. The OAuth2 flow has completed, the background thread exited, and the error JSON is available in AccessTokenResponse property.
' 5: Failed Prior to Completion. The OAuth2 flow failed to complete, the background thread exited, and the error information is available in the FailureInfo property.
If (oauth2.AuthFlowState = 5) Then
    Debug.Print "OAuth2 failed to complete."
    Debug.Print oauth2.FailureInfo
    Exit Sub
End If

If (oauth2.AuthFlowState = 4) Then
    Debug.Print "OAuth2 authorization was denied."
    Debug.Print oauth2.AccessTokenResponse
    Exit Sub
End If

If (oauth2.AuthFlowState <> 3) Then
    Debug.Print "Unexpected AuthFlowState:" & oauth2.AuthFlowState
    Exit Sub
End If

' Save the full JSON access token response to a file.
Dim sbJson As New ChilkatStringBuilder
success = sbJson.Append(oauth2.AccessTokenResponse)
success = sbJson.WriteFile("qa_data/tokens/_googleDrive.json","utf-8",0)

' The saved JSON response looks like this:

' 	{
' 	 "access_token": "ya39.Ci-XA_C5bGgRDC3UaD-h0_NeL-DVIQnI2gHtBBBHkZzrwlARkwX6R3O0PCDEzRlfaQ",
' 	 "token_type": "Bearer",
' 	 "expires_in": 3600,
' 	 "refresh_token": "1/r_2c_7jddspcdfesrrfKqfXtqo08D6Q-gUU0DsdfVMsx0c"
' 	}
' 
Debug.Print "OAuth2 authorization granted!"
Debug.Print "Access Token = " & oauth2.AccessToken

<!DOCTYPE html>
<html>
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}
​
#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<body>
​
<h1>Draggable DIV Element</h1>
​
<p>Click and hold the mouse button down while moving the DIV element</p>
​
<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
​
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
​
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
​
/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}
​
/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}
​
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
​
/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}
​

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>
​
<p>
<button onclick="myMove()">Click Me</button> 
</p>
​
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
​
<script>
var id = null;
function myMove() {
  var elem = document.getElementById("myAnimation");   
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

<!DOCTYPE html>
<html>
<body>
​
<div id="myDiv">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;body&gt;<br>
<br>
&lt;h1&gt;Testing an HTML Syntax Highlighter&lt;/h2&gt;<br>
&lt;p&gt;Hello world!&lt;/p&gt;<br>
&lt;a href="https://www.w3schools.com"&gt;Back to School&lt;/a&gt;<br>
<br>
&lt;/body&gt;<br>
&lt;/html&gt;
</div>
​
<script>
w3CodeColor(document.getElementById("myDiv"));
​
function w3CodeColor(elmnt, mode) {
  var lang = (mode || "html");
  var elmntObj = (document.getElementById(elmnt) || elmnt);
  var elmntTxt = elmntObj.innerHTML;
  var tagcolor = "mediumblue";
  var tagnamecolor = "brown";
  var attributecolor = "red";
  var attributevaluecolor = "mediumblue";
  var commentcolor = "green";
  var cssselectorcolor = "brown";
  var csspropertycolor = "red";
  var csspropertyvaluecolor = "mediumblue";
  var cssdelimitercolor = "black";
  var cssimportantcolor = "red";  
  var jscolor = "black";
  var jskeywordcolor = "mediumblue";
  var jsstringcolor = "brown";
  var jsnumbercolor = "red";
  var jspropertycolor = "black";
  elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
  if (!lang) {lang = "html"; }
  if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
  if (lang == "css") {elmntTxt = cssMode(elmntTxt);}

browser-sync start --proxy "https://hein.eu-theme.ddev.site" --https --files 'app/**/*.phtml, app/**/*.xml, app/**/*.css, app/**/*.js'

Để giải thích cách hoạt động của thuật toán Dijkstra trong mã qua ví dụ đồ thị bạn đã cung cấp, hãy xem xét các bước chi tiết từng bước khi thuật toán chạy:

Đồ thị Mẫu
Số đỉnh: 5 (đánh số từ 0 đến 4).

Số cạnh: 6.

Các cạnh với trọng số:

0 1 2 (cạnh từ đỉnh 0 đến đỉnh 1 với trọng số 2).
0 2 4 (cạnh từ đỉnh 0 đến đỉnh 2 với trọng số 4).
1 2 1 (cạnh từ đỉnh 1 đến đỉnh 2 với trọng số 1).
1 3 7 (cạnh từ đỉnh 1 đến đỉnh 3 với trọng số 7).
2 4 3 (cạnh từ đỉnh 2 đến đỉnh 4 với trọng số 3).
3 4 1 (cạnh từ đỉnh 3 đến đỉnh 4 với trọng số 1).
Đỉnh nguồn: 0.

Mô tả Thuật toán Dijkstra qua Ví dụ
Khởi tạo:

Đỉnh nguồn là 0.
Tạo mảng dist để lưu trữ khoảng cách ngắn nhất từ đỉnh nguồn 0 đến tất cả các đỉnh khác. Ban đầu, dist được thiết lập như sau:
dist[0] = 0 (khoảng cách từ đỉnh 0 đến chính nó là 0).
dist[1] = 1000000, dist[2] = 1000000, dist[3] = 1000000, dist[4] = 1000000 (khoảng cách đến tất cả các đỉnh khác ban đầu là vô cực).
Tạo hàng đợi ưu tiên pq và thêm đỉnh nguồn 0 với khoảng cách 0: pq = [(0, 0)].
Vòng lặp Thuật toán:

Lần lặp đầu tiên:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (0, 0):
u = 0, d = 0.
Duyệt các đỉnh kề của u = 0:
Đỉnh 1: trọng số cạnh (0, 1) là 2.
dist[1] = min(1000000, 0 + 2) = 2.
Cập nhật dist[1] thành 2 và đẩy (2, 1) vào hàng đợi pq.
Đỉnh 2: trọng số cạnh (0, 2) là 4.
dist[2] = min(1000000, 0 + 4) = 4.
Cập nhật dist[2] thành 4 và đẩy (4, 2) vào hàng đợi pq.
Sau lần lặp này: pq = [(2, 1), (4, 2)].
Lần lặp thứ hai:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (2, 1):
u = 1, d = 2.
Duyệt các đỉnh kề của u = 1:
Đỉnh 0: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Đỉnh 2: trọng số cạnh (1, 2) là 1.
dist[2] = min(4, 2 + 1) = 3.
Cập nhật dist[2] thành 3 và đẩy (3, 2) vào hàng đợi pq.
Đỉnh 3: trọng số cạnh (1, 3) là 7.
dist[3] = min(1000000, 2 + 7) = 9.
Cập nhật dist[3] thành 9 và đẩy (9, 3) vào hàng đợi pq.
Sau lần lặp này: pq = [(3, 2), (4, 2), (9, 3)].
Lần lặp thứ ba:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (3, 2):
u = 2, d = 3.
Duyệt các đỉnh kề của u = 2:
Đỉnh 0: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Đỉnh 1: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Đỉnh 4: trọng số cạnh (2, 4) là 3.
dist[4] = min(1000000, 3 + 3) = 6.
Cập nhật dist[4] thành 6 và đẩy (6, 4) vào hàng đợi pq.
Sau lần lặp này: pq = [(4, 2), (9, 3), (6, 4)].
Lần lặp thứ tư:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (4, 2):
u = 2, d = 4.
Đỉnh 2 đã được xử lý rồi, bỏ qua phần này.
Sau lần lặp này: pq = [(6, 4), (9, 3)].
Lần lặp thứ năm:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (6, 4):
u = 4, d = 6.
Duyệt các đỉnh kề của u = 4:
Đỉnh 2: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Đỉnh 3: trọng số cạnh (4, 3) là 1.
dist[3] = min(9, 6 + 1) = 7.
Cập nhật dist[3] thành 7 và đẩy (7, 3) vào hàng đợi pq.
Sau lần lặp này: pq = [(7, 3), (9, 3)].
Lần lặp thứ sáu:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (7, 3):
u = 3, d = 7.
Duyệt các đỉnh kề của u = 3:
Đỉnh 1: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Đỉnh 4: đã nằm trong tập đỉnh đã xử lý, bỏ qua.
Sau lần lặp này: pq = [(9, 3)].
Lần lặp thứ bảy:

Lấy phần tử có khoảng cách nhỏ nhất từ hàng đợi pq, đó là (9, 3):
u = 3, d = 9.
Đỉnh 3 đã được xử lý rồi, bỏ qua phần này.
Hàng đợi pq rỗng, thuật toán kết thúc.
Kết quả Cuối cùng
Thuật toán Dijkstra tính toán được khoảng cách ngắn nhất từ đỉnh 0 đến tất cả các đỉnh khác như sau:

dist[0] = 0: Khoảng cách từ 0 đến 0.
dist[1] = 2: Khoảng cách từ 0 đến 1 là 2.
dist[2] = 3: Khoảng cách từ 0 đến 2 là 3.
dist[3] = 7: Khoảng cách từ 0 đến 3 là 7.
dist[4] = 6: Khoảng cách từ 0 đến 4 là 6.
Kết quả này phù hợp với đồ thị mẫu và cách thức hoạt động của thuật toán Dijkstra.

#include <bits/stdc++.h>
using namespace std;

void D(int N, vector<pair<int, int>> adj[], int source) {
    vector<int> dist(N, 1000000); // Khởi tạo khoảng cách đến tất cả các đỉnh là vô cùng
    dist[source] = 0; // Khoảng cách từ đỉnh nguồn đến chính nó là 0
    priority_queue<pair<int, int>, vector<pair<int, int>>, greater<pair<int, int>>> pq; // Hàng đợi ưu tiên
    pq.push({0, source});

    while (!pq.empty()) { // Trong khi hàng đợi không rỗng
        int u = pq.top().second; // Lấy đỉnh có khoảng cách nhỏ nhất
        int d = pq.top().first;   // Khoảng cách từ nguồn đến đỉnh u
        pq.pop();

        // Duyệt các đỉnh kề của đỉnh u
        for (int i = 0; i < adj[u].size(); i++) {
            int v = adj[u][i].first;     // Đỉnh kề
            int weight = adj[u][i].second; // Trọng số của cạnh

            // Nếu tìm được đường đi ngắn hơn đến đỉnh v
            if (dist[v] > dist[u] + weight) {
                dist[v] = dist[u] + weight;
                pq.push({dist[v], v}); // Đẩy khoảng cách mới vào hàng đợi
            }
        }
    }

    // In ra kết quả khoảng cách từ đỉnh nguồn đến tất cả các đỉnh khác
    for (int i = 0; i < N; i++) {
        cout << "Khoảng cách từ " << source << " đến " << i << " là " << dist[i] << endl;
    }
}

int main() {
    int N, M; // Số đỉnh, số cạnh
    cin >> N >> M;
    
    vector<pair<int, int>> adj[N]; // Mảng vector để lưu đồ thị
    for (int i = 0; i < M; i++) {
        int a, b, c;
        cin >> a >> b >> c;
        adj[a].push_back({b, c}); // Đồ thị có hướng
        adj[b].push_back({a, c}); // Nếu đồ thị là vô hướng
    }

    int source;
    cin >> source;
    D(N, adj, source);

    return 0;
}

import * as React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import {
  ColumnDef,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { BsTrash } from "react-icons/bs";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
} from "@/components/ui/dialog";
import { TbCaretUpDownFilled } from "react-icons/tb";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination";
import { FaXmark } from "react-icons/fa6";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FaEdit } from "react-icons/fa";
import { Button } from "@/components/ui/button";
import { BsThreeDots } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";
import PermissonDrawer from "./PermissonDrawer";
import { useRef } from "react";
import { Input } from "../ui/input";
import { IoSearchOutline } from "react-icons/io5";

export type Permission = {
  permission: string;
};
export type RoleData = {
  role_id: string;
  role: string;
  permissions: Permission[];
};

const data: RoleData[] = [
  {
    role_id: "1",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "2",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "3",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "4",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "5",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "6",
    role: "Customer Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
];
export const columns: ColumnDef<RoleData>[] = [
  {
    accessorKey: "role",
    header: ({ column }: any) => {
      return (
        <div className="py-1.5">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] whitespace-nowrap font-medium"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Role
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: ({ row }: any) => {
      return (
        <div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
          <span className=" px-3 py-2 text-[13px]   border rounded-md">
            {row.getValue("role")}
          </span>
        </div>
      );
    },
  },
  {
    accessorKey: "permissions",
    header: ({ column }: any) => {
      return (
        <div className="py-1.5">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF]"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Permissions
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: ({ row }: { row: any }) => {
      const permissions = row.original.permissions as Permission[];
      return (
        <div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
          <span className=" px-3 py-2 text-[13px]   border rounded-md">
            {permissions.map((permission, index) => (
              <span key={index}>
                {permission.permission}
                {index < permissions.length - 1 && ", "}
              </span>
            ))}
          </span>
        </div>
      );
    },
  },

  {
    accessorKey: "Action",
    header: ({ column }) => {
      return (
        <div className="py-1.5 flex justify-end pr-6 md:pr-6">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] text-right"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Action
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: () => {
      const [isEditing, setIsEditing] = useState(false);
      const [RoleName, setRoleName] = useState("John Doe");
      const inputRef = useRef<HTMLInputElement>(null);

      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setRoleName(event.target.value);
      };
      return (
        <span
          onClick={(event) => {
            event.stopPropagation(); // Prevents row click event
          }}
          className={`rounded-md py-1 text-[11px] font-semibold flex justify-end px-4`}
        >
          <DropdownMenu>
            <DropdownMenuTrigger className="outline-0 ring-0 text-[#5E6E82] dark:text-[#F5F7FA] ml-auto pr-4 md:pr-4 mb-auto">
              <BsThreeDots
                className="text-[#138CF7] dark:text-[#D8E2EF]   "
                size={16}
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem className="text-sm ">
                <Sheet>
                  <SheetTrigger
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                    asChild
                  >
                    <button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
                      <FaEdit className="mr-2" /> Edit Role
                    </button>
                  </SheetTrigger>
                  <SheetContent
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  >
                    <SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
                      <div className="flex justify-between mr-5 items-center">
                        <div>
                          {isEditing ? (
                            <input
                              ref={inputRef}
                              type="text"
                              value={RoleName}
                              onChange={handleChange}
                              className="dark:bg-background bg-white rounded p-1 text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
                            />
                          ) : (
                            <span
                              //   onClick={handleNameClick}
                              className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
                            >
                              {RoleName}
                            </span>
                          )}
                        </div>

                        <Button
                          variant="default"
                          onClick={() => setIsEditing(!isEditing)}
                          className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
                        >
                          Update Role
                        </Button>
                      </div>
                    </SheetHeader>

                    <div
                      className="p-6"
                      // onClick={() => setIsEditing(!isEditing)}
                    >
                      <PermissonDrawer />
                    </div>
                  </SheetContent>
                </Sheet>
              </DropdownMenuItem>
              <DropdownMenuItem className="text-xs">
                <Dialog>
                  <DialogTrigger asChild>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                      }}
                      className=" text-sm flex  items-center gap-2 hover:text-[#C42F4A]"
                    >
                      <BsTrash />
                      Delete
                    </button>
                  </DialogTrigger>
                  <DialogContent className="md:max-w-lg">
                    <div className="">
                      <div className="bg-[#1062AB] dark:bg-[#138CF7] rounded-t-md p-4 md:p-6 flex justify-between items-center text-white">
                        <h1 className="text-base md:text-[19px] font-semibold  leading-6">
                          Delete Role
                        </h1>
                        <DialogClose asChild>
                          <button type="button">
                            <FaXmark className="h-5 w-5" />
                          </button>
                        </DialogClose>
                      </div>
                      <div className="p-6">
                        <p>Are you sure you want to delete this Role?</p>
                      </div>

                      <div className="flex justify-end p-4 md:p-6">
                        <DialogClose asChild>
                          <Button
                            variant={"outline"}
                            className="text-[#1062AB] hover:text-[#1062AB] dark:text-[#F5F7FA] shadow px-7 h-[29px] "
                          >
                            Cancel
                          </Button>
                        </DialogClose>
                        <Button className="bg-[#E63757] dark:bg-[#FBDBE1] ml-2 text-[#fff] dark:text-[#E63757] shadow px-5 h-[29px] rounded">
                          Delete
                        </Button>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </span>
      );
    },
  },
];
export default function RoleTable() {
  const navigate = useNavigate();
  const [isDone, setisDone] = useState(false);
  const [RoleName, setRoleName] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRoleName(event.target.value);
  };
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [pageSize, setPageSize] = React.useState(5);

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      sorting,
      columnVisibility,
    },
  });
  // Update page size dynamically
  React.useEffect(() => {
    table.setPageSize(pageSize);
    table.setPageIndex(0);
  }, [pageSize, table]);
  // Handle pagination
  const pageCount = table.getPageCount();
  const pageIndex = table.getState().pagination.pageIndex;
  const handleRowClick = (rowId: string) => {
    navigate(`/dashboard/permission/role/${rowId}`);
  };

  return (
    <div className="border rounded-md mt-6 overflow-hidden">
      <div className="px-5 py-4 flex justify-between flex-wrap items-center border-b dark:text-[#F5F7FA] bg-[#F5F7FA] dark:bg-[#232E3C]">
        <div className="flex justify-between md:justify-start gap-2 items-center w-full md:w-1/2">
          <h4 className="text-sm md:text-base font-semibold text-[#232E3C] dark:text-[#D9E7FA]">
            Roles & Permissions ({data?.length})
          </h4>
          <div className="relative">
            <Input
              placeholder="Search by Role..."
              value={
                (table.getColumn("role")?.getFilterValue() as string) ?? ""
              }
              onChange={(event) =>
                table.getColumn("role")?.setFilterValue(event.target.value)
              }
              className="lg:w-[270px] placeholder:text-[13px] font-light pl-3 bg-white dark:bg-background"
            />
            <IoSearchOutline className="absolute top-1/2 -translate-y-1/2 right-4 " />
          </div>
        </div>
        <Sheet>
          <SheetTrigger
            onClick={(e) => {
              e.stopPropagation();
            }}
            asChild
          >
            <Button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
              Add New Role
            </Button>
          </SheetTrigger>
          <SheetContent
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
              <div className="flex justify-between mr-5 items-center">
                <div>
                  {isDone === false ? (
                    <input
                      ref={inputRef}
                      type="text"
                      value={RoleName}
                      placeholder="Enter role name"
                      onChange={handleChange}
                      className="dark:bg-background bg-white  h-10 rounded pl-2  
                       text-base md:text-[20px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
                    />
                  ) : (
                    <span
                      //   onClick={handleNameClick}
                      className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
                    >
                      {RoleName}
                    </span>
                  )}
                </div>

                <Button
                  variant="default"
                  onClick={() => setisDone(true)}
                  className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
                >
                  Add Role
                </Button>
              </div>
            </SheetHeader>

            <div className="p-6">
              <PermissonDrawer />
            </div>
          </SheetContent>
        </Sheet>
      </div>

      <div className="border-b">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id} className="pl-6">
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  onClick={() => handleRowClick(row.original?.role_id)}
                  className="cursor-pointer"
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id} className="pl-6">
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center flex-wrap justify-center md:justify-between md:space-x-2 py-4 px-6">
        <div className="flex gap-4 items-center mb-4 md:mb-0">
          <div className="flex items-center space-x-2">
            <span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
              Rows per page:
            </span>
            <Select onValueChange={(value) => setPageSize(Number(value))}>
              <SelectTrigger>
                <SelectValue placeholder={`${pageSize}`} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel className="text-[#5E6E82] dark:text-[#F5F7FA]">
                    Rows per page
                  </SelectLabel>
                  {[5, 10, 15].map((size) => (
                    <SelectItem key={size} value={String(size)}>
                      <span className="text-[#5E6E82] dark:text-[#F5F7FA]">
                        {" "}
                        {size}
                      </span>
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          <div className="md:space-x-2 flex items-center">
            <span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
              Page {table.getState().pagination.pageIndex + 1} of{" "}
              {table.getPageCount()}
            </span>
          </div>
        </div>
        <div>
          <Pagination>
            <PaginationContent>
              <PaginationItem>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => table.previousPage()}
                  disabled={!table.getCanPreviousPage()}
                >
                  <ChevronLeftIcon className="h-4 w-4" />
                </Button>
              </PaginationItem>
              {[...Array(pageCount)].map((_, index) => (
                <PaginationItem key={index}>
                  <PaginationLink
                    className={`${
                      pageIndex === index
                        ? "border rounded-md border-[#1062AB] text-[#1062AB]"
                        : "text-[#5E6E82] dark:text-[#F5F7FA]"
                    }`}
                    href="#"
                    isActive={index === pageIndex}
                    onClick={() => table.setPageIndex(index)}
                  >
                    {index + 1}
                  </PaginationLink>
                </PaginationItem>
              ))}
              <PaginationItem>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => table.nextPage()}
                  disabled={!table.getCanNextPage()}
                >
                  <ChevronRightIcon className="h-4 w-4" />
                </Button>
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </div>
      </div>
    </div>
  );
}

import * as React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import {
  ColumnDef,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { BsTrash } from "react-icons/bs";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
} from "@/components/ui/dialog";
import { TbCaretUpDownFilled } from "react-icons/tb";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination";
import { FaXmark } from "react-icons/fa6";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FaEdit } from "react-icons/fa";
import { Button } from "@/components/ui/button";
import { BsThreeDots } from "react-icons/bs";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";
import PermissonDrawer from "./PermissonDrawer";
import { useRef } from "react";
import { Input } from "../ui/input";
import { IoSearchOutline } from "react-icons/io5";

export type Permission = {
  permission: string;
};
export type RoleData = {
  role_id: string;
  role: string;
  permissions: Permission[];
};

const data: RoleData[] = [
  {
    role_id: "1",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "2",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "3",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "4",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "5",
    role: "Internal Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
  {
    role_id: "6",
    role: "Customer Admin",
    permissions: [
      { permission: "View Homepage" },
      { permission: "View Manage Service" },
      { permission: "View Add a Service" },
      { permission: "View Quote a Service" },
      { permission: "Support Desk" },
      { permission: "Profile" },
    ],
  },
];
export const columns: ColumnDef<RoleData>[] = [
  {
    accessorKey: "role",
    header: ({ column }: any) => {
      return (
        <div className="py-1.5">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] whitespace-nowrap font-medium"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Role
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: ({ row }: any) => {
      return (
        <div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
          <span className=" px-3 py-2 text-[13px]   border rounded-md">
            {row.getValue("role")}
          </span>
        </div>
      );
    },
  },
  {
    accessorKey: "permissions",
    header: ({ column }: any) => {
      return (
        <div className="py-1.5">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF]"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Permissions
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: ({ row }: { row: any }) => {
      const permissions = row.original.permissions as Permission[];
      return (
        <div className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] py-2 flex gap-2 items-center whitespace-nowrap">
          <span className=" px-3 py-2 text-[13px]   border rounded-md">
            {permissions.map((permission, index) => (
              <span key={index}>
                {permission.permission}
                {index < permissions.length - 1 && ", "}
              </span>
            ))}
          </span>
        </div>
      );
    },
  },

  {
    accessorKey: "Action",
    header: ({ column }) => {
      return (
        <div className="py-1.5 flex justify-end pr-6 md:pr-6">
          <Button
            className="text-[13px] px-0 text-[#5E6E82] dark:text-[#D8E2EF] text-right"
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Action
            <TbCaretUpDownFilled className="h-2.5 w-2.5 text-[#5E6E82] dark:text-[#D8E2EF]" />
          </Button>
        </div>
      );
    },
    cell: () => {
      const [isEditing, setIsEditing] = useState(false);
      const [RoleName, setRoleName] = useState("John Doe");
      const inputRef = useRef<HTMLInputElement>(null);

      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setRoleName(event.target.value);
      };
      return (
        <span
          onClick={(event) => {
            event.stopPropagation(); // Prevents row click event
          }}
          className={`rounded-md py-1 text-[11px] font-semibold flex justify-end px-4`}
        >
          <DropdownMenu>
            <DropdownMenuTrigger className="outline-0 ring-0 text-[#5E6E82] dark:text-[#F5F7FA] ml-auto pr-4 md:pr-4 mb-auto">
              <BsThreeDots
                className="text-[#138CF7] dark:text-[#D8E2EF]   "
                size={16}
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem className="text-sm ">
                <Sheet>
                  <SheetTrigger
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                    asChild
                  >
                    <button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
                      <FaEdit className="mr-2" /> Edit Role
                    </button>
                  </SheetTrigger>
                  <SheetContent
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  >
                    <SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
                      <div className="flex justify-between mr-5 items-center">
                        <div>
                          {isEditing ? (
                            <input
                              ref={inputRef}
                              type="text"
                              value={RoleName}
                              onChange={handleChange}
                              className="dark:bg-background bg-white rounded p-1 text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
                            />
                          ) : (
                            <span
                              //   onClick={handleNameClick}
                              className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
                            >
                              {RoleName}
                            </span>
                          )}
                        </div>

                        <Button
                          variant="default"
                          onClick={() => setIsEditing(!isEditing)}
                          className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
                        >
                          Update Role
                        </Button>
                      </div>
                    </SheetHeader>

                    <div
                      className="p-6"
                      // onClick={() => setIsEditing(!isEditing)}
                    >
                      <PermissonDrawer />
                    </div>
                  </SheetContent>
                </Sheet>
              </DropdownMenuItem>
              <DropdownMenuItem className="text-xs">
                <Dialog>
                  <DialogTrigger asChild>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                      }}
                      className=" text-sm flex  items-center gap-2 hover:text-[#C42F4A]"
                    >
                      <BsTrash />
                      Delete
                    </button>
                  </DialogTrigger>
                  <DialogContent className="md:max-w-lg">
                    <div className="">
                      <div className="bg-[#1062AB] dark:bg-[#138CF7] rounded-t-md p-4 md:p-6 flex justify-between items-center text-white">
                        <h1 className="text-base md:text-[19px] font-semibold  leading-6">
                          Delete Role
                        </h1>
                        <DialogClose asChild>
                          <button type="button">
                            <FaXmark className="h-5 w-5" />
                          </button>
                        </DialogClose>
                      </div>
                      <div className="p-6">
                        <p>Are you sure you want to delete this Role?</p>
                      </div>

                      <div className="flex justify-end p-4 md:p-6">
                        <DialogClose asChild>
                          <Button
                            variant={"outline"}
                            className="text-[#1062AB] hover:text-[#1062AB] dark:text-[#F5F7FA] shadow px-7 h-[29px] "
                          >
                            Cancel
                          </Button>
                        </DialogClose>
                        <Button className="bg-[#E63757] dark:bg-[#FBDBE1] ml-2 text-[#fff] dark:text-[#E63757] shadow px-5 h-[29px] rounded">
                          Delete
                        </Button>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </span>
      );
    },
  },
];
export default function RoleTable() {
  const navigate = useNavigate();
  const [isDone, setisDone] = useState(false);
  const [RoleName, setRoleName] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setRoleName(event.target.value);
  };
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [pageSize, setPageSize] = React.useState(5);

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      sorting,
      columnVisibility,
    },
  });
  // Update page size dynamically
  React.useEffect(() => {
    table.setPageSize(pageSize);
    table.setPageIndex(0);
  }, [pageSize, table]);
  // Handle pagination
  const pageCount = table.getPageCount();
  const pageIndex = table.getState().pagination.pageIndex;
  const handleRowClick = (rowId: string) => {
    navigate(`/dashboard/permission/role/${rowId}`);
  };

  return (
    <div className="border rounded-md mt-6 overflow-hidden">
      <div className="px-5 py-4 flex justify-between flex-wrap items-center border-b dark:text-[#F5F7FA] bg-[#F5F7FA] dark:bg-[#232E3C]">
        <div className="flex justify-between md:justify-start gap-2 items-center w-full md:w-1/2">
          <h4 className="text-sm md:text-base font-semibold text-[#232E3C] dark:text-[#D9E7FA]">
            Roles & Permissions ({data?.length})
          </h4>
          <div className="relative">
            <Input
              placeholder="Search by Role..."
              value={
                (table.getColumn("role")?.getFilterValue() as string) ?? ""
              }
              onChange={(event) =>
                table.getColumn("role")?.setFilterValue(event.target.value)
              }
              className="lg:w-[270px] placeholder:text-[13px] font-light pl-3 bg-white dark:bg-background"
            />
            <IoSearchOutline className="absolute top-1/2 -translate-y-1/2 right-4 " />
          </div>
        </div>
        <Sheet>
          <SheetTrigger
            onClick={(e) => {
              e.stopPropagation();
            }}
            asChild
          >
            <Button className="hover:dark:text-[#138CF7] hover:text-[#1062AB] flex items-center">
              Add New Role
            </Button>
          </SheetTrigger>
          <SheetContent
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <SheetHeader className="bg-[#F6F7FA] dark:bg-[#1F2A3B] px-6 py-4">
              <div className="flex justify-between mr-5 items-center">
                <div>
                  {isDone === false ? (
                    <input
                      ref={inputRef}
                      type="text"
                      value={RoleName}
                      placeholder="Enter role name"
                      onChange={handleChange}
                      className="dark:bg-background bg-white  h-10 rounded pl-2  
                       text-base md:text-[20px] font-semibold text-[#1062AB] dark:text-[#F6F7FA] border w-[220px] md:w-[300px]"
                    />
                  ) : (
                    <span
                      //   onClick={handleNameClick}
                      className="cursor-pointer text-base md:text-[22px] font-semibold text-[#1062AB] dark:text-[#F6F7FA]"
                    >
                      {RoleName}
                    </span>
                  )}
                </div>

                <Button
                  variant="default"
                  onClick={() => setisDone(true)}
                  className="text-[13px] h-[35px] flex items-center gap-1.5 bg-[#1062AB]"
                >
                  Add Role
                </Button>
              </div>
            </SheetHeader>

            <div className="p-6">
              <PermissonDrawer />
            </div>
          </SheetContent>
        </Sheet>
      </div>

      <div className="border-b">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id} className="pl-6">
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  onClick={() => handleRowClick(row.original?.role_id)}
                  className="cursor-pointer"
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id} className="pl-6">
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center flex-wrap justify-center md:justify-between md:space-x-2 py-4 px-6">
        <div className="flex gap-4 items-center mb-4 md:mb-0">
          <div className="flex items-center space-x-2">
            <span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
              Rows per page:
            </span>
            <Select onValueChange={(value) => setPageSize(Number(value))}>
              <SelectTrigger>
                <SelectValue placeholder={`${pageSize}`} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel className="text-[#5E6E82] dark:text-[#F5F7FA]">
                    Rows per page
                  </SelectLabel>
                  {[5, 10, 15].map((size) => (
                    <SelectItem key={size} value={String(size)}>
                      <span className="text-[#5E6E82] dark:text-[#F5F7FA]">
                        {" "}
                        {size}
                      </span>
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          <div className="md:space-x-2 flex items-center">
            <span className="text-sm whitespace-nowrap text-[#5E6E82] dark:text-[#F5F7FA]">
              Page {table.getState().pagination.pageIndex + 1} of{" "}
              {table.getPageCount()}
            </span>
          </div>
        </div>
        <div>
          <Pagination>
            <PaginationContent>
              <PaginationItem>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => table.previousPage()}
                  disabled={!table.getCanPreviousPage()}
                >
                  <ChevronLeftIcon className="h-4 w-4" />
                </Button>
              </PaginationItem>
              {[...Array(pageCount)].map((_, index) => (
                <PaginationItem key={index}>
                  <PaginationLink
                    className={`${
                      pageIndex === index
                        ? "border rounded-md border-[#1062AB] text-[#1062AB]"
                        : "text-[#5E6E82] dark:text-[#F5F7FA]"
                    }`}
                    href="#"
                    isActive={index === pageIndex}
                    onClick={() => table.setPageIndex(index)}
                  >
                    {index + 1}
                  </PaginationLink>
                </PaginationItem>
              ))}
              <PaginationItem>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => table.nextPage()}
                  disabled={!table.getCanNextPage()}
                >
                  <ChevronRightIcon className="h-4 w-4" />
                </Button>
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </div>
      </div>
    </div>
  );
}

import { Checkbox } from "../ui/checkbox";

export default function PermissonDrawer() {
  const permissionItems = [
    {
      id: 1,
      module: "Home",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Service",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Support Desk",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Profile",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
    {
      id: 1,
      module: "Order",
      selectedAll: true,
      permissions: [
        {
          id: 1,
          name: "Add User ",
          checked: true,
        },
        {
          id: 2,
          name: "Edit User ",
          checked: false,
        },
        {
          id: 3,
          name: "Delete User ",
          checked: true,
        },
        {
          id: 4,
          name: "Add Customer",
          checked: true,
        },
        {
          id: 5,
          name: "Add Invoice",
          checked: true,
        },
        {
          id: 6,
          name: "Delete User",
          checked: true,
        },
      ],
    },
  ];
  return (
    <div className="overflow-auto">
      <div className="">
        <div className="flex items-center space-x-2  mb-9">
          <Checkbox
            id="permission"
            className="dark:border-[#F5F7FA] dark:text-white dark:bg-transparent w-5 h-5"
          />
          <label
            htmlFor="permission"
            className="text-[19px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]"
          >
            All Permission
          </label>
        </div>

        <div>
          {permissionItems.map((item) => (
            <div>
              <div className="bg-[#F5F7FA] dark:bg-[#1F2A3B] rounded-md px-8 py-3 flex justify-between mt-2">
                <h3 className="text-[19px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]">
                  {item?.module}
                </h3>
                <div className="flex items-center space-x-2 ">
                  <Checkbox
                    id="home-all-select"
                    className="dark:border-gray-400 "
                  />
                  <label
                    htmlFor="home-all-select"
                    className="text-[13px] font-semibold leading-none text-[#5E6E82] dark:text-gray-400"
                  >
                    Select All
                  </label>
                </div>
              </div>
              <div className="flex flex-wrap gap-6 py-6 px-2">
                {item?.permissions?.map((item) => (
                  <div className="flex items-center space-x-2 ">
                    <Checkbox
                      id={item?.name}
                      className="dark:border-[#F5F7FA] dark:bg-transparent dark:text-[#F5F7FA]"
                    />
                    <label
                      htmlFor={item?.name}
                      className="text-[13px] font-semibold leading-none text-[#232E3C] dark:text-[#F5F7FA]"
                    >
                      {item?.name}
                    </label>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import {
  CheckIcon,
  XCircle,
  ChevronDown,
  XIcon,
  WandSparkles,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "./CommonPopover";
import { Badge } from "./CommonBadge";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "./CommonComand";
import { Separator } from "./CommonSeparator";

/**
 * Variants for the multi-select component to handle different styles.
 * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
 */
const multiSelectVariants = cva(
  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
  {
    variants: {
      variant: {
        default:
          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
        secondary:
          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        inverted: "inverted",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

/**
 * Props for MultiSelect component
 */
interface MultiSelectProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof multiSelectVariants> {
  /**
   * An array of option objects to be displayed in the multi-select component.
   * Each option object has a label, value, and an optional icon.
   */
  options: {
    /** The text to display for the option. */
    label: string;
    /** The unique value associated with the option. */
    value: string;
    /** Optional icon component to display alongside the option. */
    icon?: React.ComponentType<{ className?: string }>;
  }[];

  /**
   * Callback function triggered when the selected values change.
   * Receives an array of the new selected values.
   */
  onValueChange: (value: string[]) => void;

  /** The default selected values when the component mounts. */
  defaultValue: string[];

  /**
   * Placeholder text to be displayed when no values are selected.
   * Optional, defaults to "Select options".
   */
  placeholder?: string;

  /**
   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
   * Optional, defaults to 0 (no animation).
   */
  animation?: number;

  /**
   * Maximum number of items to display. Extra selected items will be summarized.
   * Optional, defaults to 3.
   */
  maxCount?: number;

  /**
   * The modality of the popover. When set to true, interaction with outside elements
   * will be disabled and only popover content will be visible to screen readers.
   * Optional, defaults to false.
   */
  modalPopover?: boolean;

  /**
   * If true, renders the multi-select component as a child of another component.
   * Optional, defaults to false.
   */
  asChild?: boolean;

  /**
   * Additional class names to apply custom styles to the multi-select component.
   * Optional, can be used to add custom styles.
   */
  className?: string;
}

export const MultiSelect = React.forwardRef<
  HTMLButtonElement,
  MultiSelectProps
>(
  (
    {
      options,
      onValueChange,
      variant,
      defaultValue = [],
      placeholder = "Select options",
      animation = 0,
      maxCount = 3,
      modalPopover = false,
      asChild = false,
      className,
      ...props
    },
    ref
  ) => {
    const [selectedValues, setSelectedValues] =
      React.useState<string[]>(defaultValue);
    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
      setSelectedValues(defaultValue);
    }, [defaultValue]);

    const handleInputKeyDown = (
      event: React.KeyboardEvent<HTMLInputElement>
    ) => {
      if (event.key === "Enter") {
        setIsPopoverOpen(true);
      } else if (event.key === "Backspace" && !event.currentTarget.value) {
        const newSelectedValues = [...selectedValues];
        newSelectedValues.pop();
        setSelectedValues(newSelectedValues);
        onValueChange(newSelectedValues);
      }
    };

    const toggleOption = (value: string) => {
      const newSelectedValues = selectedValues.includes(value)
        ? selectedValues.filter((v) => v !== value)
        : [...selectedValues, value];
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    const handleClear = () => {
      setSelectedValues([]);
      onValueChange([]);
    };

    const handleTogglePopover = () => {
      setIsPopoverOpen((prev) => !prev);
    };

    const clearExtraOptions = () => {
      const newSelectedValues = selectedValues.slice(0, maxCount);
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    const toggleAll = () => {
      if (selectedValues.length === options.length) {
        handleClear();
      } else {
        const allValues = options.map((option) => option.value);
        setSelectedValues(allValues);
        onValueChange(allValues);
      }
    };

    return (
      <Popover
        open={isPopoverOpen}
        onOpenChange={setIsPopoverOpen}
        modal={modalPopover}
      >
        <PopoverTrigger asChild>
          <Button
            ref={ref}
            {...props}
            onClick={handleTogglePopover}
            className={cn(
              "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit",
              className
            )}
          >
            {selectedValues.length > 0 ? (
              <div className="flex justify-between items-center w-full">
                <div className="flex flex-wrap items-center">
                  {selectedValues.slice(0, maxCount).map((value) => {
                    const option = options.find((o) => o.value === value);
                    const IconComponent = option?.icon;
                    return (
                      <Badge
                        key={value}
                        className={cn(
                          isAnimating ? "animate-bounce" : "",
                          multiSelectVariants({ variant })
                        )}
                        style={{ animationDuration: `${animation}s` }}
                      >
                        {IconComponent && (
                          <IconComponent className="h-4 w-4 mr-2" />
                        )}
                        {option?.label}
                        <XCircle
                          className="ml-2 h-4 w-4 cursor-pointer"
                          onClick={(event) => {
                            event.stopPropagation();
                            toggleOption(value);
                          }}
                        />
                      </Badge>
                    );
                  })}
                  {selectedValues.length > maxCount && (
                    <Badge
                      className={cn(
                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
                        isAnimating ? "animate-bounce" : "",
                        multiSelectVariants({ variant })
                      )}
                      style={{ animationDuration: `${animation}s` }}
                    >
                      {`+ ${selectedValues.length - maxCount} more`}
                      <XCircle
                        className="ml-2 h-4 w-4 cursor-pointer"
                        onClick={(event) => {
                          event.stopPropagation();
                          clearExtraOptions();
                        }}
                      />
                    </Badge>
                  )}
                </div>
                <div className="flex items-center justify-between">
                  <XIcon
                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
                    onClick={(event) => {
                      event.stopPropagation();
                      handleClear();
                    }}
                  />
                  <Separator
                    orientation="vertical"
                    className="flex min-h-6 h-full"
                  />
                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
                </div>
              </div>
            ) : (
              <div className="flex items-center justify-between w-full mx-auto">
                <span className="text-sm text-muted-foreground mx-3">
                  {placeholder}
                </span>
                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
              </div>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent
          className="w-auto p-0"
          align="start"
          onEscapeKeyDown={() => setIsPopoverOpen(false)}
        >
          <Command>
            <CommandInput
              placeholder="Search..."
              onKeyDown={handleInputKeyDown}
            />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup>
                <CommandItem
                  key="all"
                  onSelect={toggleAll}
                  className="cursor-pointer"
                >
                  <div
                    className={cn(
                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                      selectedValues.length === options.length
                        ? "bg-primary text-primary-foreground"
                        : "opacity-50 [&_svg]:invisible"
                    )}
                  >
                    <CheckIcon className="h-4 w-4" />
                  </div>
                  <span>(Select All)</span>
                </CommandItem>
                {options.map((option) => {
                  const isSelected = selectedValues.includes(option.value);
                  return (
                    <CommandItem
                      key={option.value}
                      onSelect={() => toggleOption(option.value)}
                      className="cursor-pointer"
                    >
                      <div
                        className={cn(
                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                          isSelected
                            ? "bg-primary text-primary-foreground"
                            : "opacity-50 [&_svg]:invisible"
                        )}
                      >
                        <CheckIcon className="h-4 w-4" />
                      </div>
                      {option.icon && (
                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                      )}
                      <span>{option.label}</span>
                    </CommandItem>
                  );
                })}
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup>
                <div className="flex items-center justify-between">
                  {selectedValues.length > 0 && (
                    <>
                      <CommandItem
                        onSelect={handleClear}
                        className="flex-1 justify-center cursor-pointer"
                      >
                        Clear
                      </CommandItem>
                      <Separator
                        orientation="vertical"
                        className="flex min-h-6 h-full"
                      />
                    </>
                  )}
                  <CommandItem
                    onSelect={() => setIsPopoverOpen(false)}
                    className="flex-1 justify-center cursor-pointer max-w-full"
                  >
                    Close
                  </CommandItem>
                </div>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
        {animation > 0 && selectedValues.length > 0 && (
          <WandSparkles
            className={cn(
              "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
              isAnimating ? "" : "text-muted-foreground"
            )}
            onClick={() => setIsAnimating(!isAnimating)}
          />
        )}
      </Popover>
    );
  }
);

MultiSelect.displayName = "MultiSelect";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import {
  CheckIcon,
  XCircle,
  ChevronDown,
  XIcon,
  WandSparkles,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "./CommonPopover";
import { Badge } from "./CommonBadge";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "./CommonComand";
import { Separator } from "./CommonSeparator";

/**
 * Variants for the multi-select component to handle different styles.
 * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
 */
const multiSelectVariants = cva(
  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
  {
    variants: {
      variant: {
        default:
          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
        secondary:
          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        inverted: "inverted",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

/**
 * Props for MultiSelect component
 */
interface MultiSelectProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof multiSelectVariants> {
  /**
   * An array of option objects to be displayed in the multi-select component.
   * Each option object has a label, value, and an optional icon.
   */
  options: {
    /** The text to display for the option. */
    label: string;
    /** The unique value associated with the option. */
    value: string;
    /** Optional icon component to display alongside the option. */
    icon?: React.ComponentType<{ className?: string }>;
  }[];

  /**
   * Callback function triggered when the selected values change.
   * Receives an array of the new selected values.
   */
  onValueChange: (value: string[]) => void;

  /** The default selected values when the component mounts. */
  defaultValue: string[];

  /**
   * Placeholder text to be displayed when no values are selected.
   * Optional, defaults to "Select options".
   */
  placeholder?: string;

  /**
   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
   * Optional, defaults to 0 (no animation).
   */
  animation?: number;

  /**
   * Maximum number of items to display. Extra selected items will be summarized.
   * Optional, defaults to 3.
   */
  maxCount?: number;

  /**
   * The modality of the popover. When set to true, interaction with outside elements
   * will be disabled and only popover content will be visible to screen readers.
   * Optional, defaults to false.
   */
  modalPopover?: boolean;

  /**
   * If true, renders the multi-select component as a child of another component.
   * Optional, defaults to false.
   */
  asChild?: boolean;

  /**
   * Additional class names to apply custom styles to the multi-select component.
   * Optional, can be used to add custom styles.
   */
  className?: string;
}

export const MultiSelect = React.forwardRef<
  HTMLButtonElement,
  MultiSelectProps
>(
  (
    {
      options,
      onValueChange,
      variant,
      defaultValue = [],
      placeholder = "Select options",
      animation = 0,
      maxCount = 3,
      modalPopover = false,
      asChild = false,
      className,
      ...props
    },
    ref
  ) => {
    const [selectedValues, setSelectedValues] =
      React.useState<string[]>(defaultValue);
    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
      setSelectedValues(defaultValue);
    }, [defaultValue]);

    const handleInputKeyDown = (
      event: React.KeyboardEvent<HTMLInputElement>
    ) => {
      if (event.key === "Enter") {
        setIsPopoverOpen(true);
      } else if (event.key === "Backspace" && !event.currentTarget.value) {
        const newSelectedValues = [...selectedValues];
        newSelectedValues.pop();
        setSelectedValues(newSelectedValues);
        onValueChange(newSelectedValues);
      }
    };

    const toggleOption = (value: string) => {
      const newSelectedValues = selectedValues.includes(value)
        ? selectedValues.filter((v) => v !== value)
        : [...selectedValues, value];
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    const handleClear = () => {
      setSelectedValues([]);
      onValueChange([]);
    };

    const handleTogglePopover = () => {
      setIsPopoverOpen((prev) => !prev);
    };

    const clearExtraOptions = () => {
      const newSelectedValues = selectedValues.slice(0, maxCount);
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    const toggleAll = () => {
      if (selectedValues.length === options.length) {
        handleClear();
      } else {
        const allValues = options.map((option) => option.value);
        setSelectedValues(allValues);
        onValueChange(allValues);
      }
    };

    return (
      <Popover
        open={isPopoverOpen}
        onOpenChange={setIsPopoverOpen}
        modal={modalPopover}
      >
        <PopoverTrigger asChild>
          <Button
            ref={ref}
            {...props}
            onClick={handleTogglePopover}
            className={cn(
              "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit",
              className
            )}
          >
            {selectedValues.length > 0 ? (
              <div className="flex justify-between items-center w-full">
                <div className="flex flex-wrap items-center">
                  {selectedValues.slice(0, maxCount).map((value) => {
                    const option = options.find((o) => o.value === value);
                    const IconComponent = option?.icon;
                    return (
                      <Badge
                        key={value}
                        className={cn(
                          isAnimating ? "animate-bounce" : "",
                          multiSelectVariants({ variant })
                        )}
                        style={{ animationDuration: `${animation}s` }}
                      >
                        {IconComponent && (
                          <IconComponent className="h-4 w-4 mr-2" />
                        )}
                        {option?.label}
                        <XCircle
                          className="ml-2 h-4 w-4 cursor-pointer"
                          onClick={(event) => {
                            event.stopPropagation();
                            toggleOption(value);
                          }}
                        />
                      </Badge>
                    );
                  })}
                  {selectedValues.length > maxCount && (
                    <Badge
                      className={cn(
                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
                        isAnimating ? "animate-bounce" : "",
                        multiSelectVariants({ variant })
                      )}
                      style={{ animationDuration: `${animation}s` }}
                    >
                      {`+ ${selectedValues.length - maxCount} more`}
                      <XCircle
                        className="ml-2 h-4 w-4 cursor-pointer"
                        onClick={(event) => {
                          event.stopPropagation();
                          clearExtraOptions();
                        }}
                      />
                    </Badge>
                  )}
                </div>
                <div className="flex items-center justify-between">
                  <XIcon
                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
                    onClick={(event) => {
                      event.stopPropagation();
                      handleClear();
                    }}
                  />
                  <Separator
                    orientation="vertical"
                    className="flex min-h-6 h-full"
                  />
                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
                </div>
              </div>
            ) : (
              <div className="flex items-center justify-between w-full mx-auto">
                <span className="text-sm text-muted-foreground mx-3">
                  {placeholder}
                </span>
                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
              </div>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent
          className="w-auto p-0"
          align="start"
          onEscapeKeyDown={() => setIsPopoverOpen(false)}
        >
          <Command>
            <CommandInput
              placeholder="Search..."
              onKeyDown={handleInputKeyDown}
            />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup>
                <CommandItem
                  key="all"
                  onSelect={toggleAll}
                  className="cursor-pointer"
                >
                  <div
                    className={cn(
                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                      selectedValues.length === options.length
                        ? "bg-primary text-primary-foreground"
                        : "opacity-50 [&_svg]:invisible"
                    )}
                  >
                    <CheckIcon className="h-4 w-4" />
                  </div>
                  <span>(Select All)</span>
                </CommandItem>
                {options.map((option) => {
                  const isSelected = selectedValues.includes(option.value);
                  return (
                    <CommandItem
                      key={option.value}
                      onSelect={() => toggleOption(option.value)}
                      className="cursor-pointer"
                    >
                      <div
                        className={cn(
                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                          isSelected
                            ? "bg-primary text-primary-foreground"
                            : "opacity-50 [&_svg]:invisible"
                        )}
                      >
                        <CheckIcon className="h-4 w-4" />
                      </div>
                      {option.icon && (
                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                      )}
                      <span>{option.label}</span>
                    </CommandItem>
                  );
                })}
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup>
                <div className="flex items-center justify-between">
                  {selectedValues.length > 0 && (
                    <>
                      <CommandItem
                        onSelect={handleClear}
                        className="flex-1 justify-center cursor-pointer"
                      >
                        Clear
                      </CommandItem>
                      <Separator
                        orientation="vertical"
                        className="flex min-h-6 h-full"
                      />
                    </>
                  )}
                  <CommandItem
                    onSelect={() => setIsPopoverOpen(false)}
                    className="flex-1 justify-center cursor-pointer max-w-full"
                  >
                    Close
                  </CommandItem>
                </div>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
        {animation > 0 && selectedValues.length > 0 && (
          <WandSparkles
            className={cn(
              "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
              isAnimating ? "" : "text-muted-foreground"
            )}
            onClick={() => setIsAnimating(!isAnimating)}
          />
        )}
      </Popover>
    );
  }
);

MultiSelect.displayName = "MultiSelect";

debugger;

<div class="scrolling-wrap">
	<div class="weekly-special">
		<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
		<span class="dot"> • </span>
		<span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
		<span class="dot"> • </span>
		<span>Ut enim ad minim veniam, quis nostrud exercitation</span>
	</div>
</div>



<script>
	$(document).ready(function() {
		var $scrollingWrap = $('.scrolling-wrap');
		var $weeklySpecial = $('.weekly-special');

		// Clone the content to create an endless scrolling effect
		$weeklySpecial.clone().appendTo($scrollingWrap);

		// Adjust the animation duration based on the content width
		var totalWidth = $weeklySpecial.outerWidth();
		var duration = (totalWidth / 50) + 's'; // Adjust speed by changing the divisor
		$scrollingWrap.find('.weekly-special').css('animation-duration', duration);
	});

</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
	.scrolling-wrap {
		width: 100%;
		 /* Adjust height as needed */
		overflow: hidden;
		position: relative;
		color: #fff;
		font-size: 18px;
		display: flex;
		align-items: center;
		height: auto;
		min-height: 30px;
	}
	.weekly-special {
		white-space: nowrap;
		position: absolute;
		animation: scroll-text 50s linear infinite;
	}
	@keyframes scroll-text {
		0% { transform: translateX(100%); }
		100% { transform: translateX(-100%); }
	}
</style>

We tried temporarily disabling the 
Wordfence plugin (saving all settings) and that solved the issue. 
We have reactivated the plugin. 

They should have their web developer take a look and see if any of the wordfence settings could be interfereing with the rendering of javascript. 

We do not want to mess with their existing settings ourselves. 

const input = document.getElementById('input');


const debounc = (func, waitTime) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func(...args);
        }, waitTime);
    };
}

function getData(e) {
    console.log(e.target.value)
};

const debouncApi = debounc(getData, 1000);


input.addEventListener('input', debouncApi);

 
// Challenge Solution - Part #3 ------------------------------------------------------
// Create cheatingOpponent() Function
void cheatingOpponent(){
  // For each position on Player 1's grid, if it is green, that position has not been hit yet.
  // So target it with the next (cheating) hit.
  for (int k = 0; k < MATRIX_H * MATRIX_W; k++) {
    if (grid1S[k] == 4) { // If position is green, then ship is present
      target2[k] = 1; // Red Color == Hit
      grid1S[k] = 1;  // Red Color == Hit

      // Mark the attack as complete
      attackComplete = 1;
      break;
    }
  }

  // Delay briefly for smoother gameplay
  delay(500);
}
// End Challenge Solution ------------------------------------------------------------
 
  

    // Challenge Solution - Part #2 ------------------------------------------------------
    // Check to see if the cheating variable is below the cheating threshold
    // If it is, then call the "cheatingOpponent" function which you will create next
    if (pz <= cheatingPercentage){
      // Call the Cheating Function to find a target from Player 1's grid to hit. 
      cheatingOpponent();
    }
 

    // Challenge Solution - Part #1 ------------------------------------------------------
    // Comment out the following code
    /*if(hit == 1){
      post_hit_AI();
    } else {
      try_to_place_targetAI();
    }*/

    // Create a variable that represents the computer's "chance of cheating"
    int cheatingPercentage = 30;

    // Create a variable to hold the value from the "dice roll"
    int pz;

    // Roll the dice to get a percentage chance of cheating
    pz = random(100);
    

class DisjointSet {
    vector<int> rank, parent;
public:
    DisjointSet(int n) {
        rank.resize(n + 1, 0);
        parent.resize(n + 1);
        for (int i = 0; i <= n; i++) {
            parent[i] = i;
        }
    }

    int findUPar(int node) {
        if (node == parent[node])
            return node;
        return parent[node] = findUPar(parent[node]);
    }

    void unionByRank(int u, int v) {
        int ulp_u = findUPar(u);
        int ulp_v = findUPar(v);
        if (ulp_u == ulp_v) return;
        if (rank[ulp_u] < rank[ulp_v]) {
            parent[ulp_u] = ulp_v;
        }
        else if (rank[ulp_v] < rank[ulp_u]) {
            parent[ulp_v] = ulp_u;
        }
        else {
            parent[ulp_v] = ulp_u;
            rank[ulp_u]++;
        }
    }
};

HTML

<script>
$(document).ready(function () {
    // Define the page-specific URLs and their corresponding booking URLs
    var pageMap = {
        "https://nationalzoo.com.au/encounter/awesome-roarsome-tour/": "https://fareharbor.com/embeds/book/nationalzoo/items/565915/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/encounter/african-savannah-safari/": "https://fareharbor.com/embeds/book/nationalzoo/items/565917/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/wildnightzooventure/": "https://fareharbor.com/embeds/book/nationalzoo/?full-items=yes&flow=1231275",
        "https://nationalzoo.com.au/encounter/walk-on-the-wildside/": "https://fareharbor.com/embeds/book/nationalzoo/items/566541/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/encounter/family-wonders-of-wildlife-tour/": "https://fareharbor.com/embeds/book/nationalzoo/items/566545/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/encounter/enrichment-tour/": "https://fareharbor.com/embeds/book/nationalzoo/items/566546/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/groups-education/focus-on-wildlife/": "https://fareharbor.com/embeds/book/nationalzoo/items/566537/?full-items=yes&flow=1231254",
        "https://nationalzoo.com.au/close-encounters/cheetah-experiences/": "https://fareharbor.com/embeds/book/nationalzoo/?full-items=yes&flow=1231270",
        "https://nationalzoo.com.au/encounter/meet-a-meerkat/": "https://fareharbor.com/embeds/book/nationalzoo/items/566557/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/lemur-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/567986/?full-items=yes&flow=no",
        "https://nationalzoo.com.au/encounter/giraffe-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566551/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/sun-bear-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566552/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/tiger-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566553/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/white-lion-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566549/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/rhino-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566559/?full-items=yes&flow=1231261",
        "https://nationalzoo.com.au/encounter/owl-encounter/": "https://fareharbor.com/embeds/book/nationalzoo/items/566556/?full-items=yes&flow=1231261"
    };

    // Get the current page URL
    var currentPage = window.location.href;

    // Get the corresponding booking URL or default if not found
    var bookingURL = pageMap[currentPage] || "https://fareharbor.com/embeds/book/nationalzoo/?full-items=yes";

    // Create the desktop button
    var desktopButton = $('<a>', {
        href: bookingURL,
        style: "font-weight:bold !important; box-shadow:none !important; padding: .6em 2em !important;",
        class: "fh-hide--mobile fh-shape--square fh-fixed--bottom fh-icon--ticket fh-color--black fh-button-true-flat-color",
        text: "Book now"
    });

    // Create the mobile button
    var mobileButton = $('<a>', {
        href: bookingURL,
        style: "font-size: 1.1em !important; font-weight:bold !important; box-shadow:none !important;",
        class: "fh-hide--desktop fh-size--small fh-fixed--bottom fh-shape--square fh-icon--ticket fh-button-true-flat-color fh-color--black",
        text: "Book now"
    });

    // Append the buttons to the body
    $('body').append(desktopButton).append(mobileButton);
});
</script>

#include <bits/stdc++.h>
using namespace std;

void DFS(int node, const vector<vector<int>>& S, vector<int>& V){
    V[node] = 1;
    for(int i = 0; i < S[node].size(); i++){
        if(V[S[node][i]] == 0){
            DFS(S[node][i], S, V);
        }
    }
}

int main(){
    int n,m; //n so dinh m so canh
    cin >> n >> m;
    vector<vector<int>> S(n);
    vector<int> V(n,0);
    for(int i = 0; i < m; i++){
        int x,y;
        cin >> x >> y;
        S[x].push_back(y);
        S[y].push_back(x);
    }
    
    int ans = 0;
    for(int i = 0; i < n; i++){
        if(V[i] == 0){
            DFS(i, S, V);
            ans ++;
        }
    }
    
    cout << ans;
}

import frappe
import base64
import requests
import json
from heero.utils.common import *


@frappe.whitelist()
def cronos_cpa(docname):
    url = "https://tb.panteonaffs.com/api/signup/procform"
    
    headers = {
        "x-api-key": "2643889w34df345676ssdas323tgc738",
        "Content-Type": "application/json",
        "x-trackbox-username": "Heero",
        "x-trackbox-password": "EYN2R%h?@lDM",
    }

    try:
        doc = frappe.get_doc("Flagedu-Lead", docname)
    except frappe.DoesNotExistError:
        return {"message": f"Document with name {docname} does not exist"}
    
    email = doc.email
    firstName = doc.name1
    phone = doc.phone
    country = get_country_code(doc.country)
    lastName = doc.last_name or doc.name1
    afp = doc.afp or "Heero"
    afp2 = doc.afp2 or ""
    ip = doc.ip if doc.ip else "137.184.226.177",


    data = {
        "ai": "2958297",
        "ci": "1",
        "gi": "297",
        "country": country,
        "userip": ip,
        "firstname": firstName,
        "lastname": lastName,
        "email": email,
        "password": "Aa12345!",
        "phone": phone,
        "so": "AFF_2958974",
        "sub": "AFF_2958974",
        "MPC_1": afp,
        "MPC_2": afp2,
        "MPC_3": "FreeParam",
        "MPC_4": "Emaar",
    }
    
    try:
        response = requests.post(url, headers=headers, json=data)
        response.raise_for_status()
    except requests.exceptions.RequestException as e:
        doc.all = json.dumps({"message": "Request failed", "error": str(e)})
        doc.save()
        return {"message": "Request failed", "error": str(e)}
    
    try:
        response_data = response.json()
    except ValueError:
        doc.all = json.dumps({"message": "Failed to parse response as JSON", "response": response.text})
        doc.save()
        return {"message": "Failed to parse response as JSON", "response": response.text}
    
    if response_data.get("status") == True:
        addon_data = response_data.get("addonData", {}).get("data", {})
        doc.axia_response = json.dumps(addon_data)  # Store the raw response as a JSON string if needed for reference
        doc.axia_login_url = addon_data.get("loginURL")
        doc.axia_client_id = addon_data.get("customerId")
        doc.append("brokers", {
                    "broker": "Fxglobe",
                    "signup_date":today(),
                    "client_id":addon_data.get("customerId"),
                    "loginurl":addon_data.get("loginURL"),
                    "success":True,
                    'type':"CPA"
                })
        doc.add_tag('Fxglobe')
        doc.save()
        return {"message": "Signup successful", "data": response_data}
    else:
        doc.all = json.dumps({"message": "Signup failed", "response": response_data})
        doc.append("brokers", {
            "broker": "Fxglobe",
            "signup_date":today(),
            "error":True,
            "type":"CPA",
            "response":json.dumps({"message": "Signup failed", "response": response_data})
        })
        doc.save()
        return {"message": "Signup failed", "response": response_data }

import 'package:flutter/material.dart';

class HighlightTextSearch extends StatelessWidget {
  final String data;
  final String? searchText;
  final bool enable;
  final TextStyle style;
  final Color highlightColor;

  const HighlightTextSearch({
    super.key,
    this.searchText,
    this.enable = true,
    required this.data,
    required this.style,
    this.highlightColor = Colors.amber,
  });

  @override
  Widget build(BuildContext context) {
    if (searchText == null || searchText!.isEmpty && enable == true) {
      return Text(
        data,
        style: style,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      );
    }

    final lowerCaseUserName = data.toLowerCase();
    final lowerCaseSearchText = searchText!.toLowerCase();
    final highlightedSpans = <TextSpan>[];

    int start = 0;
    while (start < lowerCaseUserName.length) {
      final index = lowerCaseUserName.indexOf(lowerCaseSearchText, start);
      if (index == -1) {
        highlightedSpans.add(TextSpan(
          text: data.substring(start),
          style: style,
        ));
        break;
      }

      if (index > start) {
        highlightedSpans.add(TextSpan(
          text: data.substring(start, index),
          style: style,
        ));
      }

      highlightedSpans.add(TextSpan(
        text: data.substring(index, index + lowerCaseSearchText.length),
        style: style.copyWith(color: highlightColor),
      ));

      start = index + lowerCaseSearchText.length;
    }

    return RichText(
      text: TextSpan(
        children: highlightedSpans,
      ),
      overflow: TextOverflow.ellipsis,
      maxLines: 1,
    );
  }
}

I’m thinking about how I can best help you with whatever you need!