@spacemade/ui 0.0.1

package/src/components/storage/vectorStoreFileGrid.tsx

@@ -0,0 +1,384 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Spinner from '@components/common/loading/Spinner'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar, getIconMappedWithFileType } from '@helpers/images'
+import { getUserNameFromUser, truncateString } from '@helpers/string'
+import type { VectorStoreFileStatus } from '@store/model/vector-store-file.model'
+import { useGetVectorStoreFilesQuery } from '@store/slice/api/vectorStoreFileApiSlice'
+import VectorStoreFileTableActions from './actions/VectorStoreFileActions'
+
+const PAGE_SIZE_OPTIONS = [10, 15, 25, 50]
+
+function formatBytes(bytes?: number | null) {
+  if (!bytes || bytes <= 0) return '—'
+  const kb = bytes / 1024
+  if (kb < 1024) return `${kb.toFixed(1)} KB`
+  return `${(kb / 1024).toFixed(2)} MB`
+}
+
+function statusBadge(status?: VectorStoreFileStatus | null) {
+  if (status === 'completed') return 'badge bg-success'
+  if (status === 'failed') return 'badge bg-danger'
+  if (status === 'ready') return 'badge bg-info text-dark'
+  return 'badge bg-warning text-dark'
+}
+
+function normalizeText(value?: string) {
+  return String(value || '').trim().toLowerCase()
+}
+
+export default function VectorStoreFileGrid({
+  vectorStoreId,
+  selectedFileId,
+  onSelectFile,
+}: {
+  vectorStoreId: string
+  selectedFileId?: string | null
+  onSelectFile?: (file: any) => void
+}) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] =
+    useState<'all' | 'completed' | 'pending' | 'ready' | 'failed'>('all')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(15)
+
+  const { data, isFetching, isLoading } = useGetVectorStoreFilesQuery({
+    vectorStoreId,
+    page: 1,
+    limit: 500,
+  })
+
+  const rows = data?.results ?? []
+
+  const filteredRows = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    return rows.filter((file: any) => {
+      const normalizedStatus = String(file.fileStatus || 'pending') as
+        | 'completed'
+        | 'pending'
+        | 'ready'
+        | 'failed'
+
+      if (statusFilter !== 'all' && normalizedStatus !== statusFilter) return false
+      if (!normalizedSearch) return true
+
+      const owner = file.user || file.owner
+      const ownerName =
+        typeof owner === 'string'
+          ? owner
+          : getUserNameFromUser(owner) || 'Unknown owner'
+
+      const haystack = normalizeText(
+        `${file.fileName || ''} ${file.id || ''} ${file.mimeType || ''} ${ownerName}`
+      )
+      return haystack.includes(normalizedSearch)
+    })
+  }, [rows, searchQuery, statusFilter])
+
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize))
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  const visibleRows = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredRows.slice(start, start + pageSize)
+  }, [filteredRows, page, pageSize])
+
+  return (
+    <div className="storage-fullscreen-table">
+      <div className="storage-table-toolbar">
+        <div className="d-flex align-items-center justify-content-between flex-wrap gap-2">
+          <div className="d-flex align-items-center gap-2">
+            <h2 className="h6 mb-0 fw-bold text-dark">File Directory</h2>
+            <span className="small text-muted">
+              {filteredRows.length.toLocaleString('en-US')} files
+            </span>
+          </div>
+        </div>
+
+        <div className="toolbar-controls">
+          <input
+            type="search"
+            className="form-control"
+            placeholder="Search by file name, owner, mime type, or id"
+            value={searchQuery}
+            onChange={(event) => {
+              setSearchQuery(event.target.value)
+              setPage(1)
+            }}
+            aria-label="Search files"
+          />
+
+          <select
+            className="form-select"
+            value={statusFilter}
+            onChange={(event) => {
+              setStatusFilter(
+                event.target.value as 'all' | 'completed' | 'pending' | 'ready' | 'failed'
+              )
+              setPage(1)
+            }}
+            aria-label="Filter files by status"
+          >
+            <option value="all">All Statuses</option>
+            <option value="completed">Completed</option>
+            <option value="ready">Ready</option>
+            <option value="pending">Pending</option>
+            <option value="failed">Failed</option>
+          </select>
+
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={() => {
+              setSearchQuery('')
+              setStatusFilter('all')
+              setPage(1)
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="storage-table-shell">
+        <div className="table-responsive storage-table-scroll custom-scroll-bar">
+          <table className="table align-middle mb-0 storage-table-modern">
+            <thead>
+              <tr>
+                <th style={{ minWidth: 320 }}>File</th>
+                <th style={{ minWidth: 200 }} className="d-none d-lg-table-cell">Owner</th>
+                <th style={{ minWidth: 130 }} className="d-none d-lg-table-cell">Status</th>
+                <th style={{ minWidth: 160 }} className="d-none d-lg-table-cell">Updated</th>
+                <th style={{ minWidth: 80 }} className="d-none d-lg-table-cell text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleRows.map((file: any) => {
+                const owner = file.user || file.owner
+                const ownerAvatar = owner?.profileMedia?.media?.sourceUrl || defaultAvatar
+                const ownerName =
+                  typeof owner === 'string'
+                    ? owner
+                    : getUserNameFromUser(owner) || 'Unknown owner'
+                const isSelected = selectedFileId === file.id
+
+                return (
+                  <tr
+                    key={file.id}
+                    className={onSelectFile ? 'cursor-pointer' : ''}
+                    onClick={() => onSelectFile?.(file)}
+                    style={isSelected ? { background: '#edf6ff' } : undefined}
+                  >
+                    <td>
+                      <div className="d-flex align-items-center gap-3 min-width-0">
+                        <span className="d-inline-flex align-items-center justify-content-center fs-4 text-muted flex-shrink-0">
+                          <i
+                            className={getIconMappedWithFileType(file.mimeType || 'application/octet-stream')}
+                            aria-hidden="true"
+                          />
+                        </span>
+                        <div className="d-flex flex-column min-width-0">
+                          <span className="fw-semibold text-truncate">
+                            {truncateString(file.fileName || 'Unnamed file', 60)}
+                          </span>
+                          <span className="text-muted small text-truncate">
+                            {formatBytes(file.fileSizeBytes)} {file.mimeType ? `• ${file.mimeType}` : ''}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td className="d-none d-lg-table-cell">
+                      <div className="d-flex align-items-center gap-2">
+                        <OptimizedImage
+                          src={ownerAvatar}
+                          alt={ownerName}
+                          width={30}
+                          height={30}
+                          className="rounded-circle object-fit-cover flex-shrink-0"
+                        />
+                        <span className="text-truncate">{ownerName}</span>
+                      </div>
+                    </td>
+
+                    <td className="d-none d-lg-table-cell">
+                      <span className={statusBadge(file.fileStatus)}>
+                        {String(file.fileStatus || 'pending')}
+                      </span>
+                    </td>
+
+                    <td className="d-none d-lg-table-cell">
+                      {file.updatedAt && !isNaN(new Date(file.updatedAt).getTime())
+                        ? FullDateAndTimeFormat(file.updatedAt)
+                        : '-'}
+                    </td>
+
+                    <td className="d-none d-lg-table-cell text-end" data-type="action">
+                      <div className="d-flex justify-content-end">
+                        <VectorStoreFileTableActions file={file} vectorStoreId={vectorStoreId} />
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {!isLoading && !isFetching && visibleRows.length === 0 && (
+          <div className="text-muted text-center py-4">No files match the current filters.</div>
+        )}
+
+        {(isLoading || isFetching) && (
+          <div className="d-flex justify-content-center py-4">
+            <Spinner size="sm" />
+          </div>
+        )}
+      </div>
+
+      <div className="paging-shell">
+        <div className="d-flex align-items-center gap-2">
+          <span className="small text-muted">Rows</span>
+          <select
+            className="form-select form-select-sm"
+            value={pageSize}
+            onChange={(event) => {
+              setPageSize(Number(event.target.value))
+              setPage(1)
+            }}
+            style={{ width: 90 }}
+            aria-label="Rows per page"
+          >
+            {PAGE_SIZE_OPTIONS.map((size) => (
+              <option key={size} value={size}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="d-flex align-items-center gap-2">
+          <span className="small text-muted">
+            Page {page} of {totalPages}
+          </span>
+          <button
+            type="button"
+            className="btn btn-sm btn-light"
+            onClick={() => setPage(1)}
+            disabled={page <= 1}
+          >
+            {'<<'}
+          </button>
+          <button
+            type="button"
+            className="btn btn-sm btn-light"
+            onClick={() => setPage((prev) => Math.max(1, prev - 1))}
+            disabled={page <= 1}
+          >
+            {'<'}
+          </button>
+          <button
+            type="button"
+            className="btn btn-sm btn-light"
+            onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
+            disabled={page >= totalPages}
+          >
+            {'>'}
+          </button>
+          <button
+            type="button"
+            className="btn btn-sm btn-light"
+            onClick={() => setPage(totalPages)}
+            disabled={page >= totalPages}
+          >
+            {'>>'}
+          </button>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .storage-fullscreen-table {
+          width: 100%;
+          display: grid;
+          gap: 0.85rem;
+        }
+
+        .storage-table-toolbar {
+          border: 1px solid #dde3ea;
+          border-radius: 14px;
+          background: linear-gradient(180deg, #f9fbfd 0%, #f4f7fb 100%);
+          padding: 0.85rem;
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        .toolbar-controls {
+          display: grid;
+          gap: 0.65rem;
+          grid-template-columns: minmax(260px, 1fr) 170px auto;
+        }
+
+        .storage-table-shell {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .storage-table-scroll {
+          max-height: calc(100vh - 420px);
+          min-height: 260px;
+          overflow: auto;
+        }
+
+        :global(.storage-table-modern thead th) {
+          position: sticky;
+          top: 0;
+          background: #f2f5f9;
+          border-bottom: 1px solid #dce3eb;
+          color: #2a3a51;
+          font-size: 0.76rem;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          z-index: 1;
+        }
+
+        :global(.storage-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.storage-table-modern tbody td) {
+          border-color: #edf1f6;
+        }
+
+        :global(.min-width-0) {
+          min-width: 0;
+        }
+
+        .paging-shell {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        @media (max-width: 920px) {
+          .toolbar-controls {
+            grid-template-columns: 1fr;
+          }
+
+          .storage-table-scroll {
+            max-height: none;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/components/tag/modal/UpdateTagModal.tsx

@@ -0,0 +1,192 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Tag, TagPayload } from '@store/model'
+import { useTagStore } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, SLUG_REGEX } from '@helpers/constants'
+import { transformToURLFormat } from '@helpers/string'
+
+interface FormValues extends FieldValues {
+	slug: string
+	name: string
+}
+
+export const UpdateTagModal = ({
+	tag,
+	isOpen,
+	onClose,
+}: {
+	tag?: Tag
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const { saveTag, isTagSlugOrNameAvailable, generateUniqueTagSlug } =
+		useTagStore()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		clearErrors,
+		reset,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			slug: tag?.slug || '',
+			name: tag?.name || '',
+		},
+	})
+
+	useEffect(() => {
+		reset({
+			slug: tag?.slug || '',
+			name: tag?.name || '',
+		})
+	}, [tag, reset])
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			if (!tag) {
+				const slugFromName = transformToURLFormat(data.name)
+				const slug = await generateUniqueTagSlug(slugFromName)
+				data.slug = slug
+			}
+
+			await saveTag(!tag, { ...tag, ...data } as TagPayload)
+			reset()
+			toast.success('Your tag has been saved successfully')
+			onClose()
+		} catch (error: any) {
+			toast.error(
+				error.status !== HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+			setError('server-error', { type: 'custom', message: 'server-error' })
+		}
+	}
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>{!tag ? 'Add' : 'Update'} Tag</DrawerHeader>
+
+				<DrawerBody>
+					<form id='tag-update-form' onSubmit={handleSubmit(onSubmit)}>
+						{tag && (
+							<div className='w-100 mb-4 mt-3'>
+								<Input
+									register={register('slug', {
+										required: 'This field is required',
+										pattern: {
+											value: SLUG_REGEX,
+											message:
+												'The slug must only contain lowercase letters, numbers, and hyphen',
+										},
+										minLength: {
+											value: 2,
+											message: 'Your tag slug must have at least 2 characters',
+										},
+										validate: async (value) =>
+											await isTagSlugOrNameAvailable(value, 'slug', tag),
+									})}
+									customErrorMessage='This slug is already taken'
+									errors={errors}
+									placeholder='Enter your tag slug'
+									label='Slug'
+									getValues={getValues}
+								/>
+							</div>
+						)}
+						<div className={`w-100 mb-4 ${!tag ? 'mt-3' : ''}`}>
+							<Input
+								register={register('name', {
+									required: 'This field is required',
+									minLength: {
+										value: 2,
+										message: 'Your tag name must have at least 2 characters',
+									},
+									validate: async (value) =>
+										await isTagSlugOrNameAvailable(value, 'name', tag),
+								})}
+								customErrorMessage='This name is already taken'
+								errors={errors}
+								placeholder='Enter your tag name'
+								label='Name'
+								getValues={getValues}
+							/>
+						</div>
+					</form>
+
+					{tag && (
+						<>
+							<h2 className='h5'>Tag use count</h2>
+							<div className='overflow-auto custom-scroll-bar'>
+								<table className='table '>
+									<thead>
+										<tr>
+											<th scope='col'>Ads</th>
+											<th scope='col'>Posts</th>
+											<th scope='col'>Products</th>
+											<th scope='col'>Total</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr>
+											<td className='align-middle'>
+												{tag.adsCount.toLocaleString()}
+											</td>
+											<td className='align-middle'>
+												{tag.postsCount.toLocaleString()}
+											</td>
+											<td className='align-middle'>
+												{tag.productsCount.toLocaleString()}
+											</td>
+											<td className='align-middle'>
+												{tag.totalCount.toLocaleString()}
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</>
+					)}
+				</DrawerBody>
+
+				<DrawerFooter>
+					<Button ariaLabel='Cancel' onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type='submit'
+						className='text-white'
+						ariaLabel='Save Tag Changes'
+						color='primary'
+						form='tag-update-form'
+						isLoading={isSubmitting}
+						disabled={isSubmitting}
+						onClick={() => clearErrors(['server-error'])}
+					>
+						Save
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}