Compare commits

..

No commits in common. "main" and "V7.1" have entirely different histories.
main ... V7.1

16 changed files with 223 additions and 2918 deletions

File diff suppressed because it is too large Load diff

Binary file not shown.

View file

@ -356,17 +356,3 @@ Now we will go now and add metadata
Now we have the metadata along with some great filters on the data board page
Now we are going to implement an an update of a file or folder stored. 12/1/2026
For download there 2 function we need to implement
1) down load the file to ~/user/Downloads, this should work for any file type including pdf
2) if the file is a pdf open the file in another tab in the browser as most browser support reading a pdf
For download there 2 function we need to implement
1) down load the file to ~/user/Downloads, this should work for any file type including pdf
2) if the file is a pdf open the file in another tab in the browser as most browser support reading a pdf
So we need to implement 2 new actions, downLoad file and open pdf to read. Does this make sense ?

Binary file not shown.

View file

@ -1,66 +0,0 @@
// src/app/api/download/route.ts
"use server"
import { NextRequest, NextResponse } from 'next/server';
import { auth } from "@/auth"; // Import the auth function from your central config
import { prisma } from '@/lib/prisma';
export async function GET(request: NextRequest) {
try {
// 1. Check Authentication using the V5 auth() helper
const session = await auth();
// In V5, tokens are usually handled in the session callback
if (!session || !session.accessToken) {
return new NextResponse("Unauthorized - No Access Token found", { status: 401 });
}
// 2. Get parameters from URL
const { searchParams } = new URL(request.url);
const fileNodeId = searchParams.get('id');
const mode = searchParams.get('mode') === 'inline' ? 'inline' : 'attachment';
if (!fileNodeId) {
return new NextResponse("File ID is required", { status: 400 });
}
// 3. Find the file in your Postgres FileNode table
const fileNode = await prisma.fileNode.findUnique({
where: { id: fileNodeId }
});
if (!fileNode || !fileNode.oneDriveId) {
return new NextResponse("File not found in database", { status: 404 });
}
// 4. Fetch the file stream from Microsoft Graph
const graphResponse = await fetch(
`https://graph.microsoft.com/v1.0/me/drive/items/${fileNode.oneDriveId}/content`,
{
headers: {
Authorization: `Bearer ${session.accessToken}`,
},
}
);
if (!graphResponse.ok) {
const errorText = await graphResponse.text();
console.error('MS Graph Error:', errorText);
return new NextResponse(`OneDrive Error: ${graphResponse.statusText}`, { status: graphResponse.status });
}
// 5. Stream the response directly to the client
return new NextResponse(graphResponse.body, {
status: 200,
headers: {
'Content-Type': fileNode.mimeType || 'application/octet-stream',
// Note: Using encodeURIComponent for filename to handle special characters
'Content-Disposition': `${mode}; filename="${encodeURIComponent(fileNode.name)}"`,
},
});
} catch (error) {
console.error('Download error:', error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}

View file

@ -6,7 +6,7 @@ import { revalidatePath } from "next/cache";
import { getFreshAccessToken } from "@/lib/auth-utils";
/**
* 1. FETCH: Get all file nodes for the Dashboard
* 1. FETCH: Get all file nodes
*/
export async function getFileNodes() {
try {
@ -23,94 +23,83 @@ export async function getFileNodes() {
}
/**
* 2. DOWNLOAD: Generates the authenticated OneDrive URL
*/
export async function getDownloadUrlAction(id: string) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
const file = await prisma.fileNode.findUnique({ where: { id } });
if (!file || !file.oneDriveId) throw new Error("File not found or missing cloud ID");
const accessToken = await getFreshAccessToken(session.user.id);
const res = await fetch(
`https://graph.microsoft.com/v1.0/me/drive/items/${file.oneDriveId}`,
{ headers: { Authorization: `Bearer ${accessToken}` } }
);
if (!res.ok) throw new Error("Failed to contact OneDrive");
const data = await res.json();
const downloadUrl = data["@microsoft.graph.downloadUrl"];
if (!downloadUrl) throw new Error("OneDrive did not provide a download link");
return { downloadUrl };
}
/**
* 3. DELETE: Remove from OneDrive (via ID) and Database
* Folders are virtual (DB only), so cloud deletion is skipped if oneDriveId is null.
* 2. DELETE: Remove from OneDrive and Database
* Improved to ensure DB removal even if OneDrive API returns errors.
*/
export async function deleteFileAction(fileId: string) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
// 1. Find the node to check permissions
const node = await prisma.fileNode.findUnique({
where: { id: fileId },
});
if (!node) {
// If not in DB, trigger a refresh anyway to clear the UI
revalidatePath("/dashboard");
return { success: true };
return { success: true, message: "Item already removed from database" };
}
// @ts-ignore
// @ts-ignore - role added via auth callbacks
const isAdmin = session.user.role === "ADMIN";
const isOwner = node.ownerId === session.user.id;
if (!isAdmin && !isOwner) {
throw new Error("Permission Denied.");
throw new Error("Permission Denied: You do not have authority to delete this item.");
}
if (node.isFolder && !isAdmin) {
throw new Error("Security Restriction: Only Administrators can delete folders.");
}
// 2. OneDrive Deletion Attempt
try {
const accessToken = await getFreshAccessToken(session.user.id);
// Only attempt cloud deletion if it's a file/storage with a oneDriveId.
// Virtual folders created in the DB have no oneDriveId and are skipped.
if (accessToken && node.oneDriveId) {
const onedriveRes = await fetch(
`https://graph.microsoft.com/v1.0/me/drive/items/${node.oneDriveId}`,
{
method: "DELETE",
headers: { Authorization: `Bearer ${accessToken}` },
}
);
if (accessToken) {
const rootFolder = "WebCalibre";
// We target the folder on OneDrive by the ID stored in our DB
const onedrivePath = `https://graph.microsoft.com/v1.0/me/drive/root:/${rootFolder}/${node.id}`;
const onedriveRes = await fetch(onedrivePath, {
method: "DELETE",
headers: { Authorization: `Bearer ${accessToken}` },
});
if (!onedriveRes.ok && onedriveRes.status !== 404) {
console.warn("OneDrive Deletion Warning: Cloud record might still exist.");
const errData = await onedriveRes.json().catch(() => ({}));
console.warn("OneDrive Deletion Warning (Cloud record might still exist):", errData);
}
}
} catch (cloudError) {
console.error("Cloud cleanup failed:", cloudError);
// We catch cloud errors but DO NOT throw them, so we can proceed to delete the DB record
console.error("Cloud communication failed, proceeding with DB cleanup:", cloudError);
}
// 3. Database Deletion (The Source of Truth for your UI)
try {
await prisma.fileNode.delete({ where: { id: fileId } });
await prisma.fileNode.delete({
where: { id: fileId }
});
revalidatePath("/dashboard");
revalidatePath("/upload");
return { success: true };
} catch (dbError) {
} catch (dbError: any) {
console.error("Database deletion failed:", dbError);
throw new Error("Failed to remove the record from the database.");
}
}
/**
* 4. MOVE: Assign file to folder or folder to another folder (Virtual Move)
* 3. MOVE: Assign file to folder or folder to another folder
*/
export async function moveNodeAction(nodeId: string, newParentId: string | null) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
if (nodeId === newParentId) throw new Error("Cannot move to self.");
try {
@ -118,69 +107,10 @@ export async function moveNodeAction(nodeId: string, newParentId: string | null)
where: { id: nodeId },
data: { parentId: newParentId }
});
revalidatePath("/dashboard");
return { success: true };
} catch (error) {
throw new Error("Move failed.");
}
}
/**
* 5. UPDATE & REPLACE: Full update of metadata and OneDrive content
*/
export async function updateFileFullAction(formData: FormData) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
const id = formData.get("id") as string;
const name = formData.get("name") as string;
const description = formData.get("description") as string;
const parentIdRaw = formData.get("parentId") as string;
const metadataStr = formData.get("metadata") as string;
const newFile = formData.get("file") as File | null;
const parentId = parentIdRaw === "root" ? null : parentIdRaw;
let metadata = JSON.parse(metadataStr);
try {
const accessToken = await getFreshAccessToken(session.user.id);
const node = await prisma.fileNode.findUnique({ where: { id } });
// Update physical file content only if a new file is uploaded and we have a target oneDriveId
if (newFile && newFile.size > 0 && node?.oneDriveId) {
const onedrivePath = `https://graph.microsoft.com/v1.0/me/drive/items/${node.oneDriveId}/content`;
const uploadRes = await fetch(onedrivePath, {
method: "PUT",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": newFile.type
},
body: Buffer.from(await newFile.arrayBuffer()),
});
if (!uploadRes.ok) throw new Error("OneDrive content update failed");
metadata.type = newFile.name.split('.').pop()?.toUpperCase() || 'UNKNOWN';
metadata.mimeType = newFile.type;
}
await prisma.fileNode.update({
where: { id },
data: {
name,
description,
parentId,
metadata,
size: newFile ? BigInt(newFile.size) : undefined,
updatedAt: new Date(),
}
});
revalidatePath("/dashboard");
return { success: true };
} catch (error: any) {
console.error("Full Update Failure:", error);
throw new Error(error.message || "Failed to update record.");
}
}

