Skip to content

Skeleton frontend #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacktoncelli merged 12 commits into from
Nov 29, 2025
Merged

Skeleton frontend #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ef134a3
fixed onboarding problem
ZainabImadulla Nov 21, 2025
faa34f8
made some skeletons
ZainabImadulla Nov 22, 2025
7941c40
finished loading states
ZainabImadulla Nov 26, 2025
058d381
fixed small dashboard styling mistakes
ZainabImadulla Nov 26, 2025
3530fd5
fixed more loading
ZainabImadulla Nov 26, 2025
ebe2e1c
Merge remote-tracking branch 'origin/main' into skeleton-frontend
ZainabImadulla Nov 26, 2025
388a9bb
fixed more styling
ZainabImadulla Nov 27, 2025
55f15fe
fixed business doc bug
ZainabImadulla Nov 27, 2025
8413644
notification loading state
ZainabImadulla Nov 27, 2025
414f314
loading for risk map
ZainabImadulla Nov 29, 2025
057d2db
linter and last touches
ZainabImadulla Nov 29, 2025
36d1d55
fixed typecheck issue
ZainabImadulla Nov 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 27 additions & 14 deletions frontend/app/business-profile/overview/BusinessCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import CompanyEditor from "./BusinessInfoEditor";
import { getUser } from "@/api/user";
import { Card } from "@/components/ui/card";
import Loading from "@/components/loading";

