Import Tripoli Cloud frontend prototype
React/TypeScript/Vite/Tailwind prototype from the design session (login, dashboard, photos, backups, settings views with mocked API layer). Infra work (Rust services, Ansible, OpenTofu) follows in subsequent commits. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
commit
5dbd3b96f6
73 changed files with 4789 additions and 0 deletions
46
app/src/components/dashboard/CreateMenu.tsx
Normal file
46
app/src/components/dashboard/CreateMenu.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { Plus } from 'lucide-react';
|
||||
import { useNavigation } from '../../contexts/NavigationContext';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
import type { IconName } from '../../types';
|
||||
|
||||
const OPTIONS: Array<{ icon: IconName; label: string }> = [
|
||||
{ icon: 'folder-plus', label: 'Nouveau dossier' },
|
||||
{ icon: 'file-pen', label: 'Nouveau document' },
|
||||
{ icon: 'upload', label: 'Importer des fichiers' },
|
||||
];
|
||||
|
||||
export function CreateMenu() {
|
||||
const { createOpen, toggleCreate, closeCreate } = useNavigation();
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleCreate}
|
||||
aria-expanded={createOpen}
|
||||
className="flex items-center gap-2 rounded-xl bg-brand-gradient px-[17px] py-3 text-[13.5px] font-bold text-white shadow-[0_10px_26px_rgba(91,140,255,0.3)] transition-[filter] hover:brightness-110"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2.2} />
|
||||
Créer
|
||||
</button>
|
||||
|
||||
{createOpen && (
|
||||
<div className="animate-tc-in absolute right-0 top-[50px] z-50 w-[232px] rounded-2xl border border-line bg-panel2 p-1.5 shadow-tc backdrop-blur-xl">
|
||||
{OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.label}
|
||||
type="button"
|
||||
onClick={closeCreate}
|
||||
className="flex w-full items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-left text-[13.5px] font-semibold text-ink hover:bg-field"
|
||||
>
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-[9px] bg-selected text-brand-soft">
|
||||
<DataIcon name={opt.icon} size={15} />
|
||||
</span>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
app/src/components/dashboard/DashboardView.tsx
Normal file
38
app/src/components/dashboard/DashboardView.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { useDashboardStats } from '../../hooks/useDashboardStats';
|
||||
import { CreateMenu } from './CreateMenu';
|
||||
import { RecentFiles } from './RecentFiles';
|
||||
import { StatCard } from './StatCard';
|
||||
import { UploadZone } from './UploadZone';
|
||||
|
||||
interface DashboardViewProps {
|
||||
/** Forwarded to UploadZone — undefined lets it run its own demo transfer. */
|
||||
uploadProgress?: number;
|
||||
}
|
||||
|
||||
export function DashboardView({ uploadProgress }: DashboardViewProps) {
|
||||
const stats = useDashboardStats();
|
||||
|
||||
return (
|
||||
<div className="flex max-w-[1240px] flex-col gap-6">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="m-0 mb-[7px] text-[12.5px] font-semibold text-ink-soft">Mercredi 16 septembre</p>
|
||||
<h1 className="m-0 text-[26px] font-extrabold leading-tight tracking-tight sm:text-[36px]">
|
||||
Coffre déverrouillé.
|
||||
</h1>
|
||||
</div>
|
||||
<CreateMenu />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(196px,1fr))] gap-3.5">
|
||||
{stats.map((stat) => (
|
||||
<StatCard key={stat.id} stat={stat} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<UploadZone progress={uploadProgress} />
|
||||
|
||||
<RecentFiles />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
app/src/components/dashboard/FileGridItem.tsx
Normal file
19
app/src/components/dashboard/FileGridItem.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import type { FileItem } from '../../types';
|
||||
|
||||
export function FileGridItem({ file }: { file: FileItem }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-line bg-field p-3.5 transition-colors hover:bg-panel2">
|
||||
<div className="relative h-[88px] overflow-hidden rounded-xl" style={{ background: file.thumbGradient }}>
|
||||
<span className="absolute left-2 top-2 rounded-[7px] bg-black/55 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-white backdrop-blur-sm">
|
||||
{file.extLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="m-0 mb-1 break-words text-[13.5px] font-semibold leading-snug text-ink">{file.name}</p>
|
||||
<p className="m-0 text-[11.5px] text-ink-soft">
|
||||
{file.size} · {file.modified}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
app/src/components/dashboard/FileListRow.tsx
Normal file
15
app/src/components/dashboard/FileListRow.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type { FileItem } from '../../types';
|
||||
|
||||
export function FileListRow({ file }: { file: FileItem }) {
|
||||
return (
|
||||
<div className="flex items-center gap-4 border-b border-line px-4 py-3 transition-colors hover:bg-field sm:px-[18px]">
|
||||
<span className="h-[34px] w-[34px] flex-none rounded-[10px]" style={{ background: file.thumbGradient }} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="m-0 truncate text-[13.5px] font-semibold text-ink">{file.name}</p>
|
||||
<p className="m-0 mt-0.5 text-[11.5px] text-ink-soft">{file.extLabel}</p>
|
||||
</div>
|
||||
<span className="w-[90px] flex-none text-[12.5px] text-ink-soft">{file.size}</span>
|
||||
<span className="w-[120px] flex-none text-[12.5px] text-ink-soft">{file.modified}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
app/src/components/dashboard/RecentFiles.tsx
Normal file
84
app/src/components/dashboard/RecentFiles.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { ArrowUpDown, Grid2x2, List } from 'lucide-react';
|
||||
import { useRecentFiles } from '../../hooks/useRecentFiles';
|
||||
import { FileGridItem } from './FileGridItem';
|
||||
import { FileListRow } from './FileListRow';
|
||||
|
||||
export function RecentFiles() {
|
||||
const { files, filters, filter, setFilter, sortDesc, toggleSort, gridView, setGridView } = useRecentFiles();
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-[18px] border border-line bg-panel backdrop-blur-md">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3.5 border-b border-line px-4 py-4 sm:px-[18px]">
|
||||
<h2 className="m-0 text-base font-bold tracking-tight text-ink">Fichiers récents</h2>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{filters.map((f) => {
|
||||
const active = filter === f;
|
||||
return (
|
||||
<button
|
||||
key={f}
|
||||
type="button"
|
||||
onClick={() => setFilter(f)}
|
||||
className={`rounded-full border px-[13px] py-1.5 text-[12.5px] font-semibold transition-colors ${
|
||||
active ? 'border-brand/40 bg-selected text-brand-soft' : 'border-line bg-field text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleSort}
|
||||
className="flex items-center gap-1.5 rounded-full border border-line bg-field px-[13px] py-1.5 text-[12.5px] font-semibold text-ink"
|
||||
>
|
||||
<ArrowUpDown size={14} strokeWidth={1.8} />
|
||||
{sortDesc ? 'Plus récents' : 'Plus anciens'}
|
||||
</button>
|
||||
<div className="flex gap-0.5 rounded-[11px] border border-line bg-field p-[3px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGridView(true)}
|
||||
aria-label="Vue grille"
|
||||
aria-pressed={gridView}
|
||||
className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
|
||||
gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
<Grid2x2 size={15} strokeWidth={1.9} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGridView(false)}
|
||||
aria-label="Vue liste"
|
||||
aria-pressed={!gridView}
|
||||
className={`flex h-7 w-[30px] items-center justify-center rounded-lg ${
|
||||
!gridView ? 'bg-selected text-brand-soft' : 'text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
<List size={15} strokeWidth={1.9} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gridView ? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(188px,1fr))] gap-3.5 p-[18px]">
|
||||
{files.map((file) => (
|
||||
<FileGridItem key={file.id} file={file} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="flex items-center gap-4 border-b border-line px-4 py-2.5 text-[11.5px] font-bold uppercase tracking-wide text-ink-soft sm:px-[18px]">
|
||||
<span className="flex-1">Nom</span>
|
||||
<span className="w-[90px] flex-none">Taille</span>
|
||||
<span className="w-[120px] flex-none">Modifié</span>
|
||||
</div>
|
||||
{files.map((file) => (
|
||||
<FileListRow key={file.id} file={file} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
app/src/components/dashboard/StatCard.tsx
Normal file
23
app/src/components/dashboard/StatCard.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import type { StatItem } from '../../types';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
|
||||
const TONE_CLASSES: Record<StatItem['tone'], string> = {
|
||||
brand: 'bg-selected text-brand-soft',
|
||||
success: 'bg-success/16 text-success',
|
||||
violet: 'bg-violet/16 text-violet',
|
||||
};
|
||||
|
||||
export function StatCard({ stat }: { stat: StatItem }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-line bg-panel p-[18px] backdrop-blur-md">
|
||||
<div className="mb-3.5 flex items-center justify-between gap-2.5">
|
||||
<span className="text-[12.5px] font-semibold text-ink-soft">{stat.label}</span>
|
||||
<span className={`flex h-7 w-7 items-center justify-center rounded-[9px] ${TONE_CLASSES[stat.tone]}`}>
|
||||
<DataIcon name={stat.icon} size={15} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="m-0 mb-1 text-[27px] font-extrabold tracking-tight text-ink">{stat.value}</p>
|
||||
<p className="m-0 text-xs text-ink-soft">{stat.note}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
app/src/components/dashboard/UploadZone.tsx
Normal file
60
app/src/components/dashboard/UploadZone.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Upload } from 'lucide-react';
|
||||
import { useUploadSimulation } from '../../hooks/useUploadSimulation';
|
||||
import type { UploadTask } from '../../types';
|
||||
|
||||
interface UploadZoneProps {
|
||||
/** Piloted externally once real transfers exist; undefined = simulate locally. */
|
||||
progress?: UploadTask['progress'];
|
||||
}
|
||||
|
||||
export function UploadZone({ progress: externalProgress }: UploadZoneProps) {
|
||||
const { uploading, progress, dragging, start, onDragOver, onDragLeave, onDrop } =
|
||||
useUploadSimulation(externalProgress);
|
||||
|
||||
return (
|
||||
<div
|
||||
onDragOver={onDragOver}
|
||||
onDragLeave={onDragLeave}
|
||||
onDrop={onDrop}
|
||||
onClick={start}
|
||||
className={`cursor-pointer rounded-[18px] border-[1.5px] border-dashed p-6 transition-colors sm:p-[34px] ${
|
||||
dragging ? 'border-brand bg-selected' : 'border-line bg-panel'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-[18px]">
|
||||
<span className="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-2xl border border-brand/30 bg-selected text-brand-soft">
|
||||
<Upload size={22} strokeWidth={2} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1 basis-[260px]">
|
||||
<p className="m-0 mb-[5px] text-[16.5px] font-bold tracking-tight text-ink">
|
||||
{dragging ? 'Relâchez pour importer' : 'Déposez vos fichiers ici'}
|
||||
</p>
|
||||
<p className="m-0 text-[13px] leading-relaxed text-ink-soft">
|
||||
JPEG, RAW, MP4, PDF — jusqu'à 5 Go par fichier. Cliquez pour simuler un transfert.
|
||||
</p>
|
||||
</div>
|
||||
<span className="flex-none rounded-[11px] border border-line bg-field px-4 py-2.5 text-[13px] font-semibold text-ink">
|
||||
Parcourir
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{uploading && (
|
||||
<div className="mt-6 border-t border-line pt-5">
|
||||
<div className="mb-2.5 flex justify-between gap-3 text-[12.5px] font-semibold text-ink">
|
||||
<span>Archives_fiscales_2026.zip</span>
|
||||
<span className="text-brand-soft">{progress} %</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-field">
|
||||
<div
|
||||
className="upload-progress-stripes h-2 rounded-full bg-brand-gradient transition-[width] duration-300 ease-out"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="m-0 mt-2.5 text-xs text-ink-soft">
|
||||
{progress >= 100 ? 'Transfert terminé — fichier chiffré et vérifié.' : 'Chiffrement en cours côté client…'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue