Initial commit: Meshkee dashboards monorepo.

Includes business, customer, and super-admin apps with shared packages and production deploy scripts. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-22 13:48:53 +03:30
commit f566387c61
509 changed files with 62690 additions and 0 deletions
@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { CalendarDays } from 'lucide-react'
+import { Breadcrumbs } from '../components/Breadcrumbs'
+import { ImageLightbox } from '../components/ImageLightbox'
+import { PortfolioCommentsSection } from '../components/PortfolioCommentsSection'
+import { ApiError } from '../lib/api'
+import { formatPortfolioDate, getPortfolioDetail } from '../services/portfolioService'
+import type { PortfolioDetail } from '../types/portfolio'
+import pageStyles from '../components/PageContent.module.css'
+import styles from './PortfolioDetailsPage.module.css'
+
+export function PortfolioDetailsPage() {
+  const { id } = useParams()
+  const [portfolio, setPortfolio] = useState<PortfolioDetail | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const [lightboxIndex, setLightboxIndex] = useState(0)
+
+  useEffect(() => {
+    if (!id) return
+
+    const controller = new AbortController()
+
+    async function loadPortfolio() {
+      setIsLoading(true)
+      setError('')
+
+      try {
+        const data = await getPortfolioDetail(id!, controller.signal)
+        setPortfolio(data)
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return
+        if (err instanceof ApiError) {
+          setError(err.message)
+        } else {
+          setError('Unable to load portfolio.')
+        }
+        setPortfolio(null)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    void loadPortfolio()
+    return () => controller.abort()
+  }, [id])
+
+  const galleryImages = useMemo(
+    () => portfolio?.gallery.map((item) => item.url).filter(Boolean) ?? [],
+    [portfolio],
+  )
+
+  function openLightbox(index: number) {
+    setLightboxIndex(index)
+    setLightboxOpen(true)
+  }
+
+  if (isLoading) {
+    return (
+      <main className={pageStyles.content}>
+        <p className={styles.status}>Loading portfolio...</p>
+      </main>
+    )
+  }
+
+  if (error || !portfolio || !id) {
+    return (
+      <main className={pageStyles.content}>
+        <p className={styles.error}>{error || 'Portfolio not found.'}</p>
+        <Link to="/portfolios/list" className={styles.backLink}>
+          Back to My Portfolios
+        </Link>
+      </main>
+    )
+  }
+
+  const displayDate = formatPortfolioDate(portfolio.publishedAt ?? portfolio.createdAt)
+
+  return (
+    <>
+      <div className={pageStyles.content}>
+        <Breadcrumbs
+          items={[
+            { label: 'Dashboard', href: '/' },
+            { label: 'Portfolios', href: '/portfolios' },
+            { label: 'My Portfolios', href: '/portfolios/list' },
+            { label: portfolio.title },
+          ]}
+        />
+
+        <div className={pageStyles.pageHeader}>
+          <div>
+            <h2 className={pageStyles.pageTitle}>{portfolio.title}</h2>
+            {portfolio.abstract && (
+              <p className={pageStyles.pageSubtitle}>{portfolio.abstract}</p>
+            )}
+          </div>
+        </div>
+
+        <article className={styles.portfolioDetail}>
+          <div className={styles.heroImageWrap}>
+            {portfolio.titleImageUrl ? (
+              <img
+                src={portfolio.titleImageUrl}
+                alt={portfolio.title}
+                className={styles.heroImage}
+              />
+            ) : (
+              <div className={styles.heroPlaceholder} aria-hidden="true" />
+            )}
+          </div>
+
+          <div className={styles.metaRow}>
+            <span className={styles.metaItem}>
+              <CalendarDays size={15} />
+              {displayDate}
+            </span>
+            {(portfolio.categoryName || portfolio.tags.length > 0) && (
+              <>
+                <span className={styles.metaDot}>·</span>
+                <div className={styles.metaChips}>
+                  {portfolio.categoryName && (
+                    <span className={styles.categoryChip}>{portfolio.categoryName}</span>
+                  )}
+                  {portfolio.tags.map((tag) => (
+                    <span key={tag} className={styles.tagChip}>
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className={styles.contentPanel}>
+            {portfolio.mainTextHtml ? (
+              <div
+                className={styles.content}
+                dangerouslySetInnerHTML={{ __html: portfolio.mainTextHtml }}
+              />
+            ) : (
+              <p className={styles.content}>No content yet.</p>
+            )}
+          </div>
+        </article>
+      </div>
+
+      {galleryImages.length > 0 && (
+        <section className={styles.galleryBand} aria-label="Portfolio gallery">
+          <div className={styles.galleryInner}>
+            <h3 className={styles.galleryTitle}>Gallery</h3>
+            <div className={styles.galleryGrid}>
+              {galleryImages.map((src, index) => (
+                <button
+                  key={`${src}-${index}`}
+                  type="button"
+                  className={styles.galleryItem}
+                  onClick={() => openLightbox(index)}
+                  aria-label={`View gallery image ${index + 1}`}
+                >
+                  <img src={src} alt={`${portfolio.title} gallery ${index + 1}`} loading="lazy" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      <div className={pageStyles.content}>
+        <div className={styles.commentsWrap}>
+          <PortfolioCommentsSection portfolioId={id} />
+        </div>
+      </div>
+
+      {galleryImages.length > 0 && (
+        <ImageLightbox
+          open={lightboxOpen}
+          images={galleryImages}
+          initialIndex={lightboxIndex}
+          alt={portfolio.title}
+          onClose={() => setLightboxOpen(false)}
+        />
+      )}
+    </>
+  )
+}