krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: rename Project→Client, finance single-card + filters, mobile tasks, sticky headers

Browse Source 
- Rename "Project" → "Client" across UI (labels + /projects→/clients routes with redirect); normalize company-meaning labels to "Company"
- Finance tabs: merge dual cards into one per tab, add header column filters (expenses/subs/invoices), overview as 3-section card, move +Expense/+Invoice to card right edge
- Tasks: responsive mobile stats grid, progressive column hiding (min Status+Name+Assigned), sidebar mobile footer (profile/theme/signout)
- Hide Company column for single-company users; +Task shows disabled Company field instead of hiding
- Sticky table headers site-wide with opaque card background
- Pin dev server to port 5173

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-07-02 09:39:54 -04:00
parent c91e292066
commit 91045a1897
19 changed files with 432 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/CompanyDetail.jsx
+8 -8
View File
@@ -154,7 +154,7 @@ export default function CompanyDetail() {
};
const handleDeleteCompany = async () => {
if (!window.confirm(`Delete "${company.name}"? This will permanently delete all projects, jobs, files, and data. This cannot be undone.`)) return;
if (!window.confirm(`Delete "${company.name}"? This will permanently delete all clients, jobs, files, and data. This cannot be undone.`)) return;
await deleteCompanyData(id);
navigate('/company');
};
@@ -309,7 +309,7 @@ export default function CompanyDetail() {
<div className="stat-card">
<div className="stat-icon">📁</div>
<div className="stat-value">{projects.length}</div>
<div className="stat-label">Projects</div>
<div className="stat-label">Clients</div>
</div>
<div className="stat-card">
<div className="stat-icon">⚡</div>
@@ -477,16 +477,16 @@ export default function CompanyDetail() {
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{isTeam && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<button className="btn btn-primary btn-sm" onClick={() => setShowNewProject(s => !s)}>
{showNewProject ? 'Cancel' : '+ New Project'}
{showNewProject ? 'Cancel' : '+ New Client'}
</button>
</div>}
{showNewProject && (
<div className="card">
<div className="card-title">New Project</div>
<div className="card-title">New Client</div>
<form onSubmit={handleCreateProject} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
<div className="form-group" style={{ flex: 1, marginBottom: 0 }}>
<label>Project Name *</label>
<label>Client Name *</label>
<input
type="text"
placeholder="e.g. Brand Identity 2026"
@@ -504,7 +504,7 @@ export default function CompanyDetail() {
)}
{projects.length === 0 ? (
<div className="card card-empty-center">No projects</div>
<div className="card card-empty-center">No clients</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{projects.map(project => {
@@ -513,7 +513,7 @@ export default function CompanyDetail() {
const done = projectTasks.filter(t => t.status === 'client_approved').length;
return (
<div key={project.id} className="interactive-surface" style={{ display: 'flex', alignItems: 'center', background: 'var(--card-bg)', border: 'var(--card-border)', borderRadius: 4, overflow: 'hidden' }}>
<Link to={`/projects/${project.id}`} className="interactive-row" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', textDecoration: 'none', cursor: 'pointer' }}>
<Link to={`/clients/${project.id}`} className="interactive-row" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', textDecoration: 'none', cursor: 'pointer' }}>
<div>
<div style={{ fontWeight: 400, fontSize: 14, color: 'var(--text-primary)' }}>{project.name}</div>
<div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>
@@ -529,7 +529,7 @@ export default function CompanyDetail() {
type="button"
onClick={() => handleDeleteProject(project)}
style={{ background: 'none', border: 'none', borderLeft: '1px solid var(--border)', color: 'var(--danger, var(--danger-strong))', cursor: 'pointer', fontSize: 16, padding: '0 14px', alignSelf: 'stretch', display: 'flex', alignItems: 'center' }}
title="Delete project"
title="Delete client"
>✕</button>}
</div>
);