feat: project cover art with AI generation, branding rename, RBAC fix, computation graph
- Add DALL-E cover art generation for projects (Azure OpenAI + standard OpenAI)
- CoverArtSection component with generate/upload/remove/focus-point controls
- Client-side image compression (10MB input → WebP/JPEG, max 1920px)
- DALL-E settings in admin panel (deployment, endpoint, API key)
- MCP assistant tools for cover art (generate_project_cover, remove_project_cover)
- Rename "Planarchy" → "plANARCHY" across all UI-facing text (13 files)
- Fix hardcoded canEdit={true} on project detail page — now checks user role
- Computation graph visualization (2D/3D) for calculation rules
- OG image and OpenGraph metadata
Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
|
||||
interface BalanceCardProps {
|
||||
resourceId: string;
|
||||
@@ -52,15 +53,15 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
|
||||
Vacation Balance {year}
|
||||
</h3>
|
||||
{balance.carryoverDays > 0 && (
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500">+{balance.carryoverDays}d carried over</span>
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryoverDays}d carried over<InfoTooltip content="Unused days from the previous year. Automatically calculated on first access." /></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
<Stat label="Entitled" value={balance.entitledDays} color="text-gray-900" />
|
||||
<Stat label="Used" value={balance.usedDays} color="text-gray-600" />
|
||||
<Stat label="Pending" value={balance.pendingDays} color="text-amber-600" />
|
||||
<Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} />
|
||||
<Stat label="Entitled" value={balance.entitledDays} color="text-gray-900" tooltip="Total vacation days granted for this year, including carryover from previous year." />
|
||||
<Stat label="Used" value={balance.usedDays} color="text-gray-600" tooltip="Days already consumed by approved vacations that have passed." />
|
||||
<Stat label="Pending" value={balance.pendingDays} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
|
||||
<Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
@@ -89,11 +90,11 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ label, value, color }: { label: string; value: number; color: string }) {
|
||||
function Stat({ label, value, color, tooltip }: { label: string; value: number; color: string; tooltip?: string }) {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<p className={`text-xl font-bold ${color}`}>{value}</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{label}</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5 inline-flex items-center">{label}{tooltip && <InfoTooltip content={tooltip} />}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import { VacationStatus } from "@planarchy/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
|
||||
const TYPE_COLOR: Record<string, string> = {
|
||||
ANNUAL: "bg-brand-500",
|
||||
@@ -119,7 +120,7 @@ export function TeamCalendar() {
|
||||
<thead>
|
||||
<tr className="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
|
||||
<th className="sticky left-0 z-10 bg-gray-50 dark:bg-gray-900 px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-36 border-r border-gray-100 dark:border-gray-700">
|
||||
Resource
|
||||
<span className="inline-flex items-center gap-0.5">Resource<InfoTooltip content="Matrix view: each row is a resource, each column is a calendar day. Colored cells indicate vacation days (color = type, faded = pending)." width="w-72" /></span>
|
||||
</th>
|
||||
{days.map((d) => {
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
|
||||
|
||||
@@ -331,7 +331,7 @@ export function VacationClient() {
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||||
<SortableColumnHeader label="Resource" field="resource" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
|
||||
<SortableColumnHeader label="Resource" field="resource" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="The employee this vacation entry belongs to." />
|
||||
<th className="px-3 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<button
|
||||
@@ -344,8 +344,8 @@ export function VacationClient() {
|
||||
<InfoTooltip content="ANNUAL = paid annual leave · SICK = sick leave · PUBLIC_HOLIDAY = public holiday · OTHER = other leave types." />
|
||||
</span>
|
||||
</th>
|
||||
<SortableColumnHeader label="Start" field="startDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
|
||||
<SortableColumnHeader label="End" field="endDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} />
|
||||
<SortableColumnHeader label="Start" field="startDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="First day of the leave period (inclusive). Shows a half-day indicator if applicable." />
|
||||
<SortableColumnHeader label="End" field="endDate" sortField={sortField} sortDir={sortDir} onSort={handleSort} tooltip="Last day of the leave period (inclusive)." />
|
||||
<th className="px-3 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<button
|
||||
|
||||
@@ -6,6 +6,7 @@ import { VacationType } from "@planarchy/shared";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import { DateInput } from "~/components/ui/DateInput.js";
|
||||
import { useDebounce } from "~/hooks/useDebounce.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
|
||||
const VACATION_TYPES = Object.values(VacationType);
|
||||
|
||||
@@ -146,7 +147,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
|
||||
{!initialResourceId && (
|
||||
<div>
|
||||
<label htmlFor="vac-resource" className={labelClass}>
|
||||
Resource <span className="text-red-500">*</span>
|
||||
Resource <span className="text-red-500">*</span><InfoTooltip content="The employee this vacation request is for." />
|
||||
</label>
|
||||
<select
|
||||
id="vac-resource"
|
||||
@@ -168,7 +169,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label htmlFor="vac-type" className={labelClass}>
|
||||
Type <span className="text-red-500">*</span>
|
||||
Type <span className="text-red-500">*</span><InfoTooltip content="ANNUAL = paid leave (deducted from entitlement) · SICK = sick leave · PUBLIC_HOLIDAY = national/regional holiday · OTHER = special leave." />
|
||||
</label>
|
||||
<select
|
||||
id="vac-type"
|
||||
@@ -188,7 +189,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="vac-start" className={labelClass}>
|
||||
Start Date <span className="text-red-500">*</span>
|
||||
Start Date <span className="text-red-500">*</span><InfoTooltip content="First day of leave (inclusive)." />
|
||||
</label>
|
||||
<DateInput
|
||||
id="vac-start"
|
||||
@@ -200,7 +201,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="vac-end" className={labelClass}>
|
||||
End Date <span className="text-red-500">*</span>
|
||||
End Date <span className="text-red-500">*</span><InfoTooltip content="Last day of leave (inclusive)." />
|
||||
</label>
|
||||
<DateInput
|
||||
id="vac-end"
|
||||
@@ -222,7 +223,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
|
||||
onChange={(e) => setIsHalfDay(e.target.checked)}
|
||||
className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Half day</span>
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Half day</span><InfoTooltip content="Request only half a day off (morning or afternoon). Counts as 0.5 days against entitlement." />
|
||||
</label>
|
||||
{isHalfDay && (
|
||||
<div className="flex gap-3">
|
||||
|
||||
Reference in New Issue
Block a user