User profile

frontend/app/profile/listings/page.tsx

@@ -0,0 +1,13 @@
+import { getMyListings } from "@/lib/actions";
+import { MyListingsContent } from "@/components/profile/MyListingsContent";
+
+export default async function MyListingsPage() {
+  const myListings = await getMyListings();
+
+  return (
+    <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-4 pt-6 sm:px-12">
+      <h1 className="text-2xl font-bold">My Listings</h1>
+      <MyListingsContent listings={myListings.results} />
+    </div>
+  );
+}

frontend/app/profile/page.tsx

@@ -0,0 +1,31 @@
+import { getCurrentUser, getMyListings, getUsersFavorites } from "@/lib/actions";
+import { ProfileHeader } from "@/components/profile/ProfileHeader";
+import { ListingSection } from "@/components/profile/ListingSection";
+
+export default async function ProfilePage() {
+  const [currentUser, myListings, savedPosts] = await Promise.all([
+    getCurrentUser(),
+    getMyListings(),
+    getUsersFavorites(),
+  ]);
+
+  return (
+    <div className="container mx-auto w-full max-w-[96rem] space-y-8 px-4 pt-6 sm:px-12">
+      <ProfileHeader user={currentUser} />
+      <ListingSection
+        title="My Listings"
+        count={myListings.count}
+        listings={myListings.results}
+        seeAllHref="/profile/listings"
+        icon="listings"
+      />
+      <ListingSection
+        title="Saved Posts"
+        count={savedPosts.count}
+        listings={savedPosts.results}
+        seeAllHref="/profile"
+        icon="saved"
+      />
+    </div>
+  );
+}

frontend/components/listings/detail/ListingDetail.tsx

@@ -56,10 +56,8 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
     toggleFavoriteMutation.mutate(!isFavorited);
   };
 
-  const subletCoords =
-    listingType === "sublet" ? listing.additional_data : null;
-  const hasLocation =
-    subletCoords?.latitude != null && subletCoords?.longitude != null;
+  const subletCoords = listingType === "sublet" ? listing.additional_data : null;
+  const hasLocation = subletCoords?.latitude != null && subletCoords?.longitude != null;
 
   return (
     <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
@@ -94,13 +92,11 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
               <div>
                 <h2 className="text-lg font-semibold">{"Where you'll be living"}</h2>
                 <p className="text-sm text-gray-500">
-                  Approximate location shown. The exact location will be shared once you connect with the owner.
+                  Approximate location shown. The exact location will be shared once you connect
+                  with the owner.
                 </p>
-                </div>
-              <SubletMap
-                latitude={subletCoords.latitude!}
-                longitude={subletCoords.longitude!}
-              />
+              </div>
+              <SubletMap latitude={subletCoords.latitude!} longitude={subletCoords.longitude!} />
             </div>
           )}
           <ListingActions

frontend/components/listings/detail/SubletMap.tsx

