WIP: sublet

frontend/README.md

@@ -20,3 +20,5 @@ A web-based portal for organizations to reach Penn Mobile users.
    you should be able to see the site at `localhost:3000`!
 1. The backend should be running at `localhost:8000`. We proxy all requests from localhost:3000/api to localhost:8000/api (in `frontend/server.js`), so you can make requests to the backend from the frontend. If you want to directly see what the request should return, you can go to `localhost:8000/api/...` to see the response.
 1. There's also some jankiness with login since we make requests to clubs and accounts -- for login to work in your dev environment, you'll need to go to `localhost:8000/admin` and add a valid access token (make sure the expiration date is some day in the far future).
+
+kek

sublet/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

sublet/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

sublet/Pipfile

@@ -0,0 +1,11 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+
+[dev-packages]
+
+[requires]
+python_version = "3.12"

sublet/README.md

@@ -0,0 +1,24 @@
+# Penn Mobile Subletting Feature
+
+Welcome to the Penn Mobile Subletting Feature! This innovative marketplace is designed to enhance the subletting experience for the University of Pennsylvania community, offering a user-friendly platform to browse, create, and manage sublet listings with ease.
+
+## Features
+
+- **Marketplace Dashboard:** Browse through a wide range of sublet listings in a user-friendly dashboard. Find the perfect match for your subletting needs with detailed information and intuitive navigation.
+
+- **Personal Listings Management:** Have complete control over your listings through your personal dashboard. Create new listings, edit existing ones, and manage all your subletting activities in one place.
+
+- **Direct Communication:** Reach out directly to the owners of the listings you are interested in. Our platform facilitates seamless communication between parties to ensure smooth transactions.
+
+- **User-Friendly Interface:** Built with the Next.js framework and styled using Tailwind CSS along with ShadCN for a modern, responsive design that enhances user experience across devices.
+
+## Getting Started
+
+To run the Penn Mobile Subletting Feature locally, just do:
+
+`npm run dev`
+
+
+## Attributions
+
+Font: [Satoshi](https://www.fontshare.com/fonts/satoshi) by Indian Type Foundry (ITF) - [ITF Free Font License (FFL)](https://www.fontshare.com/licenses/itf-free-font-license)

sublet/app/create/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CreateListing = () => {
+  return (
+    <div>CreateListing</div>
+  )
+}
+
+export default CreateListing

sublet/app/dashboard/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+import { fetchProperties } from "../../services/propertyService";
+import { PropertyInterface } from "@/interfaces/Property";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import { Button } from "@/components/ui/button";
+
+import { PlusIcon } from "lucide-react";
+
+import PropertyList from "@/components/custom/PropertyList";
+
+import PropertyForm from "@/components/custom/PropertyForm";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import Image from "next/image";
+
+const Dashboard = () => {
+  const [properties, setProperties] = useState<PropertyInterface[]>([]);
+
+  useEffect(() => {
+    fetchProperties()
+      .then((data) => {
+        setProperties(data);
+      })
+      .catch((error) => {
+        console.error("Error fetching properties:", error);
+      });
+  }, []);
+
+  return (
+    <div className="">
+
+      <Tabs defaultValue="posted" className="">
+
+        <div className="w-screen flex justify-end p-6 gap-4">
+          <TabsList>
+            <TabsTrigger value="posted">Posted</TabsTrigger>
+            <TabsTrigger value="drafts">Drafts</TabsTrigger>
+          </TabsList>
+          <PropertyForm onNewProperty={setProperties}>
+            <Button className="p-2 rounded-full">
+              <PlusIcon className="w-5" />
+            </Button>
+          </PropertyForm>
+        </div>
+
+
+        <TabsContent value="posted" className="p-5">
+          <div className="px-10 max-md:px-0">
+            <div className="space-y-12">
+              <h1 className="text-4xl tracking-tight font-bold">
+                My Listings
+              </h1>
+              <PropertyList properties={properties} />
+            </div>
+          </div>
+        </TabsContent>
+
+
+        <TabsContent value="drafts" className="p-5">
+          <div className="items-center flex flex-col justify-center px-10 max-md:px-0">
+            <div className="space-y-12">
+              <h1 className="text-4xl tracking-tight font-bold">
+                My Drafts
+              </h1>
+              <PropertyList properties={properties} />
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Dashboard;

sublet/app/globals.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 4% 16%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 219 100% 69%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 219 92% 58%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

sublet/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+
+import localFont from "next/font/local";
+//import { Inter } from "next/font/google";
+import "./globals.css";
+
+//const inter = Inter({ subsets: ["latin"] });
+
+import { Toaster } from "@/components/ui/toaster"
+
+const satoshi = localFont({
+  src: '../fonts/satoshi/Satoshi-Variable.woff2',
+  display: 'swap',
+})
+
+export const metadata: Metadata = {
+  title: "Sublet@Portal",
+  description: "Welcome to Sublet@Portal. The best place to sublet your room to other students!",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={satoshi.className}>
+        <div className="">
+          {children}
+        </div>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

sublet/app/page.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <main className="space-y-10">
+      <h1 className="mt-40 text-5xl font-bold text-center tracking-tight text-white">
+        <span className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
+          Welcome to Sublet@Portal
+        </span>
+      </h1>
+      <div className="space-y-5">
+        <div className="flex justify-center">
+          <Image src="/penn-mobile.svg" alt="Sublet@Portal Logo" width={200} height={200} />
+        </div>
+        <p className="text-center">The best place to sublet your room to other students!</p>
+      </div>
+    </main>
+  );
+}

sublet/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}