export default function BusinessCard() {
const [businessInfo, setBusinessInfo] = useState<UpdateCompanyRequest>({
Expand All @@ -32,7 +34,9 @@ export default function BusinessCard() {

const handleSave = () => {
updateBusinessMutate(businessInfo);
setEditing(false);
if (!error) {
setEditing(false);
}
};

const { data: businessQuery, isPending: businessPending } = useQuery({
Expand All @@ -59,19 +63,28 @@ export default function BusinessCard() {

return (
<div>
<div className="flex gap-[38px]">
<CompanyEditor
company={businessInfo}
user={user}
setCompany={(company: UpdateCompanyRequest) => setBusinessInfo(company)}
setUser={(userInfo) => setUser(userInfo)}
isExpanded={editing}
onExpand={() => (editing ? setEditing(false) : setEditing(true))}
onCollapse={() => handleSave()}
saveError={error}
initialPending={businessPending}
/>
</div>
{businessPending ? (
<Card className="w-full px-[28px] py-[20px] border-none shadow-none">
<div className="flex items-center w-3/4">
<p className="text-[20px] font-bold">Business Information</p>
</div>
<Loading lines={2} />
</Card>
) : (
<div className="flex gap-[38px]">
<CompanyEditor
company={businessInfo}
user={user}
setCompany={(company: UpdateCompanyRequest) => setBusinessInfo(company)}
setUser={(userInfo) => setUser(userInfo)}
isExpanded={editing}
onExpand={() => (editing ? setEditing(false) : setEditing(true))}
onCollapse={() => handleSave()}
saveError={error}
initialPending={businessPending}
/>
</div>
)}
</div>
);
}
9 changes: 4 additions & 5 deletions frontend/app/business-profile/overview/BusinessInfoEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function CompanyEditor({
};

return (
<Card className="w-full px-[28px] py-[20px]">
<Card className="w-full px-[28px] py-[20px] border-none shadow-none">
<div className="flex items-center justify-between">
<div className="flex gap-[10px] items-center w-3/4">
<p className="text-[20px] font-bold">Business Information</p>
Expand All @@ -61,7 +61,7 @@ export default function CompanyEditor({
<hr className="mt-[-16px] mb-[-16px]" />
{isExpanded ? (
<div className="flex flex-col gap-[16px]">
<div className="flex gap-[16px]">
<div className="grid grid-cols-2 gap-[16px]">
<div className="flex flex-col gap-[8px] w-full">
<Label htmlFor="businessOwnerFullName" className="text-[16px]">
Business Name<span className="text-red-500 text-[16px]">*</span>
Expand Down Expand Up @@ -108,8 +108,7 @@ export default function CompanyEditor({
</SelectContent>
</Select>
</div>
</div>
<div className="flex gap-[16px]">

<div className="flex flex-col gap-[8px] w-full">
<Label htmlFor="phone" className="text-[16px]">
Phone Number<span className="text-red-500 text-[16px]">*</span>
Expand Down Expand Up @@ -159,7 +158,7 @@ export default function CompanyEditor({
""
)}
<Button
className="text-[14px] py-[7px] bg-[var(--pink)] text-[var(--fuchsia)] self-end w-fit h-fit flex justify-center items-center gap-[8px] hover:text-[white]"
className="relative bottom-0 right-0 text-[14px] bg-pink text-fuchsia self-end justify-self-end w-fit h-fit flex justify-center items-center gap-[8px] hover:text-[white]"
onClick={handleCollapse}
style={{ paddingInline: "25px" }}
>
Expand Down
61 changes: 33 additions & 28 deletions frontend/app/business-profile/overview/InsuranceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { createInsurancePolicy, getInsurancePolicies, updateInsurancePolicy } from "@/api/insurance";
import InsuranceEditor from "@/components/InsuranceEditor";
import Loading from "@/components/loading";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { Card } from "@/components/ui/card";
import { CreateInsurancePolicyRequest, UpdateInsurancePolicyRequest } from "@/types/insurance-policy";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -85,36 +86,40 @@ export default function InsuranceCard() {
}, [insuranceQuery]);

return (
<div>
<Card className="p-[28px] flex gap-[12px] border-none shadow-none">
<p className="font-bold text-[20px]">Insurance Information</p>
{insurancePending ? (
<Spinner className="mb-[16px]" />
<Loading lines={3} />
) : (
<div className="flex gap-[38px]">
{insuranceInfo.map((insurance, index) => (
<div key={index} className="w-1/2">
<InsuranceEditor
insurance={insurance}
setInsurance={(i) => updateInsurance(index, i)}
removeInsurance={() => removeInsurance(index)}
isExpanded={editingInsuranceIndex === index}
onExpand={() =>
editingInsuranceIndex === index
? setEditingInsuranceIndex(null)
: setEditingInsuranceIndex(index)
}
onCollapse={() => handleSave()}
saveError={saveError}
/>
</div>
))}
<div>
<div className="flex gap-[38px]">
{insuranceInfo.map((insurance, index) => (
<div key={index} className="w-1/2">
<InsuranceEditor
insurance={insurance}
setInsurance={(i) => updateInsurance(index, i)}
removeInsurance={() => removeInsurance(index)}
isExpanded={editingInsuranceIndex === index}
onExpand={() =>
editingInsuranceIndex === index
? setEditingInsuranceIndex(null)
: setEditingInsuranceIndex(index)
}
onCollapse={() => handleSave()}
saveError={saveError}
/>
</div>
))}
</div>

<Button
className="w-[196px] flex items-center text-[16px] h-[34px] self-start px-[12px] py-[4px] underline bg-slate hover:text-gray-600"
onClick={addInsurance}
>
<IoAddCircleOutline /> Add an Insurance
</Button>
</div>
)}
<Button
className="w-[196px] flex items-center text-[16px] h-[34px] self-start px-[12px] py-[4px] underline bg-slate hover:text-gray-600"
onClick={addInsurance}
>
<IoAddCircleOutline /> Add an Insurance
</Button>
</div>
</Card>
);
}
65 changes: 35 additions & 30 deletions frontend/app/business-profile/overview/LocationsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
import { getCompanyLocations } from "@/api/company";
import { createLocation, updateLocationAddress } from "@/api/location";
import LocationEditor from "@/components/LocationEditor";
import Loading from "@/components/loading";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { Card } from "@/components/ui/card";
import { CreateLocationRequest, UpdateLocationRequest } from "@/types/location";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useState, useEffect } from "react";
Expand All @@ -15,7 +16,7 @@ export default function LocationsCard() {
const [editingLocationIndex, setEditingLocationIndex] = useState<number | null>(null);
const [saveError, setSaveError] = useState<string | null>(null);

const { data: locationsQuery, isPending: businessPending } = useQuery({
const { data: locationsQuery, isPending: locationPending } = useQuery({
queryKey: ["locations"],
queryFn: getCompanyLocations,
});
Expand Down Expand Up @@ -92,36 +93,40 @@ export default function LocationsCard() {
}, [locationsQuery]);

return (
<div>
{businessPending ? (
<Spinner className="mb-[16px]" />
<Card className="p-[28px] flex gap-[12px] border-none shadow-none">
<p className="font-bold text-[20px]">Locations</p>
{locationPending ? (
<Loading lines={2} />
) : (
<div className="grid grid-cols-2 gap-x-[38px] gap-y-[16px]">
{locationInfo.map((location, index) => (
<div key={index}>
<LocationEditor
location={location}
setLocation={(loc) => updateLocation(index, loc)}
removeLocation={() => removeLocation(index)}
isExpanded={editingLocationIndex === index}
onExpand={() =>
editingLocationIndex === index
? setEditingLocationIndex(null)
: setEditingLocationIndex(index)
}
onCollapse={() => handleSave()}
saveError={saveError}
/>
</div>
))}
<div>
<div className="grid grid-cols-2 gap-x-[38px] gap-y-[16px]">
{locationInfo.map((location, index) => (
<div key={index}>
<LocationEditor
location={location}
setLocation={(loc) => updateLocation(index, loc)}
removeLocation={() => removeLocation(index)}
isExpanded={editingLocationIndex === index}
onExpand={() =>
editingLocationIndex === index
? setEditingLocationIndex(null)
: setEditingLocationIndex(index)
}
onCollapse={() => handleSave()}
saveError={saveError}
/>
</div>
))}
</div>

<Button
className="w-[196px] flex items-center text-[16px] h-[34px] self-start px-[12px] py-[4px] underline bg-slate hover:text-gray-600"
onClick={addLocation}
>
<IoAddCircleOutline /> Add a location
</Button>
</div>
)}
<Button
className="w-[196px] flex items-center text-[16px] h-[34px] self-start px-[12px] py-[4px] underline bg-slate hover:text-gray-600"
onClick={addLocation}
>
<IoAddCircleOutline /> Add a location
</Button>
</div>
</Card>
);
}
12 changes: 2 additions & 10 deletions frontend/app/business-profile/overview/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
"use client";

import { Card } from "@/components/ui/card";
import BusinessCard from "./BusinessCard";
import LocationsCard from "./LocationsCard";
import InsuranceCard from "./InsuranceCard";
Expand All @@ -9,14 +7,8 @@ export default function Overview() {
return (
<div className="flex flex-col gap-[23px]">
<BusinessCard />
<Card className="p-[28px] flex gap-[12px]">
<p className="font-bold text-[20px]">Locations</p>
<LocationsCard />
</Card>
<Card className="p-[28px] flex gap-[12px]">
<p className="font-bold text-[20px]">Insurance Information</p>
<InsuranceCard />
</Card>
<LocationsCard />
<InsuranceCard />
</div>
);
}
30 changes: 16 additions & 14 deletions frontend/app/business-profile/view-documents/DocumentTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,22 @@ export default function DocumentTable({
<div>
<Table>
<TableHeader>
<TableHead className="text-[14px]">Title</TableHead>
<TableHead className="text-[14px]">File Type</TableHead>
<TableHead className="text-[14px]">Category</TableHead>
<TableHead className="text-[14px]">
<div className="flex items-center hover:text-slate-700" onClick={handleDateSort}>
{dateSort === "asc" ? (
<IoIosArrowRoundUp style={{ width: "18px", height: "18px" }} />
) : (
<IoIosArrowRoundDown style={{ width: "18px", height: "18px" }} />
)}
Date
</div>
</TableHead>
<TableHead className="text-[14px]"></TableHead>
<TableRow>
<TableHead className="text-[14px]">Title</TableHead>
<TableHead className="text-[14px]">File Type</TableHead>
<TableHead className="text-[14px]">Category</TableHead>
<TableHead className="text-[14px]">
<div className="flex items-center hover:text-slate-700" onClick={handleDateSort}>
{dateSort === "asc" ? (
<IoIosArrowRoundUp style={{ width: "18px", height: "18px" }} />
) : (
<IoIosArrowRoundDown style={{ width: "18px", height: "18px" }} />
)}
Date
</div>
</TableHead>
<TableHead className="text-[14px]"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{documents.length !== 0 &&
Expand Down
10 changes: 5 additions & 5 deletions frontend/app/business-profile/view-documents/ViewDocuments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
uploadToS3,
} from "@/api/business-profile";
import { BusinessDocument, DocumentCategories } from "@/types/documents";
import { Spinner } from "@/components/ui/spinner";

type SortOrder = "asc" | "desc";

Expand Down Expand Up @@ -219,10 +220,7 @@ export default function ViewDocuments() {
<CardHeader className="flex justify-between">
<div className="flex flex-col gap-[10px]">
<h3 className="text-[24px]">Business Documents</h3>
<p className="text-[14px]">
Upload general business documents below.
{isLoadingDocuments && " Loading documents..."}
</p>
<p className="text-[14px]">Upload general business documents below.</p>
</div>
<div className="flex gap-[6px]">
<Button
Expand Down Expand Up @@ -257,7 +255,9 @@ export default function ViewDocuments() {

{/* Show loading state or documents */}
{isLoadingDocuments ? (
<div className="text-center py-8 text-gray-500">Loading documents...</div>
<div className="text-center py-8 text-gray-500 flex items-center justify-center">
<Spinner />
</div>
) : documents.length === 0 ? (
<div className="text-center py-8 text-gray-500">
No documents found. Upload your first document to get started!
Expand Down
7 changes: 3 additions & 4 deletions frontend/app/expense-tracker/expense-table/table-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ export default function TableContent({
) : null
) : (
<input
type="checkbox"
className="w-4 h-4 cursor-pointer mr-2 accent-black align-middle"
onChange={(e) => {
e.stopPropagation();
Expand Down Expand Up @@ -174,9 +173,9 @@ export default function TableContent({
],
});

if (purchases.isPending) return <div>Loading expenses...</div>;

if (purchases.error) return <div>Error loading expenses</div>;

return <Table table={table} onRowClick={(row) => onRowClick?.(row.originalPurchase)} />;
return (
<Table table={table} isLoading={purchases.isLoading} onRowClick={(row) => onRowClick?.(row.originalPurchase)} />
);
}
1 change: 1 addition & 0 deletions frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function RootLayout({
{!hideNavbar && <NavBar />}
<main className={!hideNavbar ? "ml-[300px]" : ""}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
<div id="portal-root" />
</main>
</div>
</body>
Expand Down
Loading
Loading