@spacemade/ui 0.0.1

package/src/components/product/table/ProductsTable.tsx

@@ -0,0 +1,133 @@
+// ProductsTable.tsx
+import { useRouter } from '@lib/next-router'
+import isEmpty from 'lodash/isEmpty'
+import { EntityStatus, ProductType } from '@store/model'
+import Spinner from '@components/common/loading/Spinner'
+import { truncateString } from '@helpers/string'
+import { useSearchAndFilterCommon } from '@hooks'
+import TablePaging from '@components/common/table/TablePaging'
+import { useGetProductsQuery } from '@store/slice/api/productsApiSlice'
+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'
+
+export const ProductsTable = ({
+  forcedType,
+  excludedTypes = [],
+  hideProductTypeFilter = false,
+}: {
+  forcedType?: ProductType
+  excludedTypes?: ProductType[]
+  hideProductTypeFilter?: boolean
+} = {}) => {
+  const {
+    query: { nameLike, status, limit, page, type: productType },
+    push: redirect,
+  } = useRouter()
+
+  const {
+    getLimitFromQuery,
+    calculateProperPageNumber,
+  } = useSearchAndFilterCommon()
+
+  const queryType = productType?.toString() as ProductType | undefined
+  const effectiveType = forcedType ?? queryType
+  const effectiveExcludeTypes =
+    !effectiveType && excludedTypes.length ? excludedTypes : undefined
+  const pageLimit = getLimitFromQuery(limit, 50)
+
+  const {
+    data,
+    isFetching,
+    isLoading,
+  } = useGetProductsQuery({
+    nameLike: nameLike?.toString(),
+    status: status?.toString() as EntityStatus,
+    type: effectiveType,
+    excludeType: effectiveExcludeTypes,
+    limit: pageLimit,
+    page: calculateProperPageNumber(page),
+    isAdmin: true,
+  })
+
+  return (
+    <>
+      <TableFilter
+        type='product'
+        isCategoryFilterHidden
+        isProductTypeFilterHidden={hideProductTypeFilter}
+        excludedProductTypes={excludedTypes}
+      />
+
+      <div className='mt-4'>
+        <table className='table'>
+          <thead>
+            <tr>
+              <th scope='col' className='d-none d-lg-table-cell'>
+                <span className='opacity-0'>Image</span>
+              </th>
+              <th scope='col' className='w-lg-90-down'>Name</th>
+              <th scope='col' className='d-none d-lg-table-cell'>Type</th>
+              <th scope='col' className='d-none d-lg-table-cell'>On</th>
+              <th scope='col' className='w-fit-content'>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data && !isFetching && data.results.map((product, key) => (
+              <tr
+                key={key}
+                className='pointer'
+                onClick={() => redirect(`/admin/products/${product.id}`)}
+              >
+                <td className='d-none d-lg-table-cell'>
+                  <OptimizedImage
+                    src={product.productIconMedia?.media.sourceUrl || getDefaultColoredImage()}
+                    alt={product.productIconMedia?.media.details?.altText || ''}
+                    width={50}
+                    height={50}
+                    className='object-fit-contain'
+                  />
+                </td>
+                <td>{truncateString(product.name, 120)}</td>
+                <td>{product.type}</td>
+                <td className='d-none d-lg-table-cell'>
+                  {FullDateAndTimeFormat(product.updatedAt)}
+                </td>
+                <td>
+                  <Badge
+                    className='px-3'
+                    bgColor={product.status === EntityStatus.draft ? 'warning' : 'success'}
+                    textColor={product.status === EntityStatus.draft ? 'dark' : 'white'}
+                    label={product.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'>
+            {nameLike ? (
+              <p>There are no products to show that match your search</p>
+            ) : (
+              <p>{"You don't have any products yet"}</p>
+            )}
+          </div>
+        )}
+
+        {!isEmpty(data?.results) && data?.count !== undefined && (
+          <TablePaging totalCount={data.count} defaultLimit={50} />
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/projects/ProjectFilesCard.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { Trash2 } from 'lucide-react'
+import { toast } from 'react-toastify'
+import {
+  useGetProjectFilesQuery,
+  useDeleteProjectFileMutation,
+} from '@store/slice/api/projectFileApiSlice'
+import Spinner from '@components/common/loading/Spinner'
+import { FullDateFormat } from '@helpers/date'
+import { truncateString } from '@helpers/string'
+import { getIconMappedWithFileType } from '@helpers/images'
+
+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`
+}
+
+export const ProjectFilesTable = ({
+  projectId,
+  vectorStoreId,
+}: {
+  projectId: string
+  vectorStoreId?: string | null
+}) => {
+  const { data, isLoading, isFetching, refetch } =
+    useGetProjectFilesQuery(projectId, {
+      skip: !vectorStoreId,
+    })
+
+  const [deleteFile] = useDeleteProjectFileMutation()
+
+  if (!vectorStoreId) {
+    return null
+  }
+
+  const files = data?.files ?? []
+
+  const onDelete = async (fileId: string) => {
+    try {
+      await deleteFile({ projectId, fileId }).unwrap()
+      toast.success('File deleted')
+      refetch()
+    } catch {
+      toast.error('Failed to delete file')
+    }
+  }
+
+  if (isLoading || isFetching) {
+    return (
+      <div className="w-100 d-flex justify-content-center py-4">
+        <Spinner color="primary" />
+      </div>
+    )
+  }
+
+  if (!files.length) {
+    return (
+      <div className="p-4 text-muted fst-italic">
+        No files uploaded yet.
+      </div>
+    )
+  }
+
+  return (
+    <div className="border-top pt-2">
+      <table
+        className="table align-middle table-sm"
+        style={{ marginBottom: 0 }}
+      >
+        <tbody>
+          {files.map((file) => {
+            const iconClass = getIconMappedWithFileType(
+              file.mimeType || 'application/octet-stream'
+            )
+
+            return (
+              <tr key={file.id} className="pointer">
+                <td className="p-2">
+                  <div className="d-flex align-items-start gap-2">
+                    <i
+                      className={iconClass}
+                      style={{ fontSize: '1.5rem' }}
+                    />
+                    <div>
+                      <div
+                        className="fw-medium"
+                        style={{ fontSize: '0.9rem' }}
+                      >
+                        {truncateString(file.fileName, 50)}
+                      </div>
+                      <div
+                        className="small text-muted"
+                        style={{ fontSize: '0.75rem' }}
+                      >
+                        {formatBytes(file.fileSizeBytes)}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+
+                <td
+                  className="text-muted p-2"
+                  style={{ fontSize: '0.85rem' }}
+                >
+                  {file.createdAt
+                    ? FullDateFormat(file.createdAt)
+                    : '—'}
+                </td>
+
+                <td
+                  className="text-end align-middle px-2"
+                  data-type="action"
+                  style={{ width: 40 }}
+                >
+                  <button
+                    type="button"
+                    onClick={() => onDelete(file.id)}
+                    className="btn btn-link p-0 text-danger"
+                    aria-label="Delete file"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/projects/ProjectItemOptionButton.tsx

@@ -0,0 +1,112 @@
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import { RenameProjectModal } from '@components/projects/actions/RenameProjectModal'
+import {
+  useDeleteProjectMutation,
+  useUpdateProjectMutation,
+} from '@store/slice/api/projectApiSlice'
+
+type Props = {
+  project: { id: string; name: string }
+  isParentHovered?: boolean
+  onRename?: (id: string, newName: string) => Promise<void>
+  onDelete?: (id: string) => Promise<void>
+}
+
+export const ProjectItemOptionButton = ({
+  project,
+  isParentHovered = true,
+  onRename,
+  onDelete,
+}: Props) => {
+  const renameModal = useDisclosure()
+  const deleteModal = useDisclosure()
+
+  const [updateProject] = useUpdateProjectMutation()
+  const [deleteProject] = useDeleteProjectMutation()
+
+  const handleRename = async (id: string, newName: string) => {
+    if (onRename) {
+      await onRename(id, newName)
+      renameModal.onClose()
+      return
+    }
+
+    await updateProject({ id, name: newName }).unwrap()
+    renameModal.onClose()
+  }
+
+  const handleDelete = async () => {
+    if (onDelete) {
+      await onDelete(project.id)
+      deleteModal.onClose()
+      return
+    }
+
+    await deleteProject({ id: project.id }).unwrap()
+    deleteModal.onClose()
+  }
+
+  return (
+    <>
+      <Menu placement="right-start">
+        {({ isOpen }) => (
+          <>
+            <MenuButton
+              as={IconButton}
+              aria-label="Project options"
+              icon={<span className="bi bi-three-dots-vertical fs-5" />}
+              onClick={(e) => e.stopPropagation()} // ✅ FIX
+              className={`btn btn-outline-light-gray d-flex align-items-center justify-content-center no-min-size w-xs-30p h-xs-30p rounded-pill border-0 text-dark me-1 ${
+                isOpen || isParentHovered ? 'bg-light-gray' : ''
+              }`}
+            />
+
+            <Portal>
+              <MenuList className="bg-white p-1 shadow rounded-md menu-list-container">
+                <MenuItem
+                  className="border-0 bg-white bg-hover-background rounded-md px-3 w-xs-200p h-xs-40p"
+                  icon={<span className="bi bi-pencil-square"></span>}
+                  onClick={renameModal.onOpen}
+                >
+                  Rename
+                </MenuItem>
+
+                <MenuItem
+                  className="border-0 bg-white bg-hover-background rounded-md px-3 w-xs-200p h-xs-40p"
+                  icon={<span className="bi bi-trash"></span>}
+                  onClick={deleteModal.onOpen}
+                >
+                  Delete
+                </MenuItem>
+              </MenuList>
+            </Portal>
+          </>
+        )}
+      </Menu>
+
+      <RenameProjectModal
+        project={project}
+        isOpen={renameModal.isOpen}
+        onClose={renameModal.onClose}
+        onRename={handleRename}
+      />
+
+      <DeleteDialog
+        isOpen={deleteModal.isOpen}
+        onClose={deleteModal.onClose}
+        titleOverride={`Delete "${project.name}" project?`}
+        entityDescription="project"
+        onDelete={handleDelete}
+      />
+    </>
+  )
+}