View file

@ -1,19 +1,8 @@
'use client';
// src/app/dashboard/dashboard-view.tsx
"use client";
import { useState } from "react";
import {
Button,
CircularProgress,
Box,
Chip,
IconButton,
Typography,
Stack,
TextField,
InputAdornment,
Tooltip
Button, CircularProgress, Box, Chip, IconButton, Tooltip, Typography, Stack, TextField, InputAdornment
} from "@mui/material";
import {
DataGrid,
@ -28,12 +17,9 @@ import RefreshIcon from "@mui/icons-material/Refresh";
import FolderIcon from "@mui/icons-material/Folder";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import SearchIcon from '@mui/icons-material/Search';
import CancelIcon from '@mui/icons-material/Cancel';
import DownloadIcon from '@mui/icons-material/Download';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { syncOneDrive } from "./sync-actions";
import { deleteFileAction } from "./actions";
import { useRouter } from "next/navigation";
@ -44,6 +30,7 @@ function CustomToolbar() {
<Typography variant="h6" fontWeight="bold" color="primary">
Library
</Typography>
<QuickFilter sx={{ display: 'flex', alignItems: 'center' }}>
<QuickFilterControl
render={({ ref, ...controlProps }, state) => (
@ -128,17 +115,6 @@ export default function DashboardView({ initialFiles, user }: DashboardViewProps
}
};
// --- NEW DOWNLOAD FUNCTIONS ---
const handleDownload = (id: string) => {
// Triggers local folder download via Content-Disposition: attachment
window.location.href = `/api/download?id=${id}&mode=attachment`;
};
const handleViewInTab = (id: string) => {
// Opens in a new tab via Content-Disposition: inline
window.open(`/api/download?id=${id}&mode=inline`, '_blank');
};
const columns: GridColDef[] = [
{
field: "name",
@ -163,7 +139,10 @@ export default function DashboardView({ initialFiles, user }: DashboardViewProps
field: "type",
headerName: "Type",
width: 120,
valueGetter: (value, row) => row.metadata?.type || (row.isFolder ? "Folder" : "File"),
// Fixed: Pulling type from metadata since it's not a top-level property
valueGetter: (value, row) => {
return row.metadata?.type || (row.isFolder ? "Folder" : "File");
},
renderCell: (params) => (
<Typography variant="caption" sx={{ textTransform: 'uppercase', fontWeight: 'bold', color: 'text.secondary' }}>
{params.value}
@ -173,60 +152,21 @@ export default function DashboardView({ initialFiles, user }: DashboardViewProps
{
field: "size",
headerName: "Size",
width: 100,
width: 120,
renderCell: (params) => params.row.isFolder ? "--" : `${(Number(params.value) / 1024 / 1024).toFixed(2)} MB`
},
{
field: "actions",
headerName: "Actions",
width: 180, // Increased width to accommodate new buttons
width: 100,
align: 'right',
renderCell: (params) => {
const isOwner = params.row.ownerId === user?.id;
const isFolder = params.row.isFolder;
return (
<Stack direction="row" spacing={0.5} justifyContent="flex-end">
{!isFolder && (
<>
<Tooltip title="View in Tab">
<IconButton size="small" color="info" onClick={() => handleViewInTab(params.row.id)}>
<OpenInNewIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Download to Folder">
<IconButton size="small" color="success" onClick={() => handleDownload(params.row.id)}>
<DownloadIcon fontSize="small" />
</IconButton>
</Tooltip>
</>
)}
{(isAdmin || isOwner) && (
<>
<Tooltip title="Edit Details">
<IconButton
size="small"
color="primary"
onClick={() => router.push(`/update/${params.row.id}`)}
>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
size="small"
color="error"
onClick={() => handleDelete(params.row.id, params.row.name)}
>
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>
</>
)}
</Stack>
);
}
renderCell: (params) => (
(isAdmin || params.row.ownerId === user?.id) && (
<IconButton size="small" color="error" onClick={() => handleDelete(params.row.id, params.row.name)}>
<DeleteIcon fontSize="small" />
</IconButton>
)
)
},
{
field: "metadata_search",

View file

@ -1,4 +1,5 @@
'use server';
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";
@ -6,37 +7,64 @@ import { getFreshAccessToken } from "@/lib/auth-utils";
export async function syncOneDrive() {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
try {
const accessToken = await getFreshAccessToken(session.user.id);
if (!accessToken) {
throw new Error("Microsoft account not linked properly or session expired.");
}
const response = await fetch("https://graph.microsoft.com/v1.0/me/drive/root:/WebCalibre:/children", {
headers: { Authorization: `Bearer ${accessToken}` },
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json"
},
});
if (!response.ok) return { success: true, count: 0 };
if (!response.ok) {
const errorData = await response.json();
if (response.status === 404) {
return { success: true, count: 0 };
}
throw new Error(errorData.error?.message || "Failed to fetch data from OneDrive");
}
const data = await response.json();
let syncedCount = 0;
// Regular expression to identify if a string is a UUID
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
for (const item of data.value) {
const isFolder = !!item.folder;
// Only skip if it's a folder AND it's a UUID (storage container)
// If a user named a file with a UUID, we still want it.
/**
* FILTER: If the item is a folder and the name is a UUID, skip it.
* These are storage containers created by the upload action, not user-facing folders.
*/
if (isFolder && uuidRegex.test(item.name)) {
continue;
}
const extension = isFolder ? 'FOLDER' : (item.name.split('.').pop()?.toUpperCase() || 'UNKNOWN');
const extension = isFolder
? 'FOLDER'
: (item.name.split('.').pop()?.toUpperCase() || 'UNKNOWN');
const fileSize = item.size ? BigInt(item.size) : BigInt(0);
await prisma.fileNode.upsert({
where: { oneDriveId: item.id }, // Primary match
where: { oneDriveId: item.id },
update: {
name: item.name,
size: BigInt(item.size || 0),
size: fileSize,
isFolder: isFolder,
metadata: {
type: extension,
mimeType: item.file?.mimeType || null
},
path: item.parentReference?.path + '/' + item.name,
updatedAt: new Date(),
},
@ -44,11 +72,14 @@ export async function syncOneDrive() {
id: crypto.randomUUID(),
oneDriveId: item.id,
name: item.name,
size: BigInt(item.size || 0),
size: fileSize,
isFolder: isFolder,
path: item.parentReference?.path + '/' + item.name,
ownerId: session.user.id,
metadata: { type: extension, mimeType: item.file?.mimeType || null },
metadata: {
type: extension,
mimeType: item.file?.mimeType || null
},
}
});
syncedCount++;
@ -56,7 +87,9 @@ export async function syncOneDrive() {
revalidatePath('/dashboard');
return { success: true, count: syncedCount };
} catch (error: any) {
throw new Error(error.message);
console.error("Sync Process Failure:", error.message);
throw new Error(error.message || "An unexpected error occurred during sync.");
}
}

View file

@ -0,0 +1,69 @@
"use client";
import { useState } from "react";
import { Box, Button, Typography, Paper, LinearProgress, Container } from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import { uploadFileAction } from "../upload-actions";
export default function UploadPage() {
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
const handleUpload = async () => {
if (!file) return;
setLoading(true);
const formData = new FormData();
formData.append("file", file);
try {
await uploadFileAction(formData);
alert("Book added to WebCalibre!");
setFile(null);
} catch (err) {
alert("Upload failed. Check console.");
} finally {
setLoading(false);
}
};
return (
<Container maxWidth="sm" sx={{ mt: 8 }}>
<Paper elevation={3} sx={{ p: 4, textAlign: 'center', borderRadius: 4 }}>
<Typography variant="h5" gutterBottom fontWeight="bold">
Upload to Library
</Typography>
<Typography color="textSecondary" mb={4}>
Files will be saved in your OneDrive "WebCalibre" folder.
</Typography>
<Box sx={{ border: '2px dashed #ccc', p: 4, mb: 3, borderRadius: 2 }}>
<input
accept=".pdf,.epub,.mobi,.txt"
style={{ display: 'none' }}
id="file-input"
type="file"
onChange={(e) => setFile(e.target.files?.[0] || null)}
/>
<label htmlFor="file-input">
<Button variant="outlined" component="span" startIcon={<CloudUploadIcon />}>
{file ? file.name : "Choose Book File"}
</Button>
</label>
</Box>
{loading && <LinearProgress sx={{ mb: 2 }} />}
<Button
variant="contained"
fullWidth
size="large"
disabled={!file || loading}
onClick={handleUpload}
>
{loading ? "Uploading..." : "Start Upload"}
</Button>
</Paper>
</Container>
);
}

View file

@ -1,49 +0,0 @@
'use server';
//src/app/update/[id]/_actions.ts
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";
export async function updateFileAction(formData: FormData) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
const id = formData.get("id") as string;
const name = formData.get("name") as string;
const description = formData.get("description") as string;
const parentIdRaw = formData.get("parentId") as string;
const customMetadataRaw = formData.get("customMetadata") as string;
const parentId = (parentIdRaw === "" || parentIdRaw === "root") ? null : parentIdRaw;
const customMetadata = customMetadataRaw ? JSON.parse(customMetadataRaw) : {};
try {
// 1. Get existing record to preserve system metadata (like mimeType)
const existing = await prisma.fileNode.findUnique({ where: { id } });
const existingMetadata = (existing?.metadata as Record<string, any>) || {};
// 2. Update the record
await prisma.fileNode.update({
where: { id },
data: {
name,
description,
parentId,
metadata: {
...customMetadata, // User's new keys
type: name.split('.').pop()?.toUpperCase() || existingMetadata.type || "FILE",
mimeType: existingMetadata.mimeType // Preserve the original mimeType
}
}
});
revalidatePath("/dashboard");
revalidatePath(`/update/${id}`);
return { success: true };
} catch (error: any) {
console.error("Update error:", error);
return { success: false, message: error.message };
}
}

View file

@ -1,34 +0,0 @@
import { auth } from "@/auth";
import { redirect, notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { Container } from "@mui/material";
import UpdateView from "./update-view";
// Note: params is now handled as a Promise
export default async function UpdatePage({ params }: { params: Promise<{ id: string }> }) {
const session = await auth();
if (!session) redirect("/");
// 1. Await the params to get the actual ID
const { id } = await params;
// 2. Fetch the specific file using the awaited ID
const fileNode = await prisma.fileNode.findUnique({
where: { id: id }
});
if (!fileNode) notFound();
// Fetch folders for the destination dropdown
const folders = await prisma.fileNode.findMany({
where: { isFolder: true },
orderBy: { name: 'asc' },
select: { id: true, name: true }
});
return (
<Container maxWidth="md" sx={{ py: 8 }}>
<UpdateView fileNode={fileNode} folders={folders} />
</Container>
);
}

View file

@ -1,171 +0,0 @@
'use client';
import { useState } from "react";
import {
Box, Button, Typography, Paper, Stack,
TextField, MenuItem, IconButton, Grid, Divider
} from "@mui/material";
import SaveIcon from "@mui/icons-material/Save";
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import AssignmentIcon from '@mui/icons-material/Assignment';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import FolderIcon from "@mui/icons-material/Folder";
import { useRouter } from "next/navigation";
import { updateFileAction } from "./_actions";
interface MetadataPair {
key: string;
value: string;
}
export default function UpdateView({ fileNode, folders }: any) {
const router = useRouter();
const [loading, setLoading] = useState(false);
// 1. Initialize Basic Info
const [name, setName] = useState(fileNode.name);
const [description, setDescription] = useState(fileNode.description || "");
const [parentId, setParentId] = useState(fileNode.parentId || "");
// 2. Parse existing JSON metadata into Key/Value array for the UI
// We filter out 'type' and 'mimeType' as they are system-managed
const initialMetadata = Object.entries(fileNode.metadata || {})
.filter(([key]) => !['type', 'mimeType'].includes(key))
.map(([key, value]) => ({ key, value: String(value) }));
const [customMetadata, setCustomMetadata] = useState<MetadataPair[]>(initialMetadata);
const handleUpdate = async () => {
setLoading(true);
const formData = new FormData();
formData.append("id", fileNode.id);
formData.append("name", name);
formData.append("description", description);
formData.append("parentId", parentId);
// Convert array back to object for storage
const metadataObj = customMetadata.reduce((acc, curr) => {
if (curr.key.trim()) acc[curr.key.trim()] = curr.value;
return acc;
}, {} as Record<string, string>);
formData.append("customMetadata", JSON.stringify(metadataObj));
const res = await updateFileAction(formData);
if (res.success) {
router.push("/dashboard");
router.refresh();
} else {
alert("Update failed");
setLoading(false);
}
};
return (
<Paper sx={{ p: { xs: 3, md: 6 }, borderRadius: 4 }} elevation={3}>
<Button startIcon={<ArrowBackIcon />} onClick={() => router.back()} sx={{ mb: 2 }}>
Back
</Button>
<Typography variant="h4" fontWeight={900} color="primary" gutterBottom>
Edit File Details
</Typography>
<Stack spacing={4} sx={{ mt: 2 }}>
{/* Name Field */}
<TextField
label="File Name"
fullWidth value={name}
onChange={(e) => setName(e.target.value)}
slotProps={{ inputLabel: { shrink: true } }}
/>
{/* Folder Select */}
<TextField
id="update-dest-select"
select fullWidth label="Destination Folder"
value={parentId}
onChange={(e) => setParentId(e.target.value)}
slotProps={{
select: { displayEmpty: true },
inputLabel: { shrink: true }
}}
>
<MenuItem value=""><em>-- Root --</em></MenuItem>
{folders.map((f: any) => (
<MenuItem key={f.id} value={f.id}>{f.name}</MenuItem>
))}
</TextField>
{/* Custom Metadata Section */}
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6" fontWeight="700" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<AssignmentIcon color="primary" /> Custom Attributes
</Typography>
<Button
startIcon={<AddCircleOutlineIcon />}
size="small"
onClick={() => setCustomMetadata([...customMetadata, { key: "", value: "" }])}
>
Add Field
</Button>
</Box>
<Stack spacing={2}>
{customMetadata.map((row, index) => (
<Grid container spacing={1} key={index} alignItems="center">
<Grid item xs={5}>
<TextField
fullWidth size="small" placeholder="Key"
value={row.key}
onChange={(e) => {
const updated = [...customMetadata];
updated[index].key = e.target.value;
setCustomMetadata(updated);
}}
/>
</Grid>
<Grid item xs={6}>
<TextField
fullWidth size="small" placeholder="Value"
value={row.value}
onChange={(e) => {
const updated = [...customMetadata];
updated[index].value = e.target.value;
setCustomMetadata(updated);
}}
/>
</Grid>
<Grid item xs={1}>
<IconButton color="error" onClick={() => setCustomMetadata(customMetadata.filter((_, i) => i !== index))}>
<DeleteOutlineIcon />
</IconButton>
</Grid>
</Grid>
))}
</Stack>
</Box>
<TextField
label="Description"
multiline rows={4} fullWidth
value={description}
onChange={(e) => setDescription(e.target.value)}
slotProps={{ inputLabel: { shrink: true } }}
/>
<Button
variant="contained" size="large" fullWidth
startIcon={<SaveIcon />}
onClick={handleUpdate}
disabled={loading}
sx={{ py: 1.5, fontWeight: 'bold' }}
>
{loading ? "Saving..." : "Save Changes"}
</Button>
</Stack>
</Paper>
);
}

View file

@ -5,55 +5,17 @@ import { getFreshAccessToken } from "@/lib/auth-utils";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";
/**
* 1. CREATE FOLDER: Virtual Only
* Logic: User-created organizational folders exist ONLY in the database.
* No call to OneDrive is made here.
*/
export async function createFolderAction(name: string, parentId?: string | null) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
// createFolderAction remains the same...
try {
const internalId = crypto.randomUUID();
const newNode = await prisma.fileNode.create({
data: {
id: internalId,
oneDriveId: null, // Virtual folders do not have a cloud ID
name: name,
isFolder: true,
path: `virtual:/${name}`,
ownerId: session.user.id,
parentId: parentId || null,
metadata: { type: "FOLDER" }
}
});
revalidatePath("/upload");
revalidatePath("/dashboard");
return { success: true, node: newNode };
} catch (error: any) {
console.error("Folder creation error:", error);
throw new Error(error.message || "Failed to create virtual folder");
}
}
/**
* 2. UPLOAD FILE: Physical Container
* Logic: Creates a physical folder (UUID) on OneDrive to hold the file.
* This ensures every file has a unique storage space in the cloud.
*/
export async function uploadFileAction(formData: FormData) {
const session = await auth();
if (!session?.user?.id) throw new Error("Unauthorized");
const file = formData.get("file") as File;
const description = formData.get("description") as string || "";
const parentIdRaw = formData.get("parentId") as string | null;
const parentId = (parentIdRaw === "" || parentIdRaw === "root") ? null : parentIdRaw;
const parentId = formData.get("parentId") as string | null;
// Parse the dynamic metadata from the client
const customMetadataRaw = formData.get("customMetadata") as string;
const customMetadata = customMetadataRaw ? JSON.parse(customMetadataRaw) : {};
@ -61,75 +23,54 @@ export async function uploadFileAction(formData: FormData) {
const accessToken = await getFreshAccessToken(session.user.id);
const rootFolder = "WebCalibre";
const internalId = crypto.randomUUID(); // This UUID will be the OneDrive folder name
const internalId = crypto.randomUUID();
// 1. Create the Physical Storage Folder on OneDrive
// 1. Create OneDrive Storage Folder
const createSubFolderRes = await fetch(`https://graph.microsoft.com/v1.0/me/drive/root:/${rootFolder}:/children`, {
method: "POST",
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
name: internalId,
folder: {},
"@microsoft.graph.conflictBehavior": "fail"
})
headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" },
body: JSON.stringify({ name: internalId, folder: {} })
});
if (!createSubFolderRes.ok) {
const errorData = await createSubFolderRes.json();
throw new Error(errorData.error?.message || "Storage directory creation failed");
}
if (!createSubFolderRes.ok) throw new Error("Storage directory creation failed");
const subFolderData = await createSubFolderRes.json();
// 2. Create Upload Session inside the new Physical Folder
// 2. Upload Session & File Transfer (Existing logic is fine)
const sessionUrl = `https://graph.microsoft.com/v1.0/me/drive/items/${subFolderData.id}:/${encodeURIComponent(file.name)}:/createUploadSession`;
const sessionRes = await fetch(sessionUrl, {
method: "POST",
headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" },
body: JSON.stringify({ item: { "@microsoft.graph.conflictBehavior": "replace" } })
});
const { uploadUrl } = await sessionRes.json();
const buffer = Buffer.from(await file.arrayBuffer());
// 3. PUT the file binary
const uploadRes = await fetch(uploadUrl, {
await fetch(uploadUrl, {
method: "PUT",
headers: {
"Content-Length": `${file.size}`,
"Content-Range": `bytes 0-${file.size - 1}/${file.size}`
},
headers: { "Content-Length": `${file.size}`, "Content-Range": `bytes 0-${file.size - 1}/${file.size}` },
body: buffer
});
const uploadedFileData = await uploadRes.json();
const oneDriveId = uploadedFileData.id;
// 3. Final Database Record with Merged Metadata
const extension = file.name.split('.').pop()?.toUpperCase() || "UNKNOWN";
// 4. Create record in Database
// Link it to the VIRTUAL folder via parentId
await prisma.fileNode.create({
data: {
id: internalId,
oneDriveId: oneDriveId,
name: file.name,
description: description,
size: BigInt(file.size),
isFolder: false,
path: `/${rootFolder}/${internalId}/${file.name}`,
ownerId: session.user.id,
parentId: parentId,
parentId: parentId || null,
metadata: {
...customMetadata,
type: extension,
...customMetadata, // User's dynamic keys (Latitude, Author, etc.)
type: extension, // System keys (preserved for UI icons)
mimeType: file.type
}
}
});
revalidatePath("/dashboard");
revalidatePath("/upload");
return { success: true };
}

View file

@ -1,20 +1,28 @@
'use client';
import { useState, useRef } from "react";
import { useState } from "react";
import {
Box, Button, Typography, Paper, Stack,
TextField, MenuItem, IconButton, Divider,
Grid, CircularProgress
Box, Button, Typography, Paper, LinearProgress, Stack,
TextField, MenuItem, IconButton, Tooltip, Divider,
Grid
} from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import FolderIcon from "@mui/icons-material/Folder";
import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
import FolderIcon from "@mui/icons-material/Folder";
import AssignmentIcon from '@mui/icons-material/Assignment';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import { useRouter } from "next/navigation";
import { uploadFileAction, createFolderAction } from "./_actions";
const formatFileSize = (bytes: number) => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
interface MetadataPair {
key: string;
value: string;
@ -22,37 +30,19 @@ interface MetadataPair {
export default function UploadView({ user, folders = [] }: any) {
const router = useRouter();
const fileInputRef = useRef<HTMLInputElement>(null);
const [file, setFile] = useState<File | null>(null);
const [description, setDescription] = useState("");
const [parentId, setParentId] = useState("");
const [status, setStatus] = useState<'idle' | 'uploading' | 'success'>('idle');
// Dynamic Metadata State
const [customMetadata, setCustomMetadata] = useState<MetadataPair[]>([]);
// Folder Creation State
const [showFolderInput, setShowFolderInput] = useState(false);
const [newFolderName, setNewFolderName] = useState("");
const [isCreatingFolder, setIsCreatingFolder] = useState(false);
const handleCreateFolder = async () => {
if (!newFolderName.trim()) return;
setIsCreatingFolder(true);
try {
// FIX: Pass the current parentId to the action so it nests correctly
const result = await createFolderAction(newFolderName, parentId);
if (result.success) {
setNewFolderName("");
setShowFolderInput(false);
router.refresh();
}
} catch (err: any) {
alert(err.message || "Failed to create folder");
} finally {
setIsCreatingFolder(false);
}
};
const addMetadataRow = () => setCustomMetadata([...customMetadata, { key: "", value: "" }]);
const removeMetadataRow = (index: number) => {
@ -74,6 +64,7 @@ export default function UploadView({ user, folders = [] }: any) {
formData.append("description", description);
formData.append("parentId", parentId);
// Pass custom metadata as a JSON string
const metadataObj = customMetadata.reduce((acc, curr) => {
if (curr.key.trim()) acc[curr.key.trim()] = curr.value;
return acc;
@ -88,7 +79,6 @@ export default function UploadView({ user, folders = [] }: any) {
setFile(null);
setDescription("");
setCustomMetadata([]);
router.push("/dashboard");
router.refresh();
}
} catch (err) {
@ -104,97 +94,42 @@ export default function UploadView({ user, folders = [] }: any) {
</Typography>
<Stack spacing={4} sx={{ mt: 4 }}>
{/* 1. Destination */}
{/* Section 1: Destination (Condensed for brevity, same as your original) */}
<Box>
<Typography variant="h6" gutterBottom fontWeight="700" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<FolderIcon color="primary" /> 1. Destination
</Typography>
<Stack direction="row" spacing={1}>
<TextField
id="project-destination-select"
select
fullWidth
label="Target Project / Folder"
select fullWidth label="Target Project / Folder"
value={parentId}
onChange={(e) => setParentId(e.target.value)}
size="small"
slotProps={{
select: { displayEmpty: true },
inputLabel: { shrink: true },
}}
>
<MenuItem value=""><em>-- Root (Main Folder) --</em></MenuItem>
<MenuItem value=""><em>-- Root --</em></MenuItem>
{folders.map((f: any) => (
<MenuItem key={f.id} value={f.id}>{f.name}</MenuItem>
))}
</TextField>
<IconButton
color="primary"
onClick={() => setShowFolderInput(!showFolderInput)}
sx={{ border: '1px solid #ccc', borderRadius: 1 }}
>
<IconButton color="primary" onClick={() => setShowFolderInput(!showFolderInput)} sx={{ border: '1px solid #ccc', borderRadius: 1 }}>
<CreateNewFolderIcon />
</IconButton>
</Stack>
{showFolderInput && (
<Box sx={{ mt: 2, p: 2, bgcolor: '#f8f9fa', borderRadius: 2 }}>
<Typography variant="subtitle2" gutterBottom>
{parentId ? `Create inside current selection` : `Create at Root`}
</Typography>
<Stack direction="row" spacing={1}>
<TextField
fullWidth size="small" placeholder="Folder Name (e.g. Project-2)"
value={newFolderName}
onChange={(e) => setNewFolderName(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleCreateFolder()}
/>
<Button
variant="contained"
onClick={handleCreateFolder}
disabled={isCreatingFolder || !newFolderName}
>
{isCreatingFolder ? <CircularProgress size={24} /> : "Create"}
</Button>
</Stack>
</Box>
)}
</Box>
{/* 2. Upload Area */}
{/* Section 2: Upload Area */}
<Box>
<Typography variant="h6" gutterBottom fontWeight="700" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant="h6" gutterBottom fontWeight="700" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CloudUploadIcon color="primary" /> 2. Upload File
</Typography>
<input
type="file"
ref={fileInputRef}
style={{ display: 'none' }}
onChange={(e) => setFile(e.target.files?.[0] || null)}
/>
<Button
variant="outlined"
fullWidth
sx={{ p: 4, borderStyle: 'dashed', textTransform: 'none' }}
onClick={() => fileInputRef.current?.click()}
>
{file ? (
<Box>
<Typography color="success.main" fontWeight="bold"> {file.name}</Typography>
<Typography variant="caption" color="text.secondary">
Click to change file ({(file.size / 1024 / 1024).toFixed(2)} MB)
</Typography>
</Box>
) : (
"Click to Select File"
)}
</Button>
<input type="file" id="file-input" hidden onChange={(e) => setFile(e.target.files?.[0] || null)} />
<label htmlFor="file-input">
<Button variant="outlined" component="span" fullWidth sx={{ p: 4, borderStyle: 'dashed' }}>
{file ? file.name : "Select File"}
</Button>
</label>
</Box>
{/* 3. Custom Attributes */}
{/* Section 3: Dynamic Metadata Area */}
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
<Typography variant="h6" fontWeight="700" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@ -205,12 +140,16 @@ export default function UploadView({ user, folders = [] }: any) {
</Button>
</Box>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
Add specific details like Author, Latitude, Aperture, or Part Number.
</Typography>
<Stack spacing={2}>
{customMetadata.map((row, index) => (
<Grid container spacing={1} key={index} alignItems="center">
<Grid item xs={5}>
<TextField
fullWidth size="small" placeholder="Key (e.g. Project-ID)"
fullWidth size="small" placeholder="Key (e.g. Latitude)"
value={row.key} onChange={(e) => updateMetadataRow(index, 'key', e.target.value)}
/>
</Grid>
@ -241,9 +180,8 @@ export default function UploadView({ user, folders = [] }: any) {
variant="contained" size="large" fullWidth
disabled={!file || status === 'uploading'}
onClick={handleUpload}
sx={{ py: 2, fontWeight: 'bold' }}
>
{status === 'uploading' ? 'Uploading to OneDrive...' : 'Start Upload'}
{status === 'uploading' ? 'Processing...' : 'Add to Library'}
</Button>
</Stack>
</Paper>

View file

@ -1,4 +1,3 @@
// src/auth.ts
import NextAuth from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/lib/prisma";
@ -11,7 +10,6 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
callbacks: {
async jwt({ token, account, user }) {
// 1. Handle OAuth tokens (from first sign-in)
// This captures the tokens directly from the Microsoft Azure response
if (account) {
token.accessToken = account.access_token;
token.refreshToken = account.refresh_token;
@ -19,10 +17,10 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
}
// 2. Attach User ID and Role to the token
// This runs when the user first logs in
// When 'user' exists, it's the first time we've fetched this user from the DB during login
if (user) {
token.sub = user.id;
// @ts-ignore - 'role' is a custom field in your Postgres User table
// @ts-ignore - 'role' exists on our custom User model
token.role = user.role;
}
@ -31,16 +29,10 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
async session({ session, token }) {
// 3. Pass values from the JWT Token into the Client-facing Session
// This makes the tokens and IDs available to your API routes and Components
if (session?.user) {
session.user.id = token.sub as string;
// @ts-ignore - Attaching the role for UI permissions
session.user.role = token.role as string;
// IMPORTANT: We must attach the accessToken here so the
// /api/download route can use it to fetch from MS Graph
session.accessToken = token.accessToken as string;
if (session?.user && token.sub) {
session.user.id = token.sub;
// @ts-ignore - Attaching the role so the Navbar and Settings page can see it
session.user.role = token.role;
}
return session;
},

View file

@ -1,24 +0,0 @@
// src/types/next-auth.d.ts
import NextAuth, { DefaultSession } from "next-auth"
import { JWT } from "next-auth/jwt"
declare module "next-auth" {
/**
* Returned by `useSession`, `auth`, and received as a prop on the `SessionProvider` React Context
*/
interface Session {
accessToken?: string;
user: {
id: string;
role?: string;
} & DefaultSession["user"]
}
}
declare module "next-auth/jwt" {
/** Returned by the `jwt` callback and `getToken`, when using JWT sessions */
interface JWT {
accessToken?: string;
role?: string;
}
}