Skip to content

Commit d6a9079

Browse files
PvsaintPvsaint
authored
Merge pull request #102 from BudgetChain/refactor
fix: refactor code
2 parents 969a601 + 47c8995 commit d6a9079

File tree

10 files changed

+232
-160
lines changed

10 files changed

+232
-160
lines changed

‎src/app/dashboard/components/help-center/help-center-header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function HelpCenterHeader({ toggleSearch }: HelpCenterHeaderProps) {
1212
const isMobile = useIsMobile()
1313

1414
return (
15-
<div className="sticky top-0 z-10 bg-transparent border-r-3 pb-2 pt-4 border-radius: 0.125rem" >
15+
<div className="z-10 bg-transparent border-r-3 pb-2 pt-4 border-radius: 0.125rem" >
1616
<div className="flex flex-col space-y-2 p-2 md:p-4">
1717
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-white">Help Center</h1>
1818
<p className="text-sm md:text-base text-blue-200">

‎src/app/dashboard/components/help-center/tabs/tabs-navigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function TabsNavigation({ }: TabsNavigationProps) {
1818
}
1919

2020
return (
21-
<div className="px-2 md:px-4 sticky top-[120px] z-10 bg-transparent border-[#1a365d]">
21+
<div className="px-2 md:px-4 top-[120px] z-10 bg-transparent border-[#1a365d]">
2222
<TabsList className="grid grid-cols-4 w-full bg-transparent border-[#1a365d]">
2323
<TabsTrigger value="faqs" className="flex items-center justify-center gap-1 md:gap-2 px-1 md:px-3 py-2">
2424
<HelpCircle className="h-4 w-4" />

‎src/app/dashboard/components/progressCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const ProgressCard: React.FC<ProgressCardProps> = ({
2929

3030
return (
3131
<div
32-
className="w-[500px] h-[294px] rounded-lg p-4 m-2 bg-[#171720] cursor-pointer"
32+
className="min-w-[520px] h-[294px] rounded-lg p-4 m-2 bg-[#171720] cursor-pointer"
3333
style={{ borderColor: border, borderWidth: '2px' }}
3434
>
3535
<div className='flex justify-between'>

‎src/app/dashboard/components/sideBar.tsx‎

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -101,28 +101,43 @@ const Sidebar: FC = () => {
101101
}
102102
}, [pathname]);
103103

104-
const handleToggleDropdown = () => {
105-
// e.preventDefault();
104+
const handleToggleDropdown = (e: React.MouseEvent) => {
105+
e.preventDefault();
106106
setIsAppealsOpen(!isAppealsOpen);
107107
};
108108

109109
return (
110110
<>
111-
<button
112-
className="fixed top-4 left-4 z-50 p-2 rounded-md bg-[#050512] text-white md:hidden"
113-
onClick={toggleSidebar}
114-
>
115-
{isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
116-
</button>
111+
{/* Mobile toggle button - Fixed in top-left corner, always visible on mobile */}
112+
<div className="md:hidden fixed top-0 left-0 w-full h-16 bg-[#050512] z-50 px-4 flex items-center">
113+
<button
114+
className="p-2 rounded-md bg-gray-800 text-white"
115+
onClick={toggleSidebar}
116+
aria-label="Toggle sidebar menu"
117+
>
118+
{isSidebarOpen ? <X size={24} /> : <Menu size={24} />}
119+
</button>
120+
<div className="ml-4">
121+
<Image src={Brand} alt="Logo" width={100} height={32} />
122+
</div>
123+
</div>
117124

125+
{/* Main sidebar */}
118126
<div
119-
className={`fixed md:sticky md:top-0 min-w-[260px] h-screen bg-[#050512] text-white flex flex-col transform transition-transform duration-300 ease-in-out ${
127+
className={`fixed md:sticky top-0 w-64 h-screen bg-[#050512] text-white flex flex-col transform transition-transform duration-300 ease-in-out ${
120128
isSidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
121-
} z-40 md:z-0 overflow-y-auto`}
129+
} z-40 md:z-10 overflow-y-auto`}
122130
>
123-
<div className="w-full mb-5 flex justify-center items-center pt-10">
124-
<Image src={Brand} alt="Logo" />
125-
</div>
131+
{/* Only show logo in sidebar on desktop */}
132+
<Link href={'/'}>
133+
<div className="w-full mb-5 justify-center items-center pt-10 hidden md:flex">
134+
<Image src={Brand} alt="Logo" />
135+
</div>
136+
</Link>
137+
138+
{/* Add padding on mobile to account for the header */}
139+
<div className="md:hidden h-16"></div>
140+
126141
<div className="flex flex-col justify-between flex-grow overflow-y-auto">
127142
<div>
128143
<SidebarItem
@@ -150,7 +165,7 @@ const Sidebar: FC = () => {
150165
active={activePath === '/target'}
151166
/>
152167
<SidebarItem
153-
href="/dashboard/appeals"
168+
href="#"
154169
icon={<InfoIcon size={20} />}
155170
text="Appeals"
156171
active={
@@ -215,6 +230,7 @@ const Sidebar: FC = () => {
215230
</div>
216231
</div>
217232

233+
{/* Overlay that appears when sidebar is open on mobile */}
218234
{isSidebarOpen && (
219235
<div
220236
className="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"

‎src/app/dashboard/help/page.tsx‎

Lines changed: 71 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
1-
"use client"
2-
3-
import type React from "react"
4-
import { useState, useEffect } from "react"
5-
import { useIsMobile } from "@/app/hooks/use-mobile"
6-
7-
import { Tabs, TabsContent } from "@/components/ui/tabs"
8-
import { HelpCenterHeader } from "@/app/dashboard/components/help-center/help-center-header"
9-
import { TabsNavigation } from "@/app/dashboard/components/help-center/tabs/tabs-navigation"
10-
import { FAQSection } from "@/app/dashboard/components/help-center/tabs/faq-section"
11-
import { GuidesSection } from "@/app/dashboard/components/help-center/tabs/guides-section"
12-
import { TroubleshootingSection } from "@/app/dashboard/components/help-center/tabs/troubleshooting-section"
13-
import { SupportSection } from "@/app/dashboard/components/help-center/tabs/support-section"
14-
import { SearchDialog } from "@/app/dashboard/components/help-center/search-dialogue"
15-
import { MobileNavigation } from "@/app/dashboard/components/help-center/mobile-navigation"
16-
import { LoadingSpinner } from "@/app/dashboard/components/help-center/loading-spinner"
1+
'use client';
2+
3+
import type React from 'react';
4+
import { useState, useEffect } from 'react';
5+
import { useIsMobile } from '@/app/hooks/use-mobile';
6+
7+
import { Tabs, TabsContent } from '@/components/ui/tabs';
8+
import { HelpCenterHeader } from '@/app/dashboard/components/help-center/help-center-header';
9+
import { TabsNavigation } from '@/app/dashboard/components/help-center/tabs/tabs-navigation';
10+
import { FAQSection } from '@/app/dashboard/components/help-center/tabs/faq-section';
11+
import { GuidesSection } from '@/app/dashboard/components/help-center/tabs/guides-section';
12+
import { TroubleshootingSection } from '@/app/dashboard/components/help-center/tabs/troubleshooting-section';
13+
import { SupportSection } from '@/app/dashboard/components/help-center/tabs/support-section';
14+
import { SearchDialog } from '@/app/dashboard/components/help-center/search-dialogue';
15+
import { MobileNavigation } from '@/app/dashboard/components/help-center/mobile-navigation';
16+
import { LoadingSpinner } from '@/app/dashboard/components/help-center/loading-spinner';
1717

1818
export default function HelpCenterPage() {
19-
const [open, setOpen] = useState(false)
20-
const [activeTab, setActiveTab] = useState("faqs")
21-
const [isLoading, setIsLoading] = useState(true)
22-
const isMobile = useIsMobile()
19+
const [open, setOpen] = useState(false);
20+
const [activeTab, setActiveTab] = useState('faqs');
21+
const [isLoading, setIsLoading] = useState(true);
22+
const isMobile = useIsMobile();
2323

2424
// Simulate loading state
2525
useEffect(() => {
2626
const timer = setTimeout(() => {
27-
setIsLoading(false)
28-
}, 800)
29-
return () => clearTimeout(timer)
30-
}, [])
27+
setIsLoading(false);
28+
}, 800);
29+
return () => clearTimeout(timer);
30+
}, []);
3131

3232
// Mock function to track article views
3333
const trackArticleView = (articleId: string) => {
34-
console.log(`Article viewed: ${articleId}`)
34+
console.log(`Article viewed: ${articleId}`);
3535
// In a real implementation, this would send analytics data
36-
}
36+
};
3737

3838
// Toggle command dialog
3939
const toggleSearch = () => {
40-
setOpen(!open)
41-
}
40+
setOpen(!open);
41+
};
4242

4343
// Handle search keyboard shortcut
4444
const handleKeyDown = (e: React.KeyboardEvent) => {
45-
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
46-
e.preventDefault()
47-
toggleSearch()
45+
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
46+
e.preventDefault();
47+
toggleSearch();
4848
}
49-
}
49+
};
5050

5151
return (
5252
<div
@@ -55,9 +55,6 @@ export default function HelpCenterPage() {
5555
onKeyDown={handleKeyDown}
5656
>
5757
<div className="container mx-auto px-2 md:px-4 max-w-7xl">
58-
<div className="absolute top-0 right-0 w-32 md:w-64 h-32 md:h-64 bg-blue-800 rounded-full opacity-5 -mr-16 md:-mr-32 -mt-16 md:-mt-32"></div>
59-
<div className="absolute bottom-0 left-0 w-48 md:w-96 h-48 md:h-96 bg-blue-700 rounded-full opacity-5 -ml-24 md:-ml-48 -mb-24 md:-mb-48"></div>
60-
6158
{/* Header with search */}
6259
<HelpCenterHeader toggleSearch={toggleSearch} />
6360

@@ -68,35 +65,65 @@ export default function HelpCenterPage() {
6865
) : (
6966
<>
7067
{/* Tabs */}
71-
<Tabs defaultValue="faqs" className="w-full" onValueChange={setActiveTab} value={activeTab}>
72-
<TabsNavigation activeTab={activeTab} onTabChange={setActiveTab} />
68+
<Tabs
69+
defaultValue="faqs"
70+
className="w-full"
71+
onValueChange={setActiveTab}
72+
value={activeTab}
73+
>
74+
<TabsNavigation
75+
activeTab={activeTab}
76+
onTabChange={setActiveTab}
77+
/>
7378

7479
{/* Tab Contents */}
75-
<TabsContent value="faqs" className="space-y-0 md:space-y-0 animate-in fade-in-50 duration-300">
80+
<TabsContent
81+
value="faqs"
82+
className="space-y-0 md:space-y-0 animate-in fade-in-50 duration-300"
83+
>
7684
<FAQSection trackArticleView={trackArticleView} />
7785
</TabsContent>
7886

79-
<TabsContent value="guides" className="space-y-0 animate-in fade-in-50 duration-300">
87+
<TabsContent
88+
value="guides"
89+
className="space-y-0 animate-in fade-in-50 duration-300"
90+
>
8091
<GuidesSection trackArticleView={trackArticleView} />
8192
</TabsContent>
8293

83-
<TabsContent value="troubleshooting" className="space-y-0 animate-in fade-in-50 duration-300">
94+
<TabsContent
95+
value="troubleshooting"
96+
className="space-y-0 animate-in fade-in-50 duration-300"
97+
>
8498
<TroubleshootingSection trackArticleView={trackArticleView} />
8599
</TabsContent>
86100

87-
<TabsContent value="support" className="space-y-0 animate-in fade-in-50 duration-300">
101+
<TabsContent
102+
value="support"
103+
className="space-y-0 animate-in fade-in-50 duration-300"
104+
>
88105
<SupportSection />
89106
</TabsContent>
90107
</Tabs>
91108

92109
{/* Mobile Bottom Navigation */}
93-
{isMobile && <MobileNavigation activeTab={activeTab} onTabChange={setActiveTab} />}
110+
{isMobile && (
111+
<MobileNavigation
112+
activeTab={activeTab}
113+
onTabChange={setActiveTab}
114+
/>
115+
)}
94116
</>
95117
)}
96118

97119
{/* Search Dialog */}
98-
<SearchDialog open={open} setOpen={setOpen} setActiveTab={setActiveTab} trackArticleView={trackArticleView} />
120+
<SearchDialog
121+
open={open}
122+
setOpen={setOpen}
123+
setActiveTab={setActiveTab}
124+
trackArticleView={trackArticleView}
125+
/>
99126
</div>
100127
</div>
101-
)
128+
);
102129
}

‎src/app/dashboard/target/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const Target: NextPage = () => {
5454
return (
5555
<main className="flex mb-6 bg-[#171720] text-[#FFFFFF]">
5656

57-
<div className="bg-[#171720] px-6">
57+
<div className="bg-[#171720] px-4 w-full">
5858
{showRecords ? (
5959
<Records />
6060
) : (

‎src/components/AboutUs/companyMission.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
const CompanyMission = () => {
2-
return (<section className="py-16 px-8 md:px-16 bg-gradient-to-r from-indigo-900 via-black to-indigo-900 text-white text-center rounded-2xl w-[95%]">
3-
<h3 className="text-4xl font-semibold mb-2 text-white">
4-
Company Mission
5-
</h3>
6-
<p className="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deleniti voluptas, cupiditate doloremque a recusandae tempora nihil cum, totam delectus, obcaecati officiis blanditiis tenetur distinctio. Eligendi voluptatum nihil ex consequatur.</p>
7-
</section>);
8-
}
2+
return (
3+
<section className="py-16 px-8 md:px-16 text-white text-center rounded-2xl w-[95%] mx-auto"
4+
style={{
5+
background: 'linear-gradient(to right, #312e81 0%, #050512 30%, #050512 70%, #312e81 100%)'
6+
}}>
7+
<h3 className="text-4xl font-semibold mb-2 text-white">
8+
Company Mission
9+
</h3>
10+
<p className="text-gray-400">
11+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
12+
deleniti voluptas, cupiditate doloremque a recusandae tempora nihil cum,
13+
totam delectus, obcaecati officiis blanditiis tenetur distinctio.
14+
Eligendi voluptatum nihil ex consequatur.
15+
</p>
16+
</section>
17+
);
18+
};
919

1020
export default CompanyMission;

0 commit comments

Comments
 (0)