Miran
/
reya-render
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small tweaks

Browse Source
main
miranshala 7 months ago
parent 203295aab6
commit 3b56fffa57
3 changed files with 161 additions and 106 deletions
Show Stats Download Patch File Download Diff File

58
app/page.tsx
Unescape View File

@ -209,12 +209,12 @@ export default function Home() {
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56"> <DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem asChild> <DropdownMenuItem asChild className="md:hidden">
<a href="/contact" className="cursor-pointer"> <a href="/contact" className="cursor-pointer">
Contact Contact
</a> </a>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild className="md:hidden">
<a <a
href="#pricing" href="#pricing"
onClick={(e) => { onClick={(e) => {
@ -232,12 +232,12 @@ export default function Home() {
Pricing Pricing
</a> </a>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild className="md:hidden">
<a href="/upload" className="cursor-pointer"> <a href="/upload" className="cursor-pointer">
Upload File Upload File
</a> </a>
</DropdownMenuItem> </DropdownMenuItem>
<div className="border-t border-gray-200 my-1" /> <div className="border-t border-gray-200 my-1 md:hidden" />
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<a href="/subscriptions" className="cursor-pointer"> <a href="/subscriptions" className="cursor-pointer">
My Subscriptions My Subscriptions
@ -357,13 +357,14 @@ export default function Home() {
)} )}
{/* Main Content */} {/* Main Content */}
<div className="flex items-center justify-center min-h-screen"> <div className="flex items-center justify-center min-h-screen -mt-4 md:mt-0">
<div <div
className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative" className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative mt-2 md:mt-5"
style={{ style={{
backgroundColor: "#FF580F", backgroundColor: "#FF580F",
margin: "20px", marginLeft: "20px",
marginTop: "5px", marginRight: "20px",
marginBottom: "20px",
}} }}
> >
<div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0"> <div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0">
@ -425,7 +426,7 @@ export default function Home() {
userSubscription && userSubscription &&
userSubscription.status === "ACTIVE" && ( userSubscription.status === "ACTIVE" && (
<div className="flex justify-center mt-8"> <div className="flex justify-center mt-8">
<div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl"> <div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl mx-5 md:mx-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-green-800 font-semibold text-lg mb-1"> <p className="text-green-800 font-semibold text-lg mb-1">
@ -448,20 +449,23 @@ export default function Home() {
)} )}
{/* Pricing Section */} {/* Pricing Section */}
<div id="pricing" className="flex justify-center mt-16 mb-16"> <div
id="pricing"
className="flex justify-center mt-8 sm:mt-16 mb-16 sm:mb-16 pb-20 sm:pb-16"
>
<div className="w-[90%]"> <div className="w-[90%]">
<h2 className="text-4xl font-bold text-center mb-12 text-gray-800"> <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 sm:mb-12 text-gray-800">
Available Plans Available Plans
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
{/* Basic Plan */} {/* Basic Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer"> <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2"> <div className="text-2xl font-bold text-orange-500 mb-2">
Basic Basic
</div> </div>
<div className="text-4xl font-bold text-orange-500 mb-8"> <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€9.99{" "} €9.99{" "}
<span className="text-lg font-normal text-gray-500"> <span className="text-base sm:text-lg font-normal text-gray-500">
/month /month
</span> </span>
</div> </div>
@ -471,7 +475,7 @@ export default function Home() {
loading || loading ||
(userSubscription && userSubscription.status === "ACTIVE") (userSubscription && userSubscription.status === "ACTIVE")
} }
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
> >
{loading {loading
? "Processing..." ? "Processing..."
@ -479,7 +483,7 @@ export default function Home() {
? "Current Plan" ? "Current Plan"
: "Choose Basic"} : "Choose Basic"}
</button> </button>
<ul className="text-left space-y-3"> <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center"> <li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span> <span className="text-green-500 font-bold mr-3">✓</span>
250 GB storage 250 GB storage
@ -504,13 +508,13 @@ export default function Home() {
</div> </div>
{/* Standard Plan */} {/* Standard Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer"> <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2"> <div className="text-2xl font-bold text-orange-500 mb-2">
Standard Standard
</div> </div>
<div className="text-4xl font-bold text-orange-500 mb-8"> <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€19.99{" "} €19.99{" "}
<span className="text-lg font-normal text-gray-500"> <span className="text-base sm:text-lg font-normal text-gray-500">
/month /month
</span> </span>
</div> </div>
@ -520,7 +524,7 @@ export default function Home() {
loading || loading ||
(userSubscription && userSubscription.status === "ACTIVE") (userSubscription && userSubscription.status === "ACTIVE")
} }
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
> >
{loading {loading
? "Processing..." ? "Processing..."
@ -528,7 +532,7 @@ export default function Home() {
? "Current Plan" ? "Current Plan"
: "Choose Standard"} : "Choose Standard"}
</button> </button>
<ul className="text-left space-y-3"> <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center"> <li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span> <span className="text-green-500 font-bold mr-3">✓</span>
500 GB storage 500 GB storage
@ -561,13 +565,13 @@ export default function Home() {
</div> </div>
{/* Premium Plan */} {/* Premium Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer"> <div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2"> <div className="text-2xl font-bold text-orange-500 mb-2">
Premium Premium
</div> </div>
<div className="text-4xl font-bold text-orange-500 mb-8"> <div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€39.99{" "} €39.99{" "}
<span className="text-lg font-normal text-gray-500"> <span className="text-base sm:text-lg font-normal text-gray-500">
/month /month
</span> </span>
</div> </div>
@ -577,7 +581,7 @@ export default function Home() {
loading || loading ||
(userSubscription && userSubscription.status === "ACTIVE") (userSubscription && userSubscription.status === "ACTIVE")
} }
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
> >
{loading {loading
? "Processing..." ? "Processing..."
@ -585,7 +589,7 @@ export default function Home() {
? "Current Plan" ? "Current Plan"
: "Choose Premium"} : "Choose Premium"}
</button> </button>
<ul className="text-left space-y-3"> <ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center"> <li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span>1 TB <span className="text-green-500 font-bold mr-3">✓</span>1 TB
storage storage

88
app/renders/page.tsx
Unescape View File

@ -52,7 +52,7 @@ export default function RendersPage() {
const res = await fetch( const res = await fetch(
`/api/renders/in?page=${pageNum}&pageSize=${pageSize}`, `/api/renders/in?page=${pageNum}&pageSize=${pageSize}`,
{ {
headers: { "user-id": user?.id }, headers: { "user-id": user?.id || "" },
} }
); );
const data = await res.json(); const data = await res.json();
@ -102,12 +102,14 @@ export default function RendersPage() {
const canNext = page < totalPages; const canNext = page < totalPages;
return ( return (
<div className="min-h-screen bg-gray-50 py-12"> <div className="min-h-screen bg-gray-50 py-6 sm:py-12">
<div className="max-w-5xl mx-auto px-4"> <div className="max-w-5xl mx-auto px-4 sm:px-6">
<h1 className="text-4xl font-bold text-gray-900 mb-8">My Renders</h1> <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-6 sm:mb-8">
My Renders
</h1>
<section className="mb-12"> <section className="mb-8 sm:mb-12">
<h2 className="text-2xl font-bold text-orange-600 mb-4"> <h2 className="text-xl sm:text-2xl font-bold text-orange-600 mb-4">
Uploaded Files Uploaded Files
</h2> </h2>
{loading ? ( {loading ? (
@ -116,23 +118,49 @@ export default function RendersPage() {
<div className="text-gray-500">No files uploaded yet.</div> <div className="text-gray-500">No files uploaded yet.</div>
) : ( ) : (
<> <>
<table className="w-full bg-white rounded-lg shadow-md"> <div className="overflow-x-auto -mx-4 sm:mx-0">
<div className="inline-block min-w-full align-middle">
<table className="min-w-full bg-white rounded-lg shadow-md">
<thead> <thead>
<tr className="bg-orange-50"> <tr className="bg-orange-50">
<th className="p-3 text-left font-semibold">Filename</th> <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
<th className="p-3 text-left font-semibold">Status</th> Filename
<th className="p-3 text-left font-semibold">Uploaded At</th> </th>
<th className="p-3 text-left font-semibold">Download</th> <th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
<th className="p-3 text-left font-semibold">Actions</th> Status
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm hidden sm:table-cell">
Uploaded At
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Download
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Actions
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{files.map((f) => ( {files.map((f) => (
<tr key={f.id} className="border-t"> <tr key={f.id} className="border-t">
<td className="p-3">{f.original_name}</td> <td className="p-2 sm:p-3 text-xs sm:text-sm break-words max-w-[120px] sm:max-w-none">
<td className="p-3 capitalize"> {f.original_name}
</td>
<td className="p-2 sm:p-3 capitalize">
{/* Mobile: Green checkmark */}
{f.upload_status === "COMPLETE" && (
<span className="sm:hidden text-green-500 text-xl">
✓
</span>
)}
{f.upload_status !== "COMPLETE" && (
<span className="sm:hidden text-gray-400 text-xl">
○
</span>
)}
{/* Desktop: Text badge */}
<span <span
className={`px-2 py-1 rounded-full text-xs font-bold ${ className={`hidden sm:inline-block px-2 py-1 rounded-full text-xs font-bold ${
f.upload_status === "COMPLETE" f.upload_status === "COMPLETE"
? "bg-green-100 text-green-800" ? "bg-green-100 text-green-800"
: "bg-gray-200 text-gray-600" : "bg-gray-200 text-gray-600"
@ -141,17 +169,17 @@ export default function RendersPage() {
{f.upload_status} {f.upload_status}
</span> </span>
</td> </td>
<td className="p-3"> <td className="p-2 sm:p-3 text-xs sm:text-sm hidden sm:table-cell">
{new Date(f.created_at).toLocaleString()} {new Date(f.created_at).toLocaleString()}
</td> </td>
<td className="p-3"> <td className="p-2 sm:p-3">
<a <a
href={ href={
f.file_path f.file_path
? `/uploads/${f.file_path.split("/").pop()}` ? `/uploads/${f.file_path.split("/").pop()}`
: "#" : "#"
} }
className="underline text-blue-700" className="underline text-blue-700 text-xs sm:text-sm"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
download={f.original_name} download={f.original_name}
@ -159,9 +187,23 @@ export default function RendersPage() {
Download Download
</a> </a>
</td> </td>
<td className="p-3"> <td className="p-2 sm:p-3">
{/* Mobile: Red X icon - circular */}
<button <button
className="px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300" className="sm:hidden w-6 h-6 rounded-full bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300 disabled:opacity-50 flex items-center justify-center"
disabled={deletingId === f.id}
onClick={() => handleDelete(f.id)}
aria-label="Delete"
>
{deletingId === f.id ? (
<span className="text-xs">...</span>
) : (
<span className="text-sm font-bold">×</span>
)}
</button>
{/* Desktop: Text button */}
<button
className="hidden sm:inline-block px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
disabled={deletingId === f.id} disabled={deletingId === f.id}
onClick={() => handleDelete(f.id)} onClick={() => handleDelete(f.id)}
> >
@ -172,6 +214,8 @@ export default function RendersPage() {
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</div>
<div className="mt-4 flex justify-center"> <div className="mt-4 flex justify-center">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>
@ -225,10 +269,10 @@ export default function RendersPage() {
</section> </section>
<section> <section>
<h2 className="text-2xl font-bold text-gray-600 mb-4"> <h2 className="text-xl sm:text-2xl font-bold text-gray-600 mb-4">
Rendered Files (outputs) Rendered Files (outputs)
</h2> </h2>
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center text-gray-400"> <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 sm:p-8 text-center text-gray-400 text-sm sm:text-base">
Placeholder: Your rendered products will appear here in the future! Placeholder: Your rendered products will appear here in the future!
</div> </div>
</section> </section>

39
app/subscriptions/page.tsx
Unescape View File

@ -141,21 +141,21 @@ export default function SubscriptionsPage() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50 py-12"> <div className="min-h-screen bg-gray-50 py-6 sm:py-12 pb-20 sm:pb-12">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-6 sm:mb-8">
<h1 className="text-4xl font-bold text-gray-900 mb-2"> <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">
My Subscriptions My Subscriptions
</h1> </h1>
<p className="text-gray-600"> <p className="text-sm sm:text-base text-gray-600">
Manage your subscription and billing information Manage your subscription and billing information
</p> </p>
</div> </div>
{!subscription ? ( {!subscription ? (
// No subscription // No subscription
<div className="bg-white rounded-lg shadow-lg p-8 text-center"> <div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 text-center">
<div className="mb-6"> <div className="mb-6">
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-3xl">📦</span> <span className="text-3xl">📦</span>
@ -177,15 +177,17 @@ export default function SubscriptionsPage() {
</div> </div>
) : ( ) : (
// Active subscription // Active subscription
<div className="space-y-6"> <div className="space-y-4 sm:space-y-6">
{/* Subscription Card */} {/* Subscription Card */}
<div className="bg-white rounded-lg shadow-lg p-8 border-2 border-gray-200"> <div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 border-2 border-gray-200">
<div className="flex justify-between items-start mb-6"> <div className="flex justify-between items-start mb-4 sm:mb-6">
<div> <div>
<h2 className="text-2xl font-bold text-gray-900 mb-2"> <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
{getTierDisplayName(subscription.tier)} Plan {getTierDisplayName(subscription.tier)} Plan
</h2> </h2>
<p className="text-gray-600">Current subscription details</p> <p className="text-sm sm:text-base text-gray-600">
Current subscription details
</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<span <span
@ -201,7 +203,7 @@ export default function SubscriptionsPage() {
</div> </div>
{/* Subscription Details */} {/* Subscription Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
<div> <div>
<p className="text-sm text-gray-500 mb-1">Plan</p> <p className="text-sm text-gray-500 mb-1">Plan</p>
<p className="text-lg font-semibold text-gray-900"> <p className="text-lg font-semibold text-gray-900">
@ -223,7 +225,12 @@ export default function SubscriptionsPage() {
<div> <div>
<p className="text-sm text-gray-500 mb-1">Current Usage</p> <p className="text-sm text-gray-500 mb-1">Current Usage</p>
<p className="text-lg font-semibold text-gray-900"> <p className="text-lg font-semibold text-gray-900">
{parseFloat(subscription.current_usage_gb).toFixed(2)} GB {typeof subscription.current_usage_gb === "number"
? subscription.current_usage_gb.toFixed(2)
: parseFloat(
String(subscription.current_usage_gb)
).toFixed(2)}{" "}
GB
</p> </p>
</div> </div>
</div> </div>
@ -258,17 +265,17 @@ export default function SubscriptionsPage() {
</div> </div>
{/* Upgrade/Downgrade Options */} {/* Upgrade/Downgrade Options */}
<div className="bg-white rounded-lg shadow-lg p-6"> <div className="bg-white rounded-lg shadow-lg p-6 mb-4 sm:mb-0">
<h3 className="text-xl font-bold text-gray-900 mb-4"> <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">
Change Plan Change Plan
</h3> </h3>
<p className="text-gray-600 mb-4"> <p className="text-sm sm:text-base text-gray-600 mb-4">
Looking to upgrade or downgrade? Cancel your current Looking to upgrade or downgrade? Cancel your current
subscription and choose a new plan. subscription and choose a new plan.
</p> </p>
<Button <Button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md" className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md w-full sm:w-auto"
> >
Browse All Plans Browse All Plans
</Button> </Button>

Write Preview
Loading…
Cancel
Save