@@ -8,9 +8,8 @@ interface Props {
 }
 
 const LazyMap = dynamic(
-  () =>
-    import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
-  { ssr: false },
+  () => import("@/components/listings/detail/SubletMapContent").then((m) => m.SubletMapContent),
+  { ssr: false }
 );
 
 export const SubletMap = ({ latitude, longitude }: Props) => {

frontend/components/navbar/UserProfileDropdown.tsx

@@ -23,7 +23,7 @@ export function UserProfileDropdown({ isOpen, onClose }: UserProfileDropdownProp
       role="menu"
     >
       <Link
-        href="/"
+        href="/profile"
         onClick={onClose}
         className={cn(
           "flex items-center gap-3 rounded-t-md px-3 py-3 text-sm",
@@ -37,7 +37,7 @@ export function UserProfileDropdown({ isOpen, onClose }: UserProfileDropdownProp
 
       <div className="text-foreground mt-1 px-3 py-1 text-xs font-bold">Selling</div>
       <Link
-        href="/"
+        href="/profile/listings"
         onClick={onClose}
         className={cn(
           "flex items-center gap-3 px-3 py-3 text-sm",

frontend/components/profile/ListingSection.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { ShoppingBag, Bookmark } from "lucide-react";
+import { ListingsCard } from "@/components/listings/ListingsCard";
+import { Listing } from "@/lib/types";
+
+interface Props {
+  title: string;
+  count: number;
+  listings: Listing[];
+  seeAllHref: string;
+  icon: "listings" | "saved";
+}
+
+export const ListingSection = ({ title, count, listings, seeAllHref, icon }: Props) => {
+  const Icon = icon === "listings" ? ShoppingBag : Bookmark;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Icon className="h-5 w-5" />
+          <h2 className="text-lg font-bold">
+            {title} ({count})
+          </h2>
+        </div>
+        <Link href={seeAllHref} className="text-brand text-sm font-medium hover:underline">
+          See All {title}
+        </Link>
+      </div>
+
+      {listings.length === 0 ? (
+        <p className="text-sm text-gray-500">No {title.toLowerCase()} yet.</p>
+      ) : (
+        <div className="flex gap-4 overflow-x-auto pb-2">
+          {listings.map((listing) => (
+            <div key={listing.id} className="w-48 flex-shrink-0">
+              <ListingsCard
+                listing={listing}
+                previewImageUrl={listing.images[0]}
+                href={`/${listing.listing_type === "item" ? "items" : "sublets"}/${listing.id}`}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/components/profile/MyListingsContent.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { SearchInput } from "@/components/filters/SearchInput";
+import { ListingsCard } from "@/components/listings/ListingsCard";
+import { Listing } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const TABS = ["All Listings", "Active Listings", "Completed"] as const;
+type Tab = (typeof TABS)[number];
+
+interface Props {
+  listings: Listing[];
+}
+
+function isActive(listing: Listing): boolean {
+  if (!listing.expires_at) return true;
+  return new Date(listing.expires_at) > new Date();
+}
+
+export const MyListingsContent = ({ listings }: Props) => {
+  const [activeTab, setActiveTab] = useState<Tab>("All Listings");
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState<string>("all");
+
+  const categories = useMemo(() => {
+    const cats = new Set<string>();
+    listings.forEach((l) => {
+      if (l.listing_type === "item") cats.add(l.additional_data.category);
+      if (l.listing_type === "sublet") cats.add("Sublet");
+    });
+    return Array.from(cats).sort();
+  }, [listings]);
+
+  const filtered = useMemo(() => {
+    let result = listings;
+
+    if (activeTab === "Active Listings") {
+      result = result.filter(isActive);
+    } else if (activeTab === "Completed") {
+      result = result.filter((l) => !isActive(l));
+    }
+
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      result = result.filter((l) => l.title.toLowerCase().includes(q));
+    }
+
+    if (category !== "all") {
+      result = result.filter((l) => {
+        if (category === "Sublet") return l.listing_type === "sublet";
+        return l.listing_type === "item" && l.additional_data.category === category;
+      });
+    }
+
+    return result;
+  }, [listings, activeTab, search, category]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex gap-6">
+          {TABS.map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={cn(
+                "pb-1 text-sm font-medium transition-colors",
+                activeTab === tab
+                  ? "text-brand border-brand border-b-2"
+                  : "text-gray-500 hover:text-gray-700"
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <SearchInput placeholder="Search Listings" value={search} onChange={setSearch} />
+          <Select value={category} onValueChange={setCategory}>
+            <SelectTrigger>
+              <SelectValue placeholder="Category" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Categories</SelectItem>
+              {categories.map((cat) => (
+                <SelectItem key={cat} value={cat}>
+                  {cat}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <p className="py-12 text-center text-sm text-gray-500">No listings found.</p>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+          {filtered.map((listing) => (
+            <ListingsCard
+              key={listing.id}
+              listing={listing}
+              previewImageUrl={listing.images[0]}
+              href={`/${listing.listing_type === "item" ? "items" : "sublets"}/${listing.id}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/components/profile/ProfileHeader.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { Star, Mail, Phone } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { User } from "@/lib/types";
+
+interface Props {
+  user: User;
+}
+
+function maskPhoneNumber(phone: string): string {
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length < 4) return phone;
+  const areaCode = digits.slice(digits.length - 10, digits.length - 7);
+  const prefix = digits.slice(digits.length - 7, digits.length - 4);
+  return `(${areaCode}) ${prefix}-XXXX`;
+}
+
+export const ProfileHeader = ({ user }: Props) => {
+  const fullName = `${user.first_name} ${user.last_name}`;
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-white p-6 sm:p-8">
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-4 sm:gap-6">
+          <Image
+            src="/images/default-avatar.png"
+            alt={fullName}
+            width={80}
+            height={80}
+            className="rounded-full"
+          />
+          <div className="space-y-1">
+            <h1 className="text-xl font-bold sm:text-2xl">{fullName}</h1>
+            <div className="flex items-center gap-1.5 text-sm text-gray-600">
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+              <span className="ml-1 font-medium">5.0</span>
+              <span className="text-gray-400">(10 reviews)</span>
+            </div>
+          </div>
+        </div>
+        <Button variant="outline">Edit Info</Button>
+      </div>
+
+      <div className="mt-6 flex flex-wrap gap-x-12 gap-y-3 text-sm">
+        <div>
+          <p className="text-brand font-medium">email</p>
+          <p className="text-gray-700">{user.email}</p>
+        </div>
+        <div>
+          <p className="text-brand font-medium">phone number</p>
+          <p className="text-gray-700">
+            {user.phone_number ? maskPhoneNumber(user.phone_number) : "Not set"}
+          </p>
+        </div>
+        <div>
+          <p className="text-brand font-medium">notification method</p>
+          <p className="text-gray-700">Email | SMS</p>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/lib/actions.ts

@@ -270,3 +270,19 @@ export async function createListing(payload: CreateListingPayload): Promise<List
     body: JSON.stringify(payload),
   });
 }
+
+// ------------------------------------------------------------
+// user's own listings
+// ------------------------------------------------------------
+
+export async function getMyListings({ pageParam = 1 }: { pageParam?: unknown } = {}) {
+  const page = typeof pageParam === "number" ? pageParam : 1;
+  const offset = (page - 1) * FETCH_LISTINGS_LIMIT;
+
+  const params = new URLSearchParams();
+  params.append("seller", "true");
+  params.append("limit", FETCH_LISTINGS_LIMIT.toString());
+  params.append("offset", offset.toString());
+
+  return await serverFetch<PaginatedResponse<Listing>>(`/market/listings/?${params.toString()}`);
+}

frontend/lib/constants.ts

@@ -11,7 +11,6 @@ export const BASE_URL =
 
 export const API_BASE_URL =
   process.env.NODE_ENV === "production" ? "REPLACE WITH PROD API URL" : "http://backend:8000"; // can't be localhost because server fetch happens in container
-
 
 export const PLATFORM_URL = process.env.PLATFORM_URL;
 export const CLIENT_ID = process.env.CLIENT_ID;

frontend/lib/types.ts

@@ -14,6 +14,8 @@ export type User = {
   first_name: string;
   last_name: string;
   email: string;
+  phone_number: string | null;
+  phone_verified: boolean;
 };
 
 // ------------------------------------------------------------
@@ -124,6 +126,7 @@ type BaseListing = {
   images: string[];
   tags: string[];
   favorite_count: number;
+  offers_count?: number;
   is_favorited?: boolean;
   seller: User;
 };