kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

try to deploy

Browse Source 
Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
kennethobsequio
2026-07-13 21:27:56 +08:00
parent bfc4b9fc67
commit b1805cfe4d
87 changed files with 798 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/AdminStickyAnnouncementBar.jsx
+2 -3
View File
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
import { getTierColor, getContrastText } from "@/utils/tierColors";
import { goToLink } from "@/components/generic/notificationDisplay";
import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
const ROTATE_INTERVAL_MS = 6000;
@@ -17,9 +18,7 @@ function resolveClickAction(stickyAnnouncement) {
if (!linkUrl) return null;
return {
label: stickyAnnouncement.data?.linkLabel || "Open Link",
go: (navigate) => (linkUrl.startsWith("/")
? navigate(linkUrl)
: window.open(linkUrl, "_blank", "noopener,noreferrer")),
go: (navigate) => goToLink(linkUrl, navigate),
};
}
src/components/generic/BlockList.jsx
+3 -3
View File
@@ -52,9 +52,9 @@ export const DEFAULT_CONTENT = {
"text": { body: "" },
"image": { asset_id: null, url: "", alt: "" },
"text-image": { body: "", asset_id: null, url: "", alt: "", image_position: "right" },
"video": { asset_id: null, url: "", thumbnail_url: "" },
"text-video": { body: "", asset_id: null, url: "", thumbnail_url: "", video_position: "right" },
"audio": { asset_id: null, url: "", title: "", artist: "", tag: "", thumbnail: "" },
"video": { asset_id: null, url: "", thumbnail_url: "", duration_seconds: 0 },
"text-video": { body: "", asset_id: null, url: "", thumbnail_url: "", video_position: "right", duration_seconds: 0 },
"audio": { asset_id: null, url: "", title: "", artist: "", tag: "", thumbnail: "", duration_seconds: 0 },
"code": { language: "javascript", code: "" },
"markdown": { body: "" },
};
src/components/generic/Blocks/Admin/AudioBlock.jsx
+2
View File
@@ -147,6 +147,7 @@ export function AudioBlock({ content, onUpdate, readOnly = false }) {
// artist — cleared on new pick so stale artist doesn't carry over
// thumbnail — cover art from asset.thumbnail_url
// tag — file extension badge e.g. "MP3"
// duration_seconds — probed media length, read by duration.util.js on save
//
const handleSelect = (asset) => {
onUpdate({
@@ -158,6 +159,7 @@ export function AudioBlock({ content, onUpdate, readOnly = false }) {
artist: "",
thumbnail: asset.thumbnail_url ?? null,
tag: asset.extension?.toUpperCase() ?? "",
duration_seconds: Number(asset.duration) || 0,
});
setPlaying(false);
setCurrentTime(0);
src/components/generic/Blocks/Admin/MarkdownBlock.jsx
+1 -120
View File
@@ -8,124 +8,6 @@ import {
Link2, List, ListOrdered, Quote, Minus, Eye, Pencil,
} from "lucide-react";
// ─── Shared markdown styles ───────────────────────────────────────────────────
// Exported so Client/MarkdownBlock can import and inject the same rules.
export const MARKDOWN_STYLES = `
.md-body { line-height: 1.7; font-size: 1rem; }
.md-body h1 { font-size: 1.75rem; font-weight: 700; margin: 1.25rem 0 0.5rem; line-height: 1.2; }
.md-body h2 { font-size: 1.375rem; font-weight: 600; margin: 1.1rem 0 0.45rem; line-height: 1.25; }
.md-body h3 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
.md-body h4 { font-size: 1rem; font-weight: 600; margin: 0.9rem 0 0.35rem; }
.md-body p { margin: 0 0 0.85rem; line-height: 1.75; }
.md-body ul { list-style: disc; padding-left: 1.4rem; margin: 0.4rem 0 0.85rem; }
.md-body ol { list-style: decimal; padding-left: 1.4rem; margin: 0.4rem 0 0.85rem; }
.md-body li { margin-bottom: 0.3rem; line-height: 1.7; }
/* Task list checkboxes */
.md-body input[type="checkbox"] { margin-right: 0.4rem; accent-color: hsl(var(--primary)); }
.md-body a { color: hsl(var(--primary)); text-decoration: underline; }
.md-body strong { font-weight: 700; }
.md-body em { font-style: italic; }
.md-body del { text-decoration: line-through; opacity: 0.7; }
/* Inline code */
.md-body :not(pre) > code {
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
font-size: 0.875em;
background: hsl(var(--muted));
color: hsl(var(--foreground));
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
border: 1px solid hsl(var(--border));
word-break: break-word;
}
/* Code block */
.md-body pre {
background: hsl(220 13% 12%);
color: hsl(220 14% 88%);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
overflow-x: auto;
margin: 0.75rem 0;
border: 1px solid hsl(220 13% 22%);
-webkit-overflow-scrolling: touch;
}
.md-body pre code {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: inherit;
white-space: pre;
word-break: normal;
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
/* Blockquote */
.md-body blockquote {
border-left: 3px solid hsl(var(--primary));
margin: 0.75rem 0;
padding: 0.4rem 0 0.4rem 1rem;
color: hsl(var(--muted-foreground));
font-style: italic;
}
.md-body blockquote p { margin-bottom: 0; }
/* Horizontal rule */
.md-body hr {
border: none;
border-top: 1px solid hsl(var(--border));
margin: 1.25rem 0;
}
/* Tables (GFM) — mirrors WYSIWYG table technique: display:block + box-shadow borders */
.md-body table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: separate;
border-spacing: 0;
margin: 0.75rem 0;
font-size: 0.875rem;
border: 1.5px solid #cbd5e1;
border-radius: 0.375rem;
}
.md-body th {
background: #f1f5f9;
color: #1e293b;
font-weight: 600;
text-align: left;
padding: 0.45rem 0.75rem;
white-space: nowrap;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.md-body td {
padding: 0.4rem 0.75rem;
vertical-align: top;
word-break: break-word;
min-width: 4rem;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.md-body tbody tr:nth-child(even) td { background: #f8fafc; }
@media (min-width: 1024px) {
.md-body { font-size: 1.05rem; }
.md-body h1 { font-size: 2rem; }
.md-body h2 { font-size: 1.5rem; }
.md-body h3 { font-size: 1.25rem; }
.md-body table { display: table; }
}
`;
// ─── Toolbar button ───────────────────────────────────────────────────────────
function ToolbarBtn({ title, onClick, children, active }) {
@@ -248,9 +130,8 @@ export function MarkdownBlock({ content, onUpdate }) {
{/* ── Edit / Preview ── */}
{preview ? (
<div className="min-h-[180px] px-3 py-3">
<style>{MARKDOWN_STYLES}</style>
{body.trim() ? (
<div className="md-body text-sm">
<div className="typeset text-sm">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
) : (
src/components/generic/Blocks/Admin/TextBlock.jsx
+2 -246
View File
@@ -45,248 +45,6 @@ const FORMAT_OPTIONS = [
{ label: "Heading 3", val: "h3" },
];
// ─── Shared styles ────────────────────────────────────────────────────────────
export const WYSIWYG_STYLES = `
/* ── Base (mobile) ────────────────────────────────────────────────────── */
.wysiwyg-editor { line-height: 1.6; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.375rem; font-weight: 700; margin: 1rem 0 0.4rem; line-height: 1.2; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.3; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; line-height: 1.4; }
.wysiwyg-editor p,
.wysiwyg-preview p {
margin: 0 0 0.75rem 0;
text-align: left;
line-height: 1.65;
font-size: 0.9375rem;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { list-style: disc; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { list-style: decimal; padding-left: 1.1rem; margin: 0.4rem 0 0.75rem; }
.wysiwyg-editor li, .wysiwyg-preview li {
margin-bottom: 0.3rem;
line-height: 1.65;
font-size: 0.9375rem;
}
.wysiwyg-editor a, .wysiwyg-preview a { color: hsl(var(--primary)); text-decoration: underline; }
/* Inline code */
.wysiwyg-editor code, .wysiwyg-preview code {
font-family: 'Fira Code', 'Cascadia Code', 'Courier New', Courier, monospace;
font-size: 0.875em;
background: hsl(var(--muted));
color: hsl(var(--foreground));
padding: 0.1rem 0.35rem;
border-radius: 0.25rem;
border: 1px solid hsl(var(--border));
white-space: pre-wrap;
word-break: break-word;
}
/* Code block */
.wysiwyg-editor pre, .wysiwyg-preview pre {
background: hsl(220 13% 12%);
color: hsl(220 14% 88%);
border-radius: 0.5rem;
padding: 0.875rem 1rem;
overflow-x: auto;
margin: 0.75rem 0;
border: 1px solid hsl(220 13% 22%);
-webkit-overflow-scrolling: touch;
}
.wysiwyg-editor pre code, .wysiwyg-preview pre code {
background: none;
border: none;
padding: 0;
font-size: 0.875rem;
color: inherit;
white-space: pre;
word-break: normal;
}
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem 0.4rem;
border-radius: 0.375rem;
background: hsl(var(--muted));
color: hsl(var(--foreground));
font-size: 0.75rem;
text-decoration: none;
border: 1px solid hsl(var(--border));
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wysiwyg-editor a.doc-link::before,
.wysiwyg-preview a.doc-link::before {
content: "📄";
font-size: 0.7rem;
flex-shrink: 0;
}
/* Table — scrollable on mobile */
.wysiwyg-editor table,
.wysiwyg-preview table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: separate;
border-spacing: 0;
margin: 0.6rem 0;
font-size: 0.75rem;
table-layout: auto;
border: 1.5px solid #cbd5e1;
border-radius: 0.375rem;
}
.wysiwyg-editor th,
.wysiwyg-preview th {
background: #f1f5f9;
color: #1e293b;
font-weight: 600;
text-align: left;
padding: 0.35rem 0.5rem;
white-space: nowrap;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.wysiwyg-editor td,
.wysiwyg-preview td {
padding: 0.35rem 0.5rem;
vertical-align: top;
word-break: break-word;
min-width: 4rem;
box-shadow: inset -1.5px -1.5px 0 #cbd5e1, inset 1.5px 1.5px 0 #cbd5e1;
}
.wysiwyg-preview tr:nth-child(even) td { background: #f8fafc; }
.wysiwyg-editor td:focus,
.wysiwyg-editor th:focus {
outline: 2px solid hsl(var(--ring));
outline-offset: -2px;
background: hsl(var(--accent) / 0.2);
}
/* ── Phone (≥ 320px) ─────────────────────────────────────────────────── */
@media (min-width: 320px) {
.wysiwyg-editor { line-height: 1.7; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.3rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor p,
.wysiwyg-preview p {
font-size: 1rem;
line-height: 1.7;
text-align: justify;
margin: 0 0 0.8rem 0;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
.wysiwyg-editor table,
.wysiwyg-preview table { font-size: 0.8125rem; margin: 0.7rem 0; }
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.45rem 0.65rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.4rem 0.65rem; min-width: 5rem; }
}
/* ── Tablet (≥ 640px) ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
.wysiwyg-editor { line-height: 1.7; }
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.625rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.3rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.125rem; margin: 1.1rem 0 0.45rem; }
.wysiwyg-editor p,
.wysiwyg-preview p {
font-size: 1rem;
line-height: 1.7;
text-align: justify;
margin: 0 0 0.8rem 0;
}
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.35rem; margin: 0.45rem 0 0.8rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.35rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8rem; padding: 0.1rem 0.45rem; gap: 0.28rem; }
.wysiwyg-editor table,
.wysiwyg-preview table { font-size: 0.8125rem; margin: 0.7rem 0; }
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.45rem 0.65rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.4rem 0.65rem; min-width: 5rem; }
}
/* ── Desktop (≥ 1024px) ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
.wysiwyg-editor h1, .wysiwyg-preview h1 { font-size: 1.875rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor h2, .wysiwyg-preview h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor h3, .wysiwyg-preview h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; }
.wysiwyg-editor p,
.wysiwyg-preview p { font-size: 1.08rem; line-height: 1.75; margin: 0 0 0.85rem 0; }
.wysiwyg-editor ul, .wysiwyg-preview ul { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
.wysiwyg-editor ol, .wysiwyg-preview ol { padding-left: 1.5rem; margin: 0.5rem 0 0.85rem; }
.wysiwyg-editor li, .wysiwyg-preview li { font-size: 1.08em; line-height: 1.75; margin-bottom: 0.4rem; }
.wysiwyg-editor a.doc-link,
.wysiwyg-preview a.doc-link { font-size: 0.8125rem; padding: 0.1rem 0.5rem; gap: 0.3rem; }
.wysiwyg-editor table,
.wysiwyg-preview table {
display: table;
font-size: 0.875rem;
margin: 0.75rem 0;
table-layout: fixed;
}
.wysiwyg-editor th,
.wysiwyg-preview th { padding: 0.5rem 0.75rem; }
.wysiwyg-editor td,
.wysiwyg-preview td { padding: 0.45rem 0.75rem; min-width: 2rem; }
}
`;
// ─── Table picker popover ─────────────────────────────────────────────────────
// A small grid that lets the user hover to choose rows × columns (up to 8×8),
// then click to confirm. Rendered inline in the toolbar.
@@ -618,10 +376,8 @@ export function RichTextEditor({ blockId, value, onChange, readOnly = false }) {
contentEditable
suppressContentEditableWarning
onInput={() => onChange(editorRef.current.innerHTML)}
className="wysiwyg-editor min-h-[120px] px-3 m-0 py-0 text-sm focus:outline-none"
className="typeset min-h-[120px] px-3 m-0 py-0 text-sm focus:outline-none"
/>
<style>{WYSIWYG_STYLES}</style>
</div>
{/* Table size picker */}
@@ -651,7 +407,7 @@ export function TextBlock({ content, onUpdate, blockId, readOnly = false }) {
if (readOnly) {
return (
<div
className="wysiwyg-preview text-sm"
className="typeset text-sm"
dangerouslySetInnerHTML={{ __html: content.body ?? "" }}
/>
);
src/components/generic/Blocks/Admin/TextVideoBlock.jsx
+1
View File
@@ -115,6 +115,7 @@ export function TextVideoBlock({ content, onUpdate, blockId, readOnly = false })
storage_provider: asset.storage_provider ?? null,
url: asset.file_url,
thumbnail_url: asset.thumbnail_url ?? null,
duration_seconds: Number(asset.duration) || 0,
})}
/>
)}
src/components/generic/Blocks/Admin/VideoBlock.jsx
+7 -5
View File
@@ -129,11 +129,12 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
// Clean object — no ...content spread so stale data never carries over.
//
// Fields saved:
// asset_id — used by client for the secure token flow
// url — used by admin player (direct src); ignored by client for S3
// thumbnail_url — poster image for the video player
// title — display name (shown in any title-aware blocks)
// tag — file extension badge e.g. "MP4"
// asset_id — used by client for the secure token flow
// url — used by admin player (direct src); ignored by client for S3
// thumbnail_url — poster image for the video player
// title — display name (shown in any title-aware blocks)
// tag — file extension badge e.g. "MP4"
// duration_seconds — probed media length, read by duration.util.js on save
//
const handleSelect = (asset) => {
onUpdate({
@@ -143,6 +144,7 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
thumbnail_url: asset.thumbnail_url ?? null,
title: asset.display_name,
tag: asset.extension?.toUpperCase() ?? "",
duration_seconds: Number(asset.duration) || 0,
});
setPlaying(false);
setProgress(0);
src/components/generic/Blocks/Client/MarkdownBlock.jsx
+3 -7
View File
@@ -1,6 +1,5 @@
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { MARKDOWN_STYLES } from "@/components/generic/Blocks/Admin/MarkdownBlock";
export function MarkdownBlock({ content }) {
const body = content.body ?? "";
@@ -14,11 +13,8 @@ export function MarkdownBlock({ content }) {
}
return (
<>
<style>{MARKDOWN_STYLES}</style>
<div className="md-body">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
</>
<div className="typeset">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{body}</ReactMarkdown>
</div>
);
}
src/components/generic/Blocks/Client/TextBlock.jsx
+4 -9
View File
@@ -1,16 +1,11 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
export function TextBlock({ content }) {
if (!content.body) {
return <div className="text-xs text-muted-foreground italic py-2">Empty text block</div>;
}
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div
className="wysiwyg-preview text-sm"
dangerouslySetInnerHTML={{ __html: content.body }}
/>
</>
<div
className="typeset text-sm"
dangerouslySetInnerHTML={{ __html: content.body }}
/>
);
}
src/components/generic/Blocks/Client/TextImageBlock.jsx
+8 -12
View File
@@ -1,19 +1,15 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
import { ImageBlock } from "./ImageBlock";
export function TextImageBlock({ content }) {
const imgLeft = content.image_position === "left";
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{imgLeft && <ImageBlock content={content} />}
<div
className="wysiwyg-preview text-sm w-full"
dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
/>
{!imgLeft && <ImageBlock content={content} />}
</div>
</>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{imgLeft && <ImageBlock content={content} />}
<div
className="typeset text-sm w-full"
dangerouslySetInnerHTML={{ __html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>" }}
/>
{!imgLeft && <ImageBlock content={content} />}
</div>
);
}
src/components/generic/Blocks/Client/TextVideoBlock.jsx
+10 -14
View File
@@ -1,21 +1,17 @@
import { WYSIWYG_STYLES } from "@/components/generic/Blocks/Admin/TextBlock";
import { VideoBlock } from "./VideoBlock";
export function TextVideoBlock({ content }) {
const vidLeft = content.video_position === "left";
return (
<>
<style>{WYSIWYG_STYLES}</style>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{vidLeft && <VideoBlock content={content} />}
<div
className="wysiwyg-preview text-sm w-full"
dangerouslySetInnerHTML={{
__html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>",
}}
/>
{!vidLeft && <VideoBlock content={content} />}
</div>
</>
<div className="flex flex-col gap-6 items-start sm:grid sm:grid-cols-2 sm:gap-6">
{vidLeft && <VideoBlock content={content} />}
<div
className="typeset text-sm w-full"
dangerouslySetInnerHTML={{
__html: content.body || "<p class='text-muted-foreground italic'>Empty text</p>",
}}
/>
{!vidLeft && <VideoBlock content={content} />}
</div>
);
}
src/components/generic/Breadcrumb/AppBreadcrumb.jsx
+1 -1
View File
@@ -49,7 +49,7 @@ import { cn } from "@/lib/utils";
* // With custom click handler
* <AppBreadcrumb
* items={[
* { label: "Home", icon: <House className="size-4" />, onClick: (e, navigate) => navigate(-1) },
* { label: "Home", icon: <House className="size-4" />, onClick: (e, navigate) => navigate("/admin") },
* { label: "Settings", to: `/admin/${adminId}/settings` },
* { label: "Profile" },
* ]}
src/components/generic/DatePickerButton.jsx
+59
View File
@@ -0,0 +1,59 @@
import { useState } from "react";
import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { useDateFormat } from "@/hooks/useDateFormat";
// Single-date picker button used by "From"/"To" range filters (Activity Feed,
// User Activity tab). Extracted so both pages share one implementation.
export function DatePickerButton({ value, onChange, placeholder, disabled }) {
const [open, setOpen] = useState(false);
const { fmtDate } = useDateFormat();
const label = value ? fmtDate(value) : placeholder;
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={`h-8 text-sm w-[150px] justify-start font-normal gap-2 ${!value ? "text-muted-foreground" : ""}`}
>
<CalendarIcon className="size-3.5 shrink-0" />
<span className="truncate">{label}</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={value}
onSelect={(d) => { onChange(d ?? null); setOpen(false); }}
disabled={disabled}
initialFocus
/>
<div className="border-t px-3 py-2 flex gap-2">
<Button
variant="outline"
size="sm"
className="flex-1 h-7 text-xs"
onClick={() => { onChange(new Date()); setOpen(false); }}
>
Today
</Button>
{value && (
<Button
variant="ghost"
size="sm"
className="flex-1 h-7 text-xs text-muted-foreground"
onClick={() => { onChange(null); setOpen(false); }}
>
Clear
</Button>
)}
</div>
</PopoverContent>
</Popover>
);
}
src/components/generic/NotificationDetailDialog.jsx
+7 -2
View File
@@ -6,7 +6,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
import { Separator } from "@/components/ui/separator";
import { Spinner } from "@/components/ui/spinner";
import { useDateFormat } from "@/hooks/useDateFormat";
import { NotificationIcon, getTypeAccent, resolveNotificationLink } from "@/components/generic/notificationDisplay";
import { NotificationIcon, getTypeAccent, getTypeButtonClasses, resolveNotificationLink } from "@/components/generic/notificationDisplay";
export default function NotificationDetailDialog({ notification, onOpenChange }) {
const { fmtDateTime } = useDateFormat();
@@ -81,7 +81,12 @@ export default function NotificationDetailDialog({ notification, onOpenChange })
)}
{link && (
<Button className="w-full gap-1.5" onClick={handleGo} disabled={navigating}>
<Button
variant="outline"
className={`w-full gap-1.5 ${getTypeButtonClasses(notification?.type)}`}
onClick={handleGo}
disabled={navigating}
>
{navigating ? <Spinner className="size-4" /> : <>{link.label} <ArrowRight className="size-3.5" /></>}
</Button>
)}
src/components/generic/Sheet/FilterSheet.jsx
+3
View File
@@ -10,6 +10,9 @@ import { Spinner } from "@/components/ui/spinner";
const FIELD_DISPLAY_MAP = {
is_active: { true: "Active", false: "Inactive" },
is_verified: { true: "Verified", false: "Not Verified" },
is_banned: { true: "Banned", false: "Not Banned" },
is_public: { true: "Public", false: "Private" },
is_required: { true: "Yes", false: "No" },
};
const BOOLEAN_FIELDS = Object.keys(FIELD_DISPLAY_MAP);
src/components/generic/StickyAnnouncementBar.jsx
+3 -12
View File
@@ -9,19 +9,10 @@ import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouse
const ROTATE_INTERVAL_MS = 6000;
// Explicit link_url (from the admin "On Open" section) always wins, using the
// admin-authored button label when set. Falls back to the type-based resolver
// for broadcasts sent before that field existed.
// resolveNotificationLink already gives explicit link_url (the admin "On
// Open" section) precedence over the type-based fallbacks, for broadcasts
// sent before that field existed.
function resolveClickAction(stickyAnnouncement) {
const explicitUrl = stickyAnnouncement.data?.linkUrl || null;
if (explicitUrl) {
return {
label: stickyAnnouncement.data?.linkLabel || "Open Link",
go: (navigate) => (explicitUrl.startsWith("/")
? navigate(explicitUrl)
: window.open(explicitUrl, "_blank", "noopener,noreferrer")),
};
}
return resolveNotificationLink(stickyAnnouncement.type, stickyAnnouncement.data);
}
src/components/generic/Table/ActiveFilterPills.jsx
+40 -1
View File
@@ -1,5 +1,41 @@
import { Filter, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { BOOLEAN_FIELD_LABELS } from "@/utils/table.util";
// Resolves a filter's raw value(s) into what should actually be shown on the
// pill. Handles every shape ColumnFilter/FilterSheet can produce:
// - date range: { from, to }
// - boolean columns: "true" / "false" (or an array of those)
// - id-backed columns (e.g. createdBy/updatedBy): raw ids — resolved via
// fieldOptions[field], the { value, label } picklist DataTable cached
// from the last time that column's filter sheet was opened
// - everything else (free text, plain enum values): shown as-is
function resolveFilterDisplay(filter, fieldOptions) {
const raw = filter.value;
if (raw && typeof raw === "object" && !Array.isArray(raw)) {
const { from, to } = raw;
if (from && to) return `${from} – ${to}`;
if (from) return `From ${from}`;
if (to) return `Until ${to}`;
return "";
}
const values = Array.isArray(raw) ? raw : [raw];
const boolLabels = BOOLEAN_FIELD_LABELS[filter.id];
const options = fieldOptions?.[filter.id];
const labels = values.map((v) => {
if (boolLabels) return boolLabels[v === "true" ? 1 : 0];
if (Array.isArray(options)) {
const match = options.find((o) => String(o?.value ?? o) === String(v));
if (match !== undefined) return match?.label ?? match?.value ?? match;
}
return v;
});
return labels.join(", ");
}
/**
* ActiveFilterPills
@@ -9,6 +45,8 @@ import { Button } from "@/components/ui/button";
* Props:
* @param {Array} filters - Array of { id, value } (TanStack columnFilters shape)
* @param {Array} attributes - Array of { field, name } for display labels
* @param {Object} [fieldOptions] - { [field]: [{ value, label }] } picklist cache,
* used to resolve id-backed filters (createdBy, etc.)
* @param {Function} onRemove - (id: string) => void — remove a single filter
* @param {Function} [onClearAll] - () => void — clear all filters
* @param {boolean} [showClearButton]- Render the "Clear filters (n)" button instead of pills
@@ -17,6 +55,7 @@ import { Button } from "@/components/ui/button";
export function ActiveFilterPills({
filters = [],
attributes = [],
fieldOptions = {},
onRemove,
onClearAll,
showClearButton = false,
@@ -50,7 +89,7 @@ export function ActiveFilterPills({
className="inline-flex items-center gap-1 text-xs bg-primary/10 text-primary border border-primary/20 rounded-full px-2.5 py-0.5"
>
<span className="font-medium">{attr?.name ?? f.id}:</span>
{String(f.value)}
{resolveFilterDisplay(f, fieldOptions)}
<button
onClick={() => onRemove(f.id)}
className="ml-0.5 hover:text-destructive transition-colors"
src/components/generic/Table/DataTable.jsx
+8
View File
@@ -47,6 +47,11 @@ export default function DataTable({
const [filterState, setFilterState] = useState({
open: false, column: null, attr: null, data: [],
});
// Caches the { value, label } picklist fetched per field (e.g. createdBy's
// [{value: 56, label: "Obsequio, Russell..."}]) so ActiveFilterPills can
// show a name instead of a raw id once a filter is applied — the sheet
// itself only holds this data while open.
const [fieldOptions, setFieldOptions] = useState({});
const activeFilters = columnFilters.filter((f) => f.value !== "");
@@ -108,6 +113,7 @@ export default function DataTable({
const data = await onFetchFilterData(attr.field);
setFilterState({ open: true, column, attr, data });
setFieldOptions((prev) => ({ ...prev, [attr.field]: data }));
};
const table = useReactTable({
@@ -204,6 +210,7 @@ export default function DataTable({
<ActiveFilterPills
filters={activeFilters}
attributes={attributes}
fieldOptions={fieldOptions}
onClearAll={() => {
setColumnFilters([]);
filtersRef.current = [];
@@ -227,6 +234,7 @@ export default function DataTable({
<ActiveFilterPills
filters={activeFilters}
attributes={attributes}
fieldOptions={fieldOptions}
onRemove={(id) => {
const next = columnFilters.filter((c) => c.id !== id);
const newFilters = next.filter((f) => f.value !== "");
src/components/generic/notificationDisplay.jsx
+42
View File
@@ -31,6 +31,24 @@ export function getTypeAccent(type) {
return TYPE_ACCENT[type] ?? "bg-muted text-foreground";
}
// Outline-button variant of TYPE_ACCENT — same per-type color family, tuned
// for a bordered CTA (e.g. "View task list" / "Open Link") instead of a
// filled icon badge, so the action button reads as the same type as the
// notification it belongs to rather than a generic button for every type.
const TYPE_BUTTON_CLASSES = {
achievement: "border-yellow-300 text-yellow-700 hover:bg-yellow-50 dark:border-yellow-800 dark:text-yellow-400 dark:hover:bg-yellow-950/40",
course: "border-blue-300 text-blue-700 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-950/40",
milestone: "border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-800 dark:text-purple-400 dark:hover:bg-purple-950/40",
task: "border-emerald-300 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-800 dark:text-emerald-400 dark:hover:bg-emerald-950/40",
announcement: "border-indigo-300 text-indigo-700 hover:bg-indigo-50 dark:border-indigo-800 dark:text-indigo-400 dark:hover:bg-indigo-950/40",
tier_expired: "border-amber-300 text-amber-700 hover:bg-amber-50 dark:border-amber-800 dark:text-amber-400 dark:hover:bg-amber-950/40",
assessment: "border-blue-300 text-blue-700 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-950/40",
};
export function getTypeButtonClasses(type) {
return TYPE_BUTTON_CLASSES[type] ?? "";
}
export function timeAgo(dateStr) {
const diff = Date.now() - new Date(dateStr).getTime();
const m = Math.floor(diff / 60_000);
@@ -41,6 +59,21 @@ export function timeAgo(dateStr) {
return `${Math.floor(h / 24)}d ago`;
}
// Admin-authored links only ever get typed as either an internal path
// ("/course/123") or a bare/https URL — a host typed without a scheme
// (e.g. "example.com") isn't "/"-prefixed, so it would otherwise fall
// through to window.open() and resolve as a broken relative path instead of
// navigating off-site. Prepend https:// whenever no scheme is present.
export function normalizeExternalUrl(url) {
if (/^[a-z][a-z0-9+.-]*:/i.test(url)) return url; // already has a scheme (https:, http:, mailto:, tel:, ...)
return `https://${url}`;
}
export function goToLink(url, navigate) {
if (url.startsWith("/")) navigate(url);
else window.open(normalizeExternalUrl(url), "_blank", "noopener,noreferrer");
}
// Resolves a course uuid to its numeric course_id — client course pages route by course_id, not uuid.
async function goToCourse(navigate, courseUuid) {
try {
@@ -61,6 +94,15 @@ async function goToCourse(navigate, courseUuid) {
export function resolveNotificationLink(type, data) {
if (!data) return null;
// An explicit admin-authored link (the broadcast form's "On Open" section)
// always wins over the type-based fallbacks below, same precedence the
// sticky banner uses — otherwise a notification with a configured button
// silently loses it whenever it's delivered as a regular notification
// instead of a sticky one.
if (data.linkUrl) {
return { label: data.linkLabel || "Open Link", go: (navigate) => goToLink(data.linkUrl, navigate) };
}
switch (type) {
case "course":
return data.courseUuid