@spacemade/ui 0.0.1

package/src/components/provider/form/UpdateProviderForm.tsx

@@ -0,0 +1,449 @@
+// components/provider/form/UpdateProviderForm.tsx
+import { useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { MediaPickerBox } from '@components/media/items/MediaPickerBox'
+import AdvanceAccordion from '@components/common/forms/AdvanceAccordion'
+import Badge from '@components/common/badge/Badge'
+
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+import type { ModelProviderDTO } from '@store/slice/api/providerApiSlice'
+import {
+  useUpdateProviderMutation,
+  useDeleteProviderMutation,
+} from '@store/slice/api/providerApiSlice'
+
+interface FormValues extends FieldValues {
+  label: string
+  key: string
+  status: 'active' | 'disabled' | 'deprecated'
+  rank: number
+  description: string | null
+  websiteUrl: string | null
+  buildspec: string | null
+  hasStorage: boolean
+  hasAgent: boolean
+  hasProject: boolean
+  hasChat: boolean
+  hasSearch: boolean
+  hasImage: boolean
+  hasVideo?: boolean
+  hasModel?: boolean
+  hasSpeech?: boolean
+  isFeatured: boolean
+  isHidden: boolean
+}
+
+export const UpdateProviderForm = ({ provider }: { provider: ModelProviderDTO }) => {
+  const router = useRouter()
+
+  const [updateProvider] = useUpdateProviderMutation()
+  const [deleteProvider] = useDeleteProviderMutation()
+
+  const [iconMediaIdSelected, setIconMediaIdSelected] = useState<
+    string | null | undefined
+  >(provider.iconMediaId ?? undefined)
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    getValues,
+    clearErrors,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    // Default rank keeps unranked providers at the end until explicitly set.
+    defaultValues: {
+      rank: (() => {
+        const parsedRank = Number((provider as any).rank)
+        return Number.isFinite(parsedRank) && parsedRank > 0 ? parsedRank : 999
+      })(),
+      label: provider.label,
+      key: provider.key,
+      status: provider.status,
+      description: provider.description || '',
+      websiteUrl: provider.websiteUrl || '',
+      buildspec: provider._buildspec
+        ? JSON.stringify(provider._buildspec, null, 2)
+        : '',
+      hasStorage: provider.hasStorage === true,
+      hasAgent: provider.hasAgent === true,
+      hasProject: provider.hasProject === true,
+      hasChat: provider.hasChat === true,
+      hasSearch: provider.hasSearch === true,
+      hasImage: provider.hasImage === true,
+      hasVideo: provider.hasVideo === true,
+      hasModel: provider.hasModel === true,
+      hasSpeech: provider.hasSpeech === true,
+      isFeatured: provider.isFeatured === true,
+      isHidden: provider.isHidden === true,
+    },
+  })
+
+  const onDeleteProvider = async () => {
+    try {
+      await deleteProvider(provider.id).unwrap()
+      toast.success('Provider deleted successfully')
+      router.push('/admin/providers')
+    } catch (error: any) {
+      toast.error(error?.data?.message || 'Failed to delete provider')
+    }
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      let parsedBuildspec = null
+      if (data.buildspec && data.buildspec.trim()) {
+        try {
+          parsedBuildspec = JSON.parse(data.buildspec)
+        } catch {
+          setError('buildspec', {
+            type: 'manual',
+            message: 'Invalid JSON format',
+          })
+          toast.error('Buildspec must be valid JSON')
+          return
+        }
+      }
+
+      await updateProvider({
+        idOrKey: provider.id,
+        body: {
+          label: data.label,
+          key: data.key,
+          status: data.status,
+          rank: Number(data.rank),
+          description: data.description || null,
+          websiteUrl: data.websiteUrl || null,
+
+          iconMediaId: iconMediaIdSelected,
+          isFeatured: data.isFeatured,
+          isHidden: data.isHidden,
+
+          buildspec: parsedBuildspec,
+          hasStorage: data.hasStorage,
+          hasAgent: data.hasAgent,
+          hasProject: data.hasProject,
+          hasChat: data.hasChat,
+          hasSearch: data.hasSearch,
+          hasImage: data.hasImage,
+          hasVideo: data.hasVideo,
+          hasModel: data.hasModel,
+          hasSpeech: data.hasSpeech,
+        },
+      }).unwrap()
+
+      toast.success('Your provider has been saved successfully')
+    } catch (error: any) {
+      setError('server-error', { type: 'custom', message: 'server-error' })
+      toast.error(
+        error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="pb-8 pb-lg-0">
+        <div className="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 mt-3">
+          <div className="d-flex gap-2 align-items-center">
+            <AppPageTitle title="Update Provider" />
+            <Badge
+              className="px-3 fw-bold"
+              bgColor="light-gray"
+              textColor="dark"
+              label={provider.key}
+              isOutline
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="text-white w-xs-140p"
+            color="primary"
+            isLoading={isSubmitting}
+            disabled={isSubmitting}
+            onClick={() => clearErrors(['server-error'])}
+          >
+            Save
+          </Button>
+        </div>
+
+        <div className="row mx-auto g-4 g-lg-5">
+          <div className="col-lg-8 ps-lg-0">
+            <Input
+              register={register('label', { required: 'This field is required' })}
+              errors={errors}
+              label="Label"
+              placeholder="Enter Provider Label"
+              getValues={getValues}
+            />
+
+            <div className="mt-4">
+              <Input
+                register={register('key', {
+                  required: 'This field is required',
+                  pattern: {
+                    value: /^[a-z0-9-]+$/,
+                    message: 'Key must contain only lowercase letters, numbers, and hyphens',
+                  },
+                  minLength: { value: 2, message: 'Key must be at least 2 characters' },
+                })}
+                errors={errors}
+                label="Key"
+                placeholder="Enter provider key"
+                getValues={getValues}
+              />
+            </div>
+
+            <div className="mt-4">
+              <Input
+                register={register('websiteUrl')}
+                errors={errors}
+                label="Website URL"
+                placeholder="https://example.com"
+                getValues={getValues}
+              />
+            </div>
+
+            <div className="mt-4">
+              <Textarea
+                register={register('description')}
+                errors={errors}
+                label="Description"
+                placeholder="Enter provider description"
+                getValues={getValues}
+              />
+            </div>
+
+            <div className="mt-4">
+              <label className="form-label">Buildspec (JSON)</label>
+              <Textarea
+                register={register('buildspec')}
+                errors={errors}
+                rows={10}
+                placeholder='{"ui": [], "defaults": {}}'
+                getValues={getValues}
+              />
+              {errors.buildspec && (
+                <div className="text-danger small mt-1">
+                  {errors.buildspec.message}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="col-lg-4 pe-lg-0">
+            <div className="mb-4">
+              <MediaPickerBox
+                label="Provider Icon"
+                helperText="Click to select an icon for this provider"
+                defaultMediaSelected={undefined}
+                onSelectImage={setIconMediaIdSelected}
+              />
+            </div>
+
+            <div className="mb-4">
+              <Input
+                register={register('rank', {
+                  required: 'This field is required',
+                  valueAsNumber: true,
+                  min: { value: 1, message: 'Rank must be at least 1' },
+                })}
+                errors={errors}
+                label="Rank"
+                placeholder="999"
+                getValues={getValues}
+                type="number"
+              />
+            </div>
+
+            <div className="mb-4">
+              <Select
+                label="Status"
+                register={register('status', { required: 'This field is required' })}
+                errors={errors}
+                options={[
+                  { value: 'active', label: 'Active' },
+                  { value: 'disabled', label: 'Disabled' },
+                  { value: 'deprecated', label: 'Deprecated' },
+                ]}
+                control={control}
+                getValues={getValues}
+                setFirstAsDefault={false}
+              />
+            </div>
+
+            <div className="mb-4">
+              <div className="form-check">
+                <input
+                  type="checkbox"
+                  id="isFeaturedCheckbox"
+                  className="form-check-input"
+                  {...register('isFeatured')}
+                />
+                <label htmlFor="isFeaturedCheckbox" className="form-check-label">
+                  Featured
+                </label>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <div className="form-check">
+                <input
+                  type="checkbox"
+                  id="isHiddenCheckbox"
+                  className="form-check-input"
+                  {...register('isHidden')}
+                />
+                <label htmlFor="isHiddenCheckbox" className="form-check-label">
+                  Hidden
+                </label>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="form-label d-block mb-3">Provider Capabilities</label>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasAgent"
+                  className="form-check-input"
+                  {...register('hasAgent')}
+                />
+                <label htmlFor="hasAgent" className="form-check-label">
+                  Agent
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasChat"
+                  className="form-check-input"
+                  {...register('hasChat')}
+                />
+                <label htmlFor="hasChat" className="form-check-label">
+                  Chat
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasImage"
+                  className="form-check-input"
+                  {...register('hasImage')}
+                />
+                <label htmlFor="hasImage" className="form-check-label">
+                  Image
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasModel"
+                  className="form-check-input"
+                  {...register('hasModel')}
+                />
+                <label htmlFor="hasModel" className="form-check-label">
+                  Model
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasProject"
+                  className="form-check-input"
+                  {...register('hasProject')}
+                />
+                <label htmlFor="hasProject" className="form-check-label">
+                  Project
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasSearch"
+                  className="form-check-input"
+                  {...register('hasSearch')}
+                />
+                <label htmlFor="hasSearch" className="form-check-label">
+                  Search
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasStorage"
+                  className="form-check-input"
+                  {...register('hasStorage')}
+                />
+                <label htmlFor="hasStorage" className="form-check-label">
+                  Storage
+                </label>
+              </div>
+
+              <div className="form-check mb-2">
+                <input
+                  type="checkbox"
+                  id="hasVideo"
+                  className="form-check-input"
+                  {...register('hasVideo')}
+                />
+                <label htmlFor="hasVideo" className="form-check-label">
+                  Video
+                </label>
+              </div>
+                <div className="form-check mb-2">
+                  <input
+                    type="checkbox"
+                    id="hasSpeech"
+                    className="form-check-input"
+                    {...register('hasSpeech')}
+                  />
+                  <label htmlFor="hasSpeech" className="form-check-label">
+                    Speech
+                  </label>
+                </div>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      <div className="row">
+        <div className="col-lg-8">
+          <div className="mt-4">
+            <AdvanceAccordion
+              objectName={provider.label}
+              entityName="provider"
+              onDelete={onDeleteProvider}
+              canDelete={(provider as any).deletionStatus?.canDelete ?? true}
+              isUnableToDeleteMessage={
+                (provider as any).deletionStatus?.message ||
+                'This provider cannot be deleted'
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/provider/table/ProvidersTable.tsx

@@ -0,0 +1,144 @@
+// components/provider/table/ProvidersTable.tsx
+import { useRouter } from '@lib/next-router'
+import isEmpty from 'lodash/isEmpty'
+import Spinner from '@components/common/loading/Spinner'
+import { truncateString } from '@helpers/string'
+import { useSearchAndFilterCommon } from '@hooks'
+import TablePaging from '@components/common/table/TablePaging'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { getDefaultColoredImage } from '@helpers/images'
+import Badge from '@components/common/badge/Badge'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import TableFilter from '@components/common/table/TableFilter'
+import { useListProvidersQuery } from '@store/slice/api/providerApiSlice'
+
+export const ProvidersTable = () => {
+  const {
+    query: { q, status, limit, page },
+    push: redirect
+  } = useRouter()
+
+  const {
+    getLimitFromQuery,
+    calculateProperPageNumber,
+  } = useSearchAndFilterCommon()
+  const pageLimit = getLimitFromQuery(limit, 50)
+
+  const {
+    data,
+    isFetching,
+    isLoading,
+  } = useListProvidersQuery({
+    q: q?.toString(),
+    status: status?.toString(),
+    limit: pageLimit,
+    page: calculateProperPageNumber(page),
+  })
+
+  return (
+    <>
+      {/* <TableFilter
+        type='provider'
+        isCategoryFilterHidden
+        isProductTypeFilterHidden
+        searchPlaceholder="Search by provider key..."
+      /> */}
+
+      <div className='mt-4'>
+        <table className='table'>
+          <thead>
+            <tr>
+              <th scope='col' className='d-none d-lg-table-cell'>
+                <span className='opacity-0'>Icon</span>
+              </th>
+              <th scope='col' className='w-lg-90-down'>Label</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Key</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Rank</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Featured</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Hidden</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Updated</th>
+              <th scope='col' className='w-fit-content'>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data && !isFetching && data.results.map((provider, key) => (
+              <tr
+                key={key}
+                className='pointer'
+                onClick={() => redirect(`/admin/providers/${provider.id}`)}
+              >
+                <td className='d-none d-lg-table-cell'>
+                  <OptimizedImage
+                    src={provider.iconMedia?.media?.sourceUrl || getDefaultColoredImage()}
+                    alt={provider.label || provider.key}
+                    width={50}
+                    height={50}
+                    className='object-fit-contain'
+                  />
+                </td>
+                <td>{truncateString(provider.label, 120)}</td>
+                <td className='d-none d-lg-table-cell'>
+                  <code className='small'>{provider.key}</code>
+                </td>
+                <td className='d-none d-lg-table-cell'>
+                  {Number.isFinite(Number((provider as any).rank))
+                    ? Number((provider as any).rank)
+                    : '—'}
+                </td>
+                <td className='d-none d-lg-table-cell'>
+                  {(provider as any).isFeatured ? 'Yes' : 'No'}
+                </td>
+                <td className='d-none d-lg-table-cell'>
+                  {(provider as any).isHidden ? 'Yes' : 'No'}
+                </td>
+                <td className='d-none d-lg-table-cell'>
+                  {FullDateAndTimeFormat((provider as any).updatedAt)}
+                </td>
+                <td>
+                  <Badge
+                    className='px-3'
+                    bgColor={
+                      provider.status === 'active' 
+                        ? 'success' 
+                        : provider.status === 'deprecated'
+                        ? 'warning'
+                        : 'light-gray'
+                    }
+                    textColor={
+                      provider.status === 'active' 
+                        ? 'white' 
+                        : provider.status === 'deprecated'
+                        ? 'dark'
+                        : 'dark'
+                    }
+                    label={provider.status}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {isFetching && (
+          <div className='w-100 d-flex justify-content-center py-4'>
+            <Spinner color='primary' />
+          </div>
+        )}
+
+        {!isLoading && !isFetching && isEmpty(data?.results) && (
+          <div className='d-flex flex-column align-items-center justify-content-center'>
+            {q ? (
+              <p>There are no providers to show that match your search</p>
+            ) : (
+              <p>{"You don't have any providers yet"}</p>
+            )}
+          </div>
+        )}
+
+        {!isEmpty(data?.results) && data?.count !== undefined && (
+          <TablePaging totalCount={data.count} defaultLimit={50} />
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/providers/ProviderFeaturesSideNav.tsx

@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import {
+  PROVIDER_FEATURES,
+  isProviderFeatureSlug,
+} from '@helpers/providers/providerFeatures'
+
+export const ProviderFeaturesSideNav = ({
+  basePath = '/providers',
+  activeSlug,
+}: {
+  basePath?: string
+  activeSlug?: string | null
+}) => {
+  const router = useRouter()
+  const slugFromUrl = router.query.name?.toString()
+  const selectedSlug =
+    activeSlug || (isProviderFeatureSlug(slugFromUrl) ? slugFromUrl : '')
+
+  return (
+    <nav className="sidebar-section mb-4 mt-4">
+      <h3 className="sidebar-heading">Features</h3>
+
+      <ul className="sidebar-list">
+        <li className="sidebar-item" title="All features">
+          <Link
+            href={basePath}
+            className={`sidebar-link ${!selectedSlug ? 'fw-bold text-dark' : ''}`}
+          >
+            <i className="bi bi-grid" /> <span>All features</span>
+          </Link>
+        </li>
+
+        {[...PROVIDER_FEATURES]
+          .sort((a, b) => a.label.localeCompare(b.label))
+          .map((feature) => {
+          const isActive = feature.slug === selectedSlug
+          return (
+            <li className="sidebar-item" key={feature.slug} title={feature.label}>
+              <Link
+                href={`${basePath}/${feature.slug}`}
+                className={`sidebar-link ${isActive ? 'fw-bold text-dark' : ''}`}
+              >
+                <i className="bi bi-stars" /> <span>{feature.label}</span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

package/src/components/settings/SettingsLayout.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { SettingsSidebarNav } from './SettingsSidebarNav'
+
+export const SettingsLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <SideNavLayout
+      sidebarTopContent={() => <SettingsSidebarNav />}
+      renderMainNav={() => null}
+    >
+      {children}
+    </SideNavLayout>
+  )
+}