@spacemade/ui 0.0.1

package/src/components/projects/postByCategory.tsx

@@ -0,0 +1,118 @@
+import Link from 'next/link'
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+
+type Props = {
+  categoryId?: string
+  categorySlug?: string
+  limit?: number
+  title?: string
+  showViewAll?: boolean
+}
+
+const PostsByCategory = ({
+  categoryId,
+  categorySlug,
+  limit = 4,
+  title = 'Posts',
+  showViewAll = true,
+}: Props) => {
+  const { data } = useGetApprovedPostsQuery({
+    limit,
+    categoryIds: categoryId ? [categoryId] : undefined,
+    categorySlugs: !categoryId && categorySlug ? [categorySlug] : undefined,
+  })
+
+  const posts = data?.results ?? []
+  const viewAllHref = (() => {
+    if (categorySlug) return `/blog/c/${categorySlug}`
+    if (categoryId) {
+      const match = posts?.[0]?.categories?.find(
+        (c: any) => String(c?.id) === String(categoryId)
+      )
+      return match?.slug ? `/blog/c/${match.slug}` : '/blog'
+    }
+    return '/blog'
+  })()
+
+  const getPostImage = (p: any) =>
+    p?.featuredMedia?.media?.sourceUrl ||
+    p?.featuredMedia?.media?.source_url ||
+    null
+
+  const getPostAlt = (p: any) =>
+    p?.featuredMedia?.media?.details?.altText ||
+    p?.featuredMedia?.media?.details?.alt_text ||
+    p?.name ||
+    ''
+
+  if (posts.length === 0) return null
+
+  return (
+    <div className="p-3">
+      <div className="d-flex align-items-center justify-content-between mb-3">
+        <h6 className="text-muted fw-semibold mb-0">{title}</h6>
+        {showViewAll && (
+          <Link
+            href={viewAllHref}
+            className="small text-muted text-decoration-none"
+          >
+            View all
+          </Link>
+        )}
+      </div>
+
+			<div className="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 mt-1">
+        {posts.map((p: any) => {
+          const img = getPostImage(p)
+          const alt = getPostAlt(p)
+
+          return (
+            <div className="col" key={p.id}>
+              <Link
+                href={`/blog/${p.slug}`}
+                className="text-decoration-none"
+                aria-label={`Open post ${p.name}`}
+                prefetch={false}
+              >
+                <div className="card h-100">
+                  <div className="card-body d-flex gap-3">
+                    {/* Image */}
+                    <div
+                      className="bg-light rounded flex-shrink-0 d-flex align-items-center justify-content-center"
+                      style={{ width: 88, height: 88 }}
+                    >
+                      {img ? (
+                        <img
+                          src={img}
+                          alt={alt}
+                          className="w-100 h-100 rounded"
+                          style={{ objectFit: 'cover' }}
+                        />
+                      ) : (
+                        <span className="text-muted small">No image</span>
+                      )}
+                    </div>
+
+                    {/* Text */}
+                    <div className="flex-grow-1 overflow-hidden">
+                      <div className="fw-semibold text-dark text-truncate">
+                        {p.name}
+                      </div>
+                      {p.intro && (
+                        <p className="text-muted small mb-0 text-truncate">
+                          {p.intro}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default PostsByCategory

package/src/components/projects/projectFileHistory.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import Spinner from '@components/common/loading/Spinner'
+import { useGetProjectFilesQuery } from '@store/slice/api/projectFileApiSlice'
+import { truncateString } from '@helpers/string'
+
+export default function ProjectFilesHistory({
+  projectId,
+  projectSlug,
+}: {
+  projectId: string
+  projectSlug: string
+}) {
+  const router = useRouter()
+  const { data, isLoading } = useGetProjectFilesQuery(projectId)
+
+  const files = data?.files ?? []
+
+  if (isLoading) {
+    return (
+      <div className="pl-6 py-2">
+        <Spinner size="sm" />
+      </div>
+    )
+  }
+
+  if (!files.length) return null
+
+  return (
+    <ul className="sidebar-list">
+      {files.slice(0, 5).map((file) => (
+        <li key={file.id} className="sidebar-item" title={file.fileName}>
+          <Link
+            href={`/projects/${projectId}/${projectSlug}/files`}
+            className="sidebar-link"
+          >
+            <i className="bi bi-file-earmark-text" />
+            <span className="text-truncate">
+              {truncateString(file.fileName, 24)}
+            </span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/components/projects/table/ProjectTable.tsx

@@ -0,0 +1,365 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+
+import { Project } from '@store/model'
+import { useGetProjectsQuery } from '@store/slice/api/projectApiSlice'
+
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Spinner from '@components/common/loading/Spinner'
+import { ProjectItemOptionButton } from '@components/projects/ProjectItemOptionButton'
+
+import { defaultAvatar, getDefaultColoredImage } from '@helpers/images'
+import { createProjectSlug } from '@helpers/slugUtils'
+import { getUserNameFromUser, truncateString } from '@helpers/string'
+
+const PAGE_SIZE_OPTIONS = [10, 15, 25, 50]
+
+const normalizeText = (value?: string) => (value || '').trim().toLowerCase()
+
+const toTime = (value?: string) => {
+  const ms = new Date(String(value || '')).getTime()
+  return Number.isFinite(ms) ? ms : 0
+}
+
+const formatTimestamp = (value?: string) => {
+  const ms = toTime(value)
+  if (!ms) return '-'
+  return new Date(ms).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export const ProjectsTable = ({
+  skipPaging = false,
+  onCreate,
+  onEmptyStateChange,
+}: {
+  skipPaging?: boolean
+  onCreate?: () => void
+  onEmptyStateChange?: (isEmptyState: boolean) => void
+}) => {
+  const router = useRouter()
+
+  const [searchQuery, setSearchQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(15)
+
+  const { data, isLoading, isFetching } = useGetProjectsQuery({
+    limit: 500,
+    page: 1,
+  })
+
+  const rows = useMemo(() => {
+    const list = [...(data?.results || [])]
+    return list.sort((a, b) => toTime(b.updatedAt) - toTime(a.updatedAt))
+  }, [data?.results])
+
+  const filteredRows = useMemo(() => {
+    const normalizedSearch = normalizeText(searchQuery)
+    return rows.filter((project: Project) => {
+      if (!normalizedSearch) return true
+      const ownerName = getUserNameFromUser(project.owner)
+      const haystack = normalizeText(
+        `${project.id} ${project.name} ${project.description || ''} ${ownerName || ''}`
+      )
+      return haystack.includes(normalizedSearch)
+    })
+  }, [rows, searchQuery])
+
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize))
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  useEffect(() => {
+    if (!onEmptyStateChange) return
+    if (isLoading || isFetching) return
+    onEmptyStateChange(rows.length === 0)
+  }, [isLoading, isFetching, onEmptyStateChange, rows.length])
+
+  const visibleRows = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredRows.slice(start, start + pageSize)
+  }, [filteredRows, page, pageSize])
+
+  const onRowClick = (project: Project) => {
+    const slug = createProjectSlug(project.name || 'project')
+    router.push(`/projects/${project.id}/${slug}`)
+  }
+
+  return (
+    <div className="projects-fullscreen-table">
+      <div className="projects-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">Project Directory</h2>
+            <span className="small text-muted">{filteredRows.length.toLocaleString('en-US')} projects</span>
+          </div>
+          {onCreate && (
+            <button
+              type="button"
+              onClick={onCreate}
+              className="btn btn-primary btn-sm rounded-pill fw-bold px-3"
+            >
+              + Add Project
+            </button>
+          )}
+        </div>
+
+        <div className="toolbar-controls">
+          <input
+            type="search"
+            className="form-control"
+            placeholder="Search by project, owner, id, or description"
+            value={searchQuery}
+            onChange={(event) => {
+              setSearchQuery(event.target.value)
+              setPage(1)
+            }}
+            aria-label="Search projects"
+          />
+
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={() => {
+              setSearchQuery('')
+              setPage(1)
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+
+      <div className="projects-table-shell">
+        <div className="table-responsive projects-table-scroll custom-scroll-bar">
+          <table className="table align-middle mb-0 projects-table-modern">
+            <thead>
+              <tr>
+                <th style={{ minWidth: 320 }}>Project</th>
+                <th style={{ minWidth: 220 }}>Owner</th>
+                <th style={{ minWidth: 170 }}>Updated</th>
+                <th style={{ width: 62 }} />
+              </tr>
+            </thead>
+            <tbody>
+              {visibleRows.map((project: Project) => {
+                const ownerAvatar = project.owner?.profileMedia?.media?.sourceUrl || defaultAvatar
+                const ownerName = String(getUserNameFromUser(project.owner) || 'Unknown owner')
+                const projectImage = project.featuredMedia?.media?.sourceUrl || getDefaultColoredImage()
+                const projectImageAlt = project.featuredMedia?.media?.details?.altText || project.name || ''
+
+                return (
+                  <tr
+                    key={project.id}
+                    className="cursor-pointer"
+                    onClick={() => onRowClick(project)}
+                  >
+                    <td>
+                      <div className="d-flex align-items-center gap-3 min-width-0">
+                        <OptimizedImage
+                          src={projectImage}
+                          alt={projectImageAlt}
+                          width={44}
+                          height={44}
+                          className="rounded-2 object-fit-cover flex-shrink-0"
+                        />
+                        <div className="d-flex flex-column min-width-0">
+                          <span className="fw-semibold text-truncate">
+                            {project.name || 'Untitled project'}
+                          </span>
+                          <span className="text-muted small text-truncate">
+                            {truncateString(project.description || 'No description', 120)}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td>
+                      <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>{formatTimestamp(project.updatedAt)}</td>
+
+                    <td
+                      className="text-end align-middle"
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <div className="d-flex justify-content-end">
+                        <ProjectItemOptionButton project={{ id: project.id, name: project.name }} />
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {!isLoading && !isFetching && visibleRows.length === 0 && (
+          <div className="text-muted text-center py-4">No projects match the current filters.</div>
+        )}
+
+        {(isLoading || isFetching) && (
+          <div className="d-flex justify-content-center py-4">
+            <Spinner size="sm" />
+          </div>
+        )}
+      </div>
+
+      {!skipPaging && (
+        <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>{`
+        .projects-fullscreen-table {
+          width: 100%;
+          display: grid;
+          gap: 0.85rem;
+        }
+
+        .projects-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) auto;
+        }
+
+        .projects-table-shell {
+          border: 1px solid #dce3eb;
+          border-radius: 14px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .projects-table-scroll {
+          max-height: calc(100vh - 350px);
+          min-height: 260px;
+          overflow: auto;
+        }
+
+        :global(.projects-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(.projects-table-modern tbody tr:hover) {
+          background: #f7fafe;
+        }
+
+        :global(.projects-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;
+          }
+
+          .projects-table-scroll {
+            max-height: none